چگونه CSS ایجاد کنیم

چگونه جدول استایل را اضافه کنیم

وقتی یک جدول استایل خوانده می‌شود، مرورگر بر اساس آن مستند HTML را فرمت می‌کند. روش‌های مختلفی برای اضافه کردن جدول استایل وجود دارد:

جدول استایل‌های خارجی

وقتی نیاز به اعمال سبک بر روی بسیاری از صفحات باشد، جدول استایل‌های خارجی انتخاب مناسبی خواهد بود. در استفاده از جدول استایل‌های خارجی، می‌توانید با تغییر یک فایل، ظاهر کل سایت را تغییر دهید. هر صفحه از برچسب <link> برای لینک به جدول استایل استفاده می‌کند. برچسب <link> در سربرگ مستند قرار دارد:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

مرورگر از فایل mystyle.css برای خواندن تعریف‌های استایل استفاده می‌کند و بر اساس آن مستند را فرمت می‌کند.

جدول استایل‌های خارجی می‌تواند در هر ویرایشگر متنی ویرایش شود. فایل نمی‌تواند هیچگونه برچسب html را شامل شود. جدول استایل‌ها باید با پسوند .css ذخیره شوند. اینجا یک مثال از یک فایل جدول استایل است:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

در بین مقدار ویژگی و واحد، فاصله نگذارید. اگر از "margin-left: 20 px" به جای "margin-left: 20px" استفاده کنید، تنها در IE 6 کار می‌کند، اما در Mozilla/Firefox یا Netscape به درستی کار نمی‌کند.

جدول استایل‌های داخلی

وقتی یک مستند نیاز به سبک خاصی دارد، باید از جدول استایل‌های داخلی استفاده شود. می‌توانید از برچسب <style> برای تعریف جدول استایل‌های داخلی در سربرگ مستند استفاده کنید، مانند این:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

سبک‌های درون‌محتوایی

به دلیل ترکیب نمایش و محتوا، سبک‌های درون‌محتوایی بسیاری از مزایای جدول استایل را از دست می‌دهند. از این روش به دقت استفاده کنید، به عنوان مثال، زمانی که سبک تنها باید یک بار بر روی یک عنصر اعمال شود.

برای استفاده از سبک‌های درون‌محتوایی، باید از ویژگی (style) در برچسب‌های مربوطه استفاده کنید. ویژگی Style می‌تواند هرگونه ویژگی CSS را شامل شود. این مثال نشان می‌دهد که چگونه می‌توان رنگ و حاشیه چپ یک بخش را تغییر داد:

<p> style="color: sienna; margin-left: 20px">
این یک پاراگراف است
</p>

استایل‌های چندگانه

اگر برخی از ویژگی‌ها در چندین جدول استایل توسط یک انتخاب‌گر مشابه تعریف شده باشند، ارزش ویژگی از جدول استایل خاص‌تر ارث می‌برد.

مثلاً، جدول استایل خارجی سه ویژگی برای انتخاب‌گر h3 دارد:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

در حالی که جدول استایل داخلی دو ویژگی برای انتخاب‌گر h3 دارد:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

اگر این صفحه دارای جدول استایل داخلی باشد و همچنین به جدول استایل خارجی لینک شده باشد، استایل h3 به صورت زیر خواهد بود:

color: red; 
text-align: right; 
font-size: 20pt;

در حالی که ویژگی‌های رنگ (color) به جدول استایل خارجی ارث می‌برند، ترتیب نوشتاری (text-alignment) و اندازه قلم (font-size) توسط قوانین جدول استایل داخلی جایگزین می‌شوند.