Styleهای Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

 

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

 

Style Sheetهای چندگانه

اگر بعضی از propertyها برای یک selector در style sheetهای مختلف تعیین شده باشد، valueها از style sheet معینی ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای propertyهای زیر برای سلکتور h3 است:

 

h3

{

color:red;

text-align:left;

font-size:8pt;

}

 

و یک style sheet داخلی دارای propertyهای زیر برای سلکتور h3 است:

 

h3

{

text-align:right;

font-size:20pt;

}

 

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، propertyهای h3 اینگونه خواهد بود:

 

color:red;

text-align:right;

font-size:20pt;

 

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

Styleهای چندگانه به یک استایل cascade می شوند

Styleها را می توان به طرق زیر معین کرد:

  • درون یک عنصر HTML
  • درون بخش head صفحه HTML
  • در یک فایل CSS خارجی

نکته: حتی style sheetهای خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن

هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟

معمولاً می توان گفت که همه styleها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

  • پبش فرض مرورگر
  • style sheet خارجی
  • style sheet داخلی (در بخش head)
  • استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد، که بدین معناست که استایلی را که درون تگ <head> تعریف شده، یا در یک style sheet خارجی، یا در مرورگر را override می کند.

نکته: اگر لینک به style sheet خارجی بعد از style sheet داخلی در HTML <head> داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند.


پیش زمینه CSS

propertyهای پیش زمینه CSS برای تعریف افکت های یک عنصر بکار می رود.

propertyهای CSS برای افکت های پیش زمینه استفاده می شوند:

  • رنگ پیش زمینه (background-color)
  • تصویر پیش زمینه (background-image)
  • تکرار پیش زمینه (background-repeat)
  • الصاق پیش زمینه (background-attachment)
  • موقعیت پیش زمینه (background-position)
رنگ پیش زمینه

property رنگ پیش زمینه، رنگ پیش زمینه یک عنصر را تعیین می کنند.

رنگ پیش زمینه صفحه در سلکتور body تعریف می شود:

body {background-color:#b0c4de;}

 

رنگ پیش زمینه را می توان از طریق طرق زیر تعیین کرد:

  • نام – نام یک رنگ، مثلاً "قرمز"
  • RGB – مقدار RGB، مثلاً "rgb(255,0,0)"
  • Hex – مقدار Hex، مثلاً ""#ff0000

در مثال زیر، عنصر های h1، p، و div دارای رنگهای پیش زمینه مختلفی هستند:

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

 تصویر پیش زمینه

property تصویر پیش زمینه، تصویری را برای استفاده به عنوان پیش زمینه عنصر تعیین می کند.

این تصویر بطور پیش فرض تکرار می شود تا کل عنصر را بپوشاند.

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

body {background-image:url('paper.gif');}