دسته بندي ها

جستجو

لينک هاي روزانه

جعبه پیام




امکانات


آرشيو

خبرنامه

آمار

آنلاین : 1
بازدید امروز : 3
بازدید دیروز : 11
بازدید هفته گذشته : 37
بازدید ماه گذشته : 139
بازدید سال گذشته : 2192
کل بازدید : 10194

لينک دوستان

 گزينشکرها (selectors)

 
 
در اين جلسه از آموزش طراحی وب سایت css با ساير گزينشگرهايي که در Css3 معرفي شده اند صحبت خواهيم کرد.
اگر دومين پست از آموزش css را خوانده ايد، با هم درمورد گزينشکرها صحبت کرديم
گفتيم که در css شش نوع گزينشگر براي انتخاب المنتها وجود دارد که يگي از ان ها کلاس هاي کاذب (pseudo-class) بودند، که اين سلکتورها براي نمايش رويدادهاي صفحه از جمله، کليک، هاور، فوکوس و ... استفاده مي شوند. در css کلاس هاي کاذب ديگري نيز وجود دارد که مربوط به طريقه انتخاب فرزندان (child) يک المنت پدراست. ما ميخواهيم در اين جلسه  طراحی وب سایت در مورد آن ها توضيح دهيم.
کلاس هاي کاذب توارثي
 
 
کد html زير را در نظر بگيريد
1
<ul>
2
 <li>Lang
3
 <ul>
4
 <li>HTML</li>
5
 <li>CSS</li>
6
 <li>Javascript</li>
7
 </ul>
8
 </li>
9
 
10
<li>CMS
11
 <ul>
12
 <li>Wordpress</li>
13
 <li>Joomla</li>
14
 <li>Drupal</li>
15
 </ul>
16
 </li>
17
</ul>
حال اگر بخواهيم به هر يک از اين گزينه ها يک رنگ متفاوت اختصاص دهيم، چه ميکرديم؟ حتما براي هر يک class تعريف مي کرديم و رنگ مورد نظر را انتخاب مي کرديم. خب اين روش درست است اما اگر ندانيم class آن چيست چطور؟ اگر سايت  طراحی وب سایت دايناميک باشد، و اين اطلاعات بعدا اضافه شود به طوريکه نميتوان براي آن ها class تعريف کرد؟؟ در اين صورت بايد از کلاس هاي کاذب توارثي استفاده کنيم.
کلاس هاي کاذب توارثي موجود در css به ترتيب اين ها هستند :
nth-child(n)
nth-last-child(n)
first-child
last-child
حال به تعريف دقيقتر اين کلاس هاي کاذب مي پردازيم :
 
nth-child(n) و nth-last-child(n)
 
 
nth-child(n) : با استفاده از اين کلاس کاذب مي توان براي تک تک المنت هاي يک صفحه طراحی وب سایت ، بدون استفاده از id يا class براي آن ها يک استايل متفاوت تعيين کنيم.
حرف n در داخل پرانتز يک عدد طبيعي است 1,2,3,...
اين عدد تعيين کننده چندمين فرزند از يک المنت پدر است
به طور مثال اولين تگ شماري 1 را دارد دومين شماره 2 و...
به کد css زير دقت کنيد تا متوجه شويد چگونه ميتوانيم به هر يک از li هاي کد html بالا استايل متفاوت دهيم.
1
ul li {
2
 color: blue;
3
 font: 24px tahoma;
4
 text-shadow: -1px 1px 1px #333;
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
ul li:nth-child(2) li:nth-child(3){color: yellow;}
البته در مروگر 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;
8
 color: #edb;
9
}
10
 
11
::-webkit-selection {
12
 background: #999;
13
 color: #edb;
14
}
المنت هاي کاذب (pseudo-elemnt)
 
 
بعلاوه کلاس هاي کاذبي  طراحی وب سایت  که گفتيم، المنت هاي کاذب نيز وجود دارند.
::first-letter تغيير استايل اولين کاراکتر از يک متن.
کد html :
1
<p>7learn: javascript and web design tutarials</p>
کد css :
 
1
p {font-size: 20px;}
2
p::first-letter {font-size: 36px;}
 
 
::first-line تغيير استايل اولين خط از يک متن.
 
1
<p>7learn: javascript and web design tutarials<br>7learn: javascript and web design tutarials</p>
کد css :
 
1
p {font-size: 20px;}
2
p::first-line {font-size: 36px;}
بسيار خب آموزش اين جلسه طراحی وب سایت نيز به پايان رسيد در جلسه بعدي به معرفي گزينشگرهاي صفت (attribute) و باقي گزينشگرها ميپردازيم.
نوشته شده در سه شنبه 28 خرداد 1392 ساعت 12:31 توسط : padideh | دسته : | 253 بازدید
  • []


  • سفارش تبليغات
    سفر به ترکیه | فرش کاشان | آژانس هواپیمایی | منزل مبله در شیراز | کفسابی | هتل و اقامت | آموزش بازاریابی | میز کانتر | گیت کنترل تردد | نوبت دهی پزشکان شیراز | پاپ آپ نمایشگاهی | دکتر نوروزیان | منزل مبله شیراز | طلایاب | سفر به تایلند| ثبت شرکت | راهنمای سفر | سفر به گرجستان | سفر به روسیه | منزل مبله | فلزیاب | محمد دبیری
    X
    تبليغات