آموزش قوانین CSS

saber

4 سال پیش

امتیاز دهید post

قوانین CSS

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش قوانین CSS خواهیم پرداخت.

چهار روش برای مرتبط کردن سبک ها با سند HTML وجود دارد. متداول ترین روش ها CSS درون خطی و CSS خارجی است.

Embedded CSS – عنصر <style>

می توانید قوانین CSS خود را با استفاده از عنصر <style> در یک سند HTML قرار دهید. این تگ در داخل تگ <head> … </head> قرار می گیرد. قوانینی که با استفاده از این نحو تعریف شده اند برای کلیه عناصر موجود در سند اعمال می شوند.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;style type = "text/css" media = "all"&gt;
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      &lt;/style&gt;
   &lt;/head&gt;   
   &lt;body&gt;
      &lt;h1&gt;This is a heading&lt;/h1&gt;
      &lt;p&gt;This is a paragraph.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

body {

background-color: linen;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

خروجی به شکل زیر می باشد.

This is a heading

This is a paragraph.

ویژگی ها

ویژگی های مرتبط با عناصر <style> هستند

ویژگی	مقدار	توضیحات
type	text/css	زبانشیت استایل را به عنوان نوع محتوا (نوع MIME) مشخص می کند. این ویژگی لازم است.
media	screen tty tv projection handheld print braille aural all	دستگاهی را که سند در آن نمایش داده می شود مشخص می کند. مقدار پیش فرض all است. این یک ویژگی اختیاری است.

ویژگی

مقدار

توضیحات

type

text/css

زبانشیت استایل را به عنوان نوع محتوا (نوع MIME) مشخص می کند. این ویژگی لازم است.

media

screen

tty

projection

handheld

braille

aural

all

دستگاهی را که سند در آن نمایش داده می شود مشخص می کند. مقدار پیش فرض all است. این یک ویژگی اختیاری است.

CSS درون خطی – ویژگی استایل

برای تعریف قوانین استایل می توانید از ویژگی سبک هر عنصر HTML استفاده کنید. این قوانین فقط برای آن عنصر اعمال می شود.

&lt;element style = "...style rules...."&gt;

1	<element style = "...style rules....">

ویژگی ها

ویژگی	مقدار	توضیحات
style	style rules	مقدار ویژگی استایل، ترکیبی از اعلان های سبک است که با نقطه ویرگول از هم جدا شده اند (؛).

مثال

در زیر نمونه CSS درون خطی بر اساس نحو فوق آورده شده است –

&lt;html&gt;
   &lt;head&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;h1 style = "color:#36C;"&gt; 
         This is inline CSS 
      &lt;/h1&gt;
   &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

This is inline CSS

</h1>

</body>

</html>

خروجی به صورت زیر می باشد:

This is inline CSS

CSS خارجی – عنصر <link>

از عنصر <link> می توان برای وارد کردن یک فایل استایل خارجی در سند HTML استفاده کرد.

یک شیوه نامه خارجی یک فایل متنی جداگانه با پسوند .css است. شما تمام قوانین استایل را در این فایل متنی تعریف می کنید و سپس می توانید با استفاده از عنصر <link> این فایل را در هر سند HTML قرار دهید.

در اینجا نحو عمومی شامل فایل CSS خارجی است

&lt;head&gt;
   &lt;link type = "text/css" href = "..." media = "..." /&gt;
&lt;/head&gt;

<head>

</head>

ویژگی ها

ویژگی های مرتبط با عناصر <style> –

ویژگی

مقدار

توضیحات

type

text css

زبانشیت استایل را به عنوان نوع محتوا (نوع MIME) مشخص می کند. این ویژگی لازم است.

href

URL

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

media

screen

tty

projection

handheld

braille

aural

all

دستگاهی را که سند در آن نمایش داده می شود مشخص می کند. مقدار پیش فرض all است. این یک ویژگی اختیاری است.

مثال

یک فایل شیت استایل ساده با نام mystyle.css را در نظر بگیرید که دارای قوانین زیر است

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

h1, h2, h3 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase;

}

اکنون می توانید این فایل mystyle.css را به صورت زیر در هر سند HTML قرار دهید –

&lt;head&gt;
   &lt;link type = "text/css" href = "mystyle.css" media = " all" /&gt;
&lt;/head&gt;

<head>

</head>

CSS وارد شده
import@ برای وارد کردن یک صفحه سبک خارجی به روشی مشابه عنصر <link> استفاده می شود. در اینجا نحو عمومی قانونimport آورده شده است.

&lt;head&gt;
   @import "URL";
&lt;/head&gt;

<head>

@import "URL";

</head>

در اینجا URL فایل استایل است که دارای قوانین استایل است. می توانید از نحو دیگری نیز استفاده کنید –

&lt;head&gt;
   @import url("URL");
&lt;/head&gt;

<head>

@import url("URL");

</head>

مثال

در زیر مثالی آورده شده است که به شما نشان می دهد چگونه یک فایل شیت استایل را به سند HTML وارد کنید –

&lt;head&gt;
   @import "mystyle.css";
&lt;/head&gt;

<head>

@import "mystyle.css";

</head>

مهمترین قوانین CSS

ما چهار روش برای گنجاندن قوانین صفحه سبک در یک سند HTML را مورد بحث قرار داده ایم. این قانون برای نادیده گرفتن هر قانون Style Sheet است.

هر شیت استایل درون خطی از اولویت بالاتری برخوردار است. بنابراین، این قانون تعریف شده در تگ ها <style> … </style> یا قوانین تعریف شده در هر فایل شیت استایل خارجی را لغو خواهد کرد.
هر قانونی که در تگ <style> … </style> تعریف شود ، قوانین تعریف شده در هر فایل شیت استایل خارجی را لغو می کند.
هر قانونی که در فایل شیت استایل خارجی تعریف شود کمترین اولویت را دارد و قوانین تعریف شده در این فایل فقط زمانی اعمال می شوند که دو قانون فوق اعمال نشوند.

مدیریت مرورگرهای قدیمی

هنوز بسیاری از مرورگرهای قدیمی هستند که از CSS پشتیبانی نمی کنند. بنابراین، هنگام نوشتن CSS جاسازی شده خود در یک سند HTML ، باید مراقبت کنیم. قطعه زیر نشان می دهد که چگونه می توانید از برچسب های نظر برای مخفی کردن CSS از مرورگرهای قدیمی استفاده کنید –

&lt;style type = "text/css"&gt;
   &lt;!--
      body, td {
         color: blue;
      }
   --&gt;
&lt;/style&gt;

<!--

body, td {

color: blue;

}

-->

</style>

نظرات CSS

در بسیاری از مواقع، ممکن است لازم باشد نظرات اضافی را در بخش استایل خود قرار دهید. بنابراین ، بسیار آسان است که هر بخش را در شیت استایل نظر دهید. می توانید نظرات خود را در داخل /*…..this is a comment in style sheet…..*/ قرار دهید

شما می توانید از / * …. * / برای نظر دادن در مورد بلوک های چند خطی به همان روشی که در زبان های برنامه نویسی C و C ++ انجام می دهید استفاده کنید.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;style&gt;
         p {
            color: red;
            /* This is a single-line comment */
            text-align: center;
         }
         /* This is a multi-line comment */
      &lt;/style&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Hello World!&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: red;

/* This is a single-line comment */

text-align: center;

}

/* This is a multi-line comment */

</style>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

خروجی به صورت زیر می باشد:

Hello World!

1	Hello World!

منبع.

لیست جلسات قبل آموزش CSS

امتیاز دهید post

نویسنده مطلب saber

آموزش قوانین CSS

قوانین CSS

Embedded CSS – عنصر <style>

This is a heading

ویژگی ها

CSS درون خطی – ویژگی استایل

ویژگی ها

مثال

This is inline CSS

CSS خارجی – عنصر <link>

ویژگی ها

مثال

مثال

مهمترین قوانین CSS

مدیریت مرورگرهای قدیمی

نظرات CSS

مثال

لیست جلسات قبل آموزش CSS

دیدگاه شما

بدون دیدگاه

قوانین CSS

Embedded CSS – عنصر <style>

This is a heading

ویژگی ها

CSS درون خطی – ویژگی استایل

ویژگی ها

مثال

This is inline CSS

CSS خارجی – عنصر <link>

ویژگی ها

مثال

مثال

مهمترین قوانین CSS

مدیریت مرورگرهای قدیمی

نظرات CSS

مثال

لیست جلسات قبل آموزش CSS

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه