انواع Selector
اگر نیاز داشته باشید استایلی به صورت سراسری اعمال شود میتوانید از selector هایی استفاده کنید که به صورت یک جا همه ی عناصر از یک نوع را انتخاب میکنند. در غیر این صورت میتوان از selector های دیگری استفاده کرد که محدوده ی انتخاب کوچکتری دارند و عناصری خاص را انتخاب میکنند. selector ها به شما قدرت زیادی میدهند در این فصل به انواع آنها خواهیم پرداخت.
در نمونه مثالی که در زیر آورده شده است selector یا انتخاب کننده، h1 است که اشاره به تمام عناصر h1 ایی دارد که در صفحه وجود دارد. نوع فونت و رنگی که در بلاک اعلان مشخص شده است بر روی تمامی عناصر <h1> در صفحه اعمال میشود :
} h1
; font-family : Tahoma,Arial,sans-serif
; color : #CCCCFF
{
Type Selector : فرمت بندی تگ های HTML
selector هایی که برای فرمت بندی تگ های مشخصی از HTML استفاده میشود ، انتخاب کننده های type یا element نام دارند و از آن جایی که روی همه ی تگ هایی از یک نوع در یک صفحه اعمال میشوند ابزاری بسیار موثر در فرمت بندی هستند.
با استفاده از Type Selector ها میتوانید با کمترین هزینه و تلاش تغییرات جامعی را در طراحی خود ایجاد کنید. برای مثال وقتی که میخواهید متن هر پاراگراف در صفحه را فرمت بندی کنید به طریقی که دارای فونت ، رنگ و اندازه ی یکسانی باشد، کافیست استایلی را با انتخاب کننده ی p تعریف کنید :
} p
;font-family :Tahoma
;font-size :14px
;font-weight :bold
;color :#4caf50
{
یکی از مواردی که کار با انتخاب کننده های type را ساده کرده است این است که بعد تعریف استایلی با نام عنصر مورد نظر، دیگر نیاز به انجام کار دیگری نیست و اعمال استایل روی عناصر انتخاب شده توسط مرورگر انجام میشود.
Type Selector ها ایراداتی هم دارند برای مثال اگر بخواهیم بعضی از پاراگراف ها در صفحه از بعضی دیگر متمایز باشند باید چکار کنیم؟ از آنجایی که یک انتخاب کننده ی type اطلاعات کافی را برای مرورگر برای مشخص کردن تفاوت پاراگراف هایی که میخواهیم از دیگر پاراگراف ها متمایز باشند فراهم نمی آورد، نمیتوان از آنها در اینگونه موارد استفاده کرد. خوشبختانه CSS روش هایی را برای اینگونه مشکلات تدارک دیده است که یکی از آنها class selector ها هستند.
Class Selectors : اشاره دقیق به عناصر مورد نظر
وقتی که میخواهید یک یا چند عنصر، ظاهری متفاوت از دیگر عناصر مربوطه در صفحه داشته باشند، برای مثال یک یا چند تصویر در صفحه دارای یک بوردر قرمز رنگ بوده در حالی که دیگر تصاویر در صفحه بدون فرمت بندی باشند، از انتخاب کننده های class استفاده میکنیم.
برای ایجاد یک انتخاب کننده ی class کافیست نامی را برای آن مشخص کنید سپس این نام را فقط روی تگ هایی از HTML که میخواهید فرمت بندی کنید اعمال کنید. برای مثال کلاسی به نام copyright. را ایجاد میکنیم و آن را تنها روی پاراگرافی که حاوی اطلاعات کپی رایت است اعمال میکنیم :
} copyright.
;font-family :Tahoma
;font-size :12px
;margin-top :15px
;padding :10px 20px
{
بعد از تعریف استایل بالا اکنون برای اعمال آن به پاراگراف مورد نظر، صفت class را به پاراگراف خود اضافه میکنیم :
<p class = "copyright " >All Rights Reserved </p >
Class Selectors ها به شما اجازه میدهند به طور دقیق به عنصری خاص اشاره کنید. برای مثال شما میخواهید یک یا دو کلمه را داخل یک پاراگراف فرمت بندی کنید؛ در اینجا شما نمیخواهید استایل مورد نظر روی تمامی عنصر پاراگراف اعمال شود و فقط چند عبارت در آن فرمتی متفاوت داشته باشند. در این موارد میتوانید از انتخاب کننده های selector استفاده کنید. شما حتی میتوانید از انتخاب کننده های class برای اعمال استایلی یکسان روی چندین عنصری استفاده کنید که دارای تگ های مختلفی در HTML هستند.
نکته: وقتی میخواهید یک یا چندین کلمه در یک پاراگراف را فرمت بندی کنید بهتر است از تگ span استفاده کنید. روش استفاده از این تگ به این شکل است که کلمات مورد نظر خود را داخل این تگ قرار دهید و سپس استایل تعریف شده را روی آن اعمال کنید
نکاتی مهم در هنگام به نوشتن Class Selectors ها
شما احتمالا به نقطه ای که نام هر انتخاب کننده ی class با آن شروع میشود دقت کرده اید مانند copyright. و special.
در هنگام نام گذاری یک کلاس باید به قوانین زیر دقت داشت :
- نام همه ی انتخاب کننده های class با نقطه شروع میشود
- CSS برای نام گذاری class ها تنها اجازه ی استفاده از حروف، اعداد، خط فاصله و underscore را میدهد
- بعد از نقطه، نام class حتما باید با حروف شروع شود
- نام class ها به حروف کوچک و بزرگ حساس هستند پس دو نام SIDEBAR. و sidebar. دو نام class متفاوت هستند
بعد از اینکه یک استایل از نوع class را ایجاد کردید باید مشخص کنید کجا میخواهید از این استایل استفاده کنید. برای این کار صفت class را به تگ های HTML ایی که میخواهید استایل روی آن اعمال شود اضافه میکنید.
در نمونه مثال زیر نحوه ی افزودن صفت class به یک عنصر پاراگراف مشخص شده است :
<p class = "special " >This is a paragraph </p >
به یاد داشته باشید که هنگام به کار بردن صفت class برای تگ HTML نباید از نقطه برای نام class استفاده کنید و نقطه فقط در هنگام مشخص کردن نام برای انتخاب کننده ی کلاس به کار میرود.
اعمال چندین class بر روی یک عنصر
نه تنها میتوان از یک class یکسان برای چندین تگ مختلف استفاده کرد بلکه میتوان چندین class را روی یک تگ اعمال کرد و حتی این روشی رایج نیز محصوب میشود. تصور کنید در حال طراحی قسمت سبد خرید برای یک فروشگاه اینترنتی هستید. این قسمت نیاز به چندین button مختلف دارد که هر کدام کار متفاوتی انجام میدهند. یکی برای حذف محصولات از سبد خرید به کار میرود و دیگری برای اضافه کردن محصول به سبد خرید و دکمه ی سومی نیز برای ویرایش تعداد محصول استفاده میشود.
در این موارد یک طراح با تجربه به توجه به اینکه دکمه ها میتواند اشتراکات و تفاوت هایی داشته باشد به این شکل عمل میکند : یک کلاس طراحی کرده که به تمامی دکمه ها اعمال میشود و با طراحی سه کلاس دیگر که هر کدام مخصوص هر دکمه است کار را به پایان میرساند :
} btn.
;border-radius : 5px
;font-family : Arial, Helvetica, serif
;font-size : .8 em
{
و اکنون کلاس هایی برای هر button :
} delete.
;background-color : red
{
} add.
;background-color : green
{
} edit.
;background-color : grey
{
نحوه ی استفاده از کلاس ها تعریف شده در بالا به صورت زیر است :
<button class = "btn add " >Add </button >
<button class = "btn delete " >Delete </button >
<button class = "btn edit " >Edit </button >