انتخابگر نوع عنصر css. انتخابگرها انتخابگرها در CSS
انتخابگر در css چیست؟توصیفی از آن عنصر یا گروهی از عناصر است که به مرورگر نشان می دهد که کدام عنصر را برای اعمال سبک به آن انتخاب کند. بیایید نگاهی به انتخابگرهای اصلی CSS بیندازیم.
1) X
.topic-title ( پس زمینه-رنگ: زرد؛ )انتخابگر CSS توسط کلاس X. تفاوت بین یک id و یک کلاس در این است که چندین عنصر در یک صفحه می توانند یک کلاس داشته باشند و id همیشه منحصر به فرد است. کلاس ها باید برای اعمال یک سبک به چندین عنصر استفاده شوند.
- کروم
- فایرفاکس
- سافاری
- اپرا
2) #X
#محتوا (عرض: 960 پیکسل؛ حاشیه: 0 خودکار؛ )انتخابگر CSS با شناسه. علامت پوند در جلوی X انتخابگر CSS عنصری را انتخاب می‌کند که id = X است. هنگام استایل‌سازی با id، همیشه باید به یاد داشته باشید که باید منحصر به فرد باشد - فقط یک شناسه در صفحه وجود داشته باشد. بنابراین، بهتر است از انتخابگرها بر اساس کلاس، ترکیب کلاس یا نام تگ استفاده کنید. با این حال، انتخابگرهای شناسه برای آزمایش خودکار عالی هستند زیرا آنها را انجام می دهند به شما این امکان را می دهد که فوراً با عنصر مناسب تعامل کنید و مطمئن شوید که تنها عنصر موجود در صفحه است.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
3) *
* (حاشیه: 0؛ بالشتک: 0؛ )انتخابگر CSS برای همه عناصر. علامت ستاره تمام عناصر موجود در صفحه را انتخاب می کند. بسیاری از توسعه دهندگان از آن برای حذف (به صفر رساندن) حاشیه (حاشیه و padding) همه عناصر صفحه استفاده می کنند. با این حال، در عمل بهتر است این کار را انجام ندهید زیرا این انتخابگر CSS مرورگر را به شدت با تکرار روی تمام عناصر صفحه بارگذاری می کند.
نماد * همچنین می تواند برای انتخاب تمام عناصر فرزند استفاده شود:
#header * ( حاشیه: 5px خاکستری یکدست؛ )
این مثال همه فرزندان (فرزندان) عنصر با #header را انتخاب می کند. اما همیشه شایان ذکر است که این انتخابگر برای مرورگر بسیار سنگین است.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
4) X
a (رنگ: سبز؛ ) ol (حاشیه چپ: 15 پیکسل؛ )انتخابگر نوع CSS. چگونه همه عناصر از یک نوع را انتخاب کنیم اگر نه id و نه کلاس دارند؟ شما باید از انتخابگر CSS بر اساس نوع عنصر استفاده کنید. به عنوان مثال، برای انتخاب همه لیست های مرتب شده در یک صفحه، مانند تصویر بالا از ol (...) استفاده کنید.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
5) X Y
li a (وزن قلم: پررنگ؛ متن-تزیین: هیچکدام؛ )انتخابگر فرزند CSSیا انتخابگر فرزند CSSاغلب استفاده می شود. زمانی استفاده می شود که لازم باشد عناصری از نوع خاصی از مجموعه ای از عناصر فرزند انتخاب شوند. به عنوان مثال، شما باید تمام پیوندهایی را که در عنصر li هستند برجسته کنید. در این حالت از این انتخابگر استفاده کنید. هنگام استفاده از زنجیره‌ای از این انتخاب‌کننده‌ها، همیشه از خود بپرسید که آیا می‌توانید از یک توالی حتی کوتاه‌تر از انتخابگرها برای انتخاب یک عنصر استفاده کنید.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
6) X + Y
div + p (فونت-خانواده: "Helvetica Neue"، Arial، sans-serif؛ اندازه قلم: 18px؛ )انتخابگر عنصر مجاورانتخاب می کند فقطیک عنصر از نوع Y که بلافاصله بعد از عنصر X می آید. در این حالت، هر پاراگراف بلافاصله بعد از هر عنصر div یک نوع فونت و اندازه خاص دریافت می کند.
- چه مرورگرهایی پشتیبانی می شوند:
- IE7+
- فایرفاکس
- کروم
- سافاری
- کروم
7) X > Y
#content > ul (حاشیه: 1px سبز ثابت؛ )انتخابگر فرزند CSS. تفاوت بین انتخابگرهای X Y و X > Y در این است که انتخابگر CSS مورد نظر فقط عناصر فرزند فوری را انتخاب می کند (فقط فرزندان مستقیم را انتخاب کنید). به عنوان مثال:
- مورد فهرست
- نوادگان اولین عنصر لیست
- مورد فهرست
- مورد فهرست
انتخابگر #content > ul CSS فقط ul را انتخاب می کند که فرزند مستقیم div با id="container" است. ul که فرزند لی اول باشد را انتخاب نمی کند. این یک انتخابگر CSS نسبتاً سریع است.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
8) X ~ Y
ol ~ p ( حاشیه چپ: 10 پیکسل؛ )انتخابگر عناصر خواهر (زیر زبانی).سخت‌تر از X + Y. نه تنها اولین، بلکه تمام عناصر دیگر p را که ol را دنبال می‌کنند انتخاب می‌کند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
شبه کلاس: پیوندبرای انتخاب همه پیوندهایی که هنوز کلیک نشده اند استفاده می شود. اگر نیاز به اعمال سبک خاصی برای پیوندهایی دارید که قبلاً بازدید شده است، از این استفاده می شود شبه کلاس: بازدید شده.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
10) X
a (رنگ: قرمز؛ )انتخابگر CSS بر اساس ویژگی. در این مثال، تنها پیوندهایی انتخاب می شوند که دارای ویژگی عنوان هستند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
11) X
a (رنگ: زرد؛ )- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
12) X
a (رنگ: #dfc11f؛ )ستاره به این معنی است که مقداری که به دنبال آن هستید باید جایی در ویژگی (هر بخشی از ویژگی href) باشد. به این ترتیب لینک هایی از https://www..stijit. نیز انتخاب می شوند و رنگ طلایی برای همه لینک های انتخاب شده اعمال می شود.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
13) X
a ( پس زمینه: url(path/to/external/icon.png) بدون تکرار؛ padding-left: 15px؛ )برخی از سایت ها دارای نمادهای فلش کوچک در کنار پیوندهای سایت های دیگر هستند تا نشان دهند که آنها پیوندهای خارجی هستند. Karat "^" یک کاراکتر برای نشان دادن ابتدای یک خط است. بنابراین، برای انتخاب تمام برچسب هایی که href آنها با http شروع می شود، باید از انتخابگر CSS با کارات استفاده کنید، همانطور که در مثال بالا نشان داده شده است.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
14) X
a (رنگ: سبز؛ )این از یک عبارت منظم و نماد $ برای علامت گذاری انتهای یک خط استفاده می کند. در این مثال، ما به دنبال تمام لینک هایی هستیم که به تصاویر با پسوند jpg لینک می دهند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
15) X
a (رنگ: سبز؛ )در اینجا ما درخواست می کنیم انتخابگر CSS با ویژگی سفارشی. ما ویژگی data-filetype خود را به هر پیوند اضافه می کنیم:
ارتباط دادن
اکنون با استفاده از انتخابگر CSS فوق، می توانید تمامی لینک های منتهی به تصاویر را با هر پسوندی انتخاب کنید.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
16) X
tilde (~) به شما این امکان را می دهد که یک ویژگی خاص را از لیست ویژگی های جدا شده با فاصله انتخاب کنید. شما می توانید ویژگی data-info خود ما را بنویسید، که در آن می توانید چندین کلمه کلیدی را که با یک فاصله از هم جدا شده اند را مشخص کنید. به این ترتیب می توانید تعیین کنید که لینک خارجی باشد و به یک تصویر منتهی شود.
ارتباط دادن
با استفاده از این تکنیک، می توانیم عناصر را با ترکیبی از ویژگی های مورد نیاز خود انتخاب کنیم:
/* عنصری را انتخاب کنید که ویژگی data-info حاوی مقدار خارجی */ a (رنگ: سبز؛ ) /* عنصری را انتخاب کنید که ویژگی data-info حاوی مقدار تصویر */ a باشد (حاشیه: 2px با خط مشکی; )
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
17) X: بررسی شد
ورودی: علامت زده شده (حاشیه: 3 پیکسل ابتدای سیاه، )این شبه کلاس فقط عناصری مانند یک چک باکس یا یک دکمه رادیویی را برجسته می کند و فقط زمانی که آنها در حالت علامت گذاری شده باشند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
18) X: پس از
شبه کلاس های :before و :after بسیار مفید هستند - آنها محتوا را قبل و بعد از عنصر انتخاب شده ایجاد می کنند.
Clearfix:after ( محتوا: ""؛ نمایش: بلوک؛ واضح: هر دو؛ نمایان: پنهان؛ اندازه قلم: 0؛ ارتفاع: 0؛ ) .clearfix (*نمایش: بلوک درون خطی؛ _ارتفاع: 1%؛ )
در اینجا با استفاده از :after pseudo-class یک رشته خالی بعد از بلوک با کلاس .clearfix ایجاد می شود و پس از آن پاک می شود. این رویکرد زمانی استفاده می شود که امکان اعمال سرریز: خاصیت پنهان وجود نداشته باشد.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
19) X: شناور
div:hover ( پس زمینه رنگ: rgba(11,77,130,0.5)؛ )هنگامی که نشانگر ماوس روی یک عنصر قرار می گیرد، یک سبک خاص را بر روی آن اعمال می کند. نسخه‌های قدیمی‌تر اینترنت اکسپلورر فقط روی پیوندها :hover اعمال می‌شود.
A: شناور (حاشیه پایین: 1 پیکسل آبی نقطه‌دار؛ )
- چه مرورگرهایی پشتیبانی می شوند:
- IE6+ (فقط برای پیوندهای موجود در IE6 اعمال می شود)
- کروم
- فایرفاکس
- سافاری
- اپرا
20) X:not(انتخاب کننده)
div:not(#content) (رنگ: خاکستری؛ )شبه طبقه نه (نفی ها)زمانی مفید است که، برای مثال، همه div ها باید انتخاب شوند، به جز موردی که دارای id="content" است.
با همان اصل، می توانید همه عناصر را به جز p انتخاب کنید:
*:not(p) (رنگ: آبی؛ )
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
21) X::pseudoElement
p:: خط اول (وزن قلم: پررنگ؛ اندازه قلم: 24 پیکسل؛ )عناصر شبه را می توان برای اعمال سبک به عناصر فرعی مانند خط اول یک پاراگراف یا حرف اول یک کلمه استفاده کرد. فقط برای عناصر بلوک اعمال می شود.
انتخاب حرف اول پاراگراف:
P:: حرف اول (فونت-خانواده: خط شکسته؛ اندازه قلم: 30 پیکسل؛ وزن قلم: پررنگ؛ بالشتک-راست: 1 پیکسل؛ )
انتخاب خط اول در یک پاراگراف:
P: خط اول (اندازه قلم: 28 پیکسل؛ وزن قلم: پررنگ؛ )
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- اپرا
22) X: فرزند اول
ul li: first-child ( border-top: none; )شبه کلاس اول فرزندتنها فرزند اول عنصر والد را انتخاب می کند. اغلب برای حذف یک حاشیه از اولین عنصر یک لیست استفاده می شود. از آن زمان این شبه طبقه وجود داشته است css 1.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری
- Opera 3.5+
- اندروید
23) X: آخرین فرزند
ul > li:last-child ( border-bottom: none; )شبه کلاس فرزند آخرآخرین فرزند عنصر والد را انتخاب می کند. فقط از ظاهر شد CSS 3.
- چه مرورگرهایی پشتیبانی می شوند:
- IE9+ (IE8 از اولین فرزند پشتیبانی می کند اما از آخرین فرزند پشتیبانی نمی کند. Microsoft (c))
- کروم
- فایرفاکس
- سافاری
- Opera 9.6+
- اندروید
24) X:فقط فرزند
div p:only-child (رنگ: سبز؛ )شبه کلاس تک فرزندبه شما امکان می دهد عناصری را انتخاب کنید که تنها فرزندان والدین خود هستند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس
- سافاری 3.0+
- Opera 9.6+
- اندروید
25) X:nth-child(n)
li:nth-child(3) (رنگ: مشکی؛ )عنصر فرزند را با عدد مشخص شده در پارامتر انتخاب می کند. انتخابگر فرزند nیک عدد صحیح را به عنوان پارامتر می گیرد، اما از 1، یعنی. اگر می خواهید مورد دوم را در لیست انتخاب کنید، از li:nth-child(2) استفاده کنید. همه کلاس‌های کاذب با استفاده از nth-child فقط با شروع ظاهر شدند CSS 3.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس 3.6+
- سافاری 3.1+
- Opera 9.6+
- اندروید 2.1+
- iOS 2.0+
26) X:nth-last-child(n)
li:nth-last-child(2) (رنگ: قرمز؛ )اگر لیست بزرگی از عناصر در ul دارید و باید عنصر سوم را از آخر انتخاب کنید؟ به جای نوشتن li:nth-child(109) می توان از آن استفاده کرد انتخابگر آخرین فرزند nth-last-child. این روش مانند روش قبلی است، اما شمارش معکوس از پایان است.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس 3.6+
- سافاری 3.1+
- Opera 9.6+
- اندروید 2.1+
- iOS 2.0+
27) X:nth-of-type(n)
ul:nth-of-type(3) (حاشیه: 1px مشکی نقطه‌دار؛ )اگر چهار لیست نامرتب در صفحه وجود دارد و فقط می‌خواهید سومی را که شناسه منحصربه‌فرد ندارد استایل کنید، باید از نوع nth استفاده کنید.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس 3.6+
- سافاری 3.1+
- Opera 9.6+
- اندروید 2.1+
- iOS 2.0+
28) X:nامین-آخرین نوع(n)
ul: nth-last-of-type(3) (حاشیه: 2px آبی برآمدگی؛ )شبه کلاس n-آخرین نوع(n)برای انتخاب عنصر n از یک نوع خاص از انتهای آن طراحی شده است.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس 3.6+
- سافاری 3.1+
- Opera 9.6+
- اندروید 2.1+
- iOS 2.0+
29) X:فقط از نوع
li:only-of-type (وزن قلم: پررنگ؛ )شبه کلاس فقط از نوععناصری را انتخاب می کند که هیچ همسایه ای در عنصر والد ندارند. برای مثال، می‌توانید تمام ulهایی را انتخاب کنید که فقط حاوی تک لی هستند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس 3.5+
- سافاری 3.1+
- Opera 9.6+
- اندروید 2.1+
- iOS 2.0+
30) X: نوع اول
ul:first-of-type > li:nth-child(3) (سبک قلم: ایتالیک؛ )شبه کلاس اول از نوعاولین عنصر از نوع داده شده را انتخاب می کند.
- چه مرورگرهایی پشتیبانی می شوند:
- کروم
- فایرفاکس 3.5+
- سافاری 3.1+
- Opera 9.5+
- اندروید 2.1+
- iOS 2.0+
مجموعه ای از قوانین طراحی (که به نوبه خود از انتخابگرهایی با بلوک تبلیغاتی تشکیل شده است) برای تگ های html خاص اعمال می شود که به دلیل آن ظاهر سایت شکل می گیرد.
انتخابگر CSS- این بخشی جدایی ناپذیر از قانون CSS است که مسئول تعیین تگ های html خاص است که سبک های طراحی مشخص شده در این قانون برای آنها اعمال می شود.
بنابراین، به لطف انتخابگرها است که مرورگر متوجه می شود که کدام عناصر کد صفحه برای اعمال سبک های طراحی خاص نیاز دارند.
ابزار انتخاب عنصر در CSS برای انتخاب هر دو عنصر کد جداگانه و کل گروه عناصر تعریف شده توسط یک ویژگی یا ویژگی دیگر بسیار منعطف و راحت است.
انواع انتخابگرهای css
مانند جملات در متن، انتخابگرهای CSS به اشکال ساده و پیچیده هستند. تفاوت بین آنها در این است که موارد پیچیده با ترکیب چندین مورد ساده به دست می آیند و برای تنظیم دقیق طراحی نهایی منبع استفاده می شوند.
فقط بر خلاف متن معمولی در شیوه نامه های آبشاری، مهم است که به چه ترتیب و چه انتخابگرهایی استفاده می کنیم. علاوه بر این، نه تنها چه عناصر و بر چه اساسی انتخاب می کنیم، بلکه سرعت پردازش کد ما به طور کلی به این بستگی دارد، اما در مقالات بعدی در مورد ظرافت ها صحبت خواهیم کرد.
انتخابگرهای ساده
- انتخابگر جهانی معمولاً مسئول انتخاب تمام عناصر سند است. با یک ستاره مشخص شده است. معمولاً برای بازنشانی سبک مرورگرهای نصب شده در آنها به طور پیش فرض استفاده می شود تا هرکسی که از سایت بازدید می کند در صورت استفاده از نوعی تنظیمات مرورگر خود یا افزونه های مختلف طراحی را از دست ندهد ...
* (چند سبک؛ )
- انتخابگر نوع - همه برچسب هایی را که با یک نوع خاص مطابقت دارند انتخاب می کند. با نام تگ مشخص شده است. برای تنظیم قوانین کلی برای طراحی سند استفاده می شود، به عنوان مثال، تنظیم فونت های مختلف برای سرفصل ها و متن ساده سند.
h1 (چند سبک؛ )
- – قانون css را برای همه تگ‌های دارای نام کلاس خاص اعمال می‌کند. با یک نقطه مشخص می شود که نام کلاس بلافاصله بعد از آن نوشته شده است. شاید رایج ترین انتخابگر در چیدمان باشد. معمولاً برای تنظیم سبک های مختلف برای برچسب هایی از یک نوع اما از نظر عملکرد متفاوت استفاده می شود.
ستون چپ (برخی سبک؛ )
- انتخابگر ID برای استایل دادن به عناصر منحصر به فرد در صفحه استفاده می شود. با یک هش به دنبال نام شناسه تنظیم کنید. در صورت نیاز به استایل دادن به یک عنصر صفحه خاص استفاده می شود.
#alertButton (سبک خاصی؛ )
- - برچسب هایی را انتخاب می کند که دارای ویژگی هستند. با نام ویژگی در پرانتز مشخص می شود. هم برای طراحی گروهی از تگ ها که ویژگی مشخص شده به سادگی وجود دارد و هم برای گروهی از برچسب ها که ویژگی مشخص شده با یک مقدار خاص در آن وجود دارد، می توان از آن استفاده کرد.
[ type] ( some style; ) [ type= "submit" ] ( some style; ) input[ type= "submit" ] ( some style; )
انتخابگرهای پیچیده
- انتخابگر نسل - انتخاب نوادگان (برچسب ها در داخل یک برچسب دیگر) از عناصر. با فاصله (والد - فضا - فرزند) مشخص شده است.
div p (چند سبک؛ )
- انتخابگر فرزند - عنصری را انتخاب می کند که مستقیماً در یک عنصر دیگر قرار دارد. با نماد ">" مشخص می شود (والد-بررسی-فرزند). تفاوت عنصر فرزند با عنصر فرزند در این است که مستقیماً بعد از والد (سطح اول تودرتو) می آید. در حالی که هر تگ در داخل دیگری، صرف نظر از سطح تودرتو، یک نسل در نظر گرفته می شود.
نوار کناری> ul (چند سبک؛ )
- انتخابگر عنصر خواهر - برچسبی را انتخاب می کند که بلافاصله پس از یک تگ دیگر می آید (در داخل محصور نیست، اما در ادامه آمده است). تنظیم با پلاس ( عنصر اول - پلاس - عنصر خواهر). به ندرت در عمل استفاده می شود. یک پیش نیاز برای برنامه، وجود یک والد مشترک برای همه عناصر با علامت ترکیبی "+" است.
h1+ p (چند سبک؛ )
شبه طبقات و شبه عناصر
طبقه بندی بالا انتخابگرهای CSS تنها به نشانه گذاری سند بستگی داشت. اگر بخواهیم ظاهر عناصر را بسته به تغییر حالت آن در صفحه تغییر دهیم (مثلاً تغییر رنگ یک دکمه در شناور)، می توانیم از انتخابگرهای شبه کلاس و شبه عنصر استفاده کنیم.
- به یاد داشته باشید که برخلاف html، CSS به حروف کوچک و بزرگ حساس است. یعنی کلاس های .active و .Active یکی نیستند! آنها در صورت وجود، برای عناصر مختلف در سند اعمال خواهند شد.
- انتخاب کننده های دکوراسیون را طوری نام ببرید که بعداً گیج نشوید: .leftColumn نام خوبی است، .left بستگی به شرایط دارد، اما نه خیلی خوب، .llll نوعی زباله است، خودتان بدون با نگاه کردن به کد این کلاس از کجا آمده است؟
- اجازه دهید یک بار دیگر به شما یادآوری کنم - اگر فقط یک عنصر در صفحه وجود دارد، بنابراین همه منحصر به فرد هستند، از id برای آن استفاده می کنیم، اما اگر احتمال وجود عناصر مشابه یا مشابه دیگری در صفحه وجود دارد، از آن استفاده کنید. کلاس های دکوراسیون
جمع بندی
انتخابگرها در CSS- این یک ابزار قدرتمند برای شناسایی عناصر خاصی از یک صفحه یا گروهی از عناصر است که توسط یک ویژگی خاص برای اعمال بیشتر سبک ها به آنها از بلوک تبلیغات مربوط به این انتخابگر متحد شده اند.
پس از تسلط بر اصول کلی تعامل و ایجاد انتخابگر، مشکلات طراحی اسناد وب را فراموش خواهید کرد. دانش خوب انتخابگرها می تواند زمان طرح بندی صفحات html را به میزان قابل توجهی کاهش دهد.
موضوع، اگرچه در نگاه اول بسیار گیج کننده به نظر می رسد، اما پس از مدتی تمرین، با حمایت یک نظریه کیفی، ساده و قابل درک می شود.
زبان ظاهر سند CSS به طور مداوم در حال تغییر است. نه تنها قدرت و عملکرد آن در طول زمان افزایش می یابد، بلکه انعطاف پذیری و سهولت استفاده از آن نیز افزایش می یابد.
بیایید شروع به درک کنیم. هر آموزش CSS را باز کنید، حداقل یک بخش به انواع انتخابگرها اختصاص داده می شود. این تعجب آور نیست، زیرا آنها یکی از راحت ترین راه ها برای مدیریت محتوای صفحه هستند. با کمک آنها می توانید با هر عنصر HTML ارتباط برقرار کنید. اکنون 7 نوع انتخابگر وجود دارد:
- برای برچسب ها؛
- برای کلاس ها؛
- برای شناسه؛
- جهانی؛
- ویژگی های؛
- تعامل با شبه طبقات؛
- برای مدیریت شبه عناصر
نحو ساده است. برای یادگیری نحوه استفاده از آن کافی است در مورد آنها مطالعه کنید. کدام گزینه برای کنترل محتوا در مورد شما بهتر است؟ بیایید سعی کنیم آن را بفهمیم.
انتخابگرهای برچسب
این ساده ترین گزینه است که نیازی به دانش خاصی برای ضبط ندارد. برای مدیریت برچسب ها باید از نام آنها استفاده کنید. بیایید فرض کنیم که "هدر" سایت شما در یک برچسب پیچیده شده است
مزایا - سهولت استفاده، تطبیق پذیری.
معایب - عدم انعطاف پذیری کامل. در مثال بالا، تمام تگ‌های هدر یک‌بار انتخاب می‌شوند. اما اگر فقط باید یکی را مدیریت کنید چه؟
انتخاب کنندگان کلاس
رایج ترین گزینه. طراحی شده برای مدیریت برچسب ها با ویژگی class. فرض کنید شما سه بلوک در کد خود دارید
سینتکس به صورت زیر است: یک نقطه (.") مشخص کنید، پس از آن نام کلاس را می نویسیم. برای مدیریت بلوک اول از ساختار .red استفاده می کنیم. دومی آبی و غیره است.
مهم!توصیه می شود از مقادیر معنی دار برای ویژگی کلاس استفاده کنید. استفاده از نویسه‌گردانی (مثلاً krasiviy-blok) یا ترکیبات تصادفی حروف/اعداد (ojfh834871) رفتار بدی در نظر گرفته می‌شود. در چنین کدهایی قطعاً گیج خواهید شد، ناگفته نماند کسانی که بعد از شما با پروژه سر و کار دارند با چه مشکلاتی روبرو خواهند شد. بهترین گزینه استفاده از نوعی متدولوژی مانند BEM است.
مزایا - انعطاف پذیری بسیار بالا.
معایب - چندین عنصر می توانند کلاس یکسانی داشته باشند، به این معنی که آنها به طور همزمان ویرایش می شوند. مشکل با استفاده از روش شناسی و همچنین وراثت پیش پردازنده ها حل می شود. مطمئن شوید که کمتر یاد بگیرید، sass یا برخی از پیش پردازنده های دیگر، آنها کار را بسیار ساده می کنند.
انتخابگر با شناسه
در مورد این گزینه، نظرات طراحان و برنامه نویسان صفحه آرایی مبهم است. چند کتاب درسیcssاصلا توصیه نمی شودشناسه،زیرا در صورت استفاده بی دقتی می توانند مشکلات ارثی ایجاد کنند. با این حال، بسیاری از کارشناسان به طور فعال آنها را در سراسر نشانه گذاری قرار می دهند. تو تصمیم بگیر. نحو این است: نماد هش ("# ”)، سپس نام بلوک. مثلا،#قرمز.
شناسهاز چند جهت با کلاس متفاوت است. اول اینکه هیچ دوتا در یک صفحه یکسان نیستند.شناسه.به آنها اسامی منحصر به فرد اختصاص داده شده است. ثانیاً چنین انتخاب کننده ای اولویت بیشتری دارد. این بدان معناست که اگر به بلوک یک کلاس بدهیدقرمزو در جداول مشخص کنیدcssقرمز و سپس آن را به همان اختصاص دهیدآی دی آبیو رنگ آبی را مشخص کنید، بلوک آبی می شود.
مزایا - شما می توانید یک عنصر خاص را بدون توجه به سبک های برچسب ها و کلاس ها کنترل کنید.
معایب - به راحتی در تعداد زیاد گیج می شوندشناسهوکلاس
مهم!اگر از روش BEM (یا معادل آن) استفاده می کنید،شناسهشما به طور کلی به آن نیاز ندارید این تکنیک چیدمان شامل استفاده از کلاس های منحصر به فرد است که بسیار راحت تر است.
انتخابگر جهانی
نحو: علامت ستاره ("*") و براکت های فرفری، یعنی *{}.
برای تخصیص ویژگی های خاص به همه عناصر صفحه به طور همزمان استفاده می شود. چه زمانی این ممکن است مفید باشد؟ به عنوان مثال، اگر می خواهید ویژگی صفحه را تنظیم کنیدbox-sizing: border-box.می تواند نه تنها برای کنترل تمام اجزای سند، بلکه برای کنترل تمام عناصر فرزند یک بلوک خاص، به عنوان مثال، استفاده شود.div*().
مزایا - شما می توانید تعداد زیادی از عناصر را به طور همزمان مدیریت کنید.
معایب - گزینه به اندازه کافی انعطاف پذیر نیست. علاوه بر این، استفاده از این انتخابگر در برخی موارد سرعت صفحه را کاهش می دهد.
بر اساس صفات
توانایی کنترل یک عنصر با یک ویژگی خاص را می دهد. به عنوان مثال، شما چندین تگ ورودی با ویژگی نوع متفاوت دارید. یکی از آنها متن است، دوم رمز عبور، سوم شماره است. البته، می‌توانید کلاسها یا شناسه‌هایی را برای هر کدام تنظیم کنید، اما این همیشه راحت نیست. انتخابگرهای CSS بر اساس ویژگی ها به شما امکان می دهند مقادیری را برای تگ های خاص با حداکثر دقت مشخص کنید. به عنوان مثال، مانند این:
ورودی()
این انتخابگر ویژگی همه ورودی‌های با نوع متن را انتخاب می‌کند.
این ابزار کاملاً منعطف است، می توان از آن با هر برچسبی که می تواند ویژگی داشته باشد استفاده کرد. اما این همه ماجرا نیست! مشخصات CSS توانایی دستکاری عناصر را حتی راحت تر دارد!
بیایید تصور کنیم که صفحه شما دارای ورودی با صفت placeholder="نام را وارد کنید" و محل ورودی "رمز عبور را وارد کنید" باشد. آنها همچنین می توانند با یک انتخابگر انتخاب شوند! برای این کار از ساختار زیر استفاده می شود:
input() یا input
کار انعطاف پذیرتر با ویژگی ها امکان پذیر است. فرض کنید چندین برچسب با ویژگی‌های عنوان مشابه دارید (مثلاً «کاسپین» و «کاسپین»). برای انتخاب هر دو، از انتخابگرهای زیر استفاده کنید:
CSS تمام عناصری را که دارای کاراکترهای "کاسپین" در عنوان خود هستند، یعنی هم "کاسپین" و هم "کاسپین" را انتخاب می کند.
همچنین می توانید برچسب هایی را انتخاب کنید که ویژگی های آنها با کاراکترهای خاصی شروع می شود:
یا به این جمله ختم شود:
{}.
مزایا - حداکثر انعطاف پذیری. شما می توانید هر عنصر صفحه موجود را بدون دست و پنجه نرم کردن با کلاس ها انتخاب کنید.
معایب - نسبتاً به ندرت استفاده می شود، فقط در موارد خاص. بسیاری از حروفچین‌ها متدولوژی‌ها را ترجیح می‌دهند، زیرا تعیین یک کلاس می‌تواند آسان‌تر از مرتب کردن علامت‌های مضرب و مساوی باشد. علاوه بر این، این انتخابگرها در اینترنت اکسپلورر نسخه 7 به بالا کار نمی کنند. با این حال، چه کسی اکنون به اینترنت اکسپلورر قدیمی نیاز دارد؟
انتخابگرهای شبه کلاس
شبه کلاس وضعیت یک عنصر را نشان می دهد. به عنوان مثال، :hover اتفاقی است که برای قسمتی از صفحه هنگام نگه داشتن مکان نما روی می دهد، :visited پیوند بازدید شده است. این همچنین شامل عناصری مانند: first-child و: last-child می باشد.
این نوع انتخابگر به طور فعال در طرح بندی مدرن استفاده می شود، زیرا به لطف آن می توانید صفحه را بدون استفاده از جاوا اسکریپت "زنده" کنید. به عنوان مثال، می خواهید آن را طوری بسازید که وقتی روی دکمه ای با کلاس btn قرار می گیرید، رنگ آن تغییر کند. برای این کار از ساختار زیر استفاده می کنیم:
Btn: شناور (
رنگ زمینه: قرمز
برای زیبایی، می توانید خاصیت انتقال را در ویژگی های اصلی این دکمه مشخص کنید، به عنوان مثال، در 0.5 ثانیه - در این صورت، دکمه نه بلافاصله، بلکه برای نیم ثانیه قرمز می شود.
مزایا - به طور فعال برای "احیای" صفحات استفاده می شود. آسان برای استفاده.
معایب - هیچ. این واقعا یک ابزار مفید است. با این حال، حروفچینی های بی تجربه می توانند با فراوانی شبه کلاس ها گیج شوند. مشکل با مطالعه و تمرین حل می شود.
انتخابگرهای شبه عنصر
"شبه عناصر" آن بخش هایی از صفحه هستند که در HTML نیستند، اما همچنان می توان آنها را دستکاری کرد. چیزی نفهمیدی؟ همه چیز ساده تر از چیزی است که به نظر می رسد. به عنوان مثال، می خواهید حرف اول یک رشته را بزرگ و قرمز کنید، در حالی که بقیه متن را کوچک و سیاه کنید. البته می‌توان این حرف را در یک بازه با کلاس خاص قرار داد، اما این طولانی و کسل‌کننده است. انتخاب کل پاراگراف و استفاده از شبه عنصر حرف اول:: بسیار ساده تر است. این به شما امکان می دهد ظاهر حرف اول را کنترل کنید.
شبه عناصر بسیار کمی وجود دارد. فهرست کردن آنها در چارچوب یک مقاله بعید است که موفق باشد. می توانید اطلاعات مرتبط را در موتور جستجوی مورد علاقه خود بیابید.
مزایا - این امکان را فراهم می کند که ظاهر صفحه را به طور انعطاف پذیر سفارشی کنید.
معایب - مبتدیان اغلب در آنها گیج می شوند. بسیاری از انتخابگرها از این نوع فقط در مرورگرهای خاصی کار می کنند.
خلاصه کنید
انتخابگر ابزاری قدرتمند برای کنترل جریان یک سند است. به لطف آن، می توانید کاملاً هر مؤلفه صفحه را انتخاب کنید (حتی آنهایی که فقط به صورت مشروط وجود دارند). حتماً تمام گزینه های موجود را یاد بگیرید یا حداقل آنها را یادداشت کنید. اگر صفحات پیچیده ای با طراحی مدرن و عناصر تعاملی زیاد ایجاد می کنید، این امر به ویژه مهم است.
برگه های سبک آبشاری CSS (Cascading Style Sheets) یک استاندارد سبک است که توسط کنسرسیوم W3C اعلام شده است. مدت، اصطلاح آبشارینشان دهنده امکان ادغام انواع مختلف سبک ها و به ارث بردن سبک ها توسط برچسب های داخلی از خارجی ها است.
CSS زبانی است که شامل مجموعه ای از ویژگی ها برای تعریف ظاهر یک سند است. مشخصات CSS ویژگی ها و یک زبان توصیفی را برای ارتباط با عناصر HTML تعریف می کند.
CSS انتزاعی است که در آن ظاهر یک سند وب جدا از محتوای آن تعریف می شود.
برخی از سبک ها توسط همه مرورگرها پشتیبانی نمی شوند. با این حال، می توانید هر سبکی را اختصاص دهید، زیرا سبک های پشتیبانی نشده به سادگی نادیده گرفته می شوند.
همچنین ممکن است نیاز داشته باشید:
سه نوع سبک برای افزودن سبک به یک سند وجود دارد.
سبک های داخلی
سبک های داخلی با ویژگی تعریف می شوند سبکبرچسب های خاص استایل داخلی فقط بر عناصری که توسط چنین برچسب هایی تعریف شده اند تأثیر می گذارد. این روش با HTML سنتی تفاوت کمی دارد.
مثال
پاراگراف با متن آبی
نتیجه:
پاراگراف با متن آبی
پاراگراف با متن قرمز
شما نباید اغلب از سبک های داخلی استفاده کنید، زیرا در این صورت سند وب مملو از کد می شود و ظاهر آن به سختی تغییر می کند.
سبک های جهانی
سبک های جهانی CSS در یک ظرف قرار می گیرند ، به نوبه خود در ظرف قرار دارد ... .
صفت type="text/css"، قبلاً برای برچسب مورد نیاز بود .........
رنگ متن خاکستری در تمام پاراگراف های یک صفحه وب