طراحی وب سایت

 

 

در اين جلسه از آموزش css با ساير گزينشگرهايي که در Css3 معرفي شده اند صحبت خواهيم کرد.

اگر دومين پست از آموزش css را خوانده ايد، با هم درمورد گزينشکرها صحبت کرديم

گفتيم که در css شش نوع گزينشگر براي انتخاب المنتها وجود دارد که يگي از ان ها کلاس هاي کاذب (pseudo-class) بودند، که اين سلکتورها براي نمايش رويدادهاي صفحه از جمله، کليک، هاور، فوکوس و ... استفاده مي شوند. در css کلاس هاي کاذب ديگري نيز وجود دارد که مربوط به طريقه انتخاب فرزندان (child) يک المنت پدراست. ما ميخواهيم در اين جلسه در مورد آن ها توضيح دهيم.

 

<ul>

 

 <li>Lang

 

 

 <li>HTML</li>

 

 

 <li>Javascript</li>

 

 </ul>

 

 </li>

 

 <li>Joomla</li>

 

 <li>Drupal</li>

15

 </ul>

16

 </li>

17

</ul>

حال اگر بخواهيم به هر يک از اين گزينه ها يک رنگ متفاوت اختصاص دهيم، چه ميکرديم؟ حتما براي هر يک class تعريف مي کرديم و رنگ مورد نظر را انتخاب مي کرديم. خب اين روش درست است اما اگر ندانيم class آن چيست چطور؟ اگر سايت دايناميک باشد، و اين اطلاعات بعدا اضافه شود 

 

last-child

حال به تعريف دقيقتر اين کلاس هاي کاذب مي پردازيم :

 

nth-child(n) و nth-last-child(n)

 

 

nth-child(n) : با استفاده از اين کلاس کاذب مي توان براي تک تک المنت هاي يک صفحه وب، بدون استفاده از id يا class براي آن ها يک استايل متفاوت تعيين کنيم.

 

به کد css زير دقت کنيد تا متوجه شويد چگونه ميتوانيم به هر يک از li هاي کد html بالا استايل متفاوت دهيم.

1

ul li {

2

 color: blue;

3

 font: 24px tahoma;

 

5

}

6

 

7

ul li:nth-child(1){color: red;}

8

ul li:nth-child(2){color: green;}

9

ul li:nth-child(1) li:nth-child(1){color: orange;}

10

ul li:nth-child(1) li:nth-child(2){color: brown;}

11

ul li:nth-child(1) li:nth-child(3){color: pink;}

12

ul li:nth-child(2) li:nth-child(1){color: gray;}

13

ul li:nth-child(2) li:nth-child(2){color: silver;}

14

 

البته در مروگر ie فقط از نسخه 9+ کار ميکند.

 

 

کلاس کاذب nth-last-child(n) برعکس nth-child(n) عمل ميکند، به اين صورت که از اخر به شمارش المنت ها ميپرداز.

اگر nth-last-child را جايگزين nth-child در کد css بالا کنيم نتيجه کد به شکل زير خواهد بود.

 

first-child و last-child

 

 

همانطور که از اسم کلاس ها معلومه first-child اولين فرزند از يک المنت پدر last-child آخرين فرزند از يک المنت پدر رو انتخاب ميکنند.

کد css زير را به کدهاي css بالا اضافه کنيد

1

ul li:first-child li {font-size: 18px;}

2

ul li:last-child li {font-size: 14;}

نتيجه

 

ديگر کلاس هاي کاذب

 

 

selection : اين کلاس کاذب استايل المنت را هنگامي که ان را انتخاب ميکنيم، (در حالي که کليک چپ رو نگه داشتيم روي المنت ميکشيم يا CTRL + A ( در حالت پيشفرض مرورگرها

هنگامي که به طور مثال متني رو انتخاب ميکنيم، رنگ متن سفيد، و پس زمينه ان آبي ميشود. ما توانيم با استفاده از اين کلاس کاذب اين رنگ را هر کدام از المنتها تغيير دهيم يا ان را براي کل صفحه تعيين کنيم.

کد css :

1

::selection {

2

 background: #999;

3

 color: #edb;

4

}

5

 

6

::-moz-selection {

7

 background: #999;

 

 color: #edb;

9

}

 

 

 

::-webkit-selection {

12

 background: #999;

13

 color: #edb;

14

}

المنت هاي کاذب (pseudo-elemnt)

 

 

بعلاوه کلاس هاي کاذبي که گفتيم، المنت هاي کاذب نيز وجود دارند.

::first-letter تغيير استايل اولين کاراکتر از يک متن.

کد html :

1

<p>7lea: javascript and web design tutarials</p>

کد css :

 

p::first-letter {font-size: 36px;}

 

 

::first-line تغيير استايل اولين خط از يک متن.

 

 

<p>7lea: javascript and web design tutarials<br>7lea: javascript and web design tutarials</p>

کد css :

 

 

p {font-size: 20px;}

 

p::first-line {font-size: 36px;}

بسيار خب آموزش اين جلسه نيز به پايان رسيد در جلسه بعدي به معرفي گزينشگرهاي صفت (attribute) و باقي گزينشگرها ميپردازيم.