Ei bine, pentru început, voi spune că selectorul este folosit pentru a identifica în mod unic elementul din documentul html căruia dorim să aplicăm un anumit stil CSS.
Selector de elemente
Până în acest moment, am lucrat cu acest selector. Numele elementului html căruia am vrut să aplicăm acest stil a fost folosit ca selector. Acestea. După ce a scris o clasă, de exemplu pentru paragraful (P), toate paragrafele de pe pagină au dobândit stilul acestei clase.
P{
dimensiunea fontului: 12px
}
Acum imaginați-vă o situație în care trebuie să faceți primul paragraf într-un stil, al doilea într-un altul, al treilea într-un al treilea etc. Aici ne va veni în ajutor selector pe clasă.
Selector pe clasă
Să ne uităm la cum să creăm o clasă generică în CSS. Și este foarte simplu să faceți acest lucru: mai întâi punem un punct, apoi imediat, fără spațiu, scriem numele clasei și apoi stilul între paranteze. Ei bine, de exemplu:
.verde {
font-family: arial, verdana, sans-serif;
dimensiunea fontului: 12px; culoare:verde;
}
Cum să aplici acest stil?
Să presupunem că vrem să aplicăm acest stil unui anumit paragraf din document. Iată cum va arăta în html:
clasa="verde" > ... textul paragrafului...
După cum puteți vedea, este folosit atributul clasă cu sensul numelui stilului. Este clar? Iată un alt exemplu pentru tine:
Acesta este un paragraf normal, folosește un selector de elemente
Class ="verde "> Acest paragraf este verde deoarece i s-a aplicat o clasă
Class="big_red" > Și acest paragraf este cu font mai mare și roșu
Acest paragraf este din nou normal, după clasa selectorului de elemente
p {
font-family:arial,verdana,sans-serif;
dimensiunea fontului: 18px;
}
.verde(culoare:verde;)
.mare rosu{
dimensiunea fontului: 28px;
culoarea rosie;
}
Mai întâi specificăm stilul de bază pentru toate paragrafele (selector după element), apoi, dacă vrem să schimbăm ceva în orice paragraf, creăm un stil special pentru acesta (selector după clasă) și îl atribuim acestui paragraf. Când creăm această clasă foarte specială, trebuie să scriem acolo doar acele proprietăți pe care dorim să le adăugăm sau să le modificăm în raport cu stilul de bază pentru acest element.
Clasele din exemplul de mai sus pot fi aplicate nu numai unui paragraf, ci și, de exemplu, la titluri, sau de exemplu la o celulă de tabel, sau la întregul tabel, pot fi aplicate oriunde pot afecta ceva; (în acest caz, oriunde există o opțiune de culoare și text).
Puteți face ca clasa să acționeze numai asupra unui anumit element (de exemplu, un paragraf) specificând numele elementului înaintea punctului:
P.verde(culoare:verde;)
Acum clasa verde nu va acționa asupra altceva decât elementul P.
Top
Selector după id
Acest selector este utilizat dacă trebuie să selectați un singur element care este unic și diferit de toate celelalte din document. De exemplu, să evidențiem primul titlu de pe pagină într-un anumit fel:
parte html:
<Н1 id="primul antet" > Primul titlu de pe pagină
css-part:
H1#firstheader { culoarea rosie; greutatea fontului: bold; text-align: centru }
După cum puteți vedea, în partea html, în locul atributului class, este folosit atributul id, iar în css, în loc de punct, este folosit semnul #.
În principiu, același lucru se poate face folosind un selector de clasă, în funcție de cum vă place :)
Top
Selector de context
Acesta este un lucru foarte util. Să presupunem că avem o pagină cu tabele și paragrafe de text, iar atât în tabel, cât și în paragrafe sunt cuvinte îngroșate (puternice). Și așa, a trebuit brusc să facem ca cuvintele din paragraful care sunt evidențiate cu caractere aldine să devină verzi. Deci aici este.
Selector în CSS − acesta este un indicator pe un element sau grup de elemente cărora li se vor aplica reguli de stil. Există următoarele tipuri de selectoare:
1. Selectoare după etichete: h1
2. Selector după id: #principal
3. Selectoare pe clasă: .ascuns
4. Selector multiclase
Sunt scrise împreună fără spații. Selectoare care satisfac mai multe condiții simultan („ȘI” logic). Stilurile vor fi aplicate tuturor elementelor care au atât class.hidden cât și class.closed în același timp.
Ascuns.închis
5. Selectori de context
Despărțite de un spațiu. Acești selectori sunt utilizați pentru a aplica stiluri unui element numai dacă acesta cuibărit la elementul dorit.
P strong ul .selectat .header .meniu a
6. Selectoare adiacente
Selectează următorul element. Sunt scrise folosind semnul +. Citește ca: aplică proprietăți la selector2 care ar trebui să fie imediat dupa selector1.
Stilurile sunt aplicate unui element care se potrivește cu selector2 numai dacă este precedat de un element care se potrivește cu selector1.
....verde + .selectat()
În exemplu, .green + .selected va aplica stiluri celui de-al doilea element, deoarece in fata ei se afla un element cu clasa .verde . Selectorul .green + li va aplica și stiluri celui de-al doilea element, dar selectorul .selected + .green nu va funcționa.
7. Selectoare aferente
Selectează elementele ulterioare. Similar cu precedentul, dar cu diferența că sunt selectate toate elementele următoare, nu doar primul element.
- articol
Selectat și el
Neselectat...ul~p()În acest exemplu, toate p elementele care urmează ul vor fi selectate. În timp ce atunci când utilizați selectorul ul + p, va fi selectat doar primul element.
8. Selectoare pentru copii
Ele sunt scrise folosind semnul > și se aplică numai elementelor din primul nivel de imbricare. Elementele imbricate în alte elemente nu sunt afectate.
Ul > li ( }
În cazul selectoarelor contextuale, aceștia afectează toți descendenții (de exemplu, dacă setați ul li), ceea ce nu este întotdeauna convenabil. Selectoarele de copii vă permit să setați stiluri numai pentru elementele din primul nivel de imbricare.
ul > li înseamnă la fel ca ul li , dar sunt selectați numai li din primul nivel de imbricare, care sunt imbricați direct în ul. Pentru li imbricat în alte elemente li secundare, regulile nu se vor mai aplica.
9. Selectori de atribute
Cel mai adesea folosit atunci când lucrați cu formulare. Selectorii de atribute sunt scrise folosind paranteze drepte element[attribute] .
Exemple de selectoare de atribute:
Intrare de intrare div a a a a
În exemplul de mai sus, ~ vă permite să selectați un anumit atribut dintr-o listă de atribute separate prin virgulă, cum ar fi:
10. Selector global
Selectorul * va selecta Toate elemente. Poate fi folosit și pentru a evidenția elemente copil:
* ( margine: 0; umplutură: 0; ).conținut * ( contur: niciunul; )
11. Pseudo-clase
Exemple de pseudo-clase:
A:link a:visited a:active a:hover input:checked .clearfix:after () div:not(#container) p::first-line p::first-letter
Pseudo-clasa de negație:not poate fi foarte utilă. De exemplu, când trebuie să selectați toate div-urile, cu excepția celui cu container ID.
Acest material este dedicat elementelor de bază ale stilizării pe o resursă de internet folosind selectoare.
Selectorii din CSS sunt utilizați pentru a defini un anumit
element din pagina html pentru care trebuie să aplicați
sau modificați stilul CSS.
Tipuri de selectoare în CSS
Selector de elemente
Pentru a da stilul CSS necesar, în acest caz numele elementului html este scris ca selector. De exemplu, este suficient să specificați stilul dorit pentru antetul H1, după care aceste titluri vor lua forma pe care o solicităm. Iată cum va arăta codul:
H1 (
dimensiunea fontului: 11pt;
}
Există adesea momente când trebuie să creați titluri în stiluri diferite. Aici, un selector de clasă va ajuta la rezolvarea acestei probleme.
Selector pe clasă
Selectorul de clasă este universal în CSS. Îl puteți scrie după cum urmează: înainte de numele clasei scriem un punct și abia apoi în paranteze indicăm stilul de care avem nevoie:
.roșu (
familie de fonturi: tahoma, sans-serif;
culoarea rosie;
dimensiunea fontului: 11pt;
}
Un exemplu de utilizare a unui selector de clasă. Să aplicăm acest stil la antetul H1 din pagina html:
Titlul paginii
Din exemplul de mai sus puteți vedea că atributul „class” este aplicat cu numele de stil CSS specificat „ roșu".
Alt exemplu. În partea html scriem:
Acest antet este albastru deoarece i se aplică clasa corespunzătoare
id".
În documentul html va arăta astfel:
Să setăm stilul acestui paragraf
În documentul CSS:
p#newstyle (culoare: albastru; dimensiunea fontului: 12px;)Ca rezultat, pentru acest paragraf va fi folosit un font albastru cu o dimensiune de 12 pixeli.
Selector de context
O componentă la fel de necesară este selector de context.
De exemplu, pe un site web era nevoie de titluri „H1”, incluse cu eticheta îndrăzneţ evidențiați cu roșu:H1 bold (culoare: roșu; )După cum puteți vedea, titlul H1 este scris mai întâi, este adăugat un spațiu, eticheta îndrăzneţ iar apoi între paranteze stilul pe care l-am specificat. Acest lucru poate fi exprimat în cuvinte ca acestea: „Dacă există o etichetă aldine în interiorul antetului H1, textul ar trebui să fie roșu”.
În acest fel, puteți seta și stiluri pentru elementele din listele cu marcatori, tabele și chiar și celulele acestora, cu diferite niveluri de imbricare.
Pagina următoare -
Limbajul de descriere a aspectului unui document, CSS, este în continuă evoluție. În timp, nu numai că puterea și funcționalitatea acestuia crește, ci și flexibilitatea și ușurința în utilizare.
Să începem să ne dăm seama. Deschideți orice manual CSS; cel puțin o secțiune va fi dedicată tipurilor de selectoare. Acest lucru nu este surprinzător, deoarece acestea sunt una dintre cele mai convenabile modalități de a gestiona conținutul paginii. Cu ajutorul lor, puteți interacționa cu absolut orice elemente HTML. În prezent, există 7 tipuri de selectoare:
- pentru etichete;
- pentru cursuri;
- pentru identitate;
- universal;
- atribute;
- să interacționeze cu pseudo-clase;
- pentru a gestiona pseudo-elemente.
Sintaxa este simplă. Pentru a învăța cum să-l folosești, citește doar despre ele. Ce opțiune este mai bine să alegeți pentru controlul conținutului în cazul dvs.? Să încercăm să ne dăm seama.
Selectoare de etichete
Aceasta este cea mai simplă opțiune care nu necesită cunoștințe speciale pentru înregistrare. Pentru a gestiona etichetele, trebuie să folosiți numele acestora. Să presupunem că antetul site-ului dvs. este împachetat într-o etichetă
. Pentru a-l controla în CSS, trebuie să utilizați selectorul header(). Avantaje: ușurință în utilizare, versatilitate.
Dezavantaje - lipsa totală de flexibilitate. În exemplul de mai sus, toate etichetele de antet vor fi selectate simultan. Dar dacă ai nevoie să gestionezi doar unul?
Selectori de clasă
Cea mai comună opțiune. Proiectat pentru a gestiona etichetele cu un atribut de clasă. Să presupunem că aveți trei blocuri în cod
, dintre care fiecare trebuie să primească o anumită culoare. Cum să o facă? Selectoarele CSS standard de etichete nu vor funcționa, ei specifică parametrii pentru toate blocurile simultan. Soluția este simplă. Atribuiți o clasă elementelor. De exemplu, primul div a primit class=’roșu’, al doilea - class=’albastru’, al treilea - class=’verde’. Acum pot fi selectate folosind tabelele CSS.Sintaxa este următoarea: indicăm un punct (“.”), după care scriem numele clasei. Pentru a controla primul bloc, folosim constructul .red. Al doilea este .albastru și așa mai departe.
Important! Se recomandă utilizarea unor valori clare pentru atributul de clasă. Este considerată o formă proastă să folosești transliterarea (de exemplu, krasiviy-blok) sau combinații aleatorii de litere/numere (ojfh834871). Cu siguranță te vei încurca într-un astfel de cod, ca să nu mai vorbim de dificultățile cu care vor trebui să le înfrunte cei care vor lucra la proiect după tine. Cea mai bună opțiune este să folosiți o anumită metodologie, cum ar fi BEM.
Avantaje: flexibilitate destul de mare.
Dezavantaje - mai multe elemente pot avea aceeași clasă, ceea ce înseamnă că vor fi editate în același timp. Problema este rezolvată prin utilizarea metodologiei, precum și prin moștenirea preprocesoarelor. Asigurați-vă că stăpâniți mai puțin, sass sau alt preprocesor, acestea vă vor simplifica foarte mult munca.
Selector după ID
Părerile designerilor și programatorilor de layout cu privire la această opțiune sunt ambigue. Unele manualeCSSnu se recomanda deloc sa fie folositID,pentru că dacă nu sunt folosite cu grijă pot cauza probleme cu moștenirea. Cu toate acestea, mulți experți le plasează activ pe parcursul marcajelor. Tu decizi. Sintaxa este: simbol hash ("# "), apoi numele blocului. De exemplu,#roșu.
IDdiferă de clasă în mai multe feluri. În primul rând, nu pot fi două identice pe o pagină.ID.Li se atribuie nume unice. În al doilea rând, un astfel de selector are o prioritate mai mare. Aceasta înseamnă că dacă dai unui bloc o clasăroșuși indicați în tabeleCSSroșu și apoi să i-o atribuieid albastruși specificați o culoare albastră, blocul va deveni albastru.
Avantaje - puteți controla un anumit element fără să acordați atenție stilurilor pentru etichete și clase.
Dezavantaje - ușor de confundat într-un număr mareIDȘiclasă.
Important! Dacă utilizați metodologia BEM (sau analogii acesteia),IDÎn general, nu aveți nevoie de el. Această tehnică de aspect implică utilizarea unor clase unice, ceea ce este mult mai convenabil.
Selector universal
Sintaxă: asterisc (“*”) și acolade, adică *{}.
Folosit pentru a atribui anumite atribute tuturor elementelor paginii simultan. Când ar putea fi util acest lucru? De exemplu, dacă doriți să setați proprietatea paginiidimensionare cutie: chenar-cutie.Poate fi folosit nu numai pentru a controla toate componentele documentului, ci și pentru a controla toate elementele secundare ale unui anumit bloc, de ex.div *().
Avantaje - puteți gestiona un număr mare de elemente simultan.
Dezavantaje - nu este suficient de flexibil. În plus, utilizarea acestui selector poate încetini pagina în unele cazuri.
După atribute
Vă permite să gestionați un element cu un anumit atribut. De exemplu, aveți mai multe etichete de intrare cu un atribut de tip diferit. Unul dintre ele este text, al doilea este parola, al treilea este numărul. Desigur, puteți atribui clase sau ID-uri fiecăruia, dar acest lucru nu este întotdeauna convenabil. Selectorii de atribute CSS fac posibilă specificarea valorilor pentru anumite etichete cu precizie maximă. De exemplu, așa:
intrare()
Acest selector de atribute va selecta toate intrările cu text tip.
Instrumentul este destul de flexibil, poate fi folosit cu orice etichete care pot avea atribute. Dar asta nu este tot! Specificația CSS face posibilă manipularea elementelor și mai convenabil!
Să ne imaginăm că pagina dvs. are o intrare cu atributul substituent = „Introduceți un nume” și introduceți substituent = „Introduceți o parolă”. Ele pot fi selectate și cu ajutorul selectorului! Pentru aceasta se folosește următoarea construcție:
input() sau input
Este posibilă munca mai flexibilă cu atribute. Să presupunem că aveți mai multe etichete cu atribute de titlu similare (de exemplu, „Caspian” și „Caspian”). Pentru a le selecta pe ambele, utilizați următoarele selectoare:
CSS va selecta toate elementele al căror titlu conține caracterele „Kaspiysk”, adică atât „Kaspiyskiy” cât și „Kaspiyskaya”.
De asemenea, puteți selecta etichete ale căror atribute încep cu anumite caractere:
sau termina cu ele:
{}.
Avantaje - flexibilitate maximă. Puteți selecta orice elemente existente ale paginii fără a vă ocupa de clase.
Dezavantaje - este folosit relativ rar, doar în cazuri specifice. Mulți designeri de layout preferă metodologiile, deoarece specificarea unei clase poate fi mai ușoară decât aranjarea semnelor numeroase și egale. În plus, acești selectoare nu funcționează în Internet Explorer 7 și versiunile anterioare. Cu toate acestea, cine are nevoie acum de vechiul Internet Explorer?
Selectoare de pseudo-clase
O pseudo-clasă denotă starea unui element. De exemplu, :hover este ceea ce se întâmplă cu o parte a paginii când cursorul este plasat, :visited este linkul vizitat. Aceasta include și elemente precum:primul-copil și:ultimul-copil.
Acest tip de selector este utilizat activ în aspectul modern, deoarece datorită acestuia puteți face pagina „live” fără a utiliza JavaScript. De exemplu, doriți să vă asigurați că atunci când treceți cu mouse-ul peste un buton cu clasa btn, culoarea acestuia se schimbă. Pentru a face acest lucru, folosim următoarea construcție:
Btn:hover (
Culoare de fundal: roșu;
Pentru frumusețe, puteți specifica proprietatea de tranziție în proprietățile principale ale acestui buton, de exemplu, la 0,5s - în acest caz, butonul nu se va deveni roșu instantaneu, ci pentru o jumătate de secundă.
Avantaje - sunt folosite în mod activ pentru a „reanima” paginile. Ușor de folosit.
Dezavantaje - nu există. Acesta este un instrument cu adevărat convenabil. Cu toate acestea, designerii de layout fără experiență pot fi confuzi de abundența de pseudo-clase. Problema este rezolvată prin studiu și practică.
Pseudo selectoare de elemente
„Pseudoelemente” sunt acele părți ale paginii care nu sunt prezente în HTML, dar pot fi încă manipulate. Nu intelegi nimic? Totul este mai simplu decât pare. De exemplu, doriți să faceți prima literă dintr-o linie mare și roșie, dar lăsați restul textului mic și negru. Desigur, puteți include această scrisoare într-un interval cu o anumită clasă, dar aceasta este lungă și plictisitoare. Este mult mai ușor să selectezi întregul paragraf și să folosești pseudo-elementul::prima-litera. Vă permite să controlați aspectul primei litere.
Există un număr destul de mare de pseudo-elemente. Este puțin probabil să le fie enumerate într-un singur articol. Puteți găsi informații relevante în motorul dvs. de căutare preferat.
Avantaje - vă permit să personalizați în mod flexibil aspectul paginii.
Dezavantaje - începătorii devin adesea confuzi cu privire la ele. Multe selectoare de acest tip funcționează doar în anumite browsere.
Rezuma
Un selector este un mijloc puternic de control al fluxului unui document. Datorită acesteia, puteți selecta absolut fiecare componentă a paginii (chiar și cele care există doar condiționat). Asigurați-vă că ați învățat toate opțiunile sau cel puțin notați-le. Acest lucru este deosebit de important dacă creați pagini complexe cu design moderne și multe elemente interactive.
Ultima actualizare: 21.04.2016
Definirea unui stil începe cu un selector. De exemplu:
Div( lățime:50px; /* lățime */ înălțime:50px; /* înălțime */ culoarea fundalului:roșu; /* culoarea fundalului */ margine: 10px; /* indentare din alte elemente */ )
În acest caz, selectorul este div . O serie de selectoare moștenesc numele elementelor formatate, de exemplu, div, p, h2 etc. Când un astfel de selector este definit, stilul său va fi aplicat tuturor elementelor care se potrivesc cu acest selector. Adică, stilul definit mai sus va fi aplicat tuturor elementelor
pe pagina web:
selectoare CSS selectoare CSS
Există 3 div-uri pe pagină și toate vor fi stilate:
Clase
Uneori, aceleași elemente necesită un stil diferit. Și în acest caz putem folosi clase.
Pentru a defini un selector de clasă în CSS, un punct este plasat înaintea numelui clasei:
RedBlock (culoare de fundal: roșu; )
Numele clasei poate fi arbitrar. De exemplu, în acest caz, numele clasei este „redBlock”. Cu toate acestea, este permisă utilizarea de litere, cifre, cratime și litere de subliniere în numele clasei, iar numele clasei trebuie să înceapă cu o literă.
De asemenea, merită luat în considerare și cazul numelor: denumirile „articol” și „ARTICOL” vor reprezenta clase diferite.
Odată definită o clasă, o putem aplica unui element folosind atributul class. De exemplu:
Să definim și să folosim mai multe clase:
Clasele CSS Clasele CSS
Identificatori
Pentru a identifica elementele unice pe o pagină web, se folosesc identificatori, care sunt definiți folosind atributele id. De exemplu, o pagină poate avea un bloc de cap sau un antet:
Definirea stilurilor pentru identificatori este similară cu definirea claselor, doar simbolul hash # este folosit în locul unui punct:
ID-uri CSS Antetul site-uluiConținut principal
Cu toate acestea, este de remarcat faptul că identificatorii au mai mult de-a face cu structura paginii web și mai puțin cu stilul. Clasele sunt folosite mai degrabă pentru stilare decât pentru identificatori.
Selector universal
Pe lângă selectorii de etichete, clase și identificatori, css are și așa-numitul selector universal, care reprezintă asteriscul (*). Se aplică stiluri tuturor elementelor de pe pagina html:
*(culoarea fundalului: roșu; )
Stilizarea unui grup de selectoare
Uneori, anumite stiluri sunt aplicate unei game de selectoare. De exemplu, dorim să aplicăm o subliniere tuturor titlurilor. În acest caz, putem lista selectoarele tuturor elementelor separate prin virgule:
selectoare CSS CSS3
Selectoare
Grup de selecție
Un text...
Un grup de selectoare poate conține atât selectori de etichete, cât și selectori de clase și identificatori, de exemplu:
H1, #header, .redBlock(culoare: roșu; )
