جلسه هشتم: آموزش ویژگی‌های پرکاربرد CSS

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

همه‌چیز رو از پایه و با مثال جلو می‌بریم. در پایان هم یک کارت ساده می‌سازیم تا کاربرد color، background، margin و padding رو کنار هم ببینید. پس حتی اگه تازه CSS رو شروع کردید، می‌تونید قدم‌به‌قدم همراه بشید.

ویژگی‌های پرکاربرد CSS چه کاری انجام می‌دن؟

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

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

قبل از شروع چه چیزهایی باید بلد باشید؟

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

اگه هنوز نمی‌دونید مسیر یادگیری طراحی سایت چطور شروع می‌شه، راهنمای شروع طراحی سایت برای مبتدی‌ها کمکتون می‌کنه تصویر روشن‌تری از این مسیر داشته باشید.

CSS Reset و Normalize چه فرقی دارن؟

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

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

آیا استفاده از Reset یا Normalize ضروریه؟

نه، اجباری نیست. برای یک تمرین کوچک می‌تونید بدون هیچ فایل اضافه‌ای کار کنید. توی پروژه‌های بزرگ‌تر، یک Reset سبک یا Normalize کمک می‌کنه نقطه شروع مرتب‌تر و رفتار مرورگرها هماهنگ‌تر باشه.

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

چطور Modern Normalize رو به پروژه اضافه کنید؟

Modern Normalize یک گزینه سبک برای هماهنگ‌ترکردن استایل‌های پیش‌فرض مرورگرهای مدرنه. برای دریافت نسخه درست، وارد مخزن رسمی پروژه بشید و روش نصب یا دریافت فایل رو از بخش README همون مخزن بررسی کنید. بعد فایل CSS رو قبل از فایل استایل خودتون به صفحه وصل کنید:

<link rel="stylesheet" href="modern-normalize.css">
<link rel="stylesheet" href="style.css">

ترتیب این دو خط مهمه. فایل استایل خودتون باید بعد از Modern Normalize بیاد تا بتونید قانون‌های پایه رو با استایل‌های دلخواهتون تغییر بدید. یادتون نره آدرس فایل باید با محل واقعی اون توی پروژه شما هماهنگ باشه.

تغییر رنگ متن با ویژگی Color

ویژگی color رنگ متن داخل یک عنصر رو مشخص می‌کنه. برای نمونه، کد زیر رنگ همه پاراگراف‌هایی رو که کلاس intro دارن آبی می‌کنه:

.intro {  color: blue;}

روش‌های نوشتن رنگ در CSS

• نام رنگ‌ها: برای رنگ‌های ساده می‌تونید از نام‌هایی مثل red، blue و black استفاده کنید.
• کد HEX: مقدارهایی مثل #2563eb انتخاب دقیق‌تری از رنگ در اختیارتون می‌ذارن.
• مقادیر RGB و RGBA: در rgb() مقدار قرمز، سبز و آبی رو مشخص می‌کنید. شکل قدیمی rgba() هم برای تعیین شفافیت کاربرد داره.
• مقادیر HSL و HSLA: در hsl() رنگ رو با فام، اشباع و روشنایی می‌سازید. شکل قدیمی hsla() هم مقدار شفافیت رو می‌پذیره.

.title {  color: #2563eb;}.description {  color: rgb(55 65 81 / 80%);}.link {  color: hsl(221 83% 53%);}

هیچ‌کدوم از این روش‌ها برای همه موقعیت‌ها بهترین انتخاب نیستن. مهم اینه که توی پروژه از یک روش مشخص و یک مجموعه رنگ ثابت استفاده کنید تا تغییر و نگهداری رنگ‌ها راحت‌تر بشه.

تنظیم پس‌زمینه با ویژگی Background

ویژگی background یک ویژگی کوتاه‌نویسیه. یعنی می‌تونید رنگ، تصویر، موقعیت و چند تنظیم دیگه پس‌زمینه رو توی یک خط بنویسید.

تفاوت Background و Background-Color

background-color فقط رنگ پس‌زمینه رو تغییر می‌ده. ولی background چند تنظیم پس‌زمینه رو یکجا می‌پذیره. اگه فقط رنگ می‌خواید، استفاده از background-color خواناتر هست.

.box {  background-color: #red;}

گذاشتن تصویر در پس‌زمینه با Background-Image

با background-image می‌تونید یک تصویر رو پشت محتوای عنصر بذارید. آدرس داخل url() باید به محل درست فایل تصویر اشاره کنه:

.box {  background-image: url("tasvir.jpg");}

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

کنترل اندازه و جای تصویر پس‌زمینه

• ویژگی Background-Size: اندازه تصویر رو کنترل می‌کنه. مقدار cover کل فضای عنصر رو می‌پوشونه و ممکنه بخشی از تصویر بریده بشه.
• ویژگی Background-Position: محل قرارگرفتن تصویر رو مشخص می‌کنه. مقدار center تصویر رو وسط می‌ذاره.
• ویژگی Background-Repeat: تعیین می‌کنه تصویر تکرار بشه یا نه. مقدار no-repeat جلوی تکرار رو می‌گیره.
• ویژگی Background-Attachment: رفتار تصویر موقع اسکرول رو کنترل می‌کنه. مقدار پیش‌فرض اون scroll هست.

.hero {  background-image: url("images/hero.jpg");  background-size: cover;  background-position: center;  background-repeat: no-repeat;}

آشنایی با Background-Origin و Background-Clip

background-origin مشخص می‌کنه محاسبه موقعیت تصویر پس‌زمینه از کدوم بخش جعبه عنصر شروع بشه. background-clip هم محدوده‌ای رو تعیین می‌کنه که رنگ یا تصویر پس‌زمینه داخل اون دیده بشه.

برای شروع لازم نیست مقدارهای این دو ویژگی رو حفظ کنید. فقط بدونید گزینه‌های رایجشون border-box، padding-box و content-box هستن.

ساخت فاصله بیرونی با Margin

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

تعیین فاصله در چهار جهت

برای هر جهت یک ویژگی جدا دارید: margin-top برای بالا، margin-right برای راست، margin-bottom برای پایین و margin-left برای چپ.

.card {  margin-top: 20px;  margin-right: 10px;  margin-bottom: 20px;  margin-left: 10px;}

روش کوتاه‌نویسی Margin با یک تا چهار مقدار

• margin: 20px; فاصله هر چهار جهت رو ۲۰ پیکسل می‌کنه.
• margin: 20px 10px; مقدار اول برای بالا و پایین و مقدار دوم برای راست و چپ هست.
• margin: 20px 10px 30px; مقدارها به‌ترتیب برای بالا، راست و چپ، و پایین هستن.
• margin: 20px 10px 30px 5px; ترتیب چهار مقدار از بالا و در جهت ساعت‌گرد اینه: بالا، راست، پایین و چپ.

کاربرد Margin: Auto و مقدار منفی

مقدار auto می‌تونه فضای باقی‌مونده رو بین Marginها تقسیم کنه. یکی از کاربردهای رایجش وسط‌چین‌کردن افقی یک عنصر بلوکیه که عرض مشخصی داره:

.card {  width: 300px;  margin: 20px auto;}

Margin مقدار منفی هم می‌پذیره و می‌تونه عنصرها رو به هم نزدیک کنه یا روی هم بندازه. بهتره اول از فاصله‌های معمولی استفاده کنید و فقط وقتی دلیل مشخصی دارید سراغ مقدار منفی برید.

Margin Collapsing یا ترکیب فاصله‌های عمودی چیه؟

توی بعضی شرایط، Marginهای عمودی عناصر بلوکی که توی جریان عادی صفحه کنار هم قرار گرفتن با هم ترکیب می‌شن. توی این حالت، مرورگر معمولا به‌جای جمع‌کردن دو فاصله مثبت، فاصله بزرگ‌تر رو نگه می‌داره. به این رفتار margin collapsing یا ترکیب Marginها می‌گن.

مثلا اگه پایین عنصر اول ۳۰ پیکسل Margin و بالای عنصر بعدی ۲۰ پیکسل Margin داشته باشه، فاصله نهایی ممکنه ۳۰ پیکسل باشه، نه ۵۰ پیکسل. وجود Border، Padding یا محتوای جداکننده می‌تونه جلوی بعضی حالت‌های این ترکیب رو بگیره. Marginهای عناصر داخل چیدمان Flexbox یا Grid هم به این شکل با هم ترکیب نمی‌شن.

ساخت فاصله داخلی با Padding

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

تعیین فاصله داخلی در چهار جهت

چهار ویژگی padding-top، padding-right، padding-bottom و padding-left فاصله داخلی بالا، راست، پایین و چپ رو جداگانه کنترل می‌کنن.

.card {  padding-top: 24px;  padding-right: 16px;  padding-bottom: 24px;  padding-left: 16px;}

روش کوتاه‌نویسی Padding با یک تا چهار مقدار

قانون کوتاه‌نویسی Padding دقیقا مثل Margin هست. با یک مقدار هر چهار جهت، با دو مقدار محور عمودی و افقی، با سه مقدار بالا و راست‌وچپ و پایین، و با چهار مقدار بالا، راست، پایین و چپ رو تنظیم می‌کنید.

.card {  padding: 24px 16px;}

چرا Padding مقدار Auto یا منفی نمی‌گیره؟

Padding فضای داخلی جعبه رو مشخص می‌کنه، پس مقدار منفی برای اون معتبر نیست. مقدار auto هم مثل Margin فضای باقی‌مونده رو تقسیم نمی‌کنه و در عمل برای Padding قابل استفاده نیست.

تفاوت Margin و Padding به زبان ساده

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

برای هر موقعیت از کدوم ویژگی استفاده کنید؟

• برای فاصله بین دو کارت، عنوان یا بخش جدا از Margin استفاده کنید.
• برای فاصله متن دکمه از لبه‌های دکمه از Padding استفاده کنید.
• برای وسط‌چین‌کردن افقی یک کادر با عرض مشخص، margin-inline: auto انتخاب مناسبیه.
• برای بزرگ‌ترکردن فضای قابل کلیک یک لینک یا دکمه، Padding کاربردی‌تره.

کنترل اندازه عناصر با Box-Sizing

ویژگی box-sizing تعیین می‌کنه عرض و ارتفاع یک عنصر چطور محاسبه بشن. شناخت این ویژگی جلوی خیلی از سردرگمی‌ها بعد از اضافه‌کردن Padding و Border رو می‌گیره.

تفاوت Content-Box و Border-Box

content-box مقدار پیش‌فرضه. در این حالت، عرضی که می‌نویسید فقط برای محتوا حساب می‌شه و Padding و Border به اون اضافه می‌شن.

با border-box، عرض اعلام‌شده شامل محتوا، Padding و Border می‌شه. مثلا عنصری با عرض ۳۰۰ پیکسل حتی بعد از اضافه‌شدن Padding همچنان ۳۰۰ پیکسل فضا می‌گیره.

تنظیم Box-Sizing برای همه عناصر صفحه

توی خیلی از پروژه‌ها border-box رو برای همه عناصر فعال می‌کنن تا محاسبه اندازه‌ها ساده‌تر بشه:

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

واحدهای پرکاربرد در ویژگی‌های CSS

• واحد پیکسل یا px: برای اندازه‌های مشخص مثل ضخامت Border یا فاصله‌های کوچک کاربرد داره.
• واحد درصد یا %: مقدار درصد همیشه به یک مرجع وابسته‌ست، ولی این مرجع با توجه به ویژگی CSS فرق می‌کنه. برای نمونه، درصد عرض معمولا با عرض بخش نگهدارنده محاسبه می‌شه. پس بهتره رفتار درصد رو برای همون ویژگی‌ای که استفاده می‌کنید بررسی کنید.
• واحدهای rem و em: واحد rem به اندازه فونت عنصر ریشه وابسته‌ست. واحد em هم در خیلی از ویژگی‌ها به اندازه فونت همون عنصر وابسته‌ست.
• واحدهای vw و vh: به عرض و ارتفاع فضای قابل‌مشاهده مرورگر وابسته هستن. هر 1vw برابر یک درصد عرض و هر 1vh برابر یک درصد ارتفاع این فضاست.

روی مرورگرهای موبایل، نوار آدرس و ابزارهای مرورگر می‌تونن ارتفاع قابل‌مشاهده رو تغییر بدن. به همین دلیل، استفاده از 100vh برای بخش‌های تمام‌صفحه همیشه نتیجه‌ای که انتظار دارید رو نمی‌ده. واحدهای جدیدتری مثل dvh، svh و lvh برای مدیریت دقیق‌تر این حالت‌ها ساخته شدن، ولی برای شروع لازم نیست همه اون‌ها رو حفظ کنید.

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

یک تمرین ساده با Color، Background، Margin و Padding

ساخت یک کارت ساده قدم‌به‌قدم

اول این کد HTML رو داخل بدنه صفحه بذارید:

<article class="card">  <h2>شروع یادگیری CSS</h2>  <p>با چند ویژگی ساده، ظاهر این کارت رو تغییر می‌دیم.</p>  <a href="https://mihanwp.com/css-properties-6/">ادامه آموزش</a></article>

حالا کد CSS زیر رو به فایل استایلتون اضافه کنید:

*,*::before,*::after {  box-sizing: border-box;}.card {  width: min(90%, 420px);  margin: 40px auto;  padding: 24px;  background-color: #f3f4f6;  color: #1f2937;  border-radius: 12px;}.card h2 {  margin-top: 0;  color: #1d4ed8;}.card a {  display: inline-block;  margin-top: 8px;  padding: 10px 16px;  background-color: #1d4ed8;  color: #ffffff;  text-decoration: none;  border-radius: 8px;}

توی این مثال، margin کارت رو از بالا و پایین فاصله می‌ده و اون رو افقی وسط می‌ذاره. padding متن رو از لبه‌های کارت دور می‌کنه. رنگ متن با color و رنگ پشت کارت و لینک با background-color تنظیم می‌شه.

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

بررسی نتیجه و پیدا کردن خطاهای رایج

• اگه استایل نمایش داده نمی‌شه، اتصال فایل CSS و نام کلاس card رو بررسی کنید.
• اگه تصویر پس‌زمینه دیده نمی‌شه، مسیر نوشته‌شده داخل url() رو بررسی کنید.
• اگه عنصر از عرض تعیین‌شده بزرگ‌تره، مطمئن بشید box-sizing: border-box اعمال شده.
• اگه فاصله عمودی مطابق جمع دو Margin نیست، احتمال ترکیب Marginهای عمودی رو بررسی کنید.
• اگه یک ویژگی کار نمی‌کنه، وجود نقطه‌ویرگول، دونقطه و آکولادهای باز و بسته رو چک کنید.

بعد از تسلط روی این ویژگی‌ها، می‌تونید سراغ حرکت‌های نرم‌تر برید و ویژگی Transition در CSS رو هم یاد بگیرید.

جمع‌بندی آموزش ویژگی‌های پرکاربرد CSS

برای انتخاب ویژگی مناسب، این چک‌لیست ساده رو یادتون نگه دارید: برای رنگ متن از color، برای رنگ یا تصویر پشت عنصر از ویژگی‌های background، برای فاصله بیرون کادر از margin و برای فاصله داخل کادر از padding استفاده کنید. box-sizing: border-box هم کمک می‌کنه اندازه نهایی عناصر قابل پیش‌بینی‌تر بمونه.

بهترین راه یادگیری این ویژگی‌ها تمرینه. کارت نمونه رو بسازید و مقدار رنگ‌ها، فاصله‌ها و عرض اون رو چند بار تغییر بدید. با همین تمرین ساده، تفاوت Margin و Padding خیلی سریع براتون جا می‌افته.

سؤال‌های متداول

تیم تولید محتوا

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