چگونه CSS اضافه کنیم
- صفحه قبل انتخاب‌گرهای CSS
- صفحه بعدی نظرات CSS
وقتی مرورگر استایل‌ها را می‌خواند، آن‌ها را بر اساس اطلاعات استایل‌ها برای فرمت‌دهی مستند HTML استفاده می‌کند.
سه روش استفاده از CSS
سه روش برای وارد کردن استایل‌ها وجود دارد:
- CSS خارجی
- CSS داخلی
- CSS درون‌روی
CSS خارجی
با استفاده از استایل‌های خارجی، شما تنها نیاز به تغییر یک فایل دارید تا ظاهر کل وب‌سایت خود را تغییر دهید!
هر صفحه HTML باید شامل ارجاع به فایل‌های استایل خارجی در عنصر <link> بخش <head> باشد.
مثال
طراحی خارجی در عنصر <link> بخش <head> صفحه‌های HTML تعریف می‌شود:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>این یک عنوان است</h1> <p>این یک پاراگراف است.</p> </body> </html>
جدول استایل خارجی می‌تواند در هر ویرایشگر متن نوشته شود و باید با پسوند .css ذخیره شود.
فایل‌های .css خارجی نباید هیچ برچسب HTML را شامل شوند.
"mystyle.css" به این صورت است که:
"mystyle.css"
body {
رنگ پس‌زمینه: آبی روشن;
}
h1 {
رنگ: ناوی;
margin-left: 20px;
}
توجه:لطفاً از اضافه کردن فاصله بین مقدار属性 و واحد خودداری کنید (مثلاً margin-left: 20 px;()). روش صحیح این است که:margin-left: 20px;
CSS داخلی
اگر یک صفحه HTML تنها یک استایل دارد، می‌توان از جدول استایل داخلی استفاده کرد.
استایل‌های داخلی در عنصر <style> بخش head تعریف می‌شوند.
مثال
استایل‌های داخلی در بخش <head> صفحه HTML در عنصر <style> تعریف می‌شوند:
<!DOCTYPE html>
<html>
<head>
<style>
body {
رنگ پس‌زمینه: پارچه;
}
h1 {
رنگ: قرمز کبود;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
CSS درون‌روی
استایل‌های درون‌روی (همچنین به عنوان استایل‌های inline شناخته می‌شوند) برای اعمال استایل‌های منحصر به فرد بر یک عنصر استفاده می‌شوند.
برای استفاده از استایل‌های درون‌روی،属性 style را به عنصر مربوطه اضافه کنید. attribute style می‌تواند هر یک از属性های CSS را شامل شود.
مثال
استایل‌های درون‌روی در属性 "style" مربوط به عنصر تعریف می‌شوند:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">این یک عنوان است</h1> <p style="color:red;">این یک پاراگراف است.</p> </body> </html>
توجه:استایل‌های درون‌روی (inline styles) بسیاری از مزایای جدول استایل را از دست می‌دهند (با ترکیب محتوای با نمایش). از این روش با احتیاط استفاده کنید.
چندین جدول استایل
اگر چندین استایل برای یک انتخاب‌گر (عنصر) در چندین جدول استایل تعریف شده باشد، مقدار جدول استایل آخرین خوانده شده استفاده خواهد شد.
فرض کنید یکجدول استایل خارجیاین استایل‌ها برای علامت <h1> تعریف شده‌اند:
h1 {
رنگ: ناوی;
}
بعد از آن، فرض کنید یکجدول استایل داخلیاین استایل‌ها برای علامت <h1> تعریف شده‌اند:
h1 {
رنگ: نارنجی;
}
مثال
اگر استایل داخلی به جدول استایل خارجی مرتبط باشدبعداگر تعریف شده باشد، علامت <h1> به رنگ نارنجی خواهد بود:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
رنگ: نارنجی;
}
</style>
</head>
مثال
اما اگر به جدول استایل خارجی مرتبط باشدقبلاستایل‌های داخلی تعریف شده، عنصر <h1> به رنگ آبی تیره خواهد بود:
<head>
<style>
h1 {
رنگ: نارنجی;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
ترتیب لایه‌بندی
وقتی برای یک عنصر HTML چندین استایل تعیین می‌شود، از کدام استایل استفاده می‌شود؟
تمام استایل‌های موجود در صفحه بر اساس قوانین زیر به یک جدول استایل‌های مجازی جدید "لایه‌بندی" می‌شوند، که اولویت اول بالاترین است:
- استایل‌های درون‌محتوایی (در عناصر HTML)
- استایل‌های خارجی و داخلی (در بخش head)
- استایل‌های پیش‌فرض مرورگر
بنابراین، استایل‌های درون‌محتوایی بالاترین اولویت را دارند و استایل‌های خارجی و داخلی و استایل‌های پیش‌فرض مرورگر را پوشش می‌دهند.
- صفحه قبل انتخاب‌گرهای CSS
- صفحه بعدی نظرات CSS
