سینتکس در CSS
در CSS، قواعد به‌طور معمول از سه بخش اصلی تشکیل می‌شوند: انتخابگر (Selector)، ویژگی (Property) و مقدار (Value). قواعد به‌صورت بلوک‌های جداگانه نوشته می‌شوند و به HTML مشخص می‌کنند که چگونه باید عناصر خاص نمایش داده شوند.
ساختار قواعد CSS
یک قاعده CSS به‌صورت زیر نوشته می‌شود:
selector {
property: value;
}
property: value;
}
- Selector (انتخابگر): انتخاب می‌کند که کدام عنصر HTML باید استایل‌دهی شود.
- Property (ویژگی): مشخص می‌کند که چه چیزی قرار است تغییر کند (مثل رنگ، اندازه، حاشیه، و غیره).
- Value (مقدار): مقدار ویژگی مورد نظر که باید اعمال شود (مثل رنگ، اندازه، مقدار دیگر).
مثال ساده از یک قاعده CSS
h1 {
color: blue;
font-size: 24px;
}
color: blue;
font-size: 24px;
}
در این مثال:
- h1 انتخابگر است و مشخص می‌کند که تگ‌های <h1> باید تغییر کنند.
- color ویژگی است که رنگ متن را تغییر می‌دهد.
- blue مقدار است که رنگ متن را به آبی تغییر می‌دهد.
- font-size ویژگی است که اندازه فونت را تغییر می‌دهد.
- 24px مقدار است که اندازه فونت را به 24 پیکسل تنظیم می‌کند.
انواع انتخابگرها (Selectors)
انتخابگرها می‌توانند بسیار ساده یا پیچیده باشند. در اینجا چند نوع رایج از انتخابگرهای CSS آورده شده است:
-
انتخابگرهای ساده:
- انتخابگر عنصر: تمام عناصر از نوع خاص را انتخاب می‌کند.
p {
font-size: 16px;
} - انتخابگر ID: یک عنصر خاص با id مشخص را انتخاب می‌کند.
#myDiv {
background-color: yellow;
} - انتخابگر کلاس: تمام عناصر با یک کلاس خاص را انتخاب می‌کند.
.myClass {
margin: 10px;
}
- انتخابگر عنصر: تمام عناصر از نوع خاص را انتخاب می‌کند.
-
انتخابگرهای ترکیبی:
- انتخابگر فرزند: انتخاب عنصرهایی که فرزند یک عنصر خاص هستند.
div > p {
color: red;
}
- انتخابگر فرزند: انتخاب عنصرهایی که فرزند یک عنصر خاص هستند.
-
انتخابگرهای کاذب:
- :hover: زمانی که کاربر موس را روی یک عنصر می‌برد.
a:hover {
color: green;
}
- :hover: زمانی که کاربر موس را روی یک عنصر می‌برد.
مثال کامل از قواعد CSS
/* تغییر رنگ پس‌زمینه برای body */
body {
background-color: #f0f0f0;
}
/* تنظیم اندازه فونت و رنگ برای پاراگراف‌ها */
p {
font-size: 16px;
color: #333;
}
/* تغییر استایل لینک‌ها */
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
}
/* استایل برای یک کلاس خاص */
.myClass {
padding: 20px;
border-radius: 5px;
}
body {
background-color: #f0f0f0;
}
/* تنظیم اندازه فونت و رنگ برای پاراگراف‌ها */
p {
font-size: 16px;
color: #333;
}
/* تغییر استایل لینک‌ها */
a {
text-decoration: none;
color: blue;
}
a:hover {
color: red;
}
/* استایل برای یک کلاس خاص */
.myClass {
padding: 20px;
border-radius: 5px;
}
در این مثال:
- برای تمام عناصر body پس‌زمینه خاکی رنگ f0f0f0 # تنظیم شده است.
- برای تمام پاراگراف‌ها (p)، اندازه فونت 16 پیکسل و رنگ متن به 333# تغییر کرده است.
- برای تمام لینک‌ها (a)، رنگ لینک‌ها آبی و ویژگی text-decoration به none تغییر یافته است (که به این معناست که لینک‌ها خط زیر ندارند).
- هنگامی که موس روی لینک قرار می‌گیرد (با استفاده از :hover)، رنگ لینک قرمز می‌شود.
- یک کلاس myClass. برای اضافه کردن فاصله داخلی (padding) و گوشه‌های گرد (border-radius) به عناصر آن.
نکات مهم در نوشتن قواعد CSS
- قواعد باید همیشه بین آکولادها {} قرار بگیرند.
- ویژگی‌ها و مقادیر باید با : از هم جدا شوند و هر ویژگی باید با ; تمام شود.
- می‌توانید چند ویژگی را برای یک عنصر در یک قاعده CSS بنویسید.
اگر نیاز به توضیحات بیشتر یا مثال‌های پیچیده‌تری دارید، خوشحال می‌شوم کمک کنم!
