ورود به کارتابل مشتریان وب مهراز
CSS چگونه کار میکند؟
یادگیری 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- پیش فرض مرورگر
پس یک استایل داخل خطی دارای بیشترین اولویت است.
نظر شما
>