آموزش CSS - CSS چیست؟

CSS (Cascading Style Sheets) یک زبان استایل دهی است که برای کنترل نمایش و چیدمان صفحات وب و برای توصیف ظاهر و قالب بندی عناصر HTML در یک صفحه وب استفاده می شود. از CSS می توان برای تغییر رنگ، فونت، اندازه، طرح بندی و سایر جنبه های بصری یک وب سایت استفاده کرد.

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

CSS با استفاده از انتخابگرها(selectors) با هدف قرار دادن عناصر خاص HTML و اعمال قوانین استایل برای آن عناصر کار می کند. به عنوان مثال، کد CSS زیر رنگ تمام عناصر پاراگراف یک صفحه را قرمز می کند:

p {
  color: red;
}

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

چرا CSS مهم است؟

CSS به چند دلیل مهم است:

• جداسازی نمایش و محتوا: CSS اجازه می‌دهد که نمایش یک وبسایت (از جمله استایل، طراحی، اندازه فونت و رنگها) از محتوای واقعی وبسایت جدا شود. این به طراحان و توسعه‌دهندگان اجازه می‌دهد که به راحتی استایل و ظاهر وبسایت را تغییر دهند بدون آنکه محتوای واقعی و مهم وبسایت تحت تأثیر قرار گیرد.
• امکان به‌روزرسانی استایل و طراحی: وقتی که یک وبسایت نیاز به تغییرات در طراحی و استایل دارد، CSS امکان به‌روزرسانی سریع و آسان را فراهم می‌کند. به عبارت دیگر، شما می‌توانید تغییراتی در استایل و ظاهر وبسایت اعمال کنید بدون آنکه به محتوای آن دست بزنید یا مجبور شوید مجدداً اطلاعات و محتواها را تایپ کنید. 
• تجربه کاربری بهبود یافته: CSS با طراحی خوب می‌تواند تجربه کاربر را با جذاب‌تر کردن وب‌سایت‌ها، خوانایی بهتر و دسترسی بیشتر، بهبود بخشد. به عنوان مثال، استفاده از CSS برای تنظیم اندازه فونت و فاصله می‌تواند خواندن متن را آسان‌تر کند، در حالی که استفاده از رنگ و طرح‌بندی می‌تواند توجه را به عناصر مهم در صفحه جلب کند.
• سازگاری با دستگاه ها و اندازه های مختلف صفحه نمایش: CSS به طراحان وب اجازه می دهد تا وب سایت های واکنش گرا(responsive) ایجاد کنند که با دستگاه ها و اندازه های مختلف صفحه سازگار شوند. این در دنیای امروزی که اولویت با تلفن همراه است، ضروری است، جایی که بسیاری از کاربران به وب‌سایت‌ها با تلفن‌های هوشمند و تبلت‌هایی با صفحه نمایش کوچک‌تر دسترسی دارند.

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

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

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

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

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

همچنین گروه کاری CSS گروهی از افراد در کنسرسیوم وب جهانی (W3C) است که مسئول توسعه و حفظ مشخصات CSS هستند. این گروه شامل نمایندگانی از فروشندگان مرورگر، فروشندگان ابزار و جامعه توسعه وب است.

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

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

نسخه های CSS

CSS در طول زمان تکامل یافته است و چندین نسخه از مشخصات CSS وجود داشته است. در اینجا یک مرور کلی از نسخه های اصلی CSS آورده شده است:

• CSS1: اولین نسخه CSS در سال 1996 معرفی شد و دارای ویژگی های سبک اولیه برای متن، رنگ ها و پس زمینه بود.
• CSS2: CSS2 در سال 1998 منتشر شد و ویژگی‌های جدیدی مانند positioning، floating، و z-index و همچنین پشتیبانی از انواع رسانه‌ها مانند print و speech را معرفی کرد.
• CSS2.1: این نسخه از CSS در سال 2004 معرفی شد و شامل چندین رفع اشکال CSS2 بود.
• CSS3: CSS3 یک نسخه ماژولار است که شامل بسیاری از ویژگی های جدید و بهبود نسخه های قبلی CSS است. اولین بار در سال 1999 معرفی شد و هنوز هم در حال توسعه و به روز رسانی است. CSS3 شامل ماژول هایی برای مواردی مانند تایپوگرافی، طرح بندی، انیمیشن ها و انتقال است.
• CSS4: هیچ مشخصات رسمی CSS4 وجود ندارد، زیرا توسعه CSS اکنون بر روی به روز رسانی و گسترش مشخصات CSS3 متمرکز شده است. به‌جای شماره نسخه جدید، به‌روزرسانی‌های CSS به صورت ماژول منتشر می‌شوند که می‌توانند به‌طور مستقل و به هر ترتیبی پیاده‌سازی شوند.

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

 نحوه نوشتن CSS

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

1. عناصر HTML را که می خواهید استایل دهید را شناسایی کنید: قبل از شروع نوشتن CSS، باید عناصر HTML را که می خواهید استایل بدهید، شناسایی کنید. این می تواند شامل مواردی مانند سرفصل ها، پاراگراف ها، پیوندها، دکمه ها، تصاویر و موارد دیگر باشد.
2. ایجاد یک انتخابگر: از یک انتخابگر برای هدف قرار دادن عناصر HTML که می خواهید استایل کنید استفاده می شود. انتخابگرها می توانند بر اساس نوع عنصر، کلاس یا شناسه باشند. به عنوان مثال، انتخابگر همه عناصر پاراگراف در یک صفحه "p" است.
3. افزودن یک اعلان: یک اعلان برای تعریف سبک عناصر انتخاب شده استفاده می شود. اعلان ها از یک خاصیت (property ) و یک مقدار (value) تشکیل شده است. به عنوان مثال، اعلان "color: red" ویژگی رنگ عناصر انتخاب شده را قرمز می کند.
4. ترکیب انتخاب‌کننده‌ها و اعلان‌ها: می‌توانید چند انتخابگر و اعلان‌ها را برای ایجاد قوانین طراحی پیچیده‌تر ترکیب کنید. به عنوان مثال، قانون "p, h1 {color: red; font-size: 20px;}" رنگ و اندازه قلم را برای همه عناصر پاراگراف و عنوان در یک صفحه تعیین می کند.
5. CSS خود را در فایل HTML خود وارد کنید: هنگامی که CSS خود را نوشتید، باید آن را در فایل HTML خود قرار دهید. می توانید این کار را با قرار دادن کد CSS در یک تگ <style> در بخش <head> فایل HTML خود یا با پیوند دادن به یک فایل CSS خارجی با استفاده از تگ <link> انجام دهید.

در اینجا مثالی از اینکه کد CSS ممکن است شبیه به آن باشد آورده شده است:

/* This is a comment */
p {
  color: red;
  font-size: 18px;
}

h1, h2 {
  color: blue;
  font-weight: bold;
}

.button {
  background-color: #ff0000;
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
}

در این مثال، ما سه مجموعه قانون(rules) داریم که سبک‌های پاراگراف‌ها، عنوان‌ها و دکمه‌ها را در یک صفحه وب تعریف می‌کنند. نظرات، که با "/" شروع می شوند و با "/" ختم می شوند، برای اضافه کردن یادداشت هایی به کد CSS استفاده می شوند که توسط مرورگر تفسیر نمی شوند.

سبک های خارجی، داخلی و درون خطی 

سه راه برای اعمال سبک های CSS در عناصر HTML وجود دارد: خارجی(external)، داخلی(internal) و درون خطی(inline).

1- سبک های خارجی (External Styles): سبک های خارجی در یک فایل CSS جداگانه تعریف شده و با استفاده از تگ <link> در بخش <head> فایل HTML به فایل HTML پیوند داده می شوند. این بهترین روش برای وب سایت های بزرگ می باشد، زیرا امکان جداسازی نمایش و محتوا را فراهم می کند. نگهداری و به روز رسانی سبک های خارجی در چندین صفحه وب نیز آسان تر است.

مثال:

درج کد در یک فایل جداگانه با نام "styles.css":

h1 {
  color: red;
  font-size: 24px;
}

در فایل HTML این کد را وارد می کنیم:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

2- سبک های داخلی (Internal Styles): استایل های داخلی درون تگ <style> در قسمت <head> فایل HTML تعریف می شوند. این روش برای وب سایت های کوچکی که نیازی به ایجاد یک فایل CSS مجزا نیست مفید است. سبک های داخلی فقط برای فایل HTML فعلی اعمال می شود. 
 مثال:

<head>
  <style>
    h1 {
      color: red;
      font-size: 24px;
    }
  </style>
</head>

سبک های درون خطی(Inline Styles): سبک های درون خطی در ویژگی style یک تگ HTML تعریف می شوند. این روش برای اعمال استایل‌ها به عناصر منفرد مفید است، اما در صورت استفاده گسترده، حفظ و به‌روزرسانی آن دشوار است. سبک های درون خطی بر سبک های خارجی و داخلی اولویت دارند

مثال:

<h1 style="color: red; font-size: 24px;">Hello, world!</h1>