آموزش CSS از صفر

CSS چه چیزی را کنترل می کند و چطور به صفحه وصل می شود؟

یک کار می کند: می گوید هر چیزی که HTML ساخته، چه شکلی دیده شود. CSS کوتاه شده برگه های سبک آبشاری است و کوچک ترین واحدش یک قانون است:

p {
  color: #333;
  line-height: 1.9;
}

سه راه برای وصل کردنش هست و در عمل یکی را استفاده می کنیم. می شود ویژگی style را روی خود تگ نوشت، می شود قانون ها را داخل تگ style در head گذاشت، و می شود همه را در یک فایل جدا نگه داشت و با یک خط صدا زد:

<link rel="stylesheet" href="style.css">

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

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

انتخابگر: به مرورگر بگویید کدام عنصر

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

a         { color: #0b5; }         /* هر لینک */
.btn      { border-radius: 12px; } /* هر چیزی با class="btn" */
#header   { position: sticky; }    /* عنصری با id="header" */
.card p   { margin-block: 0; }     /* هر p داخل .card */
a:hover   { text-decoration: underline; }

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

یک انتخابگر هم هست که کمتر یاد داده می شود و برای کاربر کیبورد حیاتی است. hover فقط برای ماوس معنا دارد؛ کسی که با Tab در صفحه می گردد باید ببیند همین حالا روی کدام عنصر ایستاده است:

.btn:focus-visible {
  outline: 2px solid #0b5;
  outline-offset: 2px;
}

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

چرا استایل من اعمال نمی شود؟

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

شکل بالای صفحه همین لایه هاست، از نزدیک ترین به عنصر تا دورترین. style روی خود تگ از همه نزدیک تر است و برای همین سخت ترین چیزی است که بعدا می شود عوضش کرد، و پیش فرض مرورگر از همه دورتر. جایی که بیشتر آدم ها اشتباه می کنند بیرونی ترین لایه است: ارث.

رنگ را روی body می گذارید و انتظار دارید لینک ها هم همان رنگ را بگیرند. نمی گیرند. مرورگر برای خود تگ a یک قانون مستقیم دارد، و هر قانون مستقیم، حتی قانون خود مرورگر، از مقداری که از والد به ارث رسیده جلو می زند. ارث ضعیف ترین لایه است، نه قوی ترین.

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

و important، کلمه ای که این ترتیب را می شکند. یک بار که بنویسیدش، هر قانون بعدی برای غلبه بر آن باید خودش important بگذارد و از آنجا به بعد فایل شما با وزن جلو می رود نه با منطق. قاعده ما ساده است: اگر بدون important کار نمی کند، یعنی انتخابگر اشتباه است. تنها استثنای واقعی جایی است که باید استایل کدی را بگیرید که خودتان ننوشته اید و به آن دسترسی ندارید.

هر عنصر یک جعبه است

هر چیزی روی صفحه یک مستطیل است، حتی یک حرف. آن مستطیل چهار لایه دارد: خود محتوا، padding که فاصله داخلی تا کادر است، border که خط دور آن است، و margin که فاصله بیرونی تا بقیه عنصرهاست. تمام کار فاصله گذاری در CSS همین چهار تاست.

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

*, *::before, *::after { box-sizing: border-box; }

با border-box عدد width شامل padding و border هم می شود، یعنی همان چیزی که از اول انتظار داشتید. این خط را اول هر فایل CSS بگذارید و دیگر بهش فکر نکنید.

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

چیدمان: کی فلکس باکس، کی گرید؟

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

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

آن خط دوم ارزش دارد که از حفظ بلد باشید. می گوید هر ستون دست کم ۲۲۰ پیکسل باشد و بقیه فضا را بین خودشان تقسیم کنند، و مرورگر خودش حساب می کند در هر عرض چند ستون جا می شود. یعنی یک شبکه واکنشگرا بدون حتی یک media query.

این دو رقیب هم نیستند و انتخاب یکی به معنی کنار گذاشتن آن یکی نیست. در عمل معمولا اسکلت صفحه با گرید چیده می شود و داخل هر خانه اش یک ردیف فلکس می نشیند. قاعده سرانگشتی: اگر می توانید بگویید «این چند چیز کنار هم»، فلکس؛ اگر می گویید «این جدول از خانه ها»، گرید.

چرا در سایت فارسی باید margin-inline-start بنویسید نه margin-left

چون margin-left در فارسی همان جایی نیست که در انگلیسی است. ویژگی های فیزیکی به چپ و راست صفحه فکر می کنند و ویژگی های منطقی به اول و آخر خط. margin-inline-start یعنی فاصله از جایی که خط شروع می شود؛ مرورگر در فارسی و عربی آن را راست حساب می کند و در انگلیسی چپ، و شما هیچ کاری نمی کنید.

ترجمه اش هم سخت نیست:

تست کردنش ده ثانیه است و کسی یادش نمی دهد: در ابزار توسعه دهنده مرورگر روی تگ html، مقدار dir را از rtl به ltr عوض کنید و به همان صفحه نگاه کنید. هر چیزی که جابه جا نشد یا به لبه غلط چسبید، یک ویژگی فیزیکی است که جا مانده. این کار روی سایت خودمان بخشی از بازبینی هر قالب جدید است.

کجا این قاعده لازم نیست: سایتی که فقط یک زبان چپ به راست دارد و قرار نیست هیچ وقت زبان دیگری بگیرد. آنجا margin-left هرگز گاز نمی گیرد و اصرار روی ویژگی منطقی فقط یک عادت خوب است، نه یک ضرورت. ولی اگر سایتتان فارسی است، یا قرار است روزی انگلیسی هم بشود، این تفاوت همان چیزی است که تعیین می کند بعدا یک ساعت کار دارید یا یک هفته.

متغیرهای CSS: یک بار تعریف کنید، همه جا استفاده کنید

متغیر CSS نامی است که مقداری را نگه می دارد. اسم فنی اش ویژگی سفارشی است، با دو خط تیره شروع می شود و با var خوانده می شود:

:root {
  --brand: #0b5;
  --gap: 16px;
}

.btn {
  background: var(--brand);
  padding: var(--gap);
}

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

.card--warn { --brand: #d97706; }

حالا هر دکمه داخل آن کارت نارنجی است، بدون اینکه یک خط از قانون .btn عوض شده باشد. تم تیره هم دقیقا با همین ایده ساخته می شود: یک بلوک که فقط چند نام را دوباره تعریف می کند، نه یک فایل CSS دوم.

و حدش: این متغیر، متغیر زبان برنامه نویسی نیست. حساب کردن با آن فقط داخل calc انجام می شود، و در شرط یک media query نمی توانید از آن استفاده کنید. اگر دنبال حلقه و شرط و تابع هستید، دارید سراغ ابزارهایی مثل Sass می روید که کارشان همین است و خروجی شان باز هم همین CSS ساده است.