آموزش CSS - جایگاه تعریف در css

چهار روش برای ارتباط استایل‌ها با سند HTML وجود دارد. متداول‌ترین روش‌ها استفاده از CSS درون خطی (inline CSS) و CSS خارجی (External CSS) هستند.

جایگاه تعریف با عنصر <style>

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

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         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>

ویژگی‌ها

ویژگی‌های مرتبط با عنصر <style> به شرح زیر هستند −

ویژگی	مقدار	توضیحات
type	text/css	زبان برگ سبک را به عنوان یک نوع محتوا (نوع MIME) مشخص می‌کند. این ویژگی اجباری است.
media	صفحه نمایش تلویزیون پروژکتور دستی چاپ برل شنیداری همه	دستگاهی را که سند بر روی آن نمایش داده می‌شود، مشخص می‌کند

ویژگی

مقدار

توضیحات

type

text/css

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

media

صفحه نمایش

تلویزیون

پروژکتور

دستی

چاپ

برل

شنیداری

همه

دستگاهی را که سند بر روی آن نمایش داده می‌شود، مشخص می‌کند

جایگاه تعریف به صورت درون خطی (inline):

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

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

ویژگی‌ها

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

در زیر، مثالی از CSS درون خطی بر اساس نحوه بالا آمده است −

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

جایگاه تعریف به صورت خارجی توسط عنصر <link> :

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

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

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

ویژگی‌ها

ویژگی‌های مرتبط با عنصر <style> به شرح زیر هستند −

ویژگی	مقدار	توضیحات
type	text/css	زبان را به عنوان یک نوع محتوا (نوع MIME) مشخص می‌کند. این ویژگی اجباری است.
href	URL	ادرس سند مربوطه را که می خواهیداستایل ها به ان اعمال شوند. این ویژگی اجباری است.
media	صفحه نمایش tty تلویزیون پروژکتور دستی چاپ برل شنیداری همه	دستگاهی را که سند بر روی آن نمایش داده می‌شود، مشخص می‌کند. مقدار پیش‌فرض همه است. این ویژگی اختیاری است.

ویژگی

مقدار

توضیحات

type

text/css

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

href

URL

ادرس سند مربوطه را که می خواهیداستایل ها به ان اعمال شوند. این ویژگی اجباری است.

media

صفحه نمایش

tty

تلویزیون

پروژکتور

دستی

چاپ

برل

شنیداری

همه

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

مثال

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


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

mystyle.css را در هر سند HTML به شکل زیر می توانید اضافه کنید

<head>
   <link type = "text/css" href = "mystyle.css" media = " all" />
</head>

جایگاه تعریف با import@

از import@ برای وارد کردن یک سند به سبک ارتباط خارجی به شکل مشابه با عنصر <link> استفاده می‌شود. در زیر، نحوه عمومی استفاده از import@ آمده است.

<head>
   @import "URL";
</head>

اینجا URL آدرس فایل سند سبک با قوانین استایل است. شما می‌توانید از یک نحو دیگر نیز استفاده کنید −

<head>
   @import url("URL");
</head>

مثال

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

<head>
   @import "mystyle.css";
</head>

قوانین ارتباط استایل هادر CSS

ما چهار روش برای اضافه کردن استایل ها ی سند به یک سند HTML بررسی کرده‌ایم. د رادامه قوانین ارتباط استایل هادر CSS مورد بررسی قرار گرفته است

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

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

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

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

توضیحات CSS

بسیاری از مواقع، شما ممکن است نیاز داشته باشید که توضیحات اضافی را در بلوک‌های برگ سبک‌های خود قرار دهید. بنابراین، بسیار آسان است هر قسمتی را در برگ سبک نظر بگذارید. می‌توانید توضیحات خود را به سادگی داخل /*.....این یک توضیح در برگ سبک است.....*/ قرار دهید.

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

مثال

<!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>

انتخابگرها - درس قبلی

درس بعدی - واحدهای اندازه گیری