قدم قبلی >< قدم بعدی
برگه سبک خارجی  (External style sheet)
External style sheet & Internal style sheet

 

هنگامی که یک مرورگر یک برگه سبک یا style sheet را می خواند، سند HTML را با توجه به اطلاعات موجود در صفحه سبک قالب بندی می کند.

سه راه برای وارد کردن کد CSS

سه راه برای قرار دادن یک برگه سبک (style sheet) وجود دارد:

  • برگه سبک خارجی  (External style sheet)  
  • برگه سبک داخلی  (Internal style sheet)  
  • سبک درونی

برگه سبک خارجی  (External style sheet)  

با یک برگه سبک خارجی  (External style sheet) ، می توانید فقط با تغییر یک فایل ظاهر یک وب سایت را به طور کامل تغییر دهید!

هر صفحه باید شامل ارجاع به فایل برگه سبک خارجی  (External style sheet)  در داخل عنصر<link> باشد . عنصر<link> در بخش < head > قرار می گیرد :

مثال:

<html>

بعد از اجرای این کد در صفحه خروجی این پیغام را خواهیم دید:

This is a heading

This is a paragraph.

 

یک برگه سبک خارجی (External style sheet) را می توان در هر ویرایشگر متن نوشت. این فایل نباید حاوی تگ های HTML باشد. فایل سبک باید با یک پسوند css ذخیره شود.

در اینجا می توانید ببینید که یک فایل mystyle.css چگونه به نظر می رسد:

توجه: بین مقدار ی که برای صفت می خواهید قرار دهید و واحدسنجش space یا فضا اضافه نکنید (مانند margin-left: 20 px؛). شکل صحیح نوشتن این کد به این شکل ۳است: margin-left: 20px؛

برگه سبک داخلی (Internal style sheet)

اگر یک صفحه تنها دارای یک سبک منحصر به فرد است، می توان از یک برگه سبک داخلی (Internal style sheet) استفاده کرد.

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

مثال:

بعد از اجرای این کد در صفحه خروجی اجرا این پیغام را خواهیم دید:

This is a heading

This is a paragraph.

سبک های درونی

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

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

مثال زیر نشان میدهد که چگونه رنگ و حاشیه چپ یک عنصر <h1> را تغییر دهید:

مثال:

بعد از اجرای این کد در صفحه خروجی این پیغام را خواهیم دید:

This is a heading

This is a paragraph.

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

صفحات سبک چندگانه

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

مثال:

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

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

اگر سبک داخلی پس از پیوند به برگه سبک خارجی (External style sheet) تعریف شود، عناصر <h1> “نارنجی” خواهند بود:

مثال:

بعد از اجرای این کد در صفحه خروجی این پیغام را خواهیم دید:

This is a heading

The style of this document is a combination of an external stylesheet, and internal style

 

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

مثال:

بعد از اجرای این کد در صفحه خروجی این پیغام را خواهیم دید:

This is a heading

The style of this document is a combination of an external stylesheet, and internal style

 

سفارش آبشار

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

تمام سبک ها در یک صفحه به وسیله قوانین زیر در یک برگه سبک جدید “مجازی”  پشت سر هم چیده می شوند، که شماره اول دارای بالاترین اولویت است:

  • سبک درونی (درون عنصر HTML)
  • ورق های خارجی و داخلی (در بخش سر)
  • مرورگر به طور پیش فرض

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

گام قبلی >< گام بعدی