محتوای برگه های استایل در CSS

اجازه دهید کمی در مورد کدهای درون برگه های استایل صحبت کنیم. کدهای زیر را در نظر بگیرید:

h1 {color: maroon;}
body {background: yellow;}

استایل هایی شبیه این، بخش عمده ی برگه های استایل را تشکیل می دهند. ما به ندرت می توانیم سندی پیدا کنیم که عنصر style آن حاوی هیچ دستور CSS نباشد، اما این امکان وجود دارد که یک لیست ساده از دستورات @import داشته باشیم که دستورات CSS حقیقی در داخل آنها نباشد.در ادامه ی این مقاله قصد داریم به بررسی چند نکته بپردازیم.

استفاده از کدهای اچ تی ام ال در برگه های استایل

ما نمی توانیم در داخل یک برگه ی استایل، کدهای اچ تی ام ال(html) را قرار دهیم. اما کامنت های HTML از این قاعده مستثنی هستند. بنابراین ما مجاز هستیم که از کامنت های اچ تی ام ال، در داخل عنصر style استفاده کنیم. به مثال زیر توجه کنید:

<style type="text/css"><!--
h1 {color: maroon;}
body {background: yellow;}
--></style>

ساختار دستورات CSS

هر کد CSS از دو بخش اصلی تشکیل می شود: سلکتور، و بلوک دستورات. بلوک دستورات، از یک یا چند دستور تشکیل می شود؛ و هر دستور، از یک ویژگی(property) و یک مقدار(value) تشکیل می شود. هر برگه ی استایل در CSS، از یک سری کد سی اس اس تشکیل می شود؛ تصویر 1.7 اجزاء مختلف یک کد سی اس اس(rule) را نشان می دهد:

(تصویر 1.7)

سلکتور(گزینشگر)، که در سمت چپ کد سی اس اس قرار می گیرد، مشخص می کند که کدام بخش از سند(document) باید تحت تاثیر دستورات داخل آکولادها قرار گیرند. در تصویر 1.7، عناصر h1 در سند مورد انتخاب قرار می گیرند. اگر سلکتور ما به جای h1 برابر با p بود، آنوقت تمام عناصر پاراگراف یا p در سند مورد انتخاب قرار می گرفتند. در سمت راست دستور سی اس اس، بلوک دستورات قرار می گیرد؛ که خود از یک یا چند دستور تشکیل می شود. هر یک از این دستورات، از یک ویژگی و یک مقدار(value) سی اس اس تشکیل شده است. در تصویر 1.7 بلوک دستورات از دو دستور تشکیل شده است. اولین دستور، مشخص می کند که برای عناصر انتخاب شده توسط سلکتور، رنگ متن(color) قرمز(red) باشد. و دومین دستور، مشخص می کند که عناصر انتخاب شده توسط سلکتور، دارای پس زمینه ای(background) به رنگ زرد(yellow) باشند.

بنابراین، با استفاده از کدهای سی اس اس بالا، تمام عناصر h1 در سند که توسط سلکتور انتخاب شده اند، رنگ متن شان قرمز می شود و دارای پس زمینه ای به رنگ زرد می شوند.

استفاده از پیشوندهای مرورگر در CSS

گاهی اوقات کدهایی را در  CSS مشاهده می کنیم که قبل از آن از یک علامت خط تیره(-) و یک برچسب استفاده شده است، مانند دستور زیر:

-o-border-image

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

(جدول 1.1، برخی از پیشوندهای مرورگر)

همان طور که جدول 1.1 نشان می دهد، استفاده از یک پیشوند مرورگر، به این صورت است که ابتدا یک خط تیره می گذاریم، سپس از یک برچسب استفاده می کنیم، سپس از یک خط تیره ی دیگر استفاده می کنیم. اما تعدادی از پیشوندها، به اشتباه اولین خط تیره را حذف می کنند. این پیشوندها راهی هستند برای مرورگرها تا ویژگی ها و قابلیت های جدید خود را تست کنند.

به کار بردن فاصله های سفید در CSS

سی اس اس به طور کلی نسبت به فاصله های سفید بین دستورات حساس نیست. به هر ترتیبی که از فاصله های سفید بر روی کاراکترها در CSS استفاده کنیم، این کاراکترها برای اینکه مورد تجزیه قرار گیرند، به یک عبارت بدون فاصله ی سفید تبدیل می شوند. بنابراین، ما می توانیم دستور CSS فرضی rainbow را به صورت های زیر بنویسیم:

rainbow: infrared red orange yellow green blue indigo violet ultraviolet;

rainbow:
infrared red orange yellow green blue indigo violet ultraviolet;

rainbow:
infrared
red
orange
yellow
green
blue
indigo
violet
ultraviolet
;

این جداسازی را به هر طریقی که فکر کنید، می توانیم انجام دهیم. تنها محدودیتی که وجود دار این است که از کاراکترهای جدا کننده، مانند فاصله ی خالی(شاید منظور کاراکتر   باشد) یا تب(tab) یا خط جدید(newline) به تنهایی یا به صورت ترکیبی، بعنوان فاصله ی سفید استفاده شود. به طریقی مشابه با آنچه گفته شد، ما می توانیم دسته کدهای سی اس اس را با استفاده از فاصله ی سفید، به هر طریقی که بخواهیم فرمت دهی یا شکل دهی کنیم. در مثال زیر، پنج مورد از روش های بیشمار شکل دهی کدهای CSS را مشاهده می کنید:

html{color:black;}
body {background: white;}
p {
color: gray;}
h2 {
color : silver ;
}
ol
{
color
:
silver
;
}

 همان طور که در دستور اول، در خط 1 مشاهده می کنید، تمام فاصله های سفید از این دستور حذف شده اند. درواقع این کد، یک کد CSS خلاصه شده است. یک کد CSS خلاصه شده، به کدی گفته می شود که تا جای امکان  فاصله های سفید آن حذف شده باشند. در مثال بالا،کدهای  پس از دو دستور اول، فاصله های سفیدشان به تدریج بیشتر و بیشتر می شود تا جایی که در آخرین دستور، هر تجزیه ای که امکان آن وجود داشته است، انجام گردیده است. تمام این روش ها، صحیح هستند؛ بنابراین ما باید از فرمتی استفاده کنیم که معنای بیشتری دارد-یعنی ساده تر بتوانیم آن را با چشم بخوانیم. استفاده از فاصله های سفید در برخی مکان ها واقعاً ضروری است. بهترین مثالش این است: مثلا وفتی که داریم از یک مقدار  که از چند کلمه تشکیل شده است، برای یک دستور CSS استفاده می کنیم، باید از فاصله های سفید برای جداسازی آنها استفاده کنیم، مانند مثال فرض rainbow در بالا، یا مانند مثال زیر:

p{border:1px solid red;}

 همان طور که در مثال بالا مشاهده می کنید، ویژگی border از یک مقدار تشکیل شده است که سه کلمه دارد. و با فاصله های سفید از یکدیگر جدا شده اند.

{module کمک نقدی به نویسنده}