هر دستور 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 کند.