انتخابگرهای CSS. انواع انتخابگرهای

، که هر کدام می خواهید به راه یک رنگ خاص. چگونه آن را انجام؟ انتخابگرهای CSS استاندارد مناسب برای برچسب ها نیست، آنها نشان می دهد پارامترها برای تمام بلوک در یک بار. راه حل ساده است. اختصاص اعضای کلاس. به عنوان مثال، برای اولین بار DIV کلاس دریافت = 'قرمز'، دوم - کلاس = 'آبی'، سوم - کلاس = "سبز". در حال حاضر آنها می توان با استفاده از جداول CSS انتخاب شده است.

نحو به شرح زیر است: نشان یک نقطه ( ".")، به دنبال نوشتن نام کلاس. برای مدیریت واحد اول، استفاده از ساخت و ساز .red. دوم - .blue و غیره.

مهم! توصیه می شود برای استفاده از مقادیر معنی دار از ویژگی کلاس. است در نظر گرفته فرم بد را به استفاده آوانگاری (به عنوان مثال، krasiviy-بلوک) و یا ترکیبی تصادفی از حروف / شماره (ojfh834871). در این کد، شما ملزم به اشتباه، به ذکر مشکلاتی که کسانی خواهد شد که در این پروژه پس از شما را مشغول مواجه خواهد شد. بهترین گزینه - به استفاده از هر روش، مانند BEM.

مزایای - انعطاف پذیری نسبتا بالا است.

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

انتخاب ID

در مورد این نسخه نویسان نظر و برنامه نویسان مبهم است. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. برخی از آموزش CSS را با استفاده از ID توصیه نمی شود، چرا که در برنامه نادرست آنها می توانند مشکلات با ارث شود. با این حال، بسیاری از کارشناسان به طور جدی آنها را به ترتیب در سراسر طرح. شما تصمیم می گیرید. # »), затем имя блока. نحو به شرح زیر است: نشانه پوند ( "#")، سپس نام بلوک. #red. به عنوان مثال، #red.

отличается от класса по нескольким параметрам. ID های مختلف از کلاس در راه های مختلفی است. ID. اول، صفحه نمی تواند در دو ID یکسان است. آنها یک نام منحصر به فرد اختصاص داده است. در مرحله دوم، چنین انتخاب است اولویت بالاتری. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. این به این معنی است که اگر شما یک کلاس واحد قرمز مشخص و مشخص شده در جداول CSS قرمز رنگ پس زمینه، و سپس اختصاص به آن همان شناسه آبی و تعیین رنگ آبی، واحد آبی تبدیل شود.

مزایای - شما می توانید عنصر خاص کنترل، سبک از تگ ها و کلاس های نادیده گرفتن.

ID и class. معایب - آسان برای دریافت در تعداد زیادی از ID و کلاس از دست داد.

مهم! ID вам, в общем-то, не нужны. اگر شما به استفاده از روش BEM (یا آنالوگ های آن)، ID به شما، به طور کلی، مورد نیاز نیست. این روش شامل استفاده از طرح کلاس های منحصر به فرد که بسیار راحت تر.

انتخاب جهانی

{}. نحو: Starlets و نشانه ( "*") و پرانتز، یعنی {*} ...

مورد استفاده برای اختصاص ویژگی های خاص یک بار تمام عناصر صفحه استفاده کنید. هنگامی که این می تواند مفید باشد؟ box-sizing: border-box. برای مثال، اگر شما می خواهید به مجموعه ای از ویژگی صفحه جعبه اندازه: مرز جعبه. div *{}. نه تنها می تواند مورد استفاده قرار گیرد برای مدیریت تمام اجزای سند، بلکه برای کنترل تمام کودکان از بلوک مشخص شده، به عنوان مثال، دیو * {}.

مزایای - شما می توانید تعداد زیادی از مورد در یک زمان را کنترل کنید.

معایب: - به اندازه کافی انعطاف پذیر گزینه. علاوه بر این، استفاده از این انتخاب، در برخی موارد کاهش سرعت کار صفحه.

با ویژگی های

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

ورودی [ 'متن' نوع =] {}

این انتخاب خواهد تمام صفات با نوع متن ورودی را انتخاب کنید.

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

تصور کنید که صفحه شما دارای ورودی با حفره یا سوراخ ویژگی = "را وارد کنید نام" و حفره یا سوراخ ورودی = "رمز عبور را وارد کنید". آنها همچنین می توانند با استفاده از انتخابگر انتخاب شود! برای این کار، استفاده از ساختار زیر است:

ورودی [حفره یا سوراخ = "را وارد کنید نام"] {} یا ورودی [حفره یا سوراخ = "رمز عبور را وارد کنید"]

شاید کار انعطاف پذیر تر با ویژگی های. بیایید می گویند شما باید تعدادی از تگ ها با عنوان ویژگی های مشابه (به عنوان مثال، "خزر" و "خزر"). برای انتخاب هر دو، استفاده از انتخاب های زیر:

[عنوان * = "کاسپییسک"]

CSS تمام آیتم های در عنوان که نمادهای "خزر"، یعنی. E.، و "خزر" و "خزر" وجود دارد را انتخاب نمایید.

شما همچنین می توانید از تگ های که شروع با ویژگی های یک شخصیت خاص را انتخاب کنید:

[عنوان ^ = "شخصیت شما می خواهید"] {}

یا خاتمه دادن آنها:

[عنوان $ = "شخصیت حق"] {}.

مزایای - حداکثر انعطاف پذیری. شما می توانید هر یک از عناصر صفحه موجود بدون از دست با کلاس انتخاب کنید.

معایب - استفاده به ندرت، فقط در موارد خاص. بسیاری از طراحان وب ترجیح می دهند به روش، از کلاس نقطه راحت تر از به ترتیب متعدد است براکت و نشانه "برابر". علاوه بر این، این انتخابگرهای در اینترنت اکسپلورر نسخه 7 و زیر کار نمی کند. با این حال، که در حال حاضر نیاز به اینترنت اکسپلورر قدیمی؟

انتخابگرهای شبه کلاس

نشان دهنده یک عنصر شبه وضعیت. به عنوان مثال ،: شناور - چه اتفاقی می افتد به بخشی از صفحه را زمانی که شما شناور ،: بازدید - لینک بازدید کردند. این همچنین شامل عناصر مانند: اول کودک و: آخرین فرزند است.

این نوع از انتخاب به طور فعال در طرح مدرن استفاده می شود، چرا که به لطف آن شما می توانید یک صفحه "زنده" بدون استفاده از جاوا اسکریپت است. به عنوان مثال، شما می خواهید مطمئن شوید که زمانی که شما بر روی دکمه شناور با کلاس از BTN رنگ آن تغییر کرده است. برای این کار، ما با استفاده از ساختار زیر است:

.btn: شناور {

رنگ پس زمینه: قرمز؛

}

زیبایی را می توان در خواص اساسی از دکمه، انتقال مالکیت را، به عنوان مثال، 0.5s - در این مورد، بر روی دکمه نیست فورا سرخ شدن، و در نیم ثانیه.

فضائل - به طور گسترده ای برای "احیای" از صفحات استفاده می شود. آسان برای استفاده.

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

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

"شبه" - این بخش هایی از صفحه که در HTML هستند، اما آنها هنوز هم می توان به مدیریت. شما را درک نمی؟ این خیلی ساده تر از آن به نظر می رسد. برای مثال، شما می خواهید را به حرف اول در رشته بزرگ و قرمز، ترک متنی کوچک و سیاه و سفید است. البته، می توان نتیجه گرفت که نامه را در یک span با کلاس خاص، اما آن را طولانی و خسته کننده. این بسیار آسان تر برای انتخاب کل بند و استفاده از شبه :: اولین نامه. این فرصت را به کنترل ظاهر حرف اول را می دهد.

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

مزایای - ارائه انعطاف پذیری به سفارشی کردن ظاهر صفحه استفاده کنید.

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

به طور خلاصه

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