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

css مخفف چیست؟

بر اساس آن چه در مقاله html چیست؟ گفته شد شما برای طراحی یک سایت ابتدا احتیاج به زبان  html و سپس احتیاج به CSS دارید که این واژه مخفف شده کلمه Cascading Style Sheets می‌باشد.

اگر بخواهیم مثالی واضح و ملموس‌ تر از کارایی CSS بزنیم و بدانیم که css چیست؟، می‌توان اینگونه گفت که یک ساختمان برای بنا شدن و شکل گرفتن در مرحله اول اسکلت‌ بندی احتیاج به سیمان، بتن، میلگرد و… و در مرحله بعد برای زیباسازی احتیاج به گچ بری،‌ رنگ آمیزی، نورپردازی و… دارد.

طراحی سایت هم دقیقا چیزی مطابق با همین مثال است. به طوری که شما با استفاده از زبانhtml ساختار کلی صفحات وبسایت خود را شکل می‌دهید و برای زیباسازی، رنگ‌دهی، منظم‌ سازی و به طور کلی برای جذابیت ظاهری سایت احتیاج به ابزاری چون CSS  دارید.

تاریخچه CSS

اگر بخواهیم در مورد تاریخچه پیداش CSS بدانیم می‌توان اینگونه گفت که این ابزار اولین بار در سال 1996 در مجموعه CERN توسط تیم برنزلی اختراع و به دنیا عرضه شد. درآن زمان معرفی تگ‌های جدید نظیر <font> در نسخه 3.2 از زبان HTML مشکلاتی را برای طراحان صفحات وب به‌وجود آورد که یک نمونه از آن‌ها عدم تغییر خصیصه‌ها و ویژگی‌هایی چون تغییرفونت و رنگ برای کل سایت بود.

به همین منظور برای رفع این قبیل مشکلات کنسرسیوم شبکه جهانی وب W3C، CSS را ایجاد کرد. در ابتدا هدف از این ابزار تنها ایجاد بخش‌بندی و ارائه بهتر محتوای موجود در یک صفحه وب بود. ولی امروزه این ابزار توانسته استایل ظاهر یک داکیومنت را با چندین برگه  CSS‌ طراحی کرده و تحت تاثیر قرار دهد. از این رو در چند سال اخیر CSS توانست به خوبی در بازار به رقابت و برتری با دیگر رقبا بپردازد و اکنون خود را در ردیف زبان برتر استایلو در کنار HTML قرار بدهد.

کاربرد CSS چیست؟

بر اساس آن چه تا کنون آموختیم از css چیست؟ می‌دانیم که CSS ابزاری است که به منظور راحتی کار طراحان وب ساخته شده است تا بتوانند به آسانی فرم‌دهی و استایل‌دهی صفحات مختلف وبسایت خود را انجام دهند، به گونه‌ای که وقتی مخاطب به سایتی مراجعه می‌کند، زیبایی و فرم سایت به گونه‌ای باشد که او را جذب محتواهای نوشته شده درون آن نماید.

از دیگر کاربردهای زبان CSS می‌توان به موارد زیر نیز اشاره کرد.

• تعیین فونت در css
• طراحی رسپانسیو صفحات با css
• تعیین رنگ پیش‌زمینه و پس‌زمینه با css
• تعیین فاصله و حاشیه عناصر صفحه با css
• تعیین عرض و ارتفاع با css
• تغییر موقعیت قرارگیری عناصر صفحه در css
• چپ‌چین و راست‌چین کردن عناصر با css
• انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس  با css
• و…

ساختار کدهای CSS

اگر بخواهیم نحوه استفاده از CSS  در طراحی سایت را بیان نماییم، می‌توان اینگونه گفت که به طور کلی ساختار یک کد در CSS از دو بخش انتخاب کننده (Selector) و بلاک اعلان (Declaration) تشکیل شده است که در ادامه به هرکدام از آن‌ها خواهیم پرداخت.

Selector در CSS

اگر برای زیباسازی سایت خود می‌خواهید به بخشی از html استایل خاصی بدهید، می‌بایست یک تگ را انتخاب کرده و سپس CSS را بر روی آن اجرا نمایید.

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

انتخاب کننده عنصر در CSS

با استفاده از انتخاب کننده عنصر شما می‌توانید تگ خاصی را مطابق میل خود انتخاب کرده و استایل آن را تغییر دهید. برای مثال شما می‌توانید تگ‌ <p> را از صفحه وب انتخاب نمایید و رنگ آن را به آبی تغییردهید.

انتخاب کننده id در CSS

اگر برای تغییر استایل تصمیم دارید که بر روی گروهی از تگ‌ها تغییرات ایجاد کنید، می‌بایست ابتدا در کدهای HTML برای تگی که تصمیم به تغییر استایل آن‌ را دارید، یک ID تعریف کرده و سپس در قسمت CSS آی‌دی مدنظر را انتخاب نمایید تا تغییرات بر روی آن اعمال شود. نکته‌ای که باید در اینجا توجه داشته باشید این است که تغییرات تنها بر روی یکID  خاص که علامت # در ابتدای آن وجود داشته باشد اعمال می‌شود.

انتخاب کننده Class در CSS

اگر تمایل دارید که تمامی تگ‌های HTML  ظاهر یکسانی داشته باشند، ابتدا می‌بایست آن‌ها را داخل یک کلاس تعریف کرده و همانند ID به بخش CSS بروید تا از آن‌جا بتوانید استایل مدنظر خود را بر روی کلاس تعریف کنید. در اینجا باید توجه داشته باشید که کلاس تعیین شده بر روی تگ‌ها با علامت“. “ در ابتدا، قابل تشخیص می‌باشد.

Declaration در CSS

با استفاده از بخش Declaration شما می‌توانید تعیین کنید که چه استایلی را تمایل دارید بر روی تگ‌ها اعمال کنید. سپس خواهید توانست بر روی بخشی که درون {…} قرار می‌گیرد، “ویژگی” و “مقدار” را بر روی عنصر انتخاب شده پیاده کنید. برای مثال می‌توانید با مشخص کردن تگ h1 آن را به رنگ سبز و فونت 18 پیکسل درآورید.

کد css برای تغییر رنگ متن

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

CSS3 چیست؟

به طور کلی هر یک از نسخه‌های CSS به منظور تکمیل نسخه‌های قبلی و ارائه ویژگی‌هایی جدید و نوین به بازار آمده‌اند. CSS3 نیز یکی از نسخه‌های به روز شده CSS است که با ورودش در سال 1993 تحول بزرگی را  به‌وجود آورد.  با تولید این نسخه اسناد زیادی نیز در کنار آن به‌وجود آمد که به هر کدام از آن‌ها یک ماژول Module می‌گفتند.

از طرفی می‌توان اینگونه گفت که اساسا نسخه CSS3 بر پایه ماژول ساخته شده و تا سال ۲۰۱۲ نیز ماژول‌های زیادی نظیر Media Queries، Namespace، Selector Level و Color نیز به بازار عرضه شد که امکاناتی مانند استفاده از تصویر در پس‌زمینه، اضافه کردن فرم‌های چند ستونی و غیره را برای طراحان سایت‌ها فراهم کرد.

فایل CSS چیست؟

با استفاده از فایل CSS شما قادر خواهید بود صفحه نمایش مدنظر خود را در حالت‌های مختلفی چون نمایش بر روی مانیتور، حالت نمایش در زمان چاپ که این حالت نمایش مختص به مرورگرهایی می‌باشد که قابلیت شناسایی صدا را دارند و نمایش در صفحات مرورگر موبایل تنظیم نمایید.

انواع CSS چیست؟

همانطور که در بالا گفتیم از گذشته تا به امروز در هر دوره نسخه‌ای جدید از CSS به بازار ارائه شده است تا بتواند نقص‌ها و کم کاستی‌های نمونه قبلی را برطرف کند. از این رو نسخه‌های مختلفی که از این زبان در بازار وجود دارند عبارتند از:

CSS 1

اولین نسخه از CSS که در سال 1996 توسط موسسه استاندارد سازیW3C  به بازار عرضه شد CSS 1 بود که از ویژگی‌های زیر بهره‌مند بود.

• هم تراز نمودن نوشته‌ها، تصاویر و جداول
• امکان تنظیم نمودن مشخصه‌های فونت مانند قابلیت Fontface و Emphasis
• امکان تغییر دادن رنگ متون، مشخص نمودن تصویریا رنگ پس‌زمینه و سایر مشخصه‌های ظاهری.
• امکان تغییر سایر مشخصه‌های متون، مانند تنظیم نمودن فاصله بین کلمات، حروف و سطرها.
• قابلیت اضافه نمودن حاشیه، کادر و لایه‌بندی صفحات
• امکان دسته‌بندی و نشانه گذاری مشخصه‌ها و امکانات وب سایت

جالب است بدانید که امروزه W3C استفاده از CSS 1 را به طراحان توصیه نمی‌کند. چرا که نسخه‌های جدیدتر و بروزتری از آن را به بازار عرضه کرده است.

CSS 2

نسخه دوم CSS در سال ۱۹۹۸ منتشر شد که نسبت به نسخه قبلی خود از ویژگی‌ها و قابلیت‌های جدیدتری برخوردار بود.

برخی از امکانات این ابزار عبارت است از:

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

استفاده از این نسخه نیز هم اکنون مانند CSS 1 توصیه نمی‌شود.

CSS 3

با آمدن CSS 3 تحول بزرگی در آن صورت گرفت. به گونه‌ای که تقریبا اکثریت طراحان وبسایت برای طراحی و زیباسازی صفحات خود به آن روی آورده بودند. چرا که این نسخه از ساختار ماژول‌بندی شده‌ای برخوردار بود و تا سال 2012 حدود 50 ماژول از آن معرفی شد که از امکاناتی مانند استفاده از تصویر در پس‌زمینه، اضافه کردن فرم‌های چند ستونی و غیره بهره‌مند بود.

مزیت‌های CSS

به جرات می‌توان گفت که CSS یکی از مهم‌ترین و کاربردی‌ترین ابزارها در زمینه طراحی سایت می‌باشد. به گونه‌ای که به طور محسوس می‌توان به تفاوت میان سایتی که از این ابزار استفاده کرده و سایتی که استفاده نکرده است پی برد.

چرا که سایت‌های فاقد CSS تنها از رنگ مشکی برای محتواهای نوشته شده و رنگ آبی برای لینک‌ها استفاده کرده‌اند و این حس را در مخاطب تداعی می‌کنند که سایت هنوز به طور کامل بارگذاری نشده است. همین یک نکته ساده یکی از مواردی است که می‌تواند کاربر را از ورود به چنین سایتی بازدارد.

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

کاهش حجم کدها نیز از دیگر مزایایCSS می‌باشد، از این رو با استفاده از آن دیگر نیازی ندارید که هر عنصر از Html  جداگانه انتخاب و استایل‌دهی کنید و با استفاده از CSS خواهید توانست عناصر را به صورت دسته جمعی انتخاب کرده و استایل‌های دلخواهتان را اعمال نمایید.

ریسپانسیوسازی صفحات وب نیز یکی دیگر از ویژگی‌های بسیار خوب به کارگیری CSS است. برای این منظور می‌توان گفت که اگر شما سایتی را در لپ تاپ خود طراحی کنید و سپس آن را به تلفن همراه خود که صفحه نمایش کوچک‌تری دارد انتقال دهید، بی ش کدر استایل‌های سایت شما بهم‌ریختگی و آشفتگی ایجاد می‌شود.

از این رو اگر سایت شما ریسپانسیو باشد، در تمامی دیوایس‌هایی مثل لپتاپ، گوشی، تبلت و … ظاهرش حفظ می‌شود که این برای کاربرانی که از طریق دیوایس‌های گوناگون به سایت شما مراجعه می‌کنند بسیار مفید است. از این رو استفاده از CSS برای طراحی سایت یکی از ضروری‌ترین موارد است.

به طور کلی ویژگی‌های CSS و مزایای استفاده از آن عبارت است از:

• بهبود سئو سایت
• دارا بودن ویژگی‌های بیشتری برای کار با اجزای صفحات نسبت به HTML
• جلوگیری از تکرار دستورات
• بهبود بخشیدن به سرعت وب سایت و زمان بارگذاری کمتر برای صفحات وب
• امکان ساخت جلوه‌های تصویری و انیمیشنی جذاب
• نگه‌‌داری آسان کدها
• جلوگیری از کدنویسی کثیف و غیر اصولی

خلاصه

به طور کلی اگر علاقه‌مند به دنیای طراحی سایت هستید و طراحی وب برای شما یک سرگرمی می‌باشد، می‌توانید با یادگیری CSS و تمرین و تکرار شروع به طراحی سایت نمایید. در بالا سعی بر آن داشتیم که مطالبی را برای آشنایی بیشتر با CSS و استفاده از CSS در طراحی سایت بیان نماییم.