syntax در css

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}

حال شما می توانید از کلاس های تعریف شده در بالا به صورت زیر استفاده کنید:

This paragraph will be right-aligned.

This paragraph will be center-aligned.

نکته : شما می توانید از چند کلاس برای یک المنت استفاده کنید:

This is a paragraph.

پاراگراف بالا هم style کلاس bold را دارد و هم center را.

شما همچنین می توانید نام تگ را از گزینشگر حذف کنید ، در این صورت شما می توانید از این کلاس برای تمامی انواع المنت های html استفاده کنید. در مثال زیر تمامی انواع المنت های html با کلاس center به صورت وسط چین نمایش داده میشوند:
.center {text-align: center}

در قطعه کد زیر هر دو المنت h1 و p از کلاس center استفاده می کنند. این بدین معناست که هر دو از قوانین تعریف شده در کلاس center بهره می برند:

This heading will be center-aligned

This paragraph will also be center-aligned.

توجه: هیچگاه نام یک کلاس را با عدد شروع نکنید چرا که در مرورگر 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
}
 

نظرات شما عزیزان:

مشاهده ادامه مطلب syntax در css