CSS چگونه کار میکند؟

زمانی که یک مرورگر یک استایل شیت را مرور می کند ، سند HTML را با توجه به اطلاعات استایل شیت ، فرمت دهی می کند.


3 راه برای فراخوانی CSS وجود دارد :
استایل شیت خارجی
استایل شیت داخلی
استایل اینلاین

 

استایل شیت خارجی

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

مثال :

استایل شیت خارجی
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
مشاهده مثال



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

مثال زیر نمایی از چگونگی کدهای  css می باشد :

مثالی از محتوای استایل شیت
body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}
مشاهده مثال


نکته ! ما بین مقدار صفت و واحد آن فاصله نباید وجود داشته باشد. (;margin-left: 20 px)
نمونه صحیح :      ;margin-left: 20px

 

استایل شیت داخلی

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

مثال :

استایل شیت داخلی
 <head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>
مشاهده مثال


 

استایل اینلاین (inline)

یک استایل داخل خطی (inline) برای افزودن یک استایل منحصر بفرد برای یک عنصر خاص ، مورد استفاده قرار می گیرد. برای بکار گیری استایل ، صفت style را به عنصر مربوطه اضافه کرده و از صفات CSS داخل استایل استفاده می کنیم.
مثال زیر توضیح می دهد که چگونه می توان با استفاده از استایل داخل خطی رنگ و فضای فاصله (margin) یک عنصر <h1> را تغییر داد  :

استایل درون خطی
 <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
مشاهده مثال


 

استایل شیت های متعدد

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

مثال - فرض کنید یک استایل شیت خارجی برای عنصر <h1> استایل زیر را تعریف می کند :

استایل های متعدد - استایل شیت خارجی
h1 {
    color: navy;
}
مشاهده مثال
بعد ، فرض کنید که یک استایل شیت داخلی هم وجود دارد که برای همان عنصر استایل زیر را تعریف می کند :

استایل های متعدد - استایل شیت داخلی
h1 {
    color: orange;   
}
مشاهده مثال


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

مثال :
استایل های متعدد
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>
مشاهده مثال



اما اگر استایل شیت داخلی این سند را قبل از عنصر لینک و استایل شیت خارجی تعریف کنیم ، عنصر <h1> آبی نمایش داده خواهد شد.
ترتیب استایل شیت ها و اولویت آنها
 <head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
مشاهده مثال

ترتیب آبشاری

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

1- استایل داخل خطی ( inline ) - داخل یک عنصر
2- استایل شیت خارجی یا داخلی ( داخلی بخش head)
3- پیش فرض مرورگر

پس یک استایل داخل خطی دارای بیشترین اولویت است.
 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط