ورود / ثبت نام
0
0

گوشه ای از آموزش سی اس اس ۳- CSS 3

194 بازدید

قسمتی از آموزش 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 بیایند رو خاکستری میکنه.

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=176
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
مسعود شریفی پور
از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.
مطالب بیشتر
برچسب ها:

نظرات

1 نظر در مورد گوشه ای از آموزش سی اس اس ۳- CSS 3

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *