pouya saadeghi
Active Member
معرفی css 3 + کدهای جدید
سلام.
این تاپیک برای معرفی
ویژگی های CSS 3 است.
( این لینک برای اونایی که نمیدونن CSS چیه )
با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن
، بهتره که سلکتور هایی که در این نسخه معرفی شده رو بشناسیم و ازشون استفاده کنیم.
شناسایی Attribute (ویژگی) تگ
در CSS 2 ویژگی معرفی شد که میشد تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:
در کد بالا فقط IMG هایی که ویژگی ALT با متن "picture" براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن.![Smile :) :)](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
حالا در CSS3 این ویژگی گسترده تر شده:
در کد بالا فقط لینکهایی که اولشون ftp: داره سبزرنگ میشن!
در کد بالا فقط لینکهایی که آخرشون پسوند .org داره صورتی میشن...
در کد بالا تمام تصاویری که توی ALTشون اسم من (!!!) باشه
بوردر زرد میگیرن.
نویسنده : پویا صادقی
برای تشکر از دکمه
استفاده کنید و فقط اگه سوال دارید پست بدین!
![css-icon.png](http://www.dlocc.com/articles/wp-content/uploads/2009/12/css-icon.png)
این تاپیک برای معرفی
![interview.gif](http://www.pic4ever.com/images/interview.gif)
( این لینک برای اونایی که نمیدونن CSS چیه )
با توجه به اینکه اکثر مرورگرها دارن خودشونو با نگارش سوم CSS هماهنگ میکنن
![146fs495919.gif](http://www.pic4ever.com/images/146fs495919.gif)
![2.gif](http://www.pic4ever.com/images/2.gif)
شناسایی Attribute (ویژگی) تگ
در CSS 2 ویژگی معرفی شد که میشد تشخیص داد که آیا تگ ها از Attribute مورنظر استفاده میکنن یا نه:
HTML:
img[alt=picture]{border:2px solid #FF0000;}
در کد بالا فقط IMG هایی که ویژگی ALT با متن "picture" براشون گذاشتیم Border قرمز میگیرن و بقیه عکس ها تغییر نمیکنن.
حالا در CSS3 این ویژگی گسترده تر شده:
HTML:
a[href^="ftp:"]{color:#00FF00;}
در کد بالا فقط لینکهایی که اولشون ftp: داره سبزرنگ میشن!
HTML:
a[href$=".org"]{color:#FF00FF;}
در کد بالا فقط لینکهایی که آخرشون پسوند .org داره صورتی میشن...
HTML:
img[alt*=pouya]{border:2px solid #FFFF00;}
در کد بالا تمام تصاویری که توی ALTشون اسم من (!!!) باشه
![Very Happy :green: :green:](/styles/majidonline/smilies/majidonline_biggestgrin.gif)
نویسنده : پویا صادقی
برای تشکر از دکمه
![post_thanks.gif](https://forum.majidonline.com/styles/majidonline/buttons/post_thanks.gif)
آخرین ویرایش: