آشنایی با CSS و کاربرد آن

css مخفف عبارت Cascading Style Sheets به معنی صفحات سبک آبشار است. css با این هدف ساخته شد که استایل دهی به صفحات وب ساده تر شود و خوشبختانه در رسیدن به هدف خود موفق بوده است.

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

یادگیری زبان css در عین حالی که آسان است به شما قدرت انعطاف بالایی در کنترل ظاهر صفحات وب می دهد.

استفاده از css در صفحات وب چه مزایایی دارد؟

صرفه جویی در زمان: شما کدهای css را در یک فایل با فرمت .css نوشته و هر تعداد بار که خواستید می توانید به کمک انتخابگرهای css و اتریبیوت های html ، این کدها را به صفحات مختلفی اعمال کنید و به میزان زیادی در زمان خود صرفه جویی کنید.
بارگذاری سریعتر صفحات: با استفاده از CSS دیگر نیازی نیست که مرتبا از روش استایل دهی درون خطی استفاده کنید. شما یک بار در فایل css برای تگ های مورد نظر استایل ها را مشخص کرده تا هر کجا که استفاده شدند استایل های مربوطه بر روی آن ها اعمال شود.
نگهداری آسان: مزیت دیگری که استفاده از css برای ما دارد این است که اگر روزی تصمیم گرفتید که تغییرات ظاهری در سایت خود ایجاد کنید دیگر نیازی نیست که کدهای تمامی صفحات وب را خط به خط تغییر دهید. تنها کاری که شما باید انجام دهید این است که دستور css مربوطه را تغییر داده تا بر تمامی صفحات وب اعمال شود.
استایل دهی فوق العاده به صفحات وب: کدهای css به نسبت اتریبیوت های html ، توانایی ایجاد تغییرات ظاهری بسیار بیشتری را دارند و به این ترتیب شما می توانید استایل هایی بسیار جذاب و فوق العاده ایجاد کنید.
سازگاری با نمایشگرهای مختلف: کدهای css شما را قادر می سازند که محتوای خود را برای بیش از یک نوع نمایشگر بهینه سازی کنید. به لطف css در حالی که از یک صفحه html استفاده می کنید می توانید نسخه های مختلفی از وبسایت خود را برای نمایشگرهای مختلف مانند موبایل، تبلت، کامپیوتر، پروژکتور و … ارائه دهید.
استاندارد های جهانی وب: اتریبیوت های html به تدریج در حال منسوخ شدن هستند و توصیه ما به شما این است که تا جای ممکن به جای استفاده از اتریبیوت های html از css استفاده کنید.
مرور آفلاین: نکته دیگری که در رابطه با استفاده از یک فایل css جداگانه وجود دارد این است که مرورگرها می توانند این فایل را در حافظه کش خود ذخیره کرده و به این ترتیب دیگر ، کاربران در مرورهای بعدی خود از وبسایت شما سرعت بالاتری را تجربه می کنند.
عدم وابستگی به پلتفرم خاص: یکی دیگر از نکته های اساسی در مورد CSS این است که مستقل از پلتفرمی خاص عمل می کند و این توانایی را دارد که از جدیدترین مرورگرها پشتیبانی کند.

چه کسی CSS را ساخته و از آن نگهداری می کند؟

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

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

ورژن های مختلف CSS

css ورژن های مختلفی دارد که در ادامه آن ها را ذکر می کنیم:

css1 در دسامبر سال ۱۹۹۶ توسط کنسرسیوم شبکه جهانی وب به عنوان یک توصیه نامه ارائه شد. این ورژن زبان css را به عنوان یک مدل فرمت دهی بصری ساده برای همه تگ های html تعریف می کرد.
css2 در ماه می سال ۱۹۹۸ توسط کنسرسیوم شبکه جهانی وب بر اساس css1 ساخته و به یک توصیه نامه تبدیل شد.در این ورژن پشتیبانی از صفحات استایل دهی برای مدیاهای خاص نظیر پرینترها، دستگاه های شنیداری، فونت های قابل دانلود، جایگذاری عناصر و جدول ها اضافه شد.
css3 در ژوئن سال ۱۹۹۹ توسط کنسرسیوم شبکه جهانی وب تبدیل به یک توصیه نامه شد css3 دارای ماژول هایی است که ویژگی های جدیدی را به css اضافه کرده است.

ماژول های CSS3 به شرح زیر می باشند:

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

کدهای css نیز مانند سایر زبان های برنامه نویسی دارای یک ساختار نوشتاری هستند. این ساختارها و قواعد ، توسط مرورگرها تفسیر شده و در نهایت بر روی نمایشگر کاربر نشان داده می شوند.

ساختار کدهای CSS برای استایل دهی به صفحات وب از سه بخش اصلی به شرح زیر تشکیل می شود:

انتخابگر (selector): هر دستور css با یک انتخابگر آغاز می شود. انتخابگر ها مشخص می کنند که دستورات css قرار است بر کجا اعمال شوند.

ویژگی (property): ویژگی مشخص می کند که قرار است چه ویژگی ای را به سند html اضافه کنید. از ویژگی های css می توان به رنگ نوشته، رنگ زمینه و… اشاره کرد.

مقدار (value): مقدار به ویژگی های css نسبت داده می شود. به عنوان مثال ویژگی رنگ زمینه می تواند مقدار قرمز را بگیرد.

در نهایت ساختار نوشتن کدهای css به صورت زیر است: