اضافه کردن CSS

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


چگونه CSS را اضافه کنیم

هنگامی که مرورگری یک فایل طراحی (به انگلیسی: stylesheet) را می‌خواند، فایل HTML را مطابق اطلاعات موجود در فایل طراحی قالب‌بندی می‌کند.[۱]

سه روش برای اضافه‌کردن CSS

سه روش برای اضافه‌کردن یک فایل طراحی (stylesheet) وجود دارد:

  1. CSS خارجی
  2. CSS داخلی
  3. CSS بر خط

CSS خارجی

با داشتن یک فایل طراحی خارجی، می‌توانید با تغییر فقط یک فایل، ظاهر وب‌سایت را به طورکامل تغییر دهید!

هر صفحه HTML باید در بخش head و در داخل عنصر <link> به فایل طراحی خارجی ، ارجاع داشته باشد.

مثال

استایل های خارجی، درون عنصر <link> و داخل قسمت <head> یک صفحه HTML تعریف می شوند: 

 1 <!DOCTYPE html>
 2 
 3 <head>
 4 <link rel="stylesheet" type="text/css" href="mystyle.css">
 5 </head>
 6 <body>
 7 
 8 <h1>This is a heading</h1>
 9 <p>This is a paragraph.</p>
10 
11 </body>


یک فایل طراحی خارجی را می‌توان به وسیله هر نوع ویرایشگر متنی نوشت، و می‌بایست با پسوند .css ذخیره شود.

فایل .css خارجی نباید حاوی هیچگونه تگ HTML باشد.

در اینجا کد فایل "mystyle.css" را مشاهده می‌کنید:

"mystyle.css" 
1 body {
2   background-color: lightblue;
3 }
4 
5 h1 {
6   color: navy;
7   margin-left: 20px;
8 }


نکته: بین مقدار خاصیت و واحد آن، فضای خالی اضافه نکنید: (margin-left: 20 px;)

روش صحیح به این صورت است: margin-left: 20px;

CSS داخلی

اگر یک صفحه HTML دارای استایل (طرح) منحصربه‌فردی باشد، می‌توان از صفحه استایل داخلی استفاده کرد.

استایل داخلی در داخل عنصر <style>، در قسمت head تعریف می‌شود.

مثال

استایل‌ها (طرح‌ها) درون عنصر <style> و درون قسمت <head> تعریف می‌شوند:

 1 <!DOCTYPE html>
 2 
 3 <head>
 4 <style>
 5 body {
 6   background-color: linen;
 7 }
 8 
 9 h1 {
10   color: maroon;
11   margin-left: 40px;
12 }
13 </style>
14 </head>
15 <body>
16 
17 <h1>This is a heading</h1>
18 <p>This is a paragraph.</p>
19 
20 </body>

CSS درون خطی (به انگلیسی: Inline)

استایل درون خطی ممکن است برای ایجاد استایل منحصر به فردی برای یک عنصر استفاده شود.

برای استفاده از استایل‌های درون خطی، خاصیت style را به عنصر مربوطه اضافه کنید. خاصیت style می‌تواند حاوی هر گونه ویژگی CSS باشد.

مثال

استایل‌های بر خط به وسیله خاصیت "style" عنصر مربوطه تعریف می‌شوند:

1 <!DOCTYPE html>
2 
3 <body>
4 
5 <h1 style="color:blue;text-align:center;">This is a heading</h1>
6 <p style="color:red;">This is a paragraph.</p>
7 
8 </body>


نکته: یک استایل درون خطی بسیاری از مزایای یک فایل طراحی (به انگلیسی: style sheet) (با ترکیب محتوا و شیوه نمایش) را از دست می‌دهد. از این روش خیلی کم استفاده کنید.

فایلهای طراحی چندگانه

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

فرض کنید که یک صفحه استایل خارجی (به انگلیسی: external style sheet) استایل زیر را برای عنصر <h1> دارد:

1 h1 {
2   color: navy;
3 }


فرض کنید که یک صفحه استایل داخلی نیز طرح زیر را برای عنصر <h1> دارد :

1 h1 {
2   color: orange;   
3 }

مثال

اگر استایل داخلی (به انگلیسی: internal style) بعد از لینک صفحه به صفحه استایل خارجی (به انگلیسی: external style sheet) تعریف شود، عنصر <h1> به رنگ «نارنجی» خواهد بود:

1 <head>
2 <link rel="stylesheet" type="text/css" href="mystyle.css">
3 <style>
4 h1 {
5   color: orange;
6 }
7 </style>
8 </head>

مثال

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

1 <head>
2 <style>
3 h1 {
4   color: orange;
5 }
6 </style>
7 <link rel="stylesheet" type="text/css" href="mystyle.css">
8 </head>


روش قرارگیری آبشاری (به انگلیسی: Cascading)

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

تمامی استایل ها با رعایت قوانین زیر، درون یک صفحه استایل «مجازی»، به صورت «آبشاری» قرار می‌گیرند که شماره یک، بیشترین اولویت را دارد:

  1. استایل درون خطی(درون یک عنصر HTML)
  2. صفحه های استایل خارجی و داخلی (در قسمت head)
  3. پیش‌فرض مرورگر

بنابراین، یک استایل درون خطی بیشترین اولویت را دارد، و استایل های خارجی و داخلی و پیش‌فرض‌های مرورگر را نادیده خواهد گرفت.


خود را به وسیله تمرینها امتحان کنید!


منابع آموزشی

  1. ↑ w3schools.com: How To Add CSS



برگرفته از «https://wikicod.ir/w/index.php?title=CSS:اضافه‌کردن_CSS&oldid=8186»