CSS در HTML

روش‌های مختلف استفاده از CSS در HTML

چرا به CSS نیاز داریم؟

HTML ساختار صفحه را تعیین می‌کند، اما CSS ظاهر و استایل را. بدون CSS، صفحات HTML بسیار ساده و خسته‌کننده به نظر می‌رسند.

روش‌های استفاده از CSS در HTML

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

۱. Inline CSS (استایل خطی)

استایل مستقیماً در تگ با ویژگی style نوشته می‌شود:

<p style="color: red; font-size: 20px;">متن قرمز بزرگ</p>

مزایا: سریع، مناسب برای تست

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

۲. Internal CSS (استایل داخلی)

استایل در تگ <style> در بخش <head> نوشته می‌شود:

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

مزایا: مناسب برای صفحات تک

معایب: تکراری در صفحات مختلف

۳. External CSS (استایل خارجی)

استایل در فایل جداگانه نوشته می‌شود و با تگ <link> به صفحه متصل می‌شود:

<!-- در head -->
<link rel="stylesheet" href="style.css">

<!-- در فایل style.css -->
p {
  color: green;
  font-size: 16px;
}

مزایا: بهترین روش، قابل استفاده مجدد، آسان برای نگهداری

معایب: نیاز به فایل اضافی

انتخابگرهای پایه CSS

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

انتخابگرمثالتوضیح
تگp { }همه تگ‌های p
class.myclass { }عناصر با class="myclass"
id#myid { }عنصر با id="myid"
همه* { }همه عناصر

اولویت CSS (Cascading)

اگر چند استایل برای یک عنصر تعریف شده باشد، اولویت به ترتیب زیر است:

  1. Inline CSS — بالاترین اولویت
  2. Internal CSS — اولویت متوسط
  3. External CSS — اولویت پایین

در هر روش، !important بالاترین اولویت را دارد.

ویژگی‌های پرکاربرد CSS

ویژگیکاربردمثال
colorرنگ متنcolor: red;
background-colorرنگ پس‌زمینهbackground-color: blue;
font-sizeاندازه فونتfont-size: 16px;
font-weightضخامت فونتfont-weight: bold;
text-alignتراز متنtext-align: center;
marginحاشیه خارجیmargin: 10px;
paddingحاشیه داخلیpadding: 10px;
borderحاشیهborder: 1px solid black;

نکات مهم

این مبحث بخشی از دوره آموزش کامل HTML است.

ابزارهای مرتبط