Selector

 

شما مي تواني چند Selector را گروه بندي كنيد. و هر Selector را با ويرگول از Selector بعدي جدا كنيد.در مثال زير ما همه ي Header ها را در يك گروه قرار داده ايم. هر عنصر Header سبز رنگ مي باشد.

h1,h2,h3,h4,h5,h6

{

color: green

}

Class Selector

با class selector شما مي توانيد استايل هاي مختلفي را براي در يك صفحه ي اچ تي ام ال تعريف كنيد. براي مثال شما مي خواهيد در سند خود دو نوع سطر بندي داشته باشيد. يكي راست چين (Right Align) و ديگري وسط چين (Left Align). در اينجا ما به شما طريقه ي ايجاد چنين سندي را آموزش خواهيم داد:

p.right {text-align: right}

p.center {text-align: center}

شما بايد در قسمت Body كد اچ تي ام ال سند خود تغييرات زير را با توجه Style بالا انجام دهيد. 

<p class=»right»>

This paragraph will be right-aligned.

</p>

<p class=»center»>

This paragraph will be center-aligned.

</p>

نكته: تنها يك Class ميتواند عنصر HTML را تعريف كنيد. مثال زير اشتباه است: 

<p class=»right» class=»center»>

This is a paragraph.

</p>

در صورتي كه شما بخواهيد تمام عناصر HTML را با يك فرمان CSS تعريف كنيد بايد به شكل زير عمل كنيد: 

.center {text-align: center}

در كد زير هر دو عنصر p و h1 توسط گزينش گر (Selector) «.center« تعريف شده اند. 

ID Selector

Id selector با class selector متفاوت عمل مي كند. هنگامي يك Class Selector براي تعريف چندين عنصر در يك صفحه به كار مي رود و id selector براي تعريف تنها يك عنصر به كار مي رود.

شما ميتوانيد براي Selector خود يك آي در نظر بگيريد و سپس در كد HTML خود از آن استفاده كنيد.

نكته:هر ID بايد در يك سند يكتا باشد و ID ديگري به همان نام نمي توان تعريف كرد.

در Style زير عنصر p اي كه آي دي para1 داشته باشد تعريف مي گردد:

p#para1

{

text-align: center;

color: red

}

The style rule below will match the first element that has the id value «wer345»:

*#wer345 {color: green}

دستور بالا با عنصر h1 نيز مطابقت مي كند:

<h1 id=»wer345″>Some text</h1>

 يا با عنصر p نيز مطابقت ميكند

<p id=»wer345″>Some text</p>

دستور زير با عنصر p كه كه آي دي «wer345» داشته باشد مطابقت مي كند

p#wer345 {color: green}

دستور بالا با عنصر h1 مطابقت نمي كند:

<h2 id=»wer345″>Some text</h2>

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

%d وب‌نوشت‌نویس این را دوست دارند: