با استفاده از کلاس های کلاس و شناسه

کلاس ها و شناسه ها CSS شما را گسترش می دهند

وب سایت های ساخت وب سایت های امروز نیازمند درک عمیق از CSS (Cascading Style Sheets) است. این دستورالعمل هایی است که شما به وب سایت می دهید تا تعیین شود که چطور پنجره در پنجره مرورگر طراحی شده است. شما مجموعه ای از "سبک ها" را به سند HTML خود اعمال می کنید که ظاهر و احساس صفحه وب شما را ایجاد می کند.

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

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

انتخاب کننده کلاس

انتخابگر کلاس اجازه می دهد تا چندین سبک را به یک عنصر یا برچسب در یک سند تنظیم کنید. به عنوان مثال، ممکن است بخواهید قسمت های خاصی از متن خود را با متن متفاوت از سایۀ متن موجود در سند فراخوانی کنید. این بخش های برجسته می تواند یک هشدار باشد که در صفحه تنظیم می کنید. شما می توانید پاراگراف های خود را با کلاس های زیر را اختصاص دهید:

p {color: # 0000ff؛ }
p.alert {color: # ff0000؛ }

این سبک ها رنگ تمام پاراگراف ها را به رنگ آبی (# 0000ff) تنظیم می کنند، اما هر پاراگراف با یک خصیصه کلاس «هشدار» به جای این که با قرمز رنگ (# ff0000) طراحی شود. این به این دلیل است که ویژگی کلاس، خاصیت بالاتری نسبت به اولین قانون CSS دارد که فقط از انتخابگر برچسب استفاده می کند.

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

در اینجا این است که چگونه می توان در برخی نشانه های HTML استفاده کرد:

این پاراگراف به صورت آبی نمایش داده می شود که پیش فرض برای صفحه است.

این پاراگراف نیز آبی است.

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

در این مثال، سبک "p.alert" فقط برای عناصر پاراگراف که از کلاس "alert" استفاده می کنند اعمال می شود. اگر می خواهید از آن کلاس در میان عناصر HTML استفاده کنید، به سادگی عنصر HTML را از ابتدای تماس با سبک (فقط مطمئن شوید که دوره (.) را در جای خود قرار دهید) مانند این:

.alert {background-color: # ff0000؛}

این کلاس در حال حاضر در دسترس هر عنصر است که به آن نیاز دارد. هر قطعه ای از HTML شما دارای مقدار مشخصه کلاس «هشدار» اکنون این سبک را دریافت می کند. در HTML زیر، ما هر دو پاراگراف و عنوان سطح 2 است که از کلاس "هشدار" استفاده می کنند. هر کدام از اینها یک رنگ پسزمینه قرمز براساس CSS که ما فقط نشان دادیم.

این پاراگراف به صورت قرمز نوشته خواهد شد.

و این h2 نیز قرمز است.

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

انتخابگرهای ID

انتخابگر ID به شما اجازه می دهد تا یک نام خاص را به یک سبک خاص بدون ارتباط آن با یک برچسب یا عنصر HTML دیگر بدهید. می گویند تقسیم بندی شما در نشانه گذاری HTML شما حاوی اطلاعات مربوط به یک رویداد بود.

شما می توانید این بخش را شناسه attribute "رویداد" بدهید، و سپس اگر شما می خواهید این بخش را با مرز عرضی 1 پیکسل مشخص کنید، یک کد شناسه مانند این را بنویسید:

#event {border: 1px solid # 000؛ }

چالش با انتخاب شناسه این است که آنها را نمی توان در یک سند HTML تکرار کرد. آنها باید منحصر به فرد باشند (شما می توانید همان شناسه را در چند صفحه سایت خود استفاده کنید، اما فقط یک بار در هر سند HTML شخصی). بنابراین اگر شما 3 رویداد داشته باشید که همه به این مرز نیاز داشتند، باید آنها را شناسه attributes "event1"، "event2" و "event3" بدهید و هر یک از آنها را سبک کنید. بنابراین، استفاده از خصیصه کلاس فوق الذکر "رویداد" بسیار ساده تر است و همه آنها را در یک زمان سبک می کند.

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

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

به سادگی می توانید مقدار آن خصوصیت قبل از نماد # را به ویژگی href لینک اضافه کنید، مانند این:

این پیوند است

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

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

مقاله اصلی جنیفر کریینین. ویرایش شده توسط Jeremy Girard در تاریخ 8/9/17