شما اینجا هستید

هنگامی که مرورگر برگه استایل را میخواند، سند را بر طبق اطلاعاتی که در برگه استایل آمده قالب بندی میکند.

سه روش برای نوشتن کدهای CSS وجود دارد

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

  • برگه استایل خارجی
  • برگه استایل داخلی
  • استایل درون خطی

استایل دادن خارجی

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

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

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

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

بین مقدار ویژگی و واحد آن نباید فضای خالی اضافه کرد (مانند ;margin-right: 20 px) . روش درست آن به این شکل است : ;margin-right: 20px

استایل دادن داخلی

استایل داخلی در صفحاتی که استایل منحصر به فرد دارند به کار می آید. استایل داخلی در قسمت head صفحه html درون عنصر <style> تعریف میگردد.

<html>

<head>

<style>

body {

    background-color: linen;

}

h1 {

    color: maroon;

    margin-left: 40px;

}

</style>

</head>

<body>


<h1>This is a heading</h1>

<p>This is a paragraph.</p>


</body>

</html>

 

استایل درون خطی

استایل درون خطی برای اعمال روی عنصری که میخواهیم استایل منحصر به فرد داشته باشد به کار می آید. استایل درون خطی به دلیل ترکیب محتوا و نحوه نمایش آن برای استایل دادن به صفحات وب مناسب نیست. بهتر است که از این روش کمتر استفاده کنید.

برای استفاده از استایل درون خطی، خصوصیت style را به تگ مربوطه اضافه میکنیم.  ویژگی style میتونه شامل همه ویژگیهای css باشه. مثال پایین نشون میده که چگونه رنگ و حاشیه عنصر <h1> را تغییر میدهیم:

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

اعمال استایلهای مختلف روی یک سلکتور

اگر برخی از ویژگیها با سلکتورهای یکسان در برگه های استایل مختلف تعریف شوند، مقدار ویژگیها، از تمامی برگه های استایلی که برای آن سلکتور تنظیم کرده ایم به ارث میرسد.

برای مثال، یک استایل خارجی با ویژگی های زیر برای عنصر <h1> در نظر میگیریم:

h1 {
    color: navy;
    margin-left: 20px;
}

سپس یک استایل داخلی با ویژگیهای زیر برای عنصر <h1> در نظر میگیریم:

h1 {
    color: orange;   
}

اگر صفحه وب دارای استایل داخلی و همچنین استایل خارجی برای عنصر <h1> باشد این عنصر دارای استایل های زیر میشود:

color: orange;
margin-left: 20px;

حاشیه چپ از استایل خارجی ارث میبرد و رنگ از استایل داخلی ارث میبرد.

استایل های گوناگون به صورت آبشاری یک استایل تبدیل میشوند

استایل ها با روشهای زیر مشخص میگردند:

  • در یک فایل css خارجی
  • داخل قسمت <head> در یک صفحه html
  • درون یک عنصر HTML

ترتیب آبشاری

هنگامی که از چند استایل برای عنصر HTML استفاده میکنیم کدام استایل استفاده خواهد شد؟

همه استایل ها به صورت آبشاری در یک فایل مجازی جدید با قوانین زیر نوشته میشوند که آخرین شماره اولویت بالاتری دارد

  1. پیشفرض مرورگر
  2. استایل های داخلی و خارجی (در قسمت head)
  3. استایل داخلی ( داخل عنصر HTML)

بنابراین، استایل درون خطی (درون عنصر HTML) بالاترین اولویت را دارا میباشد، این به این معنی است که استایل تعریف شده در تگ <head>، استایل خارجی و پیشفرض مرورگر را زیر پا گذاشته و استایل خودش را جایگزین آنها میکند.

توجه داشته باشید که اگر در قسمت head صفحه html استایل خارجی در پایین استایل داخلی قرار بگیرد، استایل خارجی، استایل داخلی را زیر پا گذاشته و استایل خودش را جایگزین آن میکند.

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.