آموزش CSS قسمت دوم – اصول نوشتن Style :

اصول نوشتن استایل :
یک دستور CSS از سه قسمت تشکیل شده است: سلکتور یا انتخابگر (selector)، ویژگی (property) و مقدار (value). این سه قسمت در CSS به صورت زیر نوشته می شوند:

کد:

selector {property: value}

سلکتور معمولاً یکی از تگهای HTML یا سایر عناصر صفحه است که می خواهیم ویژگیهایی را برای آن تعریف کنیم. ویژگی ها مشخصاتی هستند که ما می خواهیم آنها را تغییر دهیم و مقادیر هم مقدار آن ویژگی را تعیین می کنند که ممکن است یک اندازه برای تعیین ارتفاع، یک رنگ، آدرس یک تصویر و … باشند. برای جدا کردن ویژگی ها از مقادیر آنها از علامت دو نقطه ( : ) استفاده می کنیم و ویژگیها و مقادیر را درون آکولاد ( {} ) قرار می دهیم تا از سلکتور مجزا باشند. برای مثال دستور زیر برای مشخص کردن رنگ متن در صفحه استفاده می شود:

کد:

body {color: black}

تذکر: اگر مقداری که استفاده می کنید از چند کلمه مجزا تشکیل شده است از علامت دابل کوت ( ” ” ) در اطراف آن استفاده کنید:

کد:

body {font-family: “Times New Roman”}

تذکر : اگر از چند ویژگی برای یک سلکتور استفاده می کنید باید ویژگیها را با یک نقطه ویرگول ( ; ) از هم جدا کنید. برای نمونه در مثال زیر یک پاراگراف با متن وسط چین و آبی رنگ را تعریف می کند:

کد:

p { text-align: center; color:blue }

برای اینکه استایلی که می نویسید قابل فهم تر باشد می توانید هر ویژگی را در یک سطر جداگانه بنویسید. مانند زیر:

کد:

p { font-family: Tahoma; font-size: 10pt; color: black }

گروه بندی سلکتورها :
شما می توانید از یک ویژگی برای چندین سلکتور استفاده کنید بدون آنکه نیازی باشد برای هر سلکتور کد جداگانه ای بنویسید. برای این کا باید نام همه سلکتور ها را به دنبال هم بنویسید اما به خاطر داشته باشید که سلکتور ها باید به وسیله یک کاما از هم جدا شده باشند. در مثال زیر رنگ متن را برای 5 تگ متفاوت HTML مشخص می کنیم:

کد:

p,h1,h2,div,table { color: blue }

نکته: نباید بعد از آخرین سلکتور از کاما استفاده شود. این باعث می شود تا بعضی مرورگرها از استایل چشم پوشی کنند.

برای مثال نمونه زیر غلط است:

کد:

p, a, h1, { color: #333333 }

ولی نمونه زیر صحیح است:

کد:

p, a, h1 { color: #333333 }

چند کلاس و id نیز قابلیت گروهبندی دارند که بعداً به نحوه گروهبندی آنها می پردازیم.

کامنتها در CSS :
کامنت شامل توضیحاتی است که در مورد کد داده می شود و هنگامی که بعد از اینکه مدتی از نوشتن یک کد گذشت قصد ویرایش آنرا داشته باشید به شما در فهمیدن کدها کمک می کند. کامنتها توسط مرورگر خوانده نمی شوند و در صفحه نمایش داده نمی شوند. یک کامنت در CSS با علامت ( */ ) آغاز می شود وبا علامت ( /* ) پا می یابد. مثال زیر یک کامنت را در CSS نشان می دهد:

کد:

*/این یک کامنت است /*