Omega Programming

CSS چگونه عمل می کند؟

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

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


(خارجی) External style sheet

  Internal style sheet(داخلی)

  Inline style(درون خطی)

External Style Sheet

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

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

یک style sheet می تواند در هر ویرایشگر متنی نوشته شود. و سپس با پسوند css ذخیره گردد. فایل css نباید شامل تگ html باشد. فایل mystyle.css در زیر نمایش داده شده است:

 

body {
    background-color: lightblue;
}

 

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

Internal Style Sheet

یک style داخلی زمانی مفید است که بخواهیم به تمام عناصر موجود در یک صفحه style، html یکسانی را اختصاص دهیم. شما style داخلی را با برچسب style در قسمت head می توانید معرفی کنید.

<head>
<style type="text/css" >
body {

background-color:lightgrey;

}
h1   {

color:blue;

}
p    {

color:green;

}
</style>
</head>

Inline Style sheet

یک style درون خطی برای زمان هایی مناسب است که بخواهیم یک style را منحصرا به یک عنصر html نسبت دهیم. برای استفاده از style درون خطی شما از خصیصه های style در تگ های مناسب استفاده می کنید. خصیصه style می تواند حاوی هر ویژگی CSS باشد. مثال نشان می دهد که چگونه رنگ متن یک تیتر را تغییر دهید.

<h1 style="color:blue; margin-left: 20px">This is a Heading</h1>

اولویت انواع style ها
درصورتی که برای یک عنصر html هر سه نوع style تعریف شده باشد اولویت با style درون خطی است. سپس style داخلی و اولویت آخر مربوط به style خارجی می باشد. به این معنی که اگر برای یک تگ html سه نوع style معرفی شد خصیصه های مربوط به استایل درون خطی روی آن اعمال می شود. یا اگر استایل خارجی و استایل داخلی معرفی شده باشد ویژگی های استایل داخلی روی آن تگ اعمال خواهد شد.

 

شما اینجا هستید: صفحه ی اصلی آموزش ها آموزش CSS آموزش CSS CSS چگونه عمل می کند؟