"> گوشه ای از آموزش سی اس اس ۳- CSS 3 | ام اس پی سافت

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

قسمتی از آموزش 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
مسعود شریفی پور

از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    مهدی پاسخ

    سلام خیلی زیبا بود با ذکر منبع تو وبلاگم منتشر می کنم اگه ناراضی بودید تو بلاگم پیغام بزارید حذف می کنم ممنون

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم