قسمتی از آموزش Css 3 را در این مطلب می خوانید(کل آموزش در ادامه ی مطلب … )
( این لینک برای اونایی که نمیدونن CSS چیه ) با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن ، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم
css 3 : attributes
شناسایی Attribute (ویژگی)
این ویژگی در CSS 2 معرفی شد که میشه تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:
img[alt=picture]{border:2px solid #FF0000;}
در کد بالا فقط IMG هایی که ویژگی ALT با متن “picture” براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن 🙂 حالا در CSS3 این ویژگی گسترده تر شده:
a[href^="ftp:"]{color:#00FF00;}
در کد بالا فقط لینکهایی که اولشون ftp: داره سبزرنگ میشن!
a[href$=".org"]{color:#FF00FF;}
در کد بالا فقط لینکهایی که آخرشون پسوند .org داره صورتی میشن…
img[alt*=pouya]{border:2px solid #FFFF00;}
در کد بالا تمام تصاویری که توی ALTشون اسم من (!!!) باشه 🙂 بوردر زرد میگیرن
. اکثر کد های CSS3 فقط در مرورگر های مدرن مثل کروم / سافاری / فایرفاکس / اپرا کارمیکنن!
ریشه
:root{background-color:#999999;}
این کد المنت ریشه صفحه رو بهش بکگراند خاکستری میده. (اون المنتی که بقیه المنت ها داخلش قرار میگیرن) حالا چه div باشه چه html باشه چه تیبل خدابیامرز ( 🙂 ) فرق نمیکنه …
فرزند اول و فرزند آخر!!
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 بیایند رو خاکستری میکنه.
سلام خیلی زیبا بود با ذکر منبع تو وبلاگم منتشر می کنم اگه ناراضی بودید تو بلاگم پیغام بزارید حذف می کنم ممنون