در سی اس اس (CSS) نیز ساختار کلی به این شکل است:

selector {
  property:value;
}

مانند:

p {
  background:red;
}

در بالا به متونی که خارج از علامت آکولاد قرار دارند سلکتور (selector = انتخابگر) می گویند. زیرا شما با استفاده از آنها، از داخل سی اس اس می توانید یک المنت اچ تی ام ال را انتخاب کنید و به آن استایل بدهید (style به دستورات سی اس اس یا همان property و value در مثال بالا گفته می شود).

سلکتورها انواع مختلفی دارند:
- آی دی (ID selector) مانند: section#
- کلاس (class selector) مانند: section.
- المنت (contextual selector) مانند: p span
- اتریبیوت (attribute selector) مانند: [p[title
- سودوکلاس ها (Pseudo-classes = کلاس های کاذب) که برای اضافه کردن افکت های (effect) خاص تصویری به بعضی سلکتورها استفاده می شوند. مانند زیر:

selector:pseudo-class {
  property:value;
}

در زیر مثال هایی از سودوکلاس ها آورده ایم:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

focus: در input:focus که فیلدی را که مکان نما داخلش است را انتخاب می کند.
(lang(language: در (p:lang(it
first-child: در p:first-child که به اولین المنت های p در داخل المنت والدش اشاره می کند. در مثال زیر المنت های p نقش فرزند و المنت div نقش والد را دارد.

First
Second
Third

- سودوالمنت ها (Pseudo-elements = المنت های کاذب) که برای اضافه کردن افکت های (effect) خاص تصویری به بعضی سلکتورها استفاده می شوند. مانند first-line: یا after: در مثال های زیر:

p:first-line { font-variant: small-caps; }
a:link:after { content: " (" attr(href) ")"; }

تفاوت pseudo-class و pseudo-element

سودوکلاس ها دستوراتی محدود به خود المنت ها هستند. آنها المنت ها را هدف می گیرند. برای مثال تعیین می کنید زمانی که موس روی المنتی برود، چه اتفاقی بیفتد. در سودوکلاس ها اهمیتی وجود ندارد که داخل المنت ها چه نوشته است.

اما سودوالمنت ها، زیر المنت ها را هدف می گیرند و جزئی تر هستند. مثلا با استفاده از آنها می توانید تعیین کنید حرف اول داخل یک المنت بزرگ نوشته شود. یا متن خط اول یک المنت به رنگ خاصی در بیاید.

در زیر مثال هایی از سودوالمنت ها آورده ایم:

first-letter: در p:first-letter که اولین حرف را در المنت های

هدف می گیرد.
first-line: در p:first-line که به اولین خط در المنت های

در اچ تی ام ال اشاره می کند.
before: در p:before
after: در p:after

Style attribute: معنی تحت الفظی آن «صفت های استایلی» است. گفتیم که استایل به دستورات سی اس اس (CSS) گفته می شود. منظور از «استایل اتریبیوت» همان استایل هایی هستند که به عنوان اتریبیوت داخل المنت های HTML داده می شوند. مثلا:

اتریبیوت (attribute = صفت): برای توضیح آسان تر مثال می زنیم.

Nardebaan

در مثال بالا به هر یک از href، title، target، id، class و style ها اتریبیوت می گویند. هر یک از اینها صفتی از المنت a هستند. در سی اس اس با اتریبیوت های id و کلاس بسیار کار می کنیم. اما می توانید با دیگر اتریبیوت ها نیز کار کنید. مانند مثال های زیر:

[title] {
color:blue;
}

کد بالا تمام المنت هایی که دارای اتریبیوت title باشند را هدف می گیرد.

[title=W3Schools] {
border:5px solid green;
}

کد بالا تمام المنت هایی که دارای title=W3Schools باشند را هدف می گیرد.

[title~=hello] { color:blue; }

این اتریبیوت، آنهایی را که داخل title شان کلمه hello داشته باشند را هدف می گیرد. مثلا title=good hello to you

[lang|=en] { color:blue; }

علامت پایپ (| = لوله = pipe) در زمان هایی که بین مقادیر علامت (- = hyphen = خط فاصله) وجود داشته باشد، تمام آنها را با مقدار داده شده مقایسه می کند. به عبارت دیگر دستور بالا چیزی مانند را هدف می گیرد.

input[type="text"] {
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"] {
width:120px;
margin-left:35px;
display:block;
}

دستورات بالا در زمانی که نخواهید به تمام المنت های فرم ها کلاس یا آی دی (id) بدهید بسیار مفید هستند.

توجه کنید که دستورات اتریبیوت، بعضی از سودوکلاس ها و سودو المنت ها در اینترنت اکسپلوررهای ۸ و قدیمی تر کار نمی کنند.

همان طور که دیدید، تمام این مقاله صرف توضیح اصطلاحات اولیه شد. در مقاله بعد به توضیح مفصل مبحث specificity خواهیم پرداخت.

عکس بالا روش های مختلف استایل دادن را نمایش می دهد. بر اساس قانون specificity، هر یک از سلکتورها وزن های مختلفی دارند. برای مثال وزن و اختصاصی بودن «id» از «کلاس» بیشتر است و «کلاس» از «المنت» ها. طریقه معمول برای اندازه گیری میزان specificity یک دستور سی اس اس آسان است: برای هر یک از سکلتورهای آن، یک امتیاز در نظر می گیریم و با جمع آنها میزان specificity یک دستور محاسبه می شود. بر این اساس امتیاز Style attribute هزار، id صد، کلاس معادل ۱۰ و المنت ها مساوی ۱ است.

در ادامه ضمن مثال هایی، توضیح کامل این مبنا را آورده ایم.

در مثال بالا می بینید که دستور مورد نظر دارای یک id (معادل ۱۰۰ امتیاز)، یک کلاس (معادل ۱۰ امتیاز) و سه المنت (معادل سه امتیاز) است. پس مجموع امتیاز این دستور ۱۱۳ است.

عبارت ابتدایی دستور بالا به المنت body ای اشاره دارد که کلاس ie7 دارد. منظور از علامت تیلدی (~) که در بالا می بینید، این است که استایل را فقط به المنت h2 ای اعمال کن که در اچ تی ام ال بعد از یک body.ie7 .col_3 h2 آمده باشد. برای توضیح بیشتر به اینجا مراجعه کنید. در مقالات آینده این علامت ها را مفصل توضیح خواهیم داد.

علامت ستاره (* = asterisk) در سی اس اس general selector (انتخابگر عمومی) نام دارد و دستوراتی که به آن داده شوند به تمام المنت های صفحه اعمال می شوند. برای مثال دستور زیر، رنگ بکگراند (background) تمام المنت های یک صفحه وب را آبی می کند:

* {
background:blue;
}

با توجه به اینکه * به تمام المنت های صفحه اشاره دارد، امتیاز صفر به آن تعلق می گیرد و در جمع بندی حساب نمی شود.

()not: به معنی این است که هر آنچه داخل پرانتز است را، انتخاب نکن! در مثال های زیر، خط اول تمام المنت های صفحه به جز المنت های div را انتخاب می کند. خط دوم هم به تمام المنت های صفحه که کلاس classname را نداشته باشند، اعمال می شود.

*:not(div)
*:not(.classname)

گرچه not تقریبا جزو Pseudo class ها محسوب می شود (علامت «:» دارد)، اما به خودی خود کمکی به دقیق تر (specific) شدن دستور نمی کند (به همین دلیل امتیاز ۱۰ خط خورده است و امتیاز صفر گرفته است). اما سلکتوری که داخل پرانتزش می آید در امتیازبندی حساب می شود.

دستوراتی که داخل اچ تی ام ال (HTML) داده می شوند ۱۰۰۰ امتیاز دارند و از تمامی دستورات قبلی مهم تر هستند.

«علامت بزرگتر» (>) که در بالا می بینید به معنای این است که المنت li سمت راست علامت بزرگتر، باید فرزند مستقیم ul در سمت چپ علامت باشد. برای درک بهتر مثال زیر را ببینید:

  
John 1
  
John 2
  John 3

div b { color: red; } /* every John is red */
div>b { color: red; } /* Only John 3 is red */

در مثال بالا می بینید که زمانی که از «علامت بزرگتر» استفاده کنید فقط آنهایی را هدف می گیرد که المنت سمت راستی (b) دقیقا فرزند مستقیم سمت چپی (div) باشد. اما اگر از علامت بزرگتر استفاده نکنید به معنای این است که دستور را به تمام المنت های b که از خاندان div هستند اعمال کند (دیگر فرقی نمی کند که b فرزند، نوه، نتیجه، نبیره یا ندیده div باشد :) )

اما هنوز یک گزینه دیگر برای سنگین تر و specific کردن وجود دارد: اضافه کردن important! به انتهای هر یک از استایل ها. می توانید امتیاز این دستور را ۱۰۰۰۰ بدانید. مانند زیر:

body div.page p#content {
  background:red !important;
}

دستور بالا امتیازی برابر ۱۰۱۱۲ را دارد (دو المنت + یک کلاس + یک آی دی + دستور ایمپورتنت). important! قوی ترین چیزی است که داریم. تنها راهی که می توانید دستوری قوی تر از دستور بالا بدهید اضافه کردن ایمپورتنت همراه با آی دی های بیشتر است. برای مثال امتیاز دستور زیر ۱۰۲۰۰ است.

#page #content {
background:blue !important;
}

در زیر مثال های بیشتری را می آوریم:

* { } /* 0 */
li { } /* 1 (one element) */
li:first-line { } /* 2 (one element, one pseudo-element) */
ul li { } /* 2 (two elements) */
ul ol+li { } /* 3 (three elements) */
h1 + *[rel=up] { } /* 11 (one attribute, one element) */
ul ol li.red { } /* 13 (one class, three elements) */
li.red.level { } /* 21 (two classes, one element) */
style='' /* 1000 (one inline styling) */
p { } /* 1 (one HTML selector) */
div p { } /* 2 (two HTML selectors) */
.sith { } /* 10 (one class selector) */
div p.sith { } /* 12 (two HTML selectors and a class selector) */
#sith { } /* 100 (one id selector) */
body #darkside .sith p { } /* 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1) */

یک حالت دیگر نیز وجود دارد. فرض کنید دو دستور امتیازی مشابه داشته باشند. در این زمان دستوری که پایین تر نوشته شده باشد قوی تر است. در مثال زیر بکگراند p آبی خواهد بود:

p {
background:red;
}
p {
background:blue;
}

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

#content h1 {
padding: 5px;
}

کد دوم دقیق تر و اختصاصی تر است و اجرا می شود.

چند نظر شخصی و توصیه هنگام کد نویسی:
- تعیین امتیاز برای سلکتورها یک قانون رسمی محسوب نمی شود و فقط روشی معروف برای درک آسانتر ماجرا است. برای مثال امتیاز ۱۵ کلاس می شود ۱۵۰. اما یک آی دی با ۱۰۰ امتیاز، همچنان از ۱۵ کلاس هم قوی تر است.

- بهتر است از important! هرگز استفاده نکنید. استفاده از آن می تواند مشکلات جدی ایجاد کند و دستوراتی را تولید کند که به هیچ وجه نمی توان آنها را تغییر داد. سعی کنید با اضافه کردن آی دی ها به مقدار لازم دستور را سنگین کنید ولی دست به important! نبرید.

- همیشه از حداقل تعداد سلکتورها استفاده کنید. نیازی نیست، در زمانی که لازم نباشد تعداد زیادی المنت و کلاس را پشت هم ردیف کنید.

- و در آخر: با توجه به اینکه آی دی از کلاس قوی تر است شاید بهتر باشد همیشه از کلاس استفاده کنید و آی دی را برای زمانی که بخواهید دستورات قوی بدهید کنار بگذارید. به این صورت که همیشه به جای آی دی به

نوشته شده در 30 بهمن 1391برچسب:,

| ساعت 20:43| توسط حسین رستمی زاده|