جلسه پنجم: آموزش ساختار اصلی فایل CSS

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

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

ساختار اصلی فایل CSS چیه؟

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

هر بخش از کد CSS که ظاهر یک یا چند عنصر رو تعیین می‌کنه، یک قانون یا Rule نام داره. ساده‌ترین شکل یک قانون CSS این‌طوریه:

در این مثال، p سلکتوره. سلکتور یعنی انتخاب‌کننده و به مرورگر می‌گه کدوم بخش صفحه باید انتخاب بشه. هر عبارت مثل color: blue یک دستور یا Declaration هست. color و font-size ویژگی هستن؛ یعنی چیزهایی که می‌خوایم تغییر بدیم. red هم مقدار هست و مشخص می‌کنه هر ویژگی چه حالتی داشته باشه.

• سلکتور: بخش موردنظر صفحه رو انتخاب می‌کنه.
• ویژگی: مشخص می‌کنه چه چیزی تغییر کنه؛ مثلاً رنگ یا اندازه متن.
• مقدار: حالت جدید ویژگی رو تعیین می‌کنه؛ مثلاً آبی یا ۱۸ پیکسل.

دستورها داخل آکولاد باز و بسته، یعنی { }، نوشته می‌شن. بین نام ویژگی و مقدار هم دونقطه : میاد. سمی‌کالن ; دو دستور رو از هم جدا می‌کنه؛ پس وقتی چند دستور داخل یک بلوک دارید، باید بین اون‌ها سمی‌کالن بذارید. سمی‌کالن بعد از آخرین دستور اختیاریه، ولی بهتره همیشه اون رو بنویسید تا اضافه‌کردن دستور بعدی راحت‌تر باشه.

چطور اولین کد CSS رو بنویسیم؟

برای نوشتن یک قانون CSS، این چهار مرحله رو انجام بدید:

1. با یک سلکتور، بخش موردنظرتون رو انتخاب کنید. مثلاً برای انتخاب همه پاراگراف‌ها، p رو بنویسید.
2. بعد از سلکتور، یک آکولاد باز { بذارید.
3. نام ویژگی، دونقطه و مقدار اون رو بنویسید؛ مثلاً color: red.
4. دستور رو با سمی‌کالن تموم کنید و در پایان آکولاد بسته } رو بذارید.

p {  color: red;  line-height: 1.8;}

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

سلکتور در CSS چیه و چطور کار می‌کنه؟

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

انتخاب عناصر با نام تگ

اگه نام یک تگ HTML مثل p، h1 یا img رو به‌عنوان سلکتور بنویسید، همه تگ‌های هم‌نام انتخاب می‌شن. مثلاً کد زیر رنگ همه عنوان‌های سطح یک رو سبز می‌کنه:

h1 {  color: green;}

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

انتخاب عناصر با کلاس

کلاس یک نام قابل‌استفاده دوباره‌ست که با ویژگی class به تگ HTML اضافه می‌شه. در CSS باید قبل از نام کلاس یک نقطه . بذارید.

<p class="important-text">این متن مهمه.</p>.important-text {  color: red;  font-weight: bold;}

می‌تونید کلاس important-text رو روی چند عنصر مختلف بذارید تا همگی همین ظاهر رو بگیرن. نام کلاس به بزرگی و کوچکی حروف حساسه؛ پس بهتره اون رو در HTML و CSS دقیقاً یکسان بنویسید.

انتخاب یک عنصر یکتا با آیدی

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

<div id="main-banner">بنر اصلی سایت</div>#main-banner {  background-color: navy;  color: white;}

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

وقتی چند قانون یک عنصر رو تغییر می‌دن چه اتفاقی می‌افته؟

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

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

تفاوت کلاس و آیدی در CSS چیه؟

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

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

<button class="button large-button" id="buy-button">خرید</button>.button {  border: 0;  cursor: pointer;}.large-button {  padding: 12px 24px;}#buy-button {  background-color: green;}

این دکمه دو کلاس و یک آیدی داره. کلاس button می‌تونه ظاهر پایه چند دکمه رو مشخص کنه و کلاس large-button هم اندازه بزرگ‌تر رو به هر دکمه دلخواه بده. آیدی buy-button فقط برای همین دکمه یکتا می‌مونه.

سلکتورهای کاربردی دیگه در CSS

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

سلکتور عمومی

ستاره * همه عناصر صفحه رو انتخاب می‌کنه. مثلاً کد زیر روش محاسبه عرض و ارتفاع همه عناصر رو یکسان می‌کنه:

* {  box-sizing: border-box;}

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

سلکتور ویژگی

سلکتور ویژگی، عناصر رو بر اساس یک ویژگی HTML انتخاب می‌کنه. مثلاً کد زیر فقط فیلدهایی رو انتخاب می‌کنه که نوع اون‌ها ایمیله:

input[type="email"] {  border-color: blue;}

شبه‌کلاس‌ها

شبه‌کلاس یک وضعیت خاص از عنصر رو انتخاب می‌کنه. مثلاً :hover وقتی فعال می‌شه که نشانگر ماوس روی عنصر قرار بگیره:

a:hover {  color: orange;}

شبه‌عنصرها

شبه‌عنصر بخش مشخصی از یک عنصر رو هدف می‌گیره. برای نمونه، ::first-letter حرف اول یک پاراگراف رو انتخاب می‌کنه:

p::first-letter {  font-size: 32px;}

ترکیب‌کننده‌ها و انتخاب عناصر مرتبط

ترکیب‌کننده‌ها رابطه بین عناصر رو مشخص می‌کنن. مثلاً یک فاصله بین دو سلکتور یعنی عنصر دوم باید جایی داخل عنصر اول باشه:

.article p {  line-height: 2;}

این کد فقط پاراگراف‌هایی رو انتخاب می‌کنه که داخل عنصری با کلاس article قرار دارن. علامت > هم فقط فرزند مستقیم رو انتخاب می‌کنه؛ یعنی عنصری که بدون هیچ تگ واسطه‌ای داخل عنصر والد قرار گرفته.

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

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

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

چطور در فایل CSS کامنت بنویسیم؟

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

/* استایل‌های مربوط به سربرگ */.site-header {  background-color: white;}

کامنت CSS با /* شروع می‌شه و با */ تموم می‌شه. می‌تونید از اون برای جداکردن بخش‌های فایل، توضیح یک تصمیم یا غیرفعال‌کردن موقت چند دستور موقع آزمایش استفاده کنید.

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

اشتباه‌های رایج موقع نوشتن CSS

گاهی یک اشتباه خیلی کوچک باعث می‌شه استایل اجرا نشه. اگه نتیجه‌ای که انتظار داشتید دیده نشد، این موارد رو بررسی کنید:

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

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

یک مثال کامل از ساختار HTML و CSS

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

<section class="welcome-box" id="home-intro">  <h2>به سایت ما خوش اومدید</h2>  <p class="welcome-text">اینجا قراره CSS رو قدم‌به‌قدم یاد بگیریم.</p>  <a class="start-button" href="#lesson">شروع آموزش</a></section>

بعد کد زیر رو داخل فایل CSS بنویسید:

/* جعبه معرفی صفحه */#home-intro {  background-color: #f2f6ff;  padding: 24px;  border-radius: 12px;}.welcome-box h2 {  color: #1f3c88;}.welcome-text {  color: #333333;  line-height: 1.8;}.start-button {  display: inline-block;  background-color: #1f3c88;  color: white;  padding: 10px 18px;  text-decoration: none;}.start-button:hover {  background-color: #14285c;}

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

در این نمونه، آیدی home-intro کل بخش یکتا رو انتخاب می‌کنه. سلکتور .welcome-box h2 فقط عنوان داخل جعبه رو هدف می‌گیره. دو کلاس هم ظاهر متن و دکمه رو تعیین می‌کنن. شبه‌کلاس :hover رنگ دکمه رو موقع قرارگرفتن نشانگر ماوس تغییر می‌ده.

اگه نتیجه درست نبود، اول آدرس اتصال فایل CSS رو بررسی کنید. بعد مطمئن بشید نام کلاس‌ها و آیدی‌ها در HTML و CSS یکسان نوشته شدن. آکولادها، دونقطه‌ها و سمی‌کالن‌ها رو هم دوباره نگاه کنید. برای تمرین بیشتر می‌تونید رنگ‌ها، فاصله‌ها و متن نمونه رو تغییر بدید.

جمع‌بندی

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

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

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

سوالات متداول

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

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