آموزش طراحی قالب وب سایت – جلسه سوم

0
  • html-css

    هر دستور css از سه بخش تشکیل میشود :

     

     

     

     

    Selector {property: value}

    Selector همان انتخابگر یا گزینشگر هستند مثل p ,div, …

    Property همان خصویات مثل color

    Value نیز مقدار هر خصوصیت black

    مثالی برای موارد بالا :

    Div , p {
     
    color:black ; 
           
    Font-family:arial;
    }
    
    

    استفاده از id و class با مثال:

    برای ارتباط عناصر html با استایل css باید از id و class استفاده کرد

    برای استفاده از class از علامت نقطه و برای id از علامت # استفاده میکنیم

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    
    <style>
    	
    	p.left{ color:red;}
    
    	p.right{color:blue; margin-left:20px;}
    </style>
    
    </head>
    <body>
    
    <div id="wrap"> 
    
     <p class="left"> this is left slide </p>
    
     <p class="right"> this is right slide </p>
     
    
    </div>
    
    </body>
    </html>

    در کد فوق به جای ارتباط خارجی با فایل style.css از تگ <style> </style> استفاده کردیم

    از دستور div برای قالب بندی ظاهر سایت استفاده میکنیم که در جلسه بعدی کامل به این تگ می پردازیم

    در کد نویسی قالب همیشه یک div اصلی داریم که بقیه کدهای قالب درون این div نوشته میشود که معمولا

    همچنین ببینید:
    فونت فارسی برای استوری اینستاگرام

    با یکی از دو id زیر مشخص میشود

    id=wrap

    id=main

    چه زمان از id و چه زمان از class استفاده کنیم :

    بخش های اصلی بدنه قالب مثل header و header و footer و Navigation بهتره با id ایجاد بشه
    بقیه بخش ها که تکرار میشه بهتره با class انجام بشه .
    چند نکته در استفاده از کلاس ها :
    1. در انتخاب نام کلاس ها باید دقت داشته باشید که اولین حرف نباید عدد یا نقطه و یا علامت ؟   باشد

    2. برای هر تگ میتوان بیش از چند کلاس تعریف کرد برای این کار کافی است فاصله قرار دهیم :

    <p class="green black"> hello </p>

     

    3. میتوان چند خصوصیت برای استایل ها داد

    <div style="color:red; font-style:italic">

    این متن قرمز رنگ و ایتالیک است

    ++++++++++++++++++++++++++++++++++++++

     

    مفهوم عناصر inline  و block  :
    عنصر block ، عنصری است که کل پهنای موجود ( width) را اشغال می کند (  یعنی دارای عرض 100 ٪ است )
    نمونه هایی از عنصر block :
    •     < h1 >
    •     < p >
    •     < div >
    • کلیه عناصر لیست ul – li

    همچنین ببینید:
    چطور به خودمان استراحت دهیم حین کار

    عنصر inline ، فقط پهنایی را اشغال می کتد که لازم است ( به اندازه محتوای خودش پهنا میگیرد )

    نمونه هایی ار عنصر inline :
    •     < span >
    •     < a >
    چند تگ inline   میتوانند در  یک خط کنار هم قرار بگیرند اما هر تگ block  در یک خط جدا قرار میگیرد
    دستور display  برای تغییر چگونگی نمایش عنصر :
    تغییر دادن عنصر inline به یک عنصر block یا بالعکس، می تواند برای ظاهر صفحه مفید باشد، و همچنان از استانداردهای وب تبعیت می کند.

    li {display:inline ;{

    مثال زیر، عنصرهای span را بصورت عناصر block نمایش می دهد:

    span {display:block ;}

    نکته مهم : به این دلیل   یک المنت inline را block میکنیم تا بتوانیم به آن خصوصیات margin ، padding و عرض و ارتفاع و …. بدهیم
    زیرا به المنت های inline نمیتوان خصوصیات فوق را انتصاب داد .
    نکته مهم: تغییر نوع نمایش عنصر تنها چگونگی نمایش عنصر را نشان می دهد، دهد نه نوع عنصر را.

    همچنین ببینید:
    چارت دوره های مهم شبکه

    مثلاً، عنصر Inline که display:block تنظیم شده است، اجازه ندارد عنصر block را درون خودش nest کند.

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای
    ممکن است شما دوست داشته باشید
    ارسال یک پاسخ

    آدرس ایمیل شما منتشر نخواهد شد.

    این سایت توسط reCAPTCHA و گوگل محافظت می‌شود حریم خصوصی و شرایط استفاده از خدمات اعمال.

    The reCAPTCHA verification period has expired. Please reload the page.