در CSS، چهار روش برای ارتباط سبک‌ها با سند HTML وجود دارد. دو روش برجسته‌تر که بیشتر استفاده می‌شوند، شامل CSS داخل خطی (Inline CSS) و CSS خارجی (External CSS) هستند.
عنصر استایل (The style Element)
Embedded CSS امکان قرار دادن قوانین CSS در داخل سند HTML را فراهم می‌کند و با استفاده از تگ <style> امکان دارد. این قوانین CSS در داخل بخش <head> سند HTML قرار می‌گیرند و برای تمامی عناصر موجود در سند اعمال می‌شوند. در زیر، یک نمونه کد Embedded CSS نشان داده شده است:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
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>
در این مثال، دو قانون CSS برای اعمال رنگ زمینه و رنگ متن بر روی عناصر body و h1 تعریف شده است. با اجرای این کد، سند HTML با رنگ زمینه linen و عنوان h1 با رنگ maroon و margin-left 40px نمایش داده می‌شود.
CSS درون‌خطی - ویژگی استایل (Inline CSS - The style Attribute)
Inline CSS به شما امکان می‌دهد که از ویژگی style هر عنصر HTML برای تعریف قوانین سبک استفاده کنید. این قوانین تنها بر روی آن عنصر اعمال می‌شوند. در زیر، نحوه استفاده از Inline CSS و مثالی نشان داده شده است:
<html>
<head>
</head>
<body>
<h1 style="color:#36C;">
This is inline CSS
</h1>
</body>
</html>
در این مثال، یک عنوان h1 با متن “This is inline CSS” ساخته شده است و قوانین سبک با استفاده از ویژگی style به صورت مستقیم بر روی آن اعمال شده است. قانون تنها یکی است که رنگ متن را به #36C (یک رنگ آبی) تنظیم می‌کند.
CSS خارجی - عنصر لینک (External CSS - The link Element)
External CSS امکان استفاده از یک فایل سبک خارجی با استفاده از عنصر <link> را در سند HTML شما فراهم می‌کند.
یک برگه سبک خارجی یک فایل متنی جدا با پسوند .css است. شما تمامی قوانین سبک را در این فایل متنی تعریف می‌کنید و سپس می‌توانید این فایل را در هر سند HTML با استفاده از عنصر <link> اضافه کنید.
در زیر، نحوه استفاده از فایل CSS خارجی و مثالی نشان داده شده است:
<head>
<link type="text/css" href="..." media="..." />
</head>
ویژگی‌هایی که با عنصر <style> مرتبط هستند عبارتند از:
type: نوع فایل، که در اینجا بایدtext/cssباشد و این ویژگی ضروری است.href: آدرس فایل برگه سبک را مشخص می‌کند و این ویژگی نیز ضروری است.media: نوع رسانه که مشخص می‌کند برگه سبک بر روی چه دستگاه‌هایی نمایش داده می‌شود. مقدار پیش‌فرض این ویژگیallاست و این ویژگی اختیاری است.
برای مثال، فرض کنید که یک فایل برگه سبک ساده با نام mystyle.css دارای قوانین زیر باشد:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
حالا می‌توانید این فایل mystyle.css را در هر سند HTML به صورت زیر اضافه کنید:
<head>
<link type="text/css" href="mystyle.css" media="all" />
</head>
قواعد @import
@import در CSS برای وارد کردن یک برگه سبک خارجی به روشی مشابه با عنصر <link> استفاده می‌شود. در زیر، نحوه استفاده از قاعده @import نشان داده شده است.
<head>
@import "URL";
</head>
در اینجا، URL آدرس فایل برگه سبک است که دارای قوانین سبک است. شما می‌توانید از دستورالعمل دیگری هم استفاده کنید:
<head>
@import url("URL");
</head>
در ادامه، یک مثال نشان می‌دهد که چگونه یک فایل برگه سبک را به سند HTML وارد کنید:
<head>
@import "mystyle.css";
</head>
در این مثال، فایل سبک mystyle.css به سند HTML وارد شده است.
اولویت قوانین (CSS Rules Overriding)
ما چهار روش برای اضافه کردن قواعد برگه‌های سبک به یک سند HTML مورد بررسی قرار داده‌ایم. در اینجا قاعده‌ای برای بازنویسی هر قاعده برگه‌های سبک وجود دارد.
- هر برگه سبک داخلی اولویت بالاتری دارد. بنابراین، هر قاعده‌ای که در بین تگ‌های <style>…</style> یا قوانینی که در هر فایل برگه سبک خارجی تعریف شده‌اند، را از بین می‌برد.
- هر قاعده‌ای که در بین تگ‌های <style>…</style> تعریف شده باشد، قوانین تعریف شده در هر فایل برگه سبک خارجی را از بین می‌برد.
- هر قاعده‌ای که در فایل برگه سبک خارجی تعریف شده باشد، دارای پایین‌ترین اولویت است و قوانین تعریف شده در این فایل تنها زمانی اعمال می‌شوند که قوانین بالا معتبر نباشند.
رسیدگی به مرورگرهای قدیمی (Handling old Browsers)
هنگامی که با مرورگرهای قدیمی که CSS را پشتیبانی نمی‌کنند روبرو هستیم، باید در نوشتن CSS داخلی در یک سند HTML مراقب باشیم. کدهای زیر نشان می‌دهد چگونه می‌توانید از برچسب‌های توضیحی استفاده کنید تا CSS را از مرورگرهای قدیمی مخفی کنید:
<style type="text/css">
<!--
body, td {
color: blue;
}
-->
</style>
کامنت‌گذاری (CSS Comments)
کامنت‌ها در CSS بسیار مفید هستند و به شما اجازه می‌دهند توضیحات و یادداشت‌هایی را به کدهای خود اضافه کنید. برای اضافه کردن یک کامنت، می‌توانید متن مورد نظر خود را بین /* و */ قرار دهید. همچنین می‌توانید از // برای نوشتن کامنت‌های تک خطی استفاده کنید.
برای نوشتن کامنت‌های چند خطی، از /* برای شروع کامنت استفاده می‌کنید و سپس متن کامنت را قرار می‌دهید و در آخر با */ کامنت را ببندید.
در مثال زیر نحوه استفاده از کامنت‌ها در CSS نشان داده شده است:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment
which spans multiple lines */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
کامنت‌ها در اینجا به کمک توضیحات برای توسعه دهندگان و تیم‌های کاری مفید هستند تا کد را بهتر درک کنند و تغییرات را به راحتی اعمال کنند.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام