دستور زبان در CSS از سه بخش تشکیل شده است: یک گزینشگر ,یک خاصیت و یک مقدار. (a selector, a property and a value) :
selector {property: value}
گزینشگر همان tag/element در HTML است که می تواند خاصیت های متفاوتی داشته باشد که هر خاصیت نیز می تواند چندین مقدارداشته باشد. خاصیت و مقدار توسط دو نقطه از هم جدا می شوند و داخل یک جفت آکولاد قرار می گیرند.
body {color: black}
نکته : اگر مقدار یک خاصبت چند کلمه ای بود آن را داخل کوتنیشن قرار دهید.
p {font-family: "sans serif"}
نکته: برای تعیین چند خاصیت باید آن ها را با یک سمی کولن ; از هم جدا کنید. مثال زیر یک پاراگراف وسط چین با رنگ نوشته قرمز تعریف می کند:
p {text-align:center;color:red}
برای خوانا تر شدن استایل می توانید هر خاصیت را در یک خط تعریف کنید.
p
{
text-align: center;
color: black;
font-family: arial
}
گروه سازی:
شما می توانید یک یا چندین خاصیت را برای گروهی از گزینشگر ها تعریف کنید. آنگاه آن خاصیت برای همه ی گزینشگر ها انتخاب می شود. در این مثال همه انواع عنوان ها به رنگ سبز نمایش داده میشوند:
h1,h2,h3,h4,h5,h6
{
color: green
}
گزینشگر کلاس - The class Selector :
با استفاده از کلاس می توانید برای یک نوع المنت html استایل های متفاوتی تعریف نمایید. برای مثال شما به دو نوع پاراگراف نیاز دارید. یکی وسط چین و دیگری راست چین! برای این کار به صورت زیر عمل می کنیم:
p.right {text-align: right}
p.center {text-align: center}
حال شما می توانید از کلاس های تعریف شده در بالا به صورت زیر استفاده کنید:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
نکته : شما می توانید از چند کلاس برای یک المنت استفاده کنید:
<p class="center bold">
This is a paragraph.
</p>
پاراگراف بالا هم style کلاس bold را دارد و هم center را.
شما همچنین می توانید نام تگ را از گزینشگر حذف کنید ، در این صورت شما می توانید از این کلاس برای تمامی انواع المنت های html استفاده کنید. در مثال زیر تمامی انواع المنت های html با کلاس center به صورت وسط چین نمایش داده میشوند:
.center {text-align: center}
در قطعه کد زیر هر دو المنت h1 و p از کلاس center استفاده می کنند. این بدین معناست که هر دو از قوانین تعریف شده در کلاس center بهره می برند:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
توجه: هیچگاه نام یک کلاس را با عدد شروع نکنید چرا که در مرورگر Mozilla/Firefox کار نخواهد کرد.
افزودن style به المنت با پارامترهای خاص :
قاعده زیر تمامی انواع input هایی که خاصیت type با مقدار text دارند را با رنگ آبی نمایش میدهد:
input[type="text"] {background-color: blue}
شناسه ها در گزینشگر ها:
شما می توانید با استفده از علامت # یک شناسه برای گزینشگر ها تعریف کنید.
قاعده تعریف شده در زیر با المنتی مطابقت خواهد کرد که خاصیت id با مقدار green داشته باشد:
#green {color: green}
استایل زیر پاراگرافی که id آن مقدار paral داشته باشد را در بر میگیرد:
p#para1
{
text-align: center;
color: red
}
توجه: هیچگاه نام یک شناسه را با عدد شروع نکنید چرا که در مرورگر Mozilla/Firefox کار نخواهد کرد.
توضیحات در سی اس اس - CSS Comments
از توضیحات برای توضیح code ها استفاده می شود. توضیحات در browser نمایش داده نمی شوند. توضیحات را داخل /* و */ قرار می دهیم.
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
مترجم: به آفرید علی بخشی
