چگونگی استفاده از css در سند html

آموزش سی اس اس

خسروی10 اردیبهشت, 1397

چگونگی استفاده از css در سند html

هنگامی که یک مرورگر یک شیوه نامه (style sheet) را می خواند، سند بر اساس اطلاعات موجود در شیوه نامه قالب بندی خواهد شد.

3 شیوه برای درج css

شیوه نامه خارجی (External style sheet)
شیوه نامه داخلی (Internal style sheet)
استایل خطی (Inline style)

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

 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

یک شیوه نامه خارجی را میشه با هر برنامه ویرایش متنی نوشت.این فایل نباید شامل هیچ گونه تگ html باشد.فایل شیوه نامه باید با یک پسوند css. ذخیره شود.

در پایین مثالی از یک شیوه نامه خارجی نشان می دهیم:

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

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

مثلا:

margin-left: 20 px;

شکل صحیح نوشتن :

margin-left: 20px;

Internal Style Sheet
یک شیوه نامه درونی باید زمانی مورد استفاده قرار بگیرد که بخواهیم فقط به یک سند یا پرونده استایل منحصر به فرد و متفاوتی اعمال کنیم.
شیوه نامه داخلی رو را در قسمت head یک صفحه html و داخل تگ <style> تعریف می کنیم ، مثلا :

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Inline Styles
سبک خطی ، خیلی از مزیت های یک شیوه نامه را ندارد.این متد خیلی به ندرت استفاده می شود.برای به کار بردن این شیوه ،‌خصوصیات استایل رو به تگ مربوطه اضافه می کنید.خصوصیات استایل شامل هر پراپرتی css می باشد.

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

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Multiple Style Sheets ( شیوه نامه های ترکیبی )
اگر از پراپرتی های یکسان برای selector یکسان در شیوه نامه های متفاوت استفاده کنید ، مقادیر از شیوه نامه خاص تر و مشخص تر ارث بری خواهد شد.
برای مثال فرض کنید که در یک شیوه نامه خارجی خصوصیات زیر را برای h1 selector نوشته شده :

h1 {
    color: navy;
    margin-left: 20px;
}

بعد فرض کنید که در یک شیوه نامه داخلی هم همین خصوصیت برای تگ h1 نوشته شده :

h1 {
    color: orange;  
}

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

color: orange;
margin-left: 20px;

خصوصیت left margin از شیوه نامه خارجی به ارث می رسد و خصوصیت رنگ با شیوه نامه داخلی جایگزین می شود.

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

در داخل یک عنصر html
در قسمت head یک صفحه html
در یک فایل css خارجی

نکته : چند شیوه نامه خارجی را می توان به یک سند html ارجاع داد.

اولویت آبشاری :
کدام یک از استایل ها اعمال خواهد شد وقتی که بیشتر از یک استایل برای یک عنصر html وجود دارد؟
به طور کلی ما میتونیم بگیم که همه استایل ها به صورت آبشاری در یک شیوه نامه جدید مجازی با قواعد زیر اجرا میشوند و شماره چهارم بیشترین اولویت را دارد.

پیش فرض مرورگر Browser default
شیوه نامه خارجیExternal style sheet
شیوه نامه داخلی در قسمت head
استایل خطی (Inline style) در داخل یک عنصر html

بنابراین روش Inline style در داخل یک عنصر html دارای بالاترین اولویت است به این معنی که استایل تعریف شده در این قسمت در شیوه نامه داخلی و خارجی و پیش فرض مرورگر بازنویسی خواهد شد.

نکته :اگر تگ linq شیوه نامه خارجی را بعد از شیوه نامه داخلی که در قسمت head تعریف شده باشد نوشت ، استایل شیوه نامه خارجی بروی شیوه نامه داخلی بازنویسی خواهد شد.

تمامی مطالب توسط تیم سافت ساز ترجمه و جمع آوری می شود . منبع سافت ساز