در این قسمت از دوره آموزش CSS3، ابتدا به آموزش ساختار کدهای CSS پرداخته و سپس به آموزش روش‌های اضافه کردن استایل CSS به عناصر یا المان‌های مختلف HTML می‌پردازیم. آموزش را تا انتها با دقت دنبال کنید تا نکات مختلف آن را به خوبی درک کنید.

ساختار کدهای CSS

تصویر زیر یک مثال ساده شش‌خطی از کد CSS را نمایش می‌دهد:

ساختار کد CSS

خط اول در این تصویر نشان دهنده یک کامنت در CSS است. مرورگر کامنت‌ها را نمایش نمی‌دهد؛ بنابراین از آنها برای افزودن توضیحات، یادآوری‌ها و سایر یادداشت‌ها یا غیرفعال کردن بخشی از کد استفاده می‌شود.

از خط دوم ساختار یک قطعه کد CSS را به صورت دقیق مشاهده می‌کنید. در ابتدا باید عنصر یا المانی که می‌خواهید برای آن استایل خاصی را تعریف کنید (به عنوان مثال به آن رنگ خاصی بدهید) را انتخاب کنید. برای این کار می‌توانید عنصر مورد نظر را ابر اساس تگ HTML (مثلا تگ p) یا کلاس آن عنصر (Class) یا بر اساس شناسه آن (id) را انتخاب کنید. به این بخش از کد سلکتور (Selector) گویند.

سپس برای اعمال استایل مورد نظر به عنصر انتخابی، زوج property و value (ویژگی و مقدار) را در داخل آکولاد یا کرلی بریس {} (Declaration Block)، بنویسید. در تصویر، این قسمت به رنگ آبی مشخص شده است. مثال‌هایی از ویژگی‌های رایج در CSS عبارتند از رنگ (color)، سایز فونت (font-size) و رنگ پس‌زمینه (background-color).

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

سلکتور (Selector): بخشی از کد که تعیین می‌کند کدام عنصر HTML هدف قرار بگیرد. سلکتورها می‌توانند بر اساس کلاس (Class)، شناسه (ID) یا حتی نام تگ HTML انتخاب شوند.
بلاک اعلان (Declaration Block): بخشی است که داخل آن دستورات CSS نوشته می‌شوند.
اعلان (Declaration): هر خط از کد CSS که شامل یک ویژگی (Property) و یک مقدار (Value) باشد، یک اعلان محسوب می‌شود.

برای آشنایی با چگونگی مقداردهی به هریک از این ویژگی‌ها به بخش‌های مرتبط با هر یک در دوره آموزش CSS مراجعه کنید.

روش‌های استایل‌دهی در CSS

به طور کلی سه روش اصلی برای اضافه کردن استایل با CSS به یک صفحه وب وجود دارد:

روش Inline (درون‌خطی): در این روش، استایل مستقیماً داخل تگ HTML نوشته می‌شود. برای مثال در یک تگ <p> یا <h1> می‌توان خاصیت style را تعریف کرد.
روش Internal (داخلی): در این روش، کدهای CSS در داخل تگ <head> قرار می‌گیرند.
روش External (خارجی): در این روش، کدهای CSS در یک فایل جداگانه نوشته می‌شوند.

انتخاب روش استایل‌دهی به شرایط پروژه بستگی دارد. معمولاً در یک پروژه وب می‌توان از ترکیب هر سه روش استفاده کرد. به این ترتیب، طراح می‌تواند به بهترین شکل به طراحی و دیزاین مورد نظر خود دست یابد. در ادامه، چگونگی استفاده از هر روش را به صورت دقیق آموزش می‌بینید.

در محیط VS Code دو تگ ساده HTML ایجاد کنید:

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>

با ذخیره فایل و اجرای آن در مرورگر، هر دو تگ به صورت پیش‌فرض نمایش داده می‌شوند.

خروجی HTML در مرورگر، شامل یک تیتر سطح ۱ و یک تیتر سطح ۲

حالا به کمک روش‌های اصلی استایل‌دهی در CSS، استایل آن‌ها را تغییر می‌دهیم.

۱. استایل‌دهی Inline

در این روش برای تغییر ظاهر یا استایل عنصر مورد نظر (مانند رنگ، فونت، اندازه)، style را مستقیم داخل تگ ابتدایی نوشته، سپس ویژگی و مقدار مورد نظر برای آن را همانند کد زیر داخل " می‌نویسیم:

<h1 style="color: red;">This is Heading 1</h1>

در این کد، color یک ویژگی (Property) است.
red یک مقدار (Value) محسوب می‌شود.
ترکیب Property و Value یک Declaration را تشکیل می‌دهد.

با ذخیره و اجرای کد، متن عنوان به رنگ قرمز نمایش داده می‌شود.
نمایش مرورگر از یک فایل HTML که در آن تیتر ۱ با استایل‌دهی inline به رنگ قرمز است و تیتر ۲ به رنگ سیاه پیش‌فرض نمایش داده می‌شود.

برای آموزش رایگان ویژگی color در CSS به قسمت مرتبط با آن مراجعه کنید.

۲. استایل‌دهی Internal

در این روش، کدهای CSS درون تگ <style> و داخل بخش <head> فایل HTML قرار می‌گیرند:

<head>
  <style>
    h2 {
      color: blue;
    }
  </style>
</head>

در اینجا h2 نقش Selector دارد.
بخش { ;color: blue} یک Declaration Block است که شامل دستورات CSS می‌شود.
هر خط داخل بلاک (مثلاً ;color: blue) یک Declaration به شمار می‌رود.

با اجرای این کد، متن عنوان دوم <h2> به رنگ آبی نمایش داده خواهد شد.

نمایش مرورگر از یک فایل HTML که در آن تیتر ۲ از طریق استایل‌دهی Internal به رنگ آبی نمایش داده می‌شود.

۳. استایل‌دهی External

در روش External، کدهای CSS در یک فایل جداگانه نوشته می‌شوند و سپس به فایل HTML متصل می‌گردند. این روش یکی از پرکاربردترین روش‌ها در پروژه‌های واقعی و بزرگ است.

مرحله اول ایجاد یک فایل CSS جدید

در محیط VS Code یک فایل جدید ایجاد می‌کنیم و نام آن را styles.css می‌گذاریم. هنگام ساخت فایل، زبان آن را CSS انتخاب می‌کنیم.

مرحله دوم نوشتن استایل در فایل CSS

داخل فایل styles.css، بلاک اعلان (Declaration Block) مورد نظر برای تگ‌های HTML مورد نظر را می‌نویسیم:

h3 {
 color: yellow;
}

مرحله سوم لینک کردن فایل CSS به HTML

اکنون باید فایل CSS را به فایل HTML متصل کنیم. این کار در بخش <head> و به صورت زیر با تگ <link> انجام می‌شود:

<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1>This is Heading 1</h1>
 <h2>This is Heading 2</h2>
 <h3>This is Heading 3</h3>
</body>

ویژگی "rel="stylesheet مشخص می‌کند که این فایل یک فایل استایل است.
ویژگی "href="styles.css مسیر فایل CSS را معرفی می‌کند.

پس از ذخیره و اجرای فایل در مرورگر، متن <h3> با رنگ زرد نمایش داده می‌شود. به این ترتیب، سومین روش استایل‌دهی (External) را هم با موفقیت پیاده‌سازی کردیم.

نمایش مرورگر از یک فایل HTML که در آن تیتر ۳ از طریق استایل‌دهی External به رنگ زرد درآمده

مشکل رایج

فرض کنید فایل styles.css را داخل یک پوشه‌ی جدید به نام css قرار داده‌اید:

اگر مسیر فایل CSS در تگ <link> درست تنظیم نشده باشد، استایل‌ها اعمال نمی‌شوند و مرورگر فایل را پیدا نمی‌کند.

مثال اشتباه:

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

در این حالت، فایل CSS داخل پوشه است و مسیر اشتباه است، بنابراین استایل‌ها اعمال نمی‌شوند.

اصلاح اشتباه در VS Code:

مسیر اشتباه را پاک کنید.
شروع به تایپ مسیر صحیح کنید (css/styles.css).
VS Code معمولاً مسیرها را پیشنهاد می‌دهد (Autocomplete).
پیشنهاد مناسب را انتخاب کنید و Enter بزنید.

مسیر به‌صورت کامل وارد می‌شود:

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

پس از اصلاح مسیر و رفرش صفحه در مرورگر، استایل‌ها به درستی اعمال می‌شوند. نکته: همیشه پس از جا‌به‌جایی یا تغییر مسیر فایل‌های CSS، مسیر لینک در HTML را بررسی کنید تا استایل‌ها از بین نروند.

روش درست و حرفه‌ای این است که فایل‌های پروژه را به‌صورت دسته‌بندی‌شده نگهداری کنید. به عنوان مثال، فایل‌های CSS را داخل پوشه‌ای با نام CSS و فایل‌های جاوا اسکریپت را داخل پوشه‌ای با JavaScript قرار دهید. این کار باعث می‌شود پروژه‌ی شما مرتب‌تر باشد و مدیریت فایل‌ها در آینده ساده‌تر انجام شود.

تمرین پایانی

برای تثبیت مطالب جلسه، تمرین زیر را انجام دهید:

یک فایل HTML ساده ایجاد کنید.
یک فایل CSS جدید بسازید و آن را به فایل HTML متصل کنید.
یکی از ویژگی‌هایی (Properties) که تاکنون یاد گرفته‌اید را انتخاب کنید (مثلاً رنگ متن یا اندازه فونت).
این ویژگی را روی یکی از تگ‌های HTML خود اعمال کنید.
حتماً فایل‌هایتان را به‌صورت مرتب در پوشه‌های جداگانه سازمان‌دهی کنید.

جمع بندی

در این قسمت به عنوان اولین بخش از دوره سی اس اس با ساختار کد CSS آشنا شدید و سپس چگونگی اعمال استایل‌های CSS به تگ‌های HTML را که شامل ۳ روش اصلی می‌شود، یاد گرفتید. انتخاب یکی از این روش‌ها به ابعاد و شرایط پروژه بستگی دارد؛ معمولاً در یک پروژه از ترکیب هر سه روش استفاده می‌شود تا بتوان به بهترین شکل، طراحی و دیزاین را در قسمت فرانت اند یک پروژه مدیریت کرد.

ساختار کدها در CSS