آموزش HTML - استایل دهی صفحات

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

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

هر ویژگی دارای یک نام و یک مقدار است که با نقطه‌ویرگول انگلیسی (:) از هم جدا می‌شوند. هر اعلام ویژگی نیز با یک نقطه‌ویرگول (;) از دیگری جدا می‌شود.

مثالی از CSS در سند HTML

ابتدا، مثالی از یک سند HTML را در نظر بگیرید که از تگ <font> و ویژگی‌های مرتبط با آن برای تعیین رنگ متن و اندازه فونت استفاده می‌کند:

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p>
      <font color="green" size="5">Hello, World!</font>
   </p>
</body>
</html>

می‌توانیم مثال بالا را به کمک CSS به شکل زیر بازنویسی کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
<body>
   <p style="color:green;font-size:24px;">
      Hello, World!
   </p>
</body>
</html>

آبشاری (Cascading) به این معنی است که استایل اعمال‌شده روی یک عنصر والد، روی تمامی عناصر فرزند درون آن والد نیز اعمال خواهد شد. بنابراین وقتی استایلی را روی یک عنصر اعمال می‌کنید، باید مواظب عناصر فرزند باشید. البته می‌توانید استایل‌های متفاوتی را نیز روی فرزندان اعمال کنید.

روش‌های استفاده از CSS (برگه‌های استایل) در HTML

سه روش برای گنجاندن CSS در سند HTML شما وجود دارد:

• CSS خارجی (External): قوانین برگه استایل را در یک فایل css. جداگانه تعریف کرده و سپس آن فایل را با استفاده از تگ <link> HTML در سند HTML خود وارد کنید.
• CSS داخلی (Internal): قوانین برگه استایل را در بخش هدر (header) سند HTML با استفاده از تگ <style> تعریف کنید.
• CSS درون‌خطی (Inline): قوانین برگه استایل را مستقیماً همراه با عناصر HTML و با استفاده از ویژگی style تعریف کنید.

مثال‌هایی از استفاده از برگه استایل در HTML

بیائید هر سه روش را یکی‌یکی و به کمک مثال‌های مناسب بررسی کنیم.

استفاده از CSS خارجی

اگر نیاز دارید از برگه استایل (CSS) خود در صفحات مختلفی استفاده کنید، همیشه توصیه می‌شود که یک برگه استایل مشترک را در یک فایل جداگانه تعریف کنید. یک فایل CSS دارای پسوند css. خواهد بود و با استفاده از تگ <link> در فایل‌های HTML گنجانده می‌شود.

فرض کنید یک فایل برگه استایل به نام style.css تعریف می‌کنیم که دارای قوانین زیر است:

style.css

.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}

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

مثالی برای استفاده از فایل CSS خارجی در HTML

اکنون بیائید از فایل CSS خارجی بالا در سند HTML زیر استفاده کنیم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML External CSS</title>
   <link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

استفاده از CSS داخلی

اگر می‌خواهید قوانین برگه استایل را تنها روی یک سند اعمال کنید، می‌توانید آن قوانین را در بخش هدر سند HTML با استفاده از تگ <style> بگنجانید. قوانین تعریف‌شده در برگه استایل داخلی، بر قوانین تعریف‌شده در فایل CSS خارجی اولویت داشته و آن‌ها را جایگزین (Override) می‌کنند.

مثالی برای استفاده از CSS داخلی در HTML

بیائید مثال بالا را بار دیگر بازنویسی کنیم، اما در اینجا قوانین برگه استایل را درون همان سند HTML و با استفاده از تگ <style> می‌نویسیم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Internal CSS</title>
   <style type="text/css">
      .red {
         color: red;
      }
      .thick {
         font-size: 20px;
      }
      .green {
         color: green;
      }
   </style>
</head>
<body>
   <p class="red">This is red</p>
   <p class="thick">This is thick</p>
   <p class="green">This is green</p>
   <p class="thick green">
      This is thick and green
   </p>
</body>
</html>

استفاده از CSS درون‌خطی

شما می‌توانید قوانین برگه استایل را مستقیماً با استفاده از ویژگی style در تگ مربوطه، روی هر عنصر HTML اعمال کنید. این کار تنها زمانی باید انجام شود که مایل به ایجاد یک تغییر خاص در یک عنصر HTML باشید. قوانین تعریف‌شده به‌صورت درون‌خطی در خود عنصر، بر قوانین تعریف‌شده در فایل CSS خارجی و همچنین قوانین تعریف‌شده در عنصر <style> اولویت داشته و آن‌ها را جایگزین می‌کنند.

مثالی برای استفاده از CSS درون‌خطی در HTML

بیائید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین برگه استایل را در کنار عناصر HTML و با استفاده از ویژگی style همان عناصر می‌نویسیم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Inline CSS</title>
</head>
<body>
   <p style="color:red;">This is red</p>
   <p style="font-size:20px;">This is thick</p>
   <p style="color:green;">This is green</p>
   <p style="color:green;font-size:20px;">
      This is thick and green
   </p>
</body>
</html>