ورود

View Full Version : CSS3 چیست ؟



poriab
دوشنبه 06 بهمن 1393, 01:22 صبح
در پستی HTML5 را معرفی کردیم و با آن آشنا شدید ( اینجا (http://hilearning.ir/post/52-%D8%A8%D8%A7-html5-%D8%A2%D8%B4%D9%86%D8%A7-%D8%B4%D9%88%DB%8C%D8%AF)) حال مکمل HTML برای طراحی وب یعنی CSS را می خواهیم معرفی کنیم .
CSS مخفف کلمه Cascading Style Sheet می باشد که معنای فارسی آن برگه سبک آبشاری هست .
CSS زبانی است که می توانید به وسیله آن به تگ های HTMl جلوه بدهید و آنها را زیباتر کنید ، چینش آنها را تنظیم کنید و …
CSS3 آخرین نسخه از این زبان می باشد که حاوی تمام دستوراتی است که در نسخه CSS2.1 وجود داشته است و همچنین در این نسخه امکاناتی اضافه شده است که برخی از مشکلات طراحان را حل می کند ، برای مثال اگر در CSS2.1 گوشه باکس خود را می خواستید گرد باشد باید از ترفند های مختلفی استفاده می کردید که این مسئله در CSS3 حل شده است .
برخی از قابلیت های CSS3 :
گوشه های گرد
سایه انداختن
انیمیشن
انتخاب کننده ها
شفافیت
افزودن فونت
و بسیاری از قابلیت های دیگر
پیشوندهای مرورگر در CSS3 چیست ؟
برای آن که بتوانید از بسیاری از قابلیت های CSS3 استفاده کنید باید چند خط کد اضافه بنویسید .
برای مثال اگر می خواهید از trnsition استفاده کنید باید در کروم از پیشوند –webkit-trnsition استفاده کنید ، همچنین برای استفاده آن در فایرفاکس باید از -moz-trnsition استفاده کنید .
پیشوند webkit برای مرورگر سافاری نیز استفاده می شود چرا که این مرورگر همانند کروم برپایه webkit میباشد .
پس در اینجا متوجه میشویم اگر بخواهیم کد ما در تمامی مرورگرها به درستی کار کند باید به جای یک خط چند خط دستور تکراری را بنویسیم .
مستندات CSS3 هنوز کامل نشده است به همین علت برای جلوگیری از اشتباهات از پیشوند استفاده می کنیم . زمانی که مستندات کامل شوند این پیشوند ها حذف خواهند شد . (شما میتوانید در انتهای دستورات که پیشوند دارند ، یک دستور بدون پیشوند نیز اضافه کنید ) پس نگران نباشید http://hilearning.ir/wp-includes/images/smilies/icon_wink.gif
مثال بالا :





1
2
3
4
5
6
7



span{
-webkit-trnsition: 1s;
-moz-trnsition: 1s;
-ms-trnsition: 1s;
-o-trnsition: 1s;
trnsition: 1s;
}






در آینده بیشتر با CSS3 آشنا خواهید شد .
منبع : http://hilearning.ir/post/105-%D8%A8%D8%A7-css3-%D8%A2%D8%B4%D9%86%D8%A7-%D8%B4%D9%88%DB%8C%D8%AF