سینتکس پایه CSS
CSS (Cascading Style Sheets) زبان طراحی برای ساخت ظاهر وب‌سایت‌هاست که با سینتکس ساده‌ای امکان کنترل عناصر HTML را فراهم می‌کند. در این مطلب به بررسی ساختار اصلی کدهای CSS می‌پردازیم.
ساختار کلی یک قاعده CSS
هر بلوک CSS از سه بخش اصلی تشکیل شده است:
- سلکتور (Selector): مشخص می‌کند کدام عنصر HTML هدف است
- خاصیت (Property): ویژگی‌ای که می‌خواهیم تغییر دهیم
- مقدار (Value): مقدار جدید برای آن ویژگی
مثال:
p {
color: red;
font-size: 16px;
}
| بخش |
توضیح |
| p |
سلکتور (تگ پاراگراف) |
| color |
خاصیت (رنگ متن) |
| red |
مقدار (رنگ قرمز) |
انواع سلکتورها
CSS سلکتورهای مختلفی برای هدف‌گیری عناصر ارائه می‌دهد:
- سلکتور تگ: div { ... }
- سلکتور کلاس: .menu { ... }
- سلکتور ID: #header { ... }
- سلکتور ترکیبی: div.content { ... }
نحوه اتصال CSS به HTML
سه روش اصلی برای استفاده از CSS وجود دارد:
- CSS داخلی: با تگ <style> در بخش head
- CSS خارجی: لینک به فایل .css با تگ <link>
- CSS اینلاین: با ویژگی style در خود عنصر
برای یادگیری کامل‌تر می‌توانید اینجا را مشاهده نمایید.
ویژگی‌های مهم CSS
برخی از پرکاربردترین خاصیت‌های CSS شامل موارد زیر است:
| خاصیت |
توضیح |
| color |
رنگ متن |
| font-size |
اندازه فونت |
| margin |
فاصله خارجی |
| padding |
فاصله داخلی |
با یادگیری این مفاهیم پایه، می‌توانید شروع به طراحی صفحات وب جذاب کنید. برای مثال‌های پیشرفته‌تر حتماً به آموزش کامل CSS مراجعه کنید.
