اتصال CSS به HTML
سه روش برای استفاده از CSS داریم:
- اینلاین: داخل تگ با ویژگی
style— فقط برای استثناها، نه برای استایل کلی. - بلوک <style> داخل
<head>— برای یک صفحه. - فایل خارجی: لینک به فایل
.css— روش توصیه‌شده برای پروژه‌های واقعی.
<link rel="stylesheet" href="style.css">انتخابگرها (Selectors)
با انتخابگرها مشخص می‌کنی کدام المان‌ها استایل بگیرند.
- نام تگ:
p { }— همهٔ پاراگراف‌ها - کلاس:
.class-name { }— المان‌هایی کهclass="class-name"دارند - شناسه:
#id-name { }— المانی کهid="id-name"دارد (ترجیحاً یک بار در صفحه)
p { color: #333; }
.title { font-size: 1.5rem; }
#header { background: #eee; }قواعد پایه
هر قانون از یک یا چند property و value تشکیل شده است. مقدارها با واحدهایی مثل px، rem، % یا کلمات کلیدی مثل bold و center نوشته می‌شوند.
body {
font-family: 'Vazirmatn', sans-serif;
font-size: 16px;
line-height: 1.6;
color: #1a1a1a;
}در درس بعد با مدل جعبه (Box Model) و فاصله‌ها آشنا می‌شوی.