چگونه CSS را پیاده سازی کنیم ؟

در این آموزش می خواهیم توضیح دهیم که CSS چگونه در مرورگر وب شما بارگذاری شده و پیاده سازی می شود .

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

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

سه راه برای قرار دادن یک استایل وارد شیت وجود دارد:


استایل شیت خارجی
استایل شیت داخلی
استایل درون خطی

استایل شیت خارجی
استایل شیت خارجی زمانی ایده آل است که آن استایل در صفحات زیادی استفاده شود. با استفاده از استایل شیت های خارجی، شما می توانید ظاهر سایت را با تغییر یک فایل ، تغییر دهید. هر صفحه باید استفاده از برچسب <link> به استایل شیت لینک شود. برچسب <link> در داخل بخش headقرار می گیرد.

 

استایل شیت های خارجی را می توان در هر ویرایشگر متن نوشت. فایل نباید شامل تگ های HTML باشد. استایل شیت های شما باید با فرمت .css ذخیره شده باشد. نمونه یک فایل استایل شیت در زیر نشان داده شده است:

 

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

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

 

استایل درون خطی
استایل درون خطی بسیاری از مزایای استایل شیت ها را با ترکیب محتوا بهنگام ارائه ، از دست می دهد. از این روش کمتر استفاده کنید!
برای استفاده از استایل درون خطی از صفات استایل در تگ مربوطه استفاده کنید. م صفات استایل می تواند حاوی هر یک از خواص CSS باشد. نمونه زیر چگونگی تغییر رنگ و حاشیه سمت چپ یک پاراگراف را نشان می دهد :

 

استایل شیت های چندگانه
اگر برخی از خواص برای انتخابگری یکسان در استایل شیت های متفاوت تنظیم شده باشد ، مقادیر ، از استایل شیت مشخص تری به ارث خواهند برد.
به عنوان مثال ، یک استایل شیت خارجی این خواص را برای انتخابگر h3 دارد :

 

و یک استایل شیت داخلی این خواص را برای انتخابگر h3 دارد :

 

اگر صفحه با استایل شیت داخلی همچنین به استایل شیت خارجی لینک شده باشد خواص h3 مانند زیر خواهد بود:

 

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

استایل ها می توانند در موارد زیر مشخص شوند:


در داخل یک عنصر HTML
در داخل بخش head صفحه HTML
در یک فایل CSS خارجی

نکته: حتی چند شیوه نامه خارجی را می توان در داخل یک سند HTML ارجاع داد.
دستور آبشاری کردن چه استایلی ، زمانی که بیش از یک استایل مشخص شده برای یک عنصر HTML وجود دارد ، استفاده خواهد شد ؟ به طور کلی می توان گفت با قوانین زیر همه استایل ها به یک شیوه نامه جدید “مجازی” ، “آبشاری خواهند شد” ، که در آن شماره چهار بالاترین اولویت را دارد:

پیش فرض مرورگر


استایل شیت خارجی
استایل شیت داخلی (در بخشhead)
استایل درون خطی (در داخل یک عنصرHTML)

بنابراین، استایل درون خطی (در داخل یک عنصر HTML ) بالاترین اولویت را دارد ، که به این معنی است که یک استایل تعریف شده در داخل تگ <head> و یا در یک استایل شیت خارجی، و یا در یک مرورگر (یک مقدار پیش فرض) را ، باطل می کند.
توجه: اگر لینک به استایل شیت خارجی پس از استایل شیت داخلی در HTML قرار گرفته باشد ، استایل شیت های خارجی ، استایل های داخلی را زیر پا خواهند گذاشت!

چگونه CSS را پیاده سازی کنیم ؟
۵ (۱۰۰%) ۱ رای

(434 نوشته)

C# Programmer , Web Design And Developer , MVC , ASP.NET

فکر شما چیست؟

آدرس ایمیل شما منتشر نخواهد شد. بخشهای موردنیاز علامتگذاری شدهاند *

حاصل جمع اعداد را وارد کنید : *