Selectori CSS. tipuri de selectoare

, fiecare dintre care doriți să setați o anumită culoare. Cum de a face acest lucru? selectori CSS standard nu sunt potrivite pentru tag - uri, ele indică parametrii pentru toate blocurile dintr -o dată. Soluția este simplă. Atribuirea membrii clasei. De exemplu, prima a primit div class = 'roșu', a doua - class = 'albastru', a treia - class = 'verde'. Acum , ele pot fi selectate folosind tabele CSS.

Sintaxa este după cum urmează: Indică un punct ( „“), urmată de scris numele clasei. Pentru a administra prima unitate, utilizați construcția .red. În al doilea rând - .blue și așa mai departe.

Important! Se recomandă să se folosească valori semnificative ale atributului de clasă. Se consideră forma rea de a utiliza transliterația ( de exemplu, krasiviy-Blok) sau combinații aleatoare de litere / cifre (ojfh834871). În acest cod, sunteți obligat pentru a obține confuz, să nu mai vorbim de dificultățile cu care se va confrunta pe cei care vor fi implicați în proiect după tine. Cea mai bună opțiune - de a utiliza orice metodologie, cum ar fi BEM.

Avantaje - flexibilitate relativ ridicată.

Dezavantaje - multiple elemente pot fi una și aceeași clasă, ceea ce înseamnă că acestea vor fi editate simultan. Problema este rezolvată folosind metodologia precum și moștenirea preprocesoare. Asigurați-vă că pentru a pune mâna mai puțin, Sass sau alte Preprocessor, simplifică foarte mult de lucru.

selector ID

Despre această versiune codoare de opinie și programatori sunt ambigue. CSS вообще не рекомендуют использовать ID, поскольку при неаккуратном применении они могут вызвать проблемы с наследованием. Unele tutoriale CSS nu recomandăm utilizarea de ID - ul, deoarece în aplicare inexacte ele pot cauza probleme legate de moștenire. Cu toate acestea, mulți experți sunt în mod activ a le aranja pe tot aspectul. Tu decizi. # »), затем имя блока. Sintaxa este următoarea: semnul pound ( „#“), apoi numele blocului. #red. De exemplu, #red.

отличается от класса по нескольким параметрам. ID - ul este diferit de clasa în mai multe moduri. ID. În primul rând, pagina nu poate fi de două ID identice. Ele se atribuie un nume unic. În al doilea rând, un astfel de selector are o prioritate mai mare. red и укажете в таблицах CSS красный цвет фона, а затем назначите ему же id blue и укажете синий цвет, блок станет синим. Acest lucru înseamnă că , dacă specificați o unitate de clasă roșie și specificați în tabelele CSS roșu de culoare de fundal, și apoi atribuiți - l același cod de identificare albastru și specificați culoarea albastră, unitatea va deveni albastru.

Avantaje - puteți controla elementul specific, ignorând stiluri de tag - uri și clase.

ID и class. Dezavantaje - ușor să te pierzi într - un număr mare de identitate și de clasă.

Important! ID вам, в общем-то, не нужны. Dacă utilizați metodologia BEM (sau analogii săi), ID - ul pentru a vă, în general, nu sunt necesare. Această tehnică implică utilizarea de aspect clase unice care mult mai convenabil.

selector universal

{}. Sintaxa: Starlets semn ( "*") și acolade, de exemplu, {*} ...

Folosit pentru a atribui anumite atribute o dată toate elementele paginii. Atunci când acest lucru poate fi util? box-sizing: border-box. De exemplu, dacă doriți să setați pagina de proprietăți caseta de reducere a dimensiunilor: border-cutie. div *{}. Nu poate fi folosit numai pentru a gestiona toate componentele documentului, dar , de asemenea , pentru a controla toți copiii din blocul specificat, de exemplu, div * {}.

Avantaje - puteți controla un număr mare de elemente la un moment dat.

Contra - nu este suficient de flexibil opțiune. În plus, utilizarea acestui selector, în unele cazuri , încetini activitatea paginii.

prin atribute

Asigurați -vă că este posibil pentru a controla elementul cu un atribut specific. De exemplu, aveți un număr de etichete de intrare cu un alt tip de atribut. Unul dintre ei - text, al doilea - parola, al treilea - numărul. Desigur, puteți seta fiecare clasă sau ID - ul, dar nu este întotdeauna convenabil. selectoare CSS de atribute fac posibilă specifica valori pentru anumite tag - uri cu o precizie maximă. De exemplu, ca aceasta:

input [ 'text' type =] {}

Acest selector va selecta toate atributele cu tipul de text de intrare.

Instrumentul este destul de flexibil și poate fi utilizat cu oricare dintre etichetele, în care pot exista atribute. Dar asta nu e tot! Specificația CSS are capacitatea de a controla elementele cu chiar mai mult confort!

Imaginați - vă că pagina are intrare cu atributul substituent = „Introduceți un nume“ și înlocuitor de intrare = „Introduceți parola“. Ele pot fi , de asemenea , selectate folosind selectorul! Pentru a face acest lucru, utilizați următoarea structură:

intrare [placeholder = "Introduceți numele"] {} sau intrare [placeholder = "Introduceți parola"]

Poate de lucru mai flexibil , cu atribute. Să presupunem că aveți un număr de etichete cu atribute similare din titlu (de exemplu, „Caspian“ si „Caspian“). Pentru a selecta ambele, utilizați următoarele selecții:

[Titlu * = "Kaspisk"]

CSS va alege toate articolele din titlul care există simboluri ale „Caspian“, adică. E., și „Caspian“ si „Caspian“.

Puteți alege , de asemenea , tag - uri care încep cu atribute un anumit caracter:

[Titlu ^ = "caracterul pe care doriți"] {}

sau să le rezilieze:

[$ Title = "caracter drept"] {}.

Avantaje - flexibilitate maximă. Puteți selecta orice element de pagină existente , fără încurcați cu clasele.

Dezavantaje - utilizate relativ rar, numai în anumite cazuri. Mulți designeri web preferă să metodologie, deoarece clasa punct este mai ușor decât să aranjeze numeroase între paranteze drepte și semne „egal“. În plus, aceste selectori nu funcționează în versiunile de Internet Explorer 7 și mai jos. Cu toate acestea, care sunt acum nevoie de vechiul Internet Explorer?

selectoare pseudo-clasă

Denotă un element de pseudo-stare. De exemplu ,: Hover - ceea ce se întâmplă cu o parte a paginii atunci când treceți ,: vizitat - link - ul vizitat. Aceasta include , de asemenea , elemente , cum ar fi: primul copil și: ultimul copil.

Acest tip de selector este utilizat în mod activ în design modern, deoarece datorită vă puteți face o pagină „viu“ , fără utilizarea de JavaScript. De exemplu, doriți să vă asigurați că , atunci când treceți peste butonul cu clasa de BTN culoarea sa schimbat. Pentru a face acest lucru, vom folosi urmatoarea structura:

.btn: hover {

culoare de fundal: roșu;

}

Frumusetea poate fi specificată în proprietățile de bază ale butonului, proprietatea de tranziție, de exemplu, 0,5s - în acest caz, butonul nu va roșească instantaneu, iar în termen de o jumătate de secundă.

Virtuțile - sunt utilizate pe scară largă pentru „trezirea“ a paginilor. Ușor de utilizat.

Dezavantaje - ele nu sunt. Acesta este un instrument foarte util. Cu toate acestea, designerii web fără experiență se pot pierde în abundența de pseudo-clase. Problema este rezolvată de studiu și practică.

pseudo-selectori

„Pseudo“ - acestea sunt părți ale paginii care nu sunt în HTML, dar încă mai pot fi gestionate. Nu ai înțeles? Este mult mai ușor decât pare. De exemplu, doriți să faceți prima literă din șirul mare și roșu, lăsând celălalt text mic și negru. Desigur, se poate concluziona că scrisoarea într - un interval cu o anumită clasă, dar este lungă și plictisitoare. Este mult mai ușor pentru a selecta întregul paragraf și de a folosi pseudo :: prima litere. Acesta oferă posibilitatea de a controla apariția primei litere.

Există un număr destul de mare de elemente pseudo-. Lista - le într - un singur articol , este puțin probabil să reușească. Puteți găsi informațiile relevante în motorul de căutare preferat.

Avantaje - oferă flexibilitatea de a personaliza aspectul paginii.

Dezavantaje - noi pentru ei sunt adesea confundate. Multe selecții de acest tip de lucru numai în anumite browsere.

Pentru a rezuma

Selector - un instrument puternic pentru controlul fluxului de documente. Datorită lui, puteți selecta fiecare componentă a paginii (există chiar și numai parțial). Asigurați - vă că pentru a afla toate opțiunile disponibile, sau chiar să le scrie în jos. Acest lucru este deosebit de important în cazul în care creați pagini complexe , cu un design modern și o mulțime de elemente interactive.