توضیحات

CSS یک روش راحت برای طراحی و کنترل استایل صحفات وب است. CSS مخفف کلمه "Cascading Style Sheet" است. این دوره آموزش CSS هر سه نسخه CSS2 ،CSS1 و CSS3 را پوشش می‌دهد و درک کاملی از CSS را با شروع از اصول اولیه تا مفاهیم پیشرفته ارائه می‌دهد.

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

چرا باید CSS یاد بگیریم؟

Cascading Style Sheets که به عنوان CSS شناخته می‌شود، یک زبان طراحی ساده است که برای ساده‌سازی روند ایجاد صفحه‌های وب قابل استفاده است.

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

جذاب‌کردن صفحات وب

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

طراح وب حرفه‌ای می‌شوید

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

کنترل وب

یادگیری و درک CSS آسان است و کنترل قدرتمندی بر ارائه یک داکیومنت HTML فراهم می‌کند. معمولاً CSS با زبان‌های نشانه‌گذاری HTML یا XHTML ترکیب می‌شود. با ترکیب این دو مورد با یکدیگر صفحات وب زیبایی را می‌توانید طراحی کنید.

زبان‌های دیگر را می‌آموزید

هنگامی که اصول HTML و CSS را درک کردید، دیگر درک فناوری‌های دیگر مانند javascript ،php یا angular آسان‌تر می‌شود. شما اصول اولیه و پایه کدزدن را یاد می‌گیرید و در ادامه حرفه‌ای‌‎تر وارد حوزه وب می‌شوید. مانند یادگیری ریاضی که ابتدای کار فقط با مفاهیم جمع و تفریق آشنا شدیم و در ادامه وارد مباحثی مثل مشتق، انتگرال و دیفرانسیل شدیم.

مزایای CSS

همانطور که قبلاً ذکر شد، CSS یکی از پرکاربردترین زبان‌های استایل‌دهی در وب است. در ادامه تعدادی از مزایای CSS را مشاهده می‌کنید:

CSS باعث صرفه جویی در وقت می شود

می‌توانید یک بار CSS بنویسید و سپس از آن در چندین صفحه HTML استفاده مجدد کنید. در واقع شما می‌توانید برای هر المان از HTML (مثل المان H1) یک استایل تعریف کنید و آن را در هر تعداد صفحات وبی که خواستید، استفاده کنید.

صفحات سریعتر بارگیری می‌شوند

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

ویرایش آسان و سریع

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

h1
{
font-size:10px;
}

سازگاری با دستگاه‌های مختلف

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

استانداردهای جهانی وب 

در حال حاضر اتریبیوت‌های HTML منسوخ شده‌اند و توصیه می‌شود از CSS استفاده کنید. بنابراین بهتر است از CSS در تمام صفحات HTML استفاده کنید تا با اپدیت‌های مرورگرها در آینده سازگار باشد.

CSS چگونه کار می‌کند؟

CSS با تعامل با المان‌های HTML استایل را روی صفحات وب اعمال می‌کند. به مثال زیر توجه کنید.

ما اینجا یک تگ HTML یعنی تگ P را داریم.

<p>This is my paragraph!</p>

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

p  {  color:red;  font-weight:bold;  }

در این قطعه کد تگ P را انتخاب کرده‌ایم و دستور تغییر رنگ و بولد شدن را روی آن اعمال کرده‌ایم. 

در CSS سلکتور سمت چپ اولین آکولاد نوشته می‌شود. اطلاعات داخل آکولادها را اعلان می‌نامند و حاوی خصوصیات و مقادیری است که برای سلکتور اعمال می‌شود.
خصوصیات مواردی مانند اندازه فونت، رنگ و حاشیه‌ها هستند در حالی که مقادیر، تنظیمات آن خصوصیات هستند. در مثال بالا"color" و "font-weight" هر دو خصوصیات هستند و "red" و "bold" مقادیر هستند. 

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

body  {  background-color:lightblue;  }

CSS اینترنال، اکسترنال و یا اینلاین؟

شاید از خود بپرسید که چگونه این کد CSS روی محتوای HTML اعمال می‌شود. در جواب باید بدانید که دقیقاً مانند HTML ،CSS با یک متن ساده و از طریق ویرایشگر متن مثل notpad در سیستم شما نوشته می‌شود و سه روش اصلی برای افزودن آن به صفحات HTML وجود دارد. کد CSS می تواند اکسترنال، اینترنال یا اینلاین باشد.
CSS اکسترنال به عنوان فایل‌های css. ذخیره می‌شوند و می‌توانند برای تعیین ظاهر یک وب‌سایت کامل از طریق یک فایل (به جای نوشتن کد CSS برای هر تگ‌ HTMl) استفاده شوند. برای استفاده از یک CSS اکسترنال، فایل‌های html. شما باید شامل یک بخش هدر باشند که به فایل CSS لینک می‌شود و به شکل زیر است:

<head>
<link rel=”stylesheet”  type=”text/css”  href=mysitestyle.css”>
</head>

با این کار فایل html. به CSS شما لینک داده می‌شود (در این حالت mysitestyle.css) و تمام دستورالعمل‌های CSS موجود در آن فایل در صفحات html. اعمال می‌شود.

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

<head>
<style>
Body  {  background-color:red;  }
P  {  font-size:20px;  color:mediumblue;  }
</style>
</head>

پس‌زمینه قرمز و پاراگراف‌های با فونت 20px و رنگ آبی کمرنگ برای یک صفحه وب خاص اعمال شده است.

و در آخر CSS اینلاین، قطعه کدهای CSS هستند که مستقیماً در کد HTML نوشته شده‌اند و فقط برای یک بخش خاص اعمال می‌شوند. به مثال زیر توجه کنید. این کد برای تگ H1 یک بخش خاص از صفحه وب، رنگ بنفش و سایز 40px را اعمال می‌کند.

<h1  style=”font-size:40px;color:violet;”>Check out this headline!</h1>

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

چه کسی CSS را ایجاد و نگه می‌دارد؟

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

ورژن‌های CSS

CSS1 در دسامبر 1996 توسط W3C منتشر شد. این نسخه زبان CSS  یک مدل فرمت‌بندی دیداری ساده را برای همه تگ‌های HTML توصیف می‌کند.

CSS2 در ماه مه 1998 براساس CSS1 ساخته شد و قابلیت‌های جدیدی را به عنوان مثال چاپگرها و دستگاه‌های شنیداری، فونت‌های قابل بارگیری، موقعیت المان‌ها و جداول و ... را اضافه به سی‌اس‌اس اضافه کرد. 

مخاطبان این دوره آموزش CSS

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

پیش نیازها

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