وقتی مرورگری کد های CSS را میخواند، اسناد HTML را بر اساس اطلاعاتی که از کد ها میگیرد فرمت بندی میکند. در این فصل با نحوه ی عملکرد CSS آشنا خواهیم شد.
کد های CSS را میتوان به چند روش به صفحه ی وب اضافه کرد :
یکی از رایج ترین روش ها در پروژه های واقعی استفاده از روش External برای افزودن کد های CSS به صفحه است. در این روش شما میتوانید ظاهر تمام صفحات وب سایت را با ویرایش در یک فایل، تغییر دهید. در روش External کد ها مستقیما داخل صفحات وبسایت قرار نمیگیرد در عوض ارجاعی از یک فایل خارجی که کد های CSS در آن نوشته شده است در صفحه قرار میگیرد.
ارجاعات در یک صفحه توسط عنصر <link> که در قسمت <head> قرار دارد، در صفحه قرار میگیرند :
<head>
<link rel="stylesheet" type="text/css" href="mystyle2.css">
</head>
خودتان امتحان کنیدفایل خارجی (External) که کد های CSS در آن قرار میگیرد میتواند توسط هر ویرایشگر متنی نوشته شود.
این فایل نباید حاوی هیچ تگی از زبان HTML باشد و باید با پسوند css. ذخیره شود.
در نمونه مثال زیر محتوای فایلی به نام "mystyle.css" نشان داده شده است :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
نکته : دقت داشته باشید که فاصله ای بین مقدار خاصیت (property) و واحد آن قرار ندهید (برای مثال ;margin-left: 20 px). روش صحیح به این شکل است :
;margin-left: 20px
روش Internal ممکن است موقعی استفاده شود که یک صفحه ی خاص نیاز به استایل منحصر به فردی داشته باشد.
در این روش کد های CSS داخل عنصر <style> و داخل قسمت <head> از یک صفحه HTML قرار می گیرند.
در نمونه مثال زیر نحوه ی استفاده از این روش نشان داده شده است :
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
خودتان امتحان کنیدروش Inline ممکن است موقعی استفاده شود که یک عنصر نیاز داشته باشد استایل منحصر به فردی داشته باشد.
در این روش صفت style به عنصر مربوطه اضافه میشود. صفت style اضافه شده میتواند شامل هر صفتی از زبان CSS باشد.
نمونه مثال زیر نشان میدهد که در روش Inline چطور میتوان رنگ و صفت margin-left عنصر <h1> را تغییر داد :
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
خودتان امتحان کنیدنکته : در روش Inline به این دلیل که محتوا و نحوه ی نمایش عناصر با هم ترکیب میشوند، مزایای استفاده از زبان CSS را که یکی از آنها جداسازی محتوا از نحوه ی نمایش است به چالش میکشد. از این روش در موارد ضروری استفاده کنید.
اگر چندین صفت از زبان CSS برای یک عنصر در روش های مختلف (External ، Internal ، Inline) تعریف شده باشد، آخرین مقداری که خوانده میشود روی عنصر مربوطه اعمال میشود.
فرض کنید که در روش External ، برای عنصر <h1> استایل زیر تعریف شده است :
h1 {
color: navy;
}
و استایل تعریف شده در روش Internal هم ، برای عنصر <h1> به صورت زیر است :
h1 {
color: orange;
}
اگر استایل تعریف شده در روش Internal بعد از ارجاعی باشد که استایل در روش External را مشخص میکند ، عنصر <h1> به رنگ orange خواهد بود :
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
خودتان امتحان کنیدبا این حال ، اگر استایل تعریف شده به روش Internal قبل از ارجاع روش External باشد، عنصر <h1> به رنگ orange خواهد بود :
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
خودتان امتحان کنیدکدام استایل زمانی که بیش از از یک استایل برای یک عنصر HTML مشخص شده باشد، استفاده خواهد شد ؟
در نهایت یک از استایل ها خواهد توانست بر روی عنصر HTML اعمال شود.
در زیر اولویت های نحوه ی اعمال استایل بر روی یک عنصر مشخص شده است. شماره یک دارای بالاترین اولویت و شماره 3 پایین ترین اولویت هستند :
بنابراین یک استایل در روش Inline (داخل یک عنصر خاص در HTML) دارای بیشترین اولویت است. این به این معناست که استایل تعریف شده در تگ head ، استایل تعریف شده در روش External و پیشفرض های مرورگر توسط روش Inline قابل چشم پوشی است.
دیدگاه ها
برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید
آموزش CSS
لرن سورس با هدف ایجاد یک مرجع کامل و جامع در زمینه آموزش دوره محور زبان های برنامه نویسی و وب پا به عرصه وب گذاشته است.
ما در لرن سورس همیشه سعی خواهیم کرد تا نیاز های آموزشی شما کاربران عزیز را در قالب آموزش های مختلف پاسخ دهیم.
با استفاده از لینک های زیر میتوانید به بخش های اصلی سایت دسترسی داشته باشید:
شما کاربران عزیز میتوانید با هر کدام از راه های ارتباطی زیر با تیم آموزشی لرن سورس در ارتباط باشید: