تبلیغات
با ما به روز باشید... - گوشه ای از آموزش سی اس اس ۳- CSS 3

با ما به روز باشید...
 

محل درج آگهی و تبلیغات
 
نوشته شده در تاریخ پنجشنبه 11 اسفند 1390 توسط mehdi 2rafky
به گفته سایت mspsoft.com:

با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن  ، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم
css 3 : attributes
شناسایی Attribute (ویژگی)
این ویژگی در CSS 2 معرفی شد که میشه تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:


img[alt=picture]{border:2px solid #FF0000;}

در کد بالا فقط IMG هایی که ویژگی ALT با متن “picture” براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن icon smile  گوشه ای از آموزش سی اس اس ۳  CSS 3 حالا در CSS3 این ویژگی گسترده تر شده:



a[href^="ftp:"]{color:#00FF00;}

در کد بالا فقط لینکهایی که اولشون ftp: داره سبزرنگ میشن!


a[href$=".org"]{color:#FF00FF;}

در کد بالا فقط لینکهایی که آخرشون پسوند .org داره صورتی میشن…


img[alt*=pouya]{border:2px solid #FFFF00;}

در کد بالا تمام تصاویری که توی ALTشون اسم من (!!!) باشه icon smile  گوشه ای از آموزش سی اس اس ۳  CSS 3 بوردر زرد میگیرن
. اکثر کد های CSS3 فقط در مرورگر های مدرن مثل کروم / سافاری / فایرفاکس / اپرا کارمیکنن!

ریشه


:root{background-color:#999999;}

این کد المنت ریشه صفحه رو بهش بکگراند خاکستری میده. (اون المنتی که بقیه المنت ها داخلش قرار میگیرن) حالا چه div باشه چه html باشه چه تیبل خدابیامرز ( icon smile  گوشه ای از آموزش سی اس اس ۳  CSS 3 ) فرق نمیکنه …
فرزند اول و فرزند آخر!!


p:first-child{background-color:#FF6600;}

کد بالا چیکار میکنه؟ اگه چند تا پاراگراف داشته باشیم، بکگراند اولین پاراگراف رو نارنجی میکنه.
( البته استفادش فقط پاراگراف نیست ها!! )


p:last-child{background-color:#FF6600;}

کد بالا هم از بین پاراگراف ها ، بکگراند اون آخریه (فرزند آخر) رو نارنجی میکنه…
NOT


div:not([class=style1]){background-color:#FF0000;}

خاصیت Not ویژگی مورد نظر رو منفی میکنه. مثلا در کد بالا تمام Divهایی که کلاس style1 ندارن بکگراند قرمز خواهند داشت
عناصر متوالی

h1 ~ h2{background:#666666;}

کد بالا رنگ بکگراند H2هایی که بعد از H1 بیایند رو خاکستری میکنه.


h1 + h2{background:#666666;}

کد بالا رنگ بکگراند H2هایی که بلافاصله بعد از H1 بیایند رو خاکستری میکنه.





.: Weblog Themes By Pichak :.


تمامی حقوق این وبلاگ محفوظ است | طراحی : پیچک

تبادل لینک

خرید بک لینک