شاید به این فکر باشید که چگونه برای یک عنصر در وب سایت خود باید یک استایل تعریف کنیم به گونه ای که به تمامی عناصر مشابه آن عنصر در وب سایت شما از یک استایل خاص پیروی کنند؟؟؟ آیا می توان به دو عنصر مختلف یک استایل بخشید؟؟؟ برای دریافت جواب این سوالات در این آموزش همراه ما باشید.
برای اینکه بخواهیم به یک عنصر در وب سایت خود ویژگی های مشخصی بدهیم ابتدا باید آن عنصر را انتخاب کنیم. برای انتخاب عناصر مورد نظر در وب سایت خود از Selector ها استفاده می کنیم.
اگر بخواهیم در یک تعریف ساده Selector ها را تعریف کنیم باید بگوییم Selector ها الگویی هستند که به ما اجازه می دهند از طریق آن ها یک المان در زبان نشانه گذاری HTML را انتخاب و به آن ویژگی های مورد نظر خود را اعمال کنیم.
از انتخابگرها برای ایجاد استایل های مناسب به صورت تکی یا جزئی استفاده می شود، بگذارید با یک مثال به تثبیت این جمله بپردازیم. فرض کنید میخ.اهید چهار پنجره در دو ردیف دوتایی را رنگ نمایید به چند حالت می توانید این پنجره ها را رنگ نمایید برای مثال می توانید همه ی پنجره های مورد نظر را به رنگ
آبی در بیاورید یا فقط پنجره ی دوم از ردیف بالایی را رنگ نمایید. نحوه ی رنگ کردن این پنجره ها به انتخاب شما می باشد در زبان نشانه گذاری CSS نیز شما قردت انتخاب دارید که این قدرت به وسیله ی انتخابگرها ایجاد می شود و شما از آن بهره می برید.
نکته ی بسیار مهم: در استفاده از Selector ها باید دقت فراوانی داشته باشید استفاده ی درست از آن ها باعث کوتاهی وکم کردن حجم کد ها می باشد، اما اگر از انتخابگر ها درست استفاده نکنیم هنگامی که بخواهیم کد های خود را ویرایش کنیم به مشکل برمی خوریم و شاید مجبود باشیم کد ها را از اول باز نویسی کنیم پس استفاده از Selector ها در همه مکان ها درست نیست و فقط باید از آن در بعضی از موارد خاص استفاده کرد. یادتان باشد استفاده از Selector ها نیازمند تمرین و مهارت بالا می باشد.
Selector ها به چهار دسته ی اصلی تقسیم می شوند که در اینجا به معرفی و آموزش کار با آن ها می پردازیم:
انتخابگرهای سراسری (Universal) به انتخابگرهایی می گویند که بر روی تمامی عناصر انتخابی مورد نظر ما بر وب سایت اعمال می شود. برای استفاده از Selector سراسری باید از عملگر ستاره (*) استفاده کنیم.
نحوه ی استفاده از انتخابگر سراسری به این گونه است که ابتدا المان ستاره (*) را نوشته و سپس آکولاد خود را باز می کنیم حال ویژگی های مورد نظر خود را درون آکولاد نوشته سپس آکولاد را می بندیم. به نمونه کد زیر توجه کنید:
* {
color: red;
background: #000
}
برای مثال در کد بالا تمامی نوشته ها به رنگ قرمز و هر جایی که برای آن پس زمینه (Background) تعریف شده باشد به رنگ سیاه مبدل می شود.
نکته: البته عموما هیچ فرد عاقلی از کد بالا در وب سایت خود استفاده نمی کند و خیلی کم پیش می اید که کسی از کد نویسی بالا در وبسایت خود استفاده کند.
در این نوع انتخابگر المان های انتخاب کننده تگ ها و شناسه های زبان HTML می باشند، به این انتخابگر، انتخابگر تگ نیز می گویند که از طریق آن می توان به تمامی تگ ها یا نوع خاصیس از تگ ها ویژگی های مورد نظز خود را اعمال کنیم. نحوه ی کار با این المان ها بسیار ساده می باشد فقط کافیست اسم تگ مورد نظر خود را بنویسیم و ویژگی های مورد نظر خود را به آن اعمال می کنیم.
البته ناگفته نماند که این ویژگی حالت های مختلفی برای نوشتن دارد و ما در اینجا به آموزش این حالات می پردازیم.
اولین و راحتترین نوع آن نوشتن تنها یک المان بدون هیچ ترکیب خاصی می باشد که تمام خاصیت های موجود در صفحه ویژگی های مورد نظر ما را می گیرند. به نمونه کد زیر توجه کنید:
p {
color: red;
background: #000
}
در مثال بالا تمامی نوشته هایی که درون تگ p قرار دارند به رنگ قرمز با پس زمینه ی سیاه مبدل می شوند.
حال اگر بخواهیم به چندین تگ به صورت همزمان استایل های مورد نظر خود را اعمال کنیم از این حالت استفاده میکنیم به گونه ای که ابتدا یک تگ را نوشته و تگ های بعدی را به وسیله ی کامای انگلیسی از هم جدا می کنیم. به نمونه کد زیر توجه کنید:
p,h1 {
color: red;
background: #000;
font-size: 30px;
}
در مثال بالا تمامی تگ های p و H1 به رنگ قرمز با پس زمینه ی سیاه و به فونت ۳۰px تبدیل می شوند.
حال شاید نیاز باشد به صورت حرفه ای تر به این مبحث بپردازیم و بخواهیم به تگ های درون یک تگ دیگر ویژگی های خاصی بدهیم در این صورت ابتدا تگ مادر را نوشته و سپس تگ فرزند را می نویسیم و ما بین آن ها فقط یک فاصله می گذاریم.
نکته: یادتان باشد در این روش تمامی ویژگی ها به تگ فرزند اضافه می شود و تگ مادر در این بین فقط یک واسطه می باشد. به نمونه کد زیر توجه کنید:
[CSS]
p span {
color: red;
background: #000;
}
[/CSS]
برای مثال در کد بالا تگ های Span درون یک تگ p به رنگ قرمز و پس زمینه ی سیاه مبدل شده اند.
این حالت شبیه حالت بالا می باشد اما یک تفاوت اصلی در این دو حالت وجود دارد و آن هم این است که در حالت بالا تمامی تمامی فرزندان را شامل می شود اما در این حالت فقط فرزندان اصلی شامل این ویژگی ها می شوند. به نمونه کد زیر توجه کنید:
p>span {
color: red;
background: #000;
}
در این حالت به تمامی تگ های span که فرزندان اصلی تگ p می باشند استایل مورد نظر ما اعمال می شود.
در این حالت در صورتی که اولین تگ بعد از تگ مورد نظر ما تگ مربوطه باشد شامل ویژگی های مورد نظر ما می شود. به نمونه کد زیر توجه کنید:
p+span {
color: red;
background: #000;
}
برای مثال در نمونه کد بالا اولین تگی که بعد از تگ p وجود دارد اگر تگ span باشد به رنگ قرمز و با پس زمینه ی مشکی مبدل می شود اما در صورتی که مابین تگ p و Span یک تگ دیگر وجود داشته باشد کد بالا تاثیری نخواهد داشت.
از این حالت برای انتخاب تمام حالت هایی که element2 قبل از element1 آمده است می باشد. برای فهم بیشتر به نمونه کد زیر توجه کنید:
}
h2~p{
color: red;
background: #000;
}
برای مثال در نمونه کد بالا تمامی تگ های p که قبل از تگ h2 امده است به رنگ قرمز با پس زمینه ی مشکی مبدل می شود.
در این حالت تمامی لینک های فعال مشخص و استایل های مورد نظر ما را می گیرند. به نمونه کد زیر توجه کنید:
a:active {
color: #000
}
در نمونه کد بالا تمامی لینک های فعال به رنگ مشکی مبدل می شوند.
در این حالت از انتخابگر های تگ تمامی لینک های مورد نظر ما که بر روی آن ها کلیک نشده است را انتخاب و ویژگی های مورد نظر ما را بر روی آن اعمال می کند. به نمونه کد زیر توجه کنید:
a:link {
color: green
}
برای مثال در نمونه کد بالا تمامی لینک هایی که بر روی آن کلیکک نشده است به رنگ سبز مبدل می شوند.
در این حالت تمامی تگ های مورد نظر که بر روی آن ها کلیک شده است را انتخاب و ویژگی های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:
a:visited {
color: yellow
}
در این کد تمامی تگ هایی که بر روی آن ها کلیک شده است به رنگ زرد مبدل می شود.
در این حالت تمامی اجزای مورد نظر ما که موس بر روی آن ها قرار گرفته است انتخاب و ویژگی های مورد نظر ما بر روی آن اعمال می شود. به نمونه کد زیر توجه کنید:
h1:hover {
color: red;
font-size: 40px;
transition: 0.5s
}
برای مثال در نمونه کد بالا زمانی که موس بر روی تگ H1 قرار می گیرد در زمان نیم ثانیه بزرگتر شده و به رنگ قرمز مبدل می شود.
نکته: همانطور که در دو حالت link و Visited مشاهده کردید از این ویژگی ها معمولا برای تگ a استفاده می شود و از حالت hover در هر وضعیتی می توان استفاده کرد برای مثال شما می توانید به یک تگ H1 نیز حالت Hover را اضافه نمایید.
از این حالت معمولا برای تگ های input استفاده می شود چون زمانی که بر روی یک تگ input کلیک می کنیم به حالت Focus نیزمبدل می شود. پس زمانی که بخواهیم به تگ input خود که در وب سایت وجود دارد ویژگی هایی اعمال کنیم از این روش استفاده می کنیم.
در این حالت از Selector اولین فرزند از تگ مورد نظر ما را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:
h1:first-child {
color: red;
font-size: 40px;
}
در نمونه کد بالا تمامی تگ های H1 که اولین فرزند از پدر خود هستند به رنگ قرمز و به اندازه ی ۴۰px مبدل می شوند.
در این حالت اولین حرف از تگ مورد نظر ما را انتخاب و ویژگی های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:
h1::first-letter {
color: red;
font-size: 40px;
}
در نمونه کد بالا اولین حرف از تگ H1 به رنگ قرمز و به اندازه ی ۴۰px مبدل می شود.
نکته: معمولا از این ویژگی برای زبان انگلیسی استفاده می شود زیرا به فقط به اولین حرف اعمال می شود.
در این حالت از Selector برای اعمال ویژگی های مورد نظر ما به اولین خط از تگ مورد نظر ما می باشد. به نمونه کد زیر توجه کنید:
h1::first-line {
color: red;
font-size: 40px;
}
برای مثال در نمونه کد بالا خط اول از تگ h1 به رنگ قرمز و با اندازه ۴۰px مبدل می شود.
حال که با انتخابگر های سراسری و نوع آشنا شدیم لازم است که با پرکاربرد ترین نوع انتخابگر آشنا شویم. انتخابگر کلاس که نامش برای همه ی ما آشناس پر کاربرد ترین نوع انتخابگر است زیرا بیشترین کدهای ما در زبان نشانه گذاری CSS توسط این انتخابگر نوشته می شود. انتخابگر های کلاس عبارتند از:
انتخابگر های کلاس چندین نوع می باشند اولین نوع انتخاب گر های کلاس خود کلاس می باشد. از طریق کلاس بندی ما می توانیم به یک مبحث یا بخشی از وب سایت خود ویژگی ای مورد نظر خود را اعمال کنیم. به نمونه کد زیر توجه کنید:
.bold {
font-weight: bold;
}
در نمونه کد بالا تمامی اجزایی که در زبان HTML کلاس bold را دارند به صورت برجسته نایمایش داده می شوند.
از طریق انتخابگر کلاس عموما ما می توانیم به تمامی اجزای یک وب سایت دسترسی داشته باشیم برای مثال یک باکس مطلب را در نظربگیرید. خب برای ایجاد یک باکس ابتدا ما یک کلاس ایجاد می نماییم سپس به اجزای درون باکس مطلب از طریق کلاسی که برای باکس مطلب خود تعیین نموده ایم دسترسی خواهیم داشت.
برای مثال اگر بخواهیم یک عکس درون باکس مطلب خود قرار دهیم نیازی نیست که یک کلاس دیگر برای عکس مورد نظر خود ایجاد کنیم فقط کافیست کلاس مورد نظر خود را نوشته و سپس تگ img رابعد از آن بنویسید. در این صورت می توانید ویژگی های مورد نظر خود را به عکس داخل باکس مطلب اعمال کنید.
.box img {
width: 50%;
height: 30%
}
حال شاید بخواهیم به یک نمونه کد در وب سایت خود بیش از یک کلاس اختصاص دهیم. برای اینکار کافیست ابتدا نام یک کلاس را نوشته سپس یک فاصله ایجاد کنیم و نام کلاس بعدی را بنویسیم. البته نا گفته نماند که شما در زبان HTML می توانید هم زمان چندین کلاس به یک مبحث بدهید. به نمونه کد توجه کنید:
<div class="bold blue">...</div>
برای مثال در نمونه کد بالا دو کلاس Bold و Blue به یک مبحث اضافه شده اند.
نکته: نام یک کلاس نمی تواند با عدد آغاز شود.
نکته: کلاس ها را می توانید به تمامی عناصر اضافه کنید و محدودیتی در این کار وجود ندارد. به نمونه کد زیر توجه کنید:
<div class="bold blue">...</div> <p class="bold">...</p> <span class="bold">...</span>
حال که به مقدمات یک کلاس آشنا شدیم حال نیاز است که با کاربرد حرفه ای نیز در این باره آشنا شوید. برای مثال در حالت نوشتاری به این گونه است که ابتدا نام کلاس یا تگ مورد نظر خود را نوشته سپس ویژگی مورد نظر خود را داخل کروشه قرار می دهیم.
یعنی به کلاس یا تگ هایی که ویژگی X را دارند استایل های مورد نظر خود را اعمال می نمایی. برای فهم بیشتر به نمونه کد زیر توجه کنید:
a[href] {
color: yellow
}
برای مثال در نمونه کد بالا تگ های a که دارای خاصیت Href می باشند به رنگ زرد مبدل می شوند.
حال می خواهیم که حالت بالا را با دقت بیشتری مورد بررسی قرار دهیم. ممکن است بعضی از ویژگی ها در زبان نشانه گذاری HTML خود دارای حالات مختلف باشند و مقادیر مختلفی بگیرند برای مثال ویژگی Target یا ویژگی Href ممکن است خصوصیات یا مقادیر متفاوتی را بگیرند را داشته باشند ولی فقط یک خصوصیت یا مقدار آن مورد نظر ما باشد در این صورت نمونه کد خود را به ویژگی مورد نظر خود نزدیک میکنیم تا خطایی برای ما وجود نداشته باشد. برای فهم بیشتر به نمونه کد زیر توجه کنید:
a[target="_blank"] {
color: red;
font-size: 30px;
}
برای مثال در نمونه کد بالا تمام تگ های a که دارای خاصیت target=”_blank” می باشند به رنگ زرد با اندازه ی ۳۰px مبدل می شوند.
در این حالت تمامی تگ ها یا کلاس هایی که دارای ویژگی Attribute با مقدار Value می باشند را انتخاب و ویژگی های مورد نظر ما را بر روی آن اعمال می کند.
نکته: در این حالت برای فراخوانی ویژگی مورد نظر ما حتما باید به صورت مجزا فراخوانی شود. برای فهم بیشتر به نمونه کد زیر توجه کنید:
a[title~=kamyabiha] {
color: red
}
برای مثال در نمونه کد بالا اگر یک Title با Kamyabiha آغاز شود به رنگ قرمز مبدل می شود.
در این حالت تمامی عناصر که ویژگی آن ها با Value آغاز می شود را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:
.class [lang|=fa] {
color: red;
}
برای مثال در نمونه کد بالا تمام کلاس هایی که با نام Class وجود دارد و ویژگی lang آن ها با fa آغاز می شود را انتخاب و به رنگ قرمز مبدل می کند.
در این حالت تمام ویژگی های Attribute که با مقدار Value آغاز می شوند انتخاب و ویژگی های مورد نظر ما به آن ها اعمال می شود. به نمونه کد زیر توجه کنید:
a[href^="https"] {
color: red
}
برای مثال در نمونه کد بالا تمامی لینک هایی که با https شروع می شود به رنگ قرمز مبدل می شوند.
در این حالت تمام ویژگی هایی که با Value تمام می شوند را انتخاب و استایل های مورد نظر ما را به آن اعمال می کند. به نمونه کد زیر توجه کنید:
a[href$=".com"] {
color: blue
}
برای مثال تمامی لینک هایی که با .com به پایان رسیده اند را به رنگ آبی مبدل می شوند.
در این حالت اگر مقدار Value درون ویژگی ما قرار داشته باشد تمامی ویژگی های مورد نظر ما به آن اعمال می شود. به نمونه کد زیر توجه کنید:
a[href*="kamyabiha"] {
color: green
}
برای مثال در نمونه کد بالا تمامی لینک هایی که درون آن کلمه ی Kamyabiha وجود دارد به رنگ سبز مبدل می شود.
نحوه ی استفاده از Selector ID مانند کلاس می باشد اما تفاوت هایی نیز دارند. اولین تفاوت بین کلاس و ID نحوه ی فراخوانی آن ها در زبان CSS می باشد. برای فراخوانی کلاس از نقطه استفاده می کنند و برای فراخوانی ID از # استفاده می شود. برای مثال به نمونه کد زیر دقت کنید:
کد HTML:
<p class="red">کمیابی ها</p> <p id="blue">کمیابی ها</p>
کد CSS:
#blue {
color: blue;
}
.red {
color: red;
}
تفاوت دیگر بین کلاس و ID کاربرد آن ها است از طریق یک کلاس شما می توانید به اجزای داخل یک کلاس نیز دسترسی داشته باشید اما به وسیله ی ID شما فقط می توانید به عنصری که ID بر روی آن فراخوانی شده است استایل بدهید.
نکته: استفاده از ID توصیه نمی شود زیرا سطح دستری محدودی دارد و باعث افزایش حجم کد های ما می شود.
خلاصه مطلب:
