آموزش جامع CSS

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

مقدمه CSS

قبل از اینکه CSS را تعریف کنیم ، باید راجع به صفحات وب توضیح بدهیم. یک صفحه وب شامل اجزای زیر میباشد:

Content (محتوا) : این بخش وب بوسیله HTML ایجاد میشود.

Presentation (نمایش) : این بخش وب بوسیله CSS ایجاد میشود.

Behavior (رفتار) : این بخش وب بوسیله JavaScript ایجاد میشود

لایه محتوا همیشه وجود دارد، چون در این لایه تمامی محتویات یک صفحه وب که به قصد نمایش ایجاد میگردد نوشته میشود. که این نوشته ها بین تگ های XHTML , HTML قرار میگیرد. خلاصه میتوان گفت لایه محتوا قالب بندی یک سایت را بر عهده دارد.

با استفاده از عناصر و تگ های HTML می توانیم متون ، تصاویر ، ویدئو ها ، صوت ها و … را کنار هم قرار بدهیم و برای کاربر ای سایت نمایش بدهیم

لایه نمایش وظیفه تنظیم و ترتیب محتویات سایت را که برای کاربر نمایش داده میشود برعهده دارد.

حدود چند سال بیش برای لایه بندی سایت ها از جدول استفاده میکردند که به این سبک کد نویسی Base Table می نامند. که در این سبک کد نویسی با ادغام چند سطر ستون ایجاد می شد. که البته این سبک کد نویسی یکسری معایب در بر داشت از جمله سنگین شدن سایت. نداشتن زیبایی در هنگام لود و همچنان برای SEO سایت هم چندان مناسب نبود.

البته باید یاد آور شد در آن هنگام نیز از CSS استفاده میشد اما نه به وسعت امروز که امروزه طراحی Base Table جای خود را به base Div داده است.

از زمانی که سبک کد نویسی تغییر و پیشرفت کرد استفاده از CSS یک امر عادی گشته است و با استفاده از Div میتوانید سایت را به ساده گی قالب بندی کرد و محتوا سایت را به شکل سایت را به معرض نمایش در آورید.

لایه رفتار کنترل و نحوه تعامل صفحه را در اختیار دارد و معمولا توسط زبان جاوااسکریپت ایجاد می شود. البته هر سه این لایه میتوان یکجا استفاده کرد اما به دلیل آسانی کار و کنترل هر چه خوبتر این لایه ها را از همدیگر جدا کرده اند.

نسخه های CSS

CSS در نسخه های مختلف به بازار عرضه شده است که اولین نسخه ی CSS ، نسخه ۱ بود که در ماه دسامبر سال ۱۹۹۴ توسط کنسرسیوم تعیین استانداردهای ویب )w3c )منتشر شد. در این نسخه ، خواصی برای تعیین نوع فونت ، اندازه متن ، فاصله ی عناصر و ایجاد لیست ها ، اندازه ی فضای اشغالی توسط تگ ها و تعیین حاشیه برای آنها پیش بینی شده بود. CSS1 برخی موارد ضروری برای تعیین ظاهر عناصر. همانند تعیین رنگ ها و تصویر پس زمینه و رنگ متون آنها یا تعیین مکان یک تگ برای قرارگیری در سمت چپ یا راست را به همراه نداشت.

Css نسخه ۲ در سال ۱۹۹۸ معرفی شد و تعداد زیادی از خواصی را که طراحان صفحات وب به آنها نیاز داشتند در برداشت. امکانات که این نسخه را در بر میگرفتند تعیین مکان آنها در جهات مختلف ، Selector ها ، ادغام فایل های CSS و بسیاری امکانات دیگر از این جمله بودند. پیاده سازی برخی از استانداردهای CSS نسخه ۲ بسیار مشکل بود . به همین دلیل ، کنسرسیوم تعیین استانداردهای وب. تصمیم به اصلاح آنها گرفت. و نام نسخه ی اصلاح شده را ” Cascading Style Sheets , Level 2 Revision 1″ گذاشت که به اختصار

Css2.1

نامیده میشود.

امروزه اگر صحبتی از Css نسخه ی ۲ به میان می آید ، مقصد همان CSS نسخه ۲.۱ است. چون CSS نسخه ی ۲ هیچگاه توسط مرور گرها پذیرفته نشد. به همین دلیل از این نسخه هیچ استفاده نه گردید.

کار بر روی نسخه ۳ به مدت چهار سال طول کشید و روند کندی داشت . در CSS3 قابلیت های پیش بینی شده به قسمت های مختلفی تقسیم شده اند . در حقیقت نوعی دسته بندی بر روی قابلیت های مختلف صورت پذیرفته است. تا هر قسمت از قسمت دیگر مجزا باشد . هم اکنون برخی از امکانات CSS3 توسط برخی مرورگر های قدیمی پشتیبانی نمی شود .

برخی از امکاناتی که در CSS3 در نظر گرفته شده اند ، شامل : ایجاد متون چند ستونی ، حاشیه های گرد، تعیین میزان شفافیت عنصر ، استفاده از رنگ هایی که در مدهای HSLA , HSL , RGBA تعریف شده اند و ایجاد سایه برای متون و … است . بهترین مزیت استفاده از نسخه ۳ این است که شما می توانید یک قالب را با استفاده از تکنیک های جدید CSS بدون نیاز به تصاویر با کیفیت عالی کدنویسی کنید .

البته باید گفت که در این دوره آموزشی نسخه CSS3 را مورد بحث قرار میدهیم.

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

پس حتما با ما همراه باشید و جلسات آینده آموزش جامع CSS را از دست ندهید! برای تمرین هر جلسه میتوانید به وبسایت جهانی W3C مراجعه نمایید. تمرین مستمر همواره تاثیر بسیار خوب و مهمی در یادگیری و تقویت مهارت های شما دارد پس حتما آن را جدی بگیرید.