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

اما CSS دقیقاً چیست؟ چطور باید از آن استفاده کنی؟ و چطور می‌توانی مثل یک حرفه‌ای آن را مدیریت کنی؟ در این راهنما به تمام مفاهیم پایه CSS اشاره می‌کنیم و مسیر یادگیری را بهت نشان می‌دهیم.

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

CSS چیست و چه نقشی در طراحی وب دارد؟

CSS مخفف عبارت Cascading Style Sheets است. این زبان استایل‌دهی کمک می‌کند ظاهر وب‌سایت را کنترل کنی:

  • رنگ‌ها
  • فونت‌ها
  • فاصله‌ها
  • اندازه‌ها
  • چیدمان المان‌ها

بدون CSS، همه صفحات وب تقریباً شبیه هم هستند: متنی ساده و بدون طراحی خاص.

روش‌های اضافه کردن CSS به صفحات وب

راه‌های مختلفی برای اضافه کردن CSS به صفحات وب وجود دارد:

  • Inline CSS: نوشتن CSS داخل تگ‌های HTML
  • Internal CSS: نوشتن CSS در بخش <style> فایل HTML
  • External CSS: نوشتن CSS در فایل جداگانه و لینک کردن آن به HTML

هر روش مزایا و معایب خاص خودش را دارد که در مقاله جداگانه به آن پرداخته‌ایم.

Syntax و ساختار نوشتن CSS

کدهای CSS یک ساختار مشخص دارند:

selector {
  property: value;
}

مثلاً:

p {
  color: blue;
  font-size: 16px;
}

همچنین می‌توان در CSS کامنت نوشت:

/* این یک کامنت است */

انتخابگرها در CSS (Selectors)

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

  • تگی (Element Selectors): مثل p, header
  • کلاسی (Class Selectors): مثل .menu
  • آی‌دی (ID Selectors): مثل #header
  • Attribute Selectors: مثل [type="text"]
  • Combinators: مثل .header > p
  • Pseudo-classes: مثل :hover, :focus
  • Pseudo-elements: مثل ::before, ::after

هر کدام از این انتخابگرها قدرت خاصی دارند و در شرایط مختلف به کار می‌روند.

Specificity و اولویت انتخابگرها در CSS

گاهی چند استایل متفاوت روی یک المان اعمال می‌شود. در اینجا Specificity یا اولویت انتخابگرها وارد عمل می‌شود تا مشخص کند کدام استایل در نهایت اعمال شود.

روش Debug کردن CSS

حتماً پیش می‌آید که یک استایل به‌درستی عمل نمی‌کند. در چنین مواقعی باید CSS را دیباگ (debug) کنی. ابزار بسیار کاربردی برای این کار، DevTools مرورگر است که امکان مشاهده و ویرایش استایل‌ها را در لحظه بهت می‌دهد.

جمع‌بندی

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

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