CSS مسئول استایلهای یک صفحه وب است. تمامی این استایلها از «قوانین» (Rules) مختلف CSS تشکیل شدهاند.
یک قانون CSS از دو بخش اصلی تشکیل شده است: یک انتخابگر (Selector) و یک بلاک اعلان (Declaration block).
بیایید نگاهی به نحو (Syntax) پایه آن بیندازیم:
selector {
property: value;
}انتخابگر (Selector) الگویی است که در CSS برای شناسایی و هدف قرار دادن عناصر خاص HTML جهت استایلدهی استفاده میشود.
نمونههایی از انتخابگرها شامل انتخابگرهای نوع (Type selectors)، انتخابگرهای کلاس (Class selectors) و انتخابگرهای آیدی (ID selectors) هستند.
آکولادهایی { } که در نحو پایه مشاهده میکنید، با نام بلاک اعلان (Declaration block) شناخته میشوند. یک بلاک اعلان، مجموعهای از استایلها را برای یک یا چند انتخابگرِ داده شده اعمال میکند.
در داخل بلاک اعلان، مجموعهای از اعلانها (Declarations) را خواهید داشت. هر اعلان شامل یک ویژگی (Property) و یک مقدار (Value) است.
ویژگی (Property) همان شناسهی CSS است که مشخص میکند کدام قابلیت (فیزیکی یا ظاهری) قرار است استایلدهی شود. به عنوان مثال، ویژگی background-color یک “Property” است.
مقدار (Value) تنظیمات خاصی است که روی آن ویژگی اعمال میشود. به عنوان مثال، اگر ویژگی ما background-color باشد، مقدار آن میتواند purple باشد که رنگ پسزمینه را به بنفش تغییر میدهد.
بعد از نام هر ویژگی، باید یک دو نقطه (Colon) قرار دهید و بعد از هر مقدار، باید یک نقطه ویرگول (Semicolon) بگذارید.
اکنون که نحو یک قانون CSS را یاد گرفتید، بیایید به یک مثال نگاه کنیم. ویرایشگر تعاملی را فعال کرده و روی زبانه styles.css کلیک کنید تا کد CSS را ببینید.
در این قانون CSS، یک انتخابگر نوع (Type selector)، تمام عناصر پاراگراف (p) در صفحه را هدف قرار میدهد:
p {
color: blue;
}در داخل بلاک اعلان، یک اعلان وجود دارد. این اعلان شامل ویژگی color با مقدار blue است. این کار باعث میشود رنگ متن تمام عناصر پاراگراف به آبی تغییر کند.
اگر میخواهید مجموعه یکسانی از استایلها را روی چندین انتخابگر اعمال کنید، میتوانید یک لیست انتخابگر (Selector list) ایجاد کنید که در آن هر انتخابگر با یک کاما (Comma) از دیگری جدا شده باشد.
در اینجا مثالی از استایلدهی به چندین انتخابگر آورده شده است:
در این لیست انتخابگر، یک انتخابگر ID وجود دارد که عنصر HTML با مقدار آیدیِ title را هدف قرار میدهد. تمام انتخابگرهای ID باید با علامت هش # شروع شوند.
سپس یک کاما آمده و به دنبال آن یک انتخابگر کلاس قرار دارد که تمام عناصر HTML با مقدار کلاسِ subheading را هدف قرار میدهد. تمام انتخابگرهای کلاس باید با یک نقطه . شروع شوند.
#title,
.subheading {
color: navy;
}کل این لیست انتخابگر، استایل یکسانی دریافت میکند و رنگ متن آنها به سورمهای (navy) تغییر مییابد.