CALITATE Selectorii poate fi orice etichetă HTML, este, de asemenea, un selector de clasă sau id-selectori. Luați în considerare totul în ordine.
selectoare tag-uri
Așa cum sa menționat mai devreme, orice etichetă poate fi un selector de regulă CSS. Să considerăm un exemplu.
Acest stil de înregistrare echivalent cu următorul grup regula:
selectoare descendent
Puteți atribui elemente de reguli de stil, în funcție de faptul dacă elementul este imbricat în cealaltă. Dacă o etichetă este imbricat într-un alt, tag-ul imbricate numit urmașul său. o etichetă care este încorporat în descendentul unui strămoș numit. De exemplu, trebuie să specificați alineatele
în interiorul tabelului
text roșu. Pentru a rezolva această problemă în elementele selectoare sunt aranjate în ordinea imbricare și sunt separate prin spații. Aceasta este problema noastră poate fi rezolvată după cum urmează:
toate etichetele
în toate tabelele din document va fi afișată în culoarea roșie. Vă rugăm să rețineți că tag-ul
în interiorul tag-ul
afișează, de asemenea, textul în roșu.
De fapt, în schimb
aveți posibilitatea să specificați eticheta
. din moment ce tag-ul
Acesta ar trebui să conțină întotdeauna o etichetă
.
Pentru a examina în continuare selectorii CSS trebuie să stăpânească câteva termeni simpli legate de structura documentului.
copac documentul
arbore de document (document de copac limba engleză.) - acest sistem pentru construirea unui document HTML, care arată ordinea etichetelor și cuiburile lor unul în celălalt. Aici este un exemplu de astfel de circuit:
Iată un exemplu de cod corespunzător elementelor diagramei arborelui cu figura 1.
Deci, există legături între etichetele unui document HTML. Ele sunt exprimate în ordinea de cuibărit a tag-o singură etichetă la un moment dat. Aceste link-uri sunt numite rudenie. și pentru a desemna diferite tipuri de rudenie utilizate termeni, cum ar fi strămoș și descendent, părinte și elemente copil și alți termeni „familie“.
Acum, ia în considerare toate tipurile de relații.
Strămoși și descendenții
Strămoși (strămoș) - elemente care conțin alte elemente, adică elementul este un stramos pentru toate elementele încorporate în ea.
Descendenții (descendent) - elemente incapsulate într-un alt element.
selectoare Descendentul au fost deja discutate mai sus.
Părinții și elemente copil
Părinte (părinte) - este strămoșul primul nivel (strămoș imediata) a elementului. Element copil (copil - copil) - este un descendent al primului nivel. elementul părinte poate avea un număr nelimitat de copii.
În arborele nostru elemente au tag-ul
următoarele elemente copil:
.
.
și un alt
.
Frățești sau frații
Frățești sau frații. (frați născuți -. Siblings), grupul de elemente care au un părinte comun. De exemplu, etichetele
.
.
și în al doilea rând
- sora, deoarece acestea au un părinte comun
.
articole asemanatoare
articole conexe - elemente in vecine frățești, și anume, elemente care au același părinte și mersul pe jos alături de elemente copac. În exemplul nostru, perechile de elemente adiacente sunt:
și
.
și
.
și
.
Acum, înapoi la selectorii.
selectoare pentru copii
Când nu suntem interesați de toți descendenții, ci doar primul nivel al descendenților, adică, elemente copil în CSS folosind selectori pentru copii. Pentru a indica faptul că o regulă de stil setat doar la elementul copil, simbolul „>“ este folosit în selectorul.
HTML codul pentru acest exemplu coincide cu exemplul de cod pentru descendenții selectoare, diferă doar în regula stil. Ca urmare a tabelului de text subsidiar selectorul de punctul în container
nu este de culoare roșie, deoarece acest paragraf etichetă
mamă, și tag-ul
strămoș.
Adiacent (vecine) selector
Selectorul selectează un element element adiacent situat direct după un alt element predeterminat. Sintaxa acestui selector: selector articolul anterior, un „+“ urmat de selectorul selectează un element.
Aici este codul HTML cu exemplul lucrărilor unui selector element adiacent.
Un alt nume de selectori legate: selectoare adiacente. Aici puteți citi mai multe despre acest tip de selectori.
selectoare frate
Related Elementul selector similar cu selectorul adiacent, dar se aplică tuturor acestor elemente selectate următoarele. Selector legate de Sintaxa: elementul selector anterior, semnul "
„(Tildă) și în spatele selectorului selectează elemente.
EXEMPLU isolzovaniya selector care alăptează.
Exemplul arată că după
tag-ul de text punctul №3 a fost, de asemenea, roșu. Asta este, pentru a atribui frați stil nu ar trebui să meargă după unul pe altul.
selector universal
Dacă specificați un caracter într-un selector de regulă CSS „*“, această regulă se aplică tuturor elementelor din pagină, fără excepție. Este dificil să ne imaginăm un caz în care o astfel de regulă are sens. Dar există un caz în care dezvoltatorul vrea să „reseta“ toate padding interne și externe. Apoi, va trebui să utilizați acest stil:
Dar simbolul „*“ poate fi folosit în selectoarele de componente.
Acest cod atribuie culoarea roșie a descendenților elementul de text lui
.
Clase în CSS - cel mai bun mod de a atribui elemente de stil de grup rasrpostranonny. Clasa este utilizat atunci când aveți nevoie pentru a specifica diferite elemente de stil html-document creat de o singură etichetă. sintaxa de clasă:
Primul selector este scris tag-ul dreapta, și apoi, printr-un punct specificat numele clasei. Numele clasei trebuie să înceapă cu o literă și poate conține o liniuță (-) și subliniere (_).
De exemplu, atunci când sunt utilizate clase: create folosind etichetele de pe site-ul dvs. în partea de sus, partea de jos și meniurile
. aceste trei meniuri aveți nevoie pentru a crea trei stiluri diferite. În CSS, a crea trei clase ul.menu-top. ul.menu și ul.menu-jos.
Corpul meniurilor document HTML sunt create cu indicarea clasei în atributul clasă:
.
.
.
Clase - instrumente CSS utilizate în mod obișnuit. Este convenabil și, în plus, face codul de stil mai ușor de citit.
Puteți crea o clasă care va fi aplicat la orice etichetă. În acest scop, selectorul universal.
Această intrare poate fi redus prin eliminarea simbolul „*“.
selectoare ID (identificatori)
Identificatorii - tipurile de selectoare specificând un nume unic pentru elementul. Unic - apoi să se întâlnească o dată un document cod. Cu ajutorul ID-uri puteți crea un stil, dar scopul lor principal - de a face apel la ei folosind script-uri.
În descrierea semnului identificatorul hash indică începutul (#), urmat de un nume de identificator.
Precum și numele clasei, numele de identificare trebuie să înceapă cu o literă și poate conține o liniuță (-) și subliniere (_).
atribut selectoare
În HTML, există o serie de tag-uri, care, în funcție de atributul schimba acțiunea lor. De exemplu, eticheta În funcție de valoarea atributului de tip poate crea un câmp de formular, buton, și alte elemente de formular. Deci, dacă aplicați un stil de intrare selectorului. se va schimba toate elementele formei create de această etichetă. Pentru un control precis al acestor elemente există în selectorii de atribute CSS.
Caracteristica selectori sunt diferite. Cu ajutorul selectoare atribut, puteți seta eticheta de stil, în cazul în care acesta are un anumit atribut sau dacă un atribut specific tag-ul are o anumită valoare.
Caracteristica selectoare - un subiect pentru un alt articol mare. menționăm doar în acest articol că acestea sunt.
pseudo
Cu ajutorul efectelor pseudo-dinamice sunt create pe pagină.
Acesta poate fi aplicat la pseudo-selectorii sau identificatori de clasă (ul.menu:hover ).
Pentru incepatori, observ că, dacă numele de clasă și identifikatov dezvoltator vine cu numele propriu-zis, numele pseudo în CSS - este cuvinte rezervate.
The: pseudo activ efectuează o regulă de stil, în cazul în care elementul este activ. De exemplu, pentru a link-ul indus click de mouse și promovat. Pseudo-clasa: Hover - mouse-ul doar axat pe un membru, cum ar fi un link.
Există o mulțime de pseudo-clase. Complet dezvăluie pseudo-subiect poate fi într-un articol separat. Aici ne-am atins pe el doar superficial.
pseudo
Cu ajutorul unor pseudo-elementele pot fi adăugate la conținutul suplimentar conținutul paginii care nu este în codul sursă. De asemenea, este posibil să se schimbe partea elementului, cum ar fi prima literă într-un paragraf. Acesta este elementul sozdaval imaginar html - prima literă a stilului de afișare.
Sintaxa pseudo-elementele este același cu cel al pseudo-clase: