آشنایی با مفاهیم CSS
در CSS با چندین کلمه رو به رو خواهید شد که باید در همین ابتدا با آنها آشنا شوید که در آینده با خواندن آموزش ها دچار سردرگمی نشوید.
| نام فارسی | نام انگلیسی | توضیحات |
|---|
| سلکتور یا تارگت | Selector | به آغاز کننده دستور استایل گفته می شود که توسط آن مشخص می کنیم دستورات و خاصیت های استایل باید روی چه المنت یا تگی از صفحه سایتمان اجرا شود |
| خواص / خاصیت | Properties | هر یک از خاصیت های یک دستور استایل، وظیفه ای بر عهده دارد. برای مثال خاصیت font-size برای تغییر اندازه متن تگ انتخاب شده استفاده می شود |
| مقدار | Value | هر یک خاصیت در استایل، به یک مقدار نیاز دارد. برای مثال خاصیت font-size برای تعیین یک اندازه متن به یک عدد نیاز دارد. برای مثال: font-size: 14px |
| کدهای اجراپذیر | Entity | برخی از مقادیر در خاصیت ها به صورت یک کد استفاده می شوند که این کدها در استاندارد HTML خروجی خاصی را دارند. برای مثال content: ' \00A7'; |
» سلکتورها - Selector
همانطور که می دانید کدهای HTML از تگ هایی تشکیل شده است که هر کدام مخصوص یک بلوک و المنت از صفحه سایت ما هستند. ما برای نوشتن یک دستور استایل برای یک بلوک موردنظر، نیاز به مشخص کردن آن بلوک داریم. منظور از بلوک همان تگ موردنظر ماست. برای اینکه بخواهیم هر دستور استایل را برای یک قسمت خاصی از صفحه اختصاص دهیم، چندین راه داریم:
1 . استفاده از تگ موردنظر بعنوان سلکتور:
ما می توانیم از تگ موردنظرمان به عنوان سلکتور دستور استایل استفاده کنیم. در این حالت، دستور استایل ما روی تمامی تگ های صفحه سایت ما اجرا خواهد شد. برای مثال اگر بخواهیم یک تگ img که مربوط به اضافه کردن تصویر به سایت است را استایل دهی کنیم، دستور استایل را می توانیم به این صورت بنویسیم:
کد HTML تصویر نمونه:
<img src="https://betalk.ir/image.png">
کد دستور استایل برای این تصویر:
img {
display: block;
}
عبارت img در کد استایل بالا در واقع همان سلکتور ماست.
2 . استفاده از Class و ID
کلس و آی دی دو راه برای داشتن سلکتور دقیق هستند. با استفاده از این دو گزینه می توانیم یک تگ مخصوص را مشخص کرده و دستور استایل را تنها برای همان بلوک اجرا کنیم.
قدم اول برای استفاده از این راه، اضافه کردن Class یا id به کد HTML و تگ موردنظرمان است. برای مثال اگر بخواهیم یک تصویر را استایل دهی کنیم می توانیم کلس یا آی دی آن را در کدهای HTML به این صورت بنویسیم:
<img src="https://betalk.ir/image.png" class="betalkclass">
<img src="https://betalk.ir/image.png" id="betalkimg">
برای استایل دهی، بهتر است از حالت کلس استفاده کنید.
اکنون می توانیم با استفاده از کلس یا آی دی، سلکتور دقیقی بنویسیم که دستورات استایل موردنظرمان روی همان تصویر دلخواه اجرا شود و مابقی تصاویری که کلس را ندارند، به حالت عادی خود باقی بمانند.
مثال سلکتور برای کلس:
img.betalkclass {
display: block;
}
یا
.betalkclass {
display: block;
}
برای سلکتور کلس، نام کلس وارد شده برای یک تگ را با یک نقطه قبل از آن در دستور استایل می نویسیم. مانند نمونه بالا.
مثال سلکتور برای آی دی:
img#betalkimg {
display: block;
}
یا
#betalkimg {
display: block;
}
برای سلکتور آی دی، قبل از نام آی دی در دستور استایل، از نماد هشتگ استفاده می کنیم. مانند نمونه بالا.
3 . سلکتورهای چند مرحله ای / سلسله مراتبی
برای انتخاب دقیق تر یک بخش خاص از سایت، می توانیم از سایر کلس های والد یک المنت از سایت نیز در سلکتور استفاده کنیم. برای مثال فرض کنید یک تصویر داخل چنین کدی در HTML داریم:
<div class="container">
<p class="matlab">
این یک مطلب آزمایشی است
<img src="https://betalk.ir/image.png" class="betalkclass">
</p>
</div>
و می خواهیم سلکتور این تصویر را بنویسیم. می توانیم به این صورت کلس های تگ های قبل تر را هم وارد کنیم:
.container .matlab .betalkclass {
display: block;
}
4 . سلکتور یک تگ با چند کلس:
در کد HTML یک تگ می تواند تعداد زیادی کلس به طور همزمان داشته باشد. برای مثال:
<img src="https://betalk.ir/image.png" class="betalkclass custom featured tasvir">
اگر بخواهید تمامی کلس ها را در سلکتور دستور استایل موردنظر اضافه کنید، باید نام کلس ها را بدون قرار دادن فاصله بین نام کلس ها وارد کنید. مثال:
.betalkclass.custom.featured.tasvir {
display: block;
}
هر چند این کار نیازی نیست و با انتخاب یکی از کلس ها می توانید بلوک موردنظرتان را انتخاب کنید.
نکته اول:
اگر در سلکتور، بین کلس ها و نام تگ ها یا آی دی ها فاصله قرار ندهید، مرورگر گمان می کند که تمامی آن کلس ها و آی دی ها در یک تگ قرار گرفته اند و به دنبال تگی می گردد که آن کلس ها دقیقا داخل آن وجود داشته باشد.
نکته دوم:
برای سلکتور سلسله مراتبی، حتما دقت داشته باشید که از تگ والد و اولیه شروع کنید تا به کلس تگ موردنظر برسید. از کلس تگ های خارج از محدوده و سلسله مراتب تگ موردنظرتان استفاده نکنید!
» خاصیت ها و مقدارها
خاصیت ها وظیفه اصلی استایل دهی و تعیین ظاهر نمایشی المنت موردنظرمان را بر عهده دارند. برای مثال در کد استایل زیر:
.betalkclass {
display: block;
font-size: 14px;
font-family: Tahoma;
}
- عبارت
.betalkclass سلکتور است.
- کدهایی که داخل
{و} قرار می گیرند خاصیت ها هستند.
- هر خاصیت با نماد نقطه ویرگول یعنی
; از هم جدا می شود. فراموش کردن بستن یک خاصیت استایل با این نماد باعث به هم ریختگی استایل ها خواهد شد.
- در خاصیت های بالا، عبارات
block و 14px و Tahoma مقدار خاصیت هستند.
