CSS seçiciler. seçiciler növləri

, müəyyən bir rəng təyin etmək üçün istədiyiniz hər hansı. Bunu necə etmək olar? Standard CSS seçiciler onlar bir dəfə bütün blokları üçün parametrləri göstərir, tags üçün uyğun deyil. həll sadədir. sinif üzvləri təyin. class = 'mavi', üçüncü - - class = "yaşıl" Məsələn, ilk 'qırmızı', ikinci = div class aldı. İndi onlar CSS masalar istifadə edilə bilər.

sintaksis aşağıdakı kimidir: sinif adı yazılı təqib bir nöqtəyə ( ".") göstərir. ilk vahid idarə etmək üçün, .Qırmızı tikinti istifadə edin. İkinci - belə .Blue və.

Mühüm! Bu sinif atributu mənalı dəyərləri istifadə etmək tövsiyə olunur. Bu transliterasiya (məsələn, krasiviy-blok) və ya məktublar / nömrələri təsadüfi birləşməsi (ojfh834871) istifadə etmək pis forması hesab olunur. bu kodu, siz sonra layihə ilə məşğul olacaq edənlər ilə qarşılaşacaq çətinlikləri qeyd etmək deyil, qarışıq almaq bağlıdırlar. ən yaxşı seçim - belə BEM kimi, hər hansı bir metodologiya istifadə etmək.

Üstünlükləri - nisbətən yüksək rahatlıq.

Dezavantajları - Çox elementləri bir və onlar eyni zamanda redaktə o deməkdir ki, eyni sinif ola bilər. problem preprocessors metodologiyası, habelə miras istifadə edərək həll edir. onlar çox iş asanlaşdırmaq, qabarma və ya digər preprocessor, əlləri az almaq üçün əmin olun.

ID selector

Bu versiya haqqında rəy coders və proqramçılar birmənalı deyil. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. qeyri-dəqiq proqram onlar miras ilə problemlər yarada bilər, çünki bəzi CSS tutorials, ID istifadə tövsiyə etmirik. Lakin, bir çox ekspertlər fəal layout ərzində onları təşkil edir. Siz qərar. # »), затем имя блока. funt işarəsi ( "#") blokunun sonra adı: sintaksis belə. #red. Məsələn, #red.

отличается от класса по нескольким параметрам. ID neçə yolla sinif fərqlidir. ID. Birincisi, səhifə iki eyni ID ola bilməz. Onlar bir ad verilir. İkincisi, belə bir selector yüksək prioritet var. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Bu qırmızı bir vahid sinif müəyyən və CSS cədvəllərdə qırmızı müəyyən əgər o deməkdir ki, fon rəngi, və sonra mavi ona eyni id təyin və mavi rəng daxil vahid mavi olur.

Üstünlükləri - Siz tags və dərsləri üslub məhəl xüsusi element nəzarət edə bilərsiniz.

ID и class. Dezavantajları - Asan ID və sinif çox sayda itirilmiş almaq üçün.

Mühüm! ID вам, в общем-то, не нужны. Sizə BEM metodologiya (və ya onun analoqu) ID istifadə edirsinizsə, ümumiyyətlə, lazım deyil. Bu texnika layout unikal dərsləri daha rahat istifadə edir.

universal selector

{}. Sintaksis: Starlets işarəsi ( "*") və aşırma, yəni {*} ...

müəyyən bir dəfə atributları səhifənin bütün elementləri təyin etmək üçün istifadə. Bu faydalı ola bilər? box-sizing: border-box. Məsələn, səhifə mülkiyyət box-sizing təyin etmək istəyirsinizsə: sərhəd-box. div *{}. yalnız sənədin bütün komponentləri, idarə etmək üçün istifadə edilə bilməz, həm də məsələn müəyyən blokunun bütün uşaqlar nəzarət, div * {}.

Üstünlükləri - bir zamanda maddələr bir çox nəzarət edə bilərsiniz.

Eksiler - kifayət qədər çevik seçimi. Bundan əlavə, bu selector istifadə, bəzi hallarda səhifə işlərini aşağı yavaş.

atributları ilə

mümkün xüsusi atributu ilə element nəzarət olun. Məsələn, başqa bir atributu növü ilə giriş tags bir sıra var. Onlardan biri - mətn, ikinci - parol, üçüncü - nömrəsi. Əlbəttə ki, hər bir sinif və ya ID bilərsiniz, lakin həmişə rahat deyil. atributlarından CSS seçiciler mümkün maksimum dəqiqliklə müəyyən tags üçün dəyərlər daxil etmək. Məsələn, bu kimi:

input [type = 'text'] {}

Bu selector daxil mətn növü ilə bütün atributları seçin.

alət olduqca çevik və atributları ola bilər ki, tags, hər hansı bir istifadə edilə bilər. Lakin bütün deyil! CSS dəqiqləşdirilməsi daha rahatlığı ilə elementləri nəzarət etmək imkanı var!

"Bir ad daxil edin" və input tutucu = "şifrənizi daxil edin" = Sizin səhifə atribut tutucu ilə giriş var ki, düşünün. Onlar həmçinin selector istifadə edərək seçilmiş ola bilər! Bunu etmək üçün, aşağıdakı struktura istifadə edin:

input [tutucu = "adını daxil edin"] {} və ya daxil [tutucu = "parol daxil edin"]

atributları ilə Yəqin ki, daha çevik iş. Siz oxşar atributları adı (məsələn, "Caspian" və "Xəzər") ilə tags bir sıra deyirlər. həm seçmək üçün aşağıdakı Marka istifadə edin:

[Title * = "Kaspiysk"]

CSS "Xəzər", yəni. E. və "Xəzər" və "Xəzər" rəmzləri var olan adı bütün maddələr seçəcək.

Siz həmçinin müəyyən xarakter atributları ilə başlamaq tags seçə bilərsiniz:

[Title ^ = "xarakter istəyirəm"] {}

və ya onlara xitam:

[Title $ = "right xarakter"] {}.

Üstünlükləri - maksimum rahatlıq. Siz dərsləri ilə messing olmadan hər hansı bir mövcud səhifə elementləri seçə bilərsiniz.

Dezavantajları - yalnız xüsusi hallarda, nisbətən nadir hallarda istifadə olunur. point sinif çoxsaylı təşkil etmək daha asandır, çünki bir çox web dizaynerlər, metodologiyası üstünlük kvadrat mötərizə "bərabər" və əlamətləri. Bundan əlavə, bu seçiciler Internet Explorer versiyasını 7 və aşağıda işləmir. Lakin indi köhnə Internet Explorer ehtiyacı olan var?

yalançı sinif seçiciler

bir yalançı status element bildirir. Məsələn ,: hover üçün - Siz uçanda səhifənin hissəsi nə ,: ziyarət - ziyarət etdi link. ilk uşaq və: son uşaq O, həmçinin belə elementlər daxildir.

Bunun sayəsində siz JavaScript istifadə etmədən bir səhifə "canlı" edə bilər, çünki selector Bu tip fəal müasir layout istifadə olunur. Məsələn, onun rəngi dəyişdirilə btn sinfində ilə düyməsini üzərində hover zaman əmin etmək istəyirəm. Bunu etmək üçün, biz aşağıdakı strukturu istifadə edin:

.btn: hover {

background-color: red;

}

Bu halda, düyməsini dərhal qızarmaq deyil, və yarım ikinci ərzində - Beauty məsələn, 0.5s, düyməsinə keçid əmlakın əsas xassələri müəyyən edilə bilər.

Virtues - geniş pages "dirçəliş" üçün istifadə olunur. Asan istifadə etmək.

Dezavantajları - onlar deyil. Bu, həqiqətən lazımlı bir vasitədir. Lakin təcrübəsiz web dizaynerlər yalançı dərsləri bol itirilmiş almaq bilər. problem iş və təcrübə həll edilir.

yalançı seçiciler

"Pseudo" - bu HTML olmayan səhifənin hissələri, lakin onlar hələ də idarə oluna bilər. Siz başa düşmədim? Bu, görünür daha asandır. Məsələn, digər kiçik və qara, mətn tərk simli ilk məktub böyük və qırmızı etmək istəyirəm. Əlbəttə ki, bu, müəyyən bir sinfi ilə span ki, məktub nəticəyə gəlmək olar, lakin bu uzun və darıxdırıcı deyil. Bu, bütün paraqraf seçin və yalançı :: birinci məktub istifadə etmək çox asandır. İlk məktub görünüşünü nəzarət etmək imkanı verir.

yalançı elementləri kifayət qədər çox sayda var. bir məqalədə onların siyahısını nail mümkün deyil. Siz sevdiyiniz search engine müvafiq informasiya tapa bilərsiniz.

Üstünlükləri - səhifə görünüşünü özelleştirmek üçün rahatlıq təmin edir.

Dezavantajları - onlara yeni tez-tez səhv edir. yalnız müəyyən brauzerlərdə iş bu növü çox seçimlər.

ümumiləşdirilməsi

Selector - sənəd axını nəzarət üçün güclü bir vasitədir. Onun sayəsində, siz səhifənin hər bir komponent seçə bilərsiniz (yalnız qismən hətta var). bütün variantları öyrənmək, və ya hətta onlara yazmaq üçün əmin olun. Siz kompleks müasir dizaynı ilə pages və interaktiv elementlər çox yaratmaq, bu xüsusilə vacibdir.