CSS (Cascading Style Sheets) زبان برنامه‌نویسی است که برای توصیف ظاهر و نمای وب‌سایت‌ها استفاده می‌شود. این زبان به طراحان و توسعه‌دهندگان وب اجازه می‌دهد تا رنگ‌ها، فونت‌ها، فاصله‌گذاری‌ها، و چیدمان عناصر HTML را کنترل کنند و تجربه‌ای بصری جذاب و یکپارچه برای کاربران فراهم آورند. درک مبانی CSS برای هر کسی که به توسعه وب علاقه‌مند است، ضروری است.

۱. ساختار اساسی CSS: قوانین استایل (Style Rules)

یک قانون استایل CSS از دو بخش اصلی تشکیل شده است:

  • انتخابگر (Selector): بخشی است که مشخص می‌کند کدام عناصر HTML باید تحت تأثیر این قانون قرار گیرند. انتخابگرها می‌توانند بر اساس نوع عنصر (مانند p برای پاراگراف‌ها)، کلاس (مانند .highlight برای عناصری با کلاس “highlight”)، شناسه (مانند #main-header برای عنصری با شناسه “main-header”)، یا ترکیبی از این‌ها باشند.
  • بلوک اعلان (Declaration Block): این بخش در داخل آکولاد {} قرار می‌گیرد و شامل یک یا چند اعلان (Declaration) است. هر اعلان از دو قسمت تشکیل شده است:
  • ویژگی (Property): مشخص می‌کند که کدام جنبه از ظاهر عنصر باید تغییر کند (مثلاً color برای رنگ متن، font-size برای اندازه فونت).
  • مقدار (Value): مقداری است که به ویژگی اختصاص داده می‌شود (مثلاً blue برای رنگ متن، 16px برای اندازه فونت).

مثال:


p { color: blue; font-size: 16px; }


در این مثال، p انتخابگر است، color و font-size ویژگی‌ها، و blue و 16px مقادیر هستند.

۲. چگونگی اعمال CSS به HTML

سه روش اصلی برای اعمال استایل‌های CSS به اسناد HTML وجود دارد:

  • استایل درون‌خطی (Inline Styles): با استفاده از ویژگی style مستقیماً در تگ HTML اعمال می‌شود. این روش برای استایل‌های تکی و خاص یک عنصر مفید است اما برای پروژه‌های بزرگ توصیه نمی‌شود زیرا مدیریت و نگهداری آن دشوار است.

مثال: <p style="color: red;">این متن قرمز است.</p>

  • استایل داخلی (Internal Stylesheet): استایل‌ها در بخش <head> سند HTML و درون تگ <style> نوشته می‌شوند. این روش برای صفحات HTML تکی که نیاز به استایل‌های خاص خود دارند، مناسب است.

مثال:

 
   
 <head>
      <style>
        h1 { color: green; }
      </style>
    </head>
  • استایل خارجی (External Stylesheet): این روش استاندارد و بهترین روش است. تمام استایل‌ها در یک فایل جداگانه با پسوند .css نوشته شده و سپس با استفاده از تگ <link> در بخش <head> سند HTML به آن ارجاع داده می‌شود. این کار باعث جداسازی منطقی محتوا (HTML) از ظاهر (CSS) شده و مدیریت کد را بسیار آسان‌تر می‌کند.

مثال:

 
    
<head>
      <link rel="stylesheet" href="styles.css">
</head>

و در فایل styles.css:

 body { background-color: lightblue; }

۳. انتخابگرها (Selectors)

انتخابگرها قلب CSS هستند و تعیین می‌کنند که کدام عناصر استایل بگیرند. انواع اصلی انتخابگرها عبارتند از:

  • انتخابگر نوع (Type Selector): عناصر را بر اساس نام تگشان انتخاب می‌کند (مانند h1, p, div).
  • انتخابگر کلاس (Class Selector): عناصری را که دارای یک کلاس خاص هستند، انتخاب می‌کند (با استفاده از نقطه .). یک کلاس می‌تواند به چندین عنصر اعمال شود.
  • انتخابگر شناسه (ID Selector): عنصری را که دارای یک شناسه (ID) خاص است، انتخاب می‌کند (با استفاده از علامت #). شناسه باید در یک سند HTML منحصر به فرد باشد.
  • انتخابگر عمومی (Universal Selector): تمام عناصر صفحه را انتخاب می‌کند (با استفاده از *).
  • انتخابگر صفات (Attribute Selector): عناصری را که دارای یک صفت خاص هستند، یا مقدار صفتشان مطابق با شرطی است، انتخاب می‌کند (مانند [type="text"]).
  • انتخابگرهای ترکیبی (Combinators): برای انتخاب عناصر بر اساس رابطه آن‌ها با عناصر دیگر استفاده می‌شوند (مانند انتخابگر فرزند >، انتخابگر همسایه عمومی ~، انتخابگر همسایه مستقیم +).
  • انتخابگرهای شبه‌کلاس (Pseudo-classes): برای استایل‌دهی به عناصر در حالت‌های خاص (مانند :hover برای حالت شناور شدن ماوس، :active برای حالت کلیک شده، :first-child برای اولین فرزند).
  • انتخابگرهای شبه‌عنصر (Pseudo-elements): برای استایل‌دهی به بخش‌های خاصی از یک عنصر (مانند ::before برای ایجاد محتوای قبل از عنصر، ::after برای محتوای بعد از عنصر، ::first-line برای خط اول متن).

۴. مدل جعبه‌ای (Box Model)

هر عنصر HTML در CSS به صورت یک جعبه مستطیلی در نظر گرفته می‌شود که دارای چهار لایه است:

  • محتوا (Content): ناحیه واقعی که متن یا تصویر شما در آن قرار دارد.
  • حاشیه داخلی (Padding): فضایی شفاف بین محتوا و حاشیه (border). فاصله داخلی عنصر.
  • حاشیه (Border): خطی که دور ناحیه padding قرار می‌گیرد و مرز قابل مشاهده عنصر است.
  • حاشیه خارجی (Margin): فضایی شفاف بیرون از border که عناصر دیگر را از این عنصر جدا می‌کند. فاصله خارجی عنصر.

درک مدل جعبه‌ای برای کنترل دقیق فاصله‌گذاری، ابعاد و چیدمان عناصر حیاتی است. ویژگی box-sizing (با مقادیر content-box یا border-box) نحوه محاسبه ابعاد کلی جعبه را تعیین می‌کند.

۵. رنگ‌ها، فونت‌ها و متن

  • رنگ‌ها: CSS امکان تعریف رنگ‌ها را به روش‌های مختلفی فراهم می‌کند: نام رنگ (مانند red, blue)، مقادیر هگزادسیمال (مانند #FF0000)، مقادیر RGB (مانند rgb(255, 0, 0))، و مقادیر HSL (مانند hsl(0, 100%, 50%)).
  • فونت‌ها: ویژگی‌هایی مانند font-family (برای انتخاب نوع فونت)، font-size (اندازه)، font-weight (ضخامت)، و font-style (مانند ایتالیک) برای کنترل متن استفاده می‌شوند.
  • ویژگی‌های متن: text-align (تراز متن)، line-height (ارتفاع خط)، text-decoration (مانند خط زیرین)، letter-spacing (فاصله بین حروف) و word-spacing (فاصله بین کلمات) برای استایل‌دهی دقیق‌تر متن به کار می‌روند.

۶. چیدمان (Layout)

CSS روش‌های قدرتمندی برای چیدمان عناصر در صفحه ارائه می‌دهد:

  • Display Property: ویژگی display تعیین می‌کند که یک عنصر چگونه در صفحه نمایش داده شود. مقادیر رایج عبارتند از:
  • block: عنصر یک بلوک کامل را اشغال می‌کند و در خط جدید شروع می‌شود (مانند <div>, <p>, <h1>).
  • inline: عنصر فقط به اندازه محتوای خود فضا اشغال می‌کند و در خط با عناصر دیگر قرار می‌گیرد (مانند <span>, <a>, <strong>).
  • inline-block: ترکیبی از inline و block؛ عنصر در خط قرار می‌گیرد اما امکان تنظیم عرض، ارتفاع و فاصله‌گذاری داخلی/خارجی را دارد.
  • none: عنصر را از صفحه حذف می‌کند.
  • Flexbox: یک مدل چیدمان یک‌بعدی (سطر یا ستون) که امکان توزیع فضا و تراز کردن عناصر درون یک کانتینر را به صورت انعطاف‌پذیر فراهم می‌کند. برای چیدمان‌های پیچیده در یک جهت بسیار قدرتمند است.
  • CSS Grid: یک مدل چیدمان دو‌بعدی (سطر و ستون) که امکان ایجاد طرح‌بندی‌های پیچیده و شبکه‌ای را با کنترل دقیق بر روی هر دو محور فراهم می‌کند. ایده‌آل برای چیدمان کلی صفحات.
  • Positioning: ویژگی position (با مقادیر static, relative, absolute, fixed, sticky) امکان جابجایی عناصر از موقعیت عادی خود را فراهم می‌کند، که برای لایه‌بندی و قرار دادن عناصر در مکان‌های خاص استفاده می‌شود.
  • Float: روشی قدیمی‌تر که برای قرار دادن عناصر (معمولاً تصاویر) در کنار متن استفاده می‌شد، اما استفاده از Flexbox و Grid برای چیدمان کلی توصیه می‌شود.

۷. واحدهای اندازه‌گیری

CSS از واحدهای مختلفی برای تعیین ابعاد، فاصله‌ها و اندازه‌ها پشتیبانی می‌کند:

  • واحدهای مطلق: مانند px (پیکسل).
  • واحدهای نسبی: مانند % (درصد نسبت به والد)، em (نسبت به اندازه فونت والد)، rem (نسبت به اندازه فونت ریشه - <html>)، vw (درصد عرض viewport)، vh (درصد ارتفاع viewport). استفاده از واحدهای نسبی برای طراحی واکنش‌گرا بسیار مهم است.

CSS یک زبان پویا و قدرتمند است که با تسلط بر این مبانی، می‌توانید وب‌سایت‌هایی با ظاهری حرفه‌ای، کاربرپسند و واکنش‌گرا طراحی کنید.

کلیدواژه ها : مبانی CSS-استایل‌دهی وب-انتخابگر CSS-مدل جعبه‌ای CSS-رنگ‌ها و فونت‌ها-چیدمان CSS-Flexbox-Grid-Box Model-Selectors-Styling-