CSS, ca orice limbă, are propria sa sintaxă. Nu are elemente, parametri, etichete. Are reguli. O regulă constă dintr-un selector și un bloc de declarație de stil închis între acolade:

Blocul de declarații de stil în sine constă din proprietăți și valorile acestora, separate prin punct și virgulă:

Să încercăm în practică. Deschideți pagina html și pagina css pe care le-ați creat în ultima lecție. Să dăm paginii noastre un fundal albastru. După cum vă amintiți, eticheta este responsabilă pentru acest lucru , apoi accesați pagina style.css și scrieți următorul cod:

corp( fundal: albastru; )

Deschideți pagina html într-un browser și asigurați-vă că fundalul este albastru. Acum, să facem textul de pe pagină alb:

corp( fundal: albastru; culoare: alb; )

Reîmprospătați pagina html în browser (Ctrl+F5) și asigurați-vă că acum tot textul alb. Acum să facem culorile titlului roșu (pentru h1) și galben (pentru h2):

corp ( fundal: albastru; culoare: alb; ) h1 ( culoare: roșu; ) h2 ( culoare: galben; )

Reîmprospătați pagina în browser și asigurați-vă că totul este conform intenției.

Cred că principiul este deja clar: precizăm selectorul, adică. elementul căruia i se aplică stilul, iar în acolade- proprietățile și semnificațiile acestora. Proprietățile și valorile vor fi discutate lecții individuale, deocamdată luăm în considerare principiu general alcătuirea unei foi de stil.

selectoare CSS

Selectoare după ID

În exemplul nostru, elementele paginii au fost folosite ca selectoare: body, h1, h2. Dar ce ar trebui să facem dacă pagina noastră html are mai multe elemente identice (de exemplu, paragrafe) și dorim ca textul tuturor paragrafelor să fie negru, iar unul dintre ele să fie negru? roz. Apoi va trebui să furnizăm un identificator unic pentru acest paragraf și să creăm un stil pentru acesta.

În HTML, identificatorul elementului este specificat folosind parametrul id, a cărui valoare este un nume unic. De exemplu:

Textul paragrafului cu identificatorul (id).

Puteți da orice nume, cu excepția cuvintelor rezervate (acestea includ numele etichetelor și parametrilor elementelor HTML și CSS), de exemplu, nu puteți da identificatorului corpul numelui. Să adăugăm câteva paragrafe la pagina noastră html și să atribuim un identificator unuia dintre ele: dacă vă uitați la pagina noastră în browser acum, paragrafele noastre sunt ambele albe. Să adăugăm stiluri pentru paragrafele noastre în foaia de stil (style.css):

corp( fundal: albastru; culoare: alb; ) h1( culoare: roșu; ) h2( culoare: galben; ) p( culoare: negru; ) p#roz( culoare: roz; )

Am specificat mai întâi ca textul tuturor paragrafelor să fie negru, iar textul paragrafului cu id "roz" face-l roz. Selectorul nostru este în acest caz, din element ( p), separator ( # ) și numele de identificare ( roz).

Este important să rețineți că pe o pagină poate exista un singur identificator (id). Acestea. pentru exemplul nostru, este imposibil să creați două paragrafe cu id "roz", alineat cu acesta id poate fi doar unul. Dar fiecare paragraf poate avea propriul său identificator, de exemplu, puteți crea un paragraf cu id="verde" și puteți seta stilul pentru acest paragraf în foaia de stil.

Selectoare pe clasă

În exemplul de mai sus, am creat un paragraf cu culoarea textului roz și am indicat că poate exista doar un astfel de id. Dar dacă vrem culoarea roz textul avea două-trei paragrafe. Există un parametru pentru aceasta în HTML clasă, a cărui valoare este numele său.

Să mai adăugăm câteva paragrafe la pagina noastră html și să le atribuim clasa="roz": Pentru a specifica stilul pentru această clasă, vom scrie o regulă în foaia de stil, unde elementul va fi din nou folosit ca selector p si nume roz, dar în acest caz este un nume de clasă, deci un punct (.) va fi folosit ca separator:

corp( fundal: albastru; culoare: alb; ) h1( culoare: roșu; ) h2( culoare: galben; ) p( culoare: negru; ) p#roz( culoare:roz; ) p.roz( culoare:roz; )

Pot exista oricâte paragrafe cu această clasă doriți.

Să rezumăm:

• dacă toate elementele similare (de exemplu, toate titlurile h1) ar trebui să aibă același stil, atunci selectorul constă numai din acel element (de exemplu, p(culoare:negru;))
• dacă un element (oricare: paragraf, titlu...) trebuie să fie diferit de toate celelalte, atunci i se atribuie un identificator ( id) iar separatorul din foaia de stil este semnul hash ( # ), De exemplu, p#roz(culoare:roz;) .
• dacă există mai multe elemente pe pagină cu același stil, atunci li se atribuie o clasă ( clasă), iar separatorul de foaia de stil este un punct (.), de exemplu, p.roz(culoare:roz;).
• identificatorul are prioritate mai mare decât clasa. Prin urmare, dacă pentru orice element sunt specificate atât o clasă, cât și un identificator (ceea ce nu contrazice Principiile CSS), atunci se va aplica stilul de identificare.

După cum sa menționat deja, identificatorii și clasele pot fi alocate oricăror elemente html. Dar se întâmplă adesea să vrem să evidențiem mai multe elemente diferite cu un singur stil, de exemplu, verde. În acest caz, puteți utiliza selector unificat. În astfel de selectoare, numele elementului nu este specificat; un punct sau un semn hash este specificat ca semn al unei clase sau al identificatorului și al unui nume. De exemplu:

Roșu(culoare:roșu; ) #galben(culoare:galben; )

Astfel, indiferent de elementul pe care îl setăm clasa="roșu"(titlu, paragraf sau link), culoarea textului său va deveni roșu. Putem seta un element pe pagină (orice) id="galben" iar culoarea textului acelui element va deveni galbenă.

Selector de context

Să presupunem că avem o pagină HTML cu următorul cod: Vrem ca cursivele să fie evidențiate cu verde. Apoi vom scrie un selector pentru elementul din foaia de stil, i.e.

i (culoare:verde; )

Acum pagina noastră din browser arată astfel:

Dar dacă nu vrem ca tot textul italic să fie evidențiat în verde, ci doar textul care este în paragrafe. Pentru a face acest lucru, vom face modificări în foaia de stil:

p i (culoare:verde; )

Așa că am indicat, aplicați acest stil la elemente i, care sunt în elemente p. Numele elementelor sunt separate printr-un spațiu. Se numesc astfel de selectoare contextual. Acum pagina noastră din browser arată astfel:

Gruparea selectoarelor

Dacă blocurile de declarații de stil pentru mai mulți selectori sunt aceleași (de exemplu, dorim ca titlurile primelor trei niveluri să fie verzi), atunci acestea pot fi grupate. Pentru a face acest lucru, selectoarele cărora li se va aplica un stil trebuie să fie listate separate prin virgule. Exemplu:

h1, h2, h3 (culoare:verde; )

Să presupunem că, pe lângă culoare, vrem să dăm titlurilor noastre o dimensiune. Apoi putem adăuga pur și simplu la foaia noastră de stil:

h1, h2, h3(culoare:verde; ) h1( dimensiunea fontului:18px; ) h2( dimensiunea fontului:16px; ) h3(dimensiunea fontului:14px; )

Titlurile noastre vor avea dimensiunea specificată, dar toate vor fi verzi.

De fapt, există dezacorduri cu privire la grupuri. Unii oameni cred că codul de mai sus este corect, deoarece. gruparea a ajutat la evitarea repetării proprietăți identice pentru trei elemente, acest lucru scurtează codul.

Alții cred că acest lucru reduce consistența codului. Deoarece, după ce am găsit selectorul pentru titlul h3, nu este imediat clar de ce textul din acesta este verde. Susținătorii logicii recomandă gruparea numai a elementelor ale căror blocuri de descriere se potrivesc complet.

În general, dacă să grupați sau nu este o chestiune de gust. Dar trebuie să vă amintiți abordări diferite, când citiți codul altcuiva, de exemplu, în șabloane.

Aceasta se încheie lecția despre selectoare. În lecția următoare vom introduce concepte precum pseudo-elemente și pseudo-clase.

Există patru moduri de a conecta stiluri la documentul dvs. HTML. Cele mai frecvent utilizate metode sunt CSS inline și CSS extern.

CSS inline în elementul HTML

Mai jos este un exemplu Implementarea CSS pe baza sintaxei de mai sus:

Titlu

Paragraf.

Obtinem urmatorul rezultat:

Atribute

CSS inline - atribut de stil

Puteți utiliza atributul pe orice element HTML pentru a defini regulile de stil. Aceste reguli se vor aplica numai pentru acest element. Iată sintaxa generală:

<элемент style = "...правила стиля...">

Atribute

Exemplu

Mai jos este un exemplu de CSS inline bazat pe sintaxa de mai sus:

CSS inline

Obtinem urmatorul rezultat:

Stiluri CSS externe - element

Element poate fi folosit pentru a conecta extern fișier CSS ov în documentul dvs. HTML.

Masa externa Stiluri CSS reprezintă un separat fisier text cu extensie .css. Definiți toate regulile de stil în acest fișier text și apoi puteți include fișierul CSS în orice document HTML folosind elementul .

Iată sintaxa generală pentru includerea unui fișier CSS extern:

Atribute

Atributele sunt asociate cu elemente sau reguli definite în oricare fișier extern foi de stil.

Orice regulă definită în etichete, înlocuiește regulile definite în orice fișier CSS extern.

Orice regulă definită într-un fișier de foaie de stil extern are cea mai mică prioritate în CSS, iar regulile definite în acel fișier se vor aplica numai atunci când cele două reguli precedente nu se aplică.

Manipulare de către browsere mai vechi

Există multe browsere mai vechi care nu acceptă CSS. Prin urmare, trebuie să avem grijă să scriem CSS inline în documentul nostru HTML. Următorul fragment de cod arată cum pot fi folosite etichetele de comentarii pentru a ascunde CSS din browserele mai vechi:

Reguli CSS

CSS, ca orice alt limbaj de calculator, are o sintaxă strict definită, adică. regulile prin care sunt create foile de stil. În capitolul anterior, ați văzut deja câteva exemple de foi de stil diferite și probabil ați observat că sintaxa CSS este diferită de sintaxa HTML. Nu există elemente, atribute sau etichete în CSS. Are reguli, fiecare dintre acestea descriind aspectul unuia sau al unui grup de elemente HTML. O regulă determină cum va arăta un anumit element. Să dăm o definiție.

O regulă CSS este o unitate structurală a unei foi de stil care conține o descriere a stilurilor pentru un anumit element. O regulă constă dintr-un selector, care este întotdeauna situat în stânga, și un bloc de declarare a stilului, care este închis între acolade și urmează imediat selectorului (Figura). Fiecare declarație constă la rândul său dintr-o proprietate și valoarea acesteia. Este proprietatea care determină tipul de stil care va fi aplicat elementului.

O regulă poate conține mai multe declarații, separate prin punct și virgulă. Nu este nevoie să puneți punct și virgulă după ultima declarație.

Pentru a face foile de stil mai ușor de citit și editat, regulile sunt de obicei scrise astfel încât fiecare declarație să fie pe o linie separată. De exemplu:

Va fi perceput exact la fel, chiar va da economii suplimentareîn dimensiunea codului din cauza eliminării caractere suplimentare spații și întreruperi de rând. Dar scrierea în acest fel face codul dificil de înțeles. Puteți face un compromis: mai întâi scrieți regulile, împărțindu-le în rânduri, iar după ce foaia de stil este în sfârșit gata, eliminați caracterele nesemnificative în plus. Dar nu există nicio garanție că după aceasta nu veți dori să remediați altceva, atunci va trebui să suferiți puțin înainte să găsiți proprietatea potrivită și să o editați.

Pentru fiecare proprietate CSS Specificația specifică setul de valori pe care această proprietate poate lua, precum și valoarea și domeniul de aplicare implicit! proprietăți, adică acele elemente la care se poate aplica. De asemenea, indică dacă această proprietate este moștenită, de exemplu. dacă va fi aplicat elementelor descendente. Specifică dispozitivele de ieșire cărora li se aplică aceste proprietăți. Din moment ce vom lua în considerare proiectarea calculatorului, atunci vom aminti doar acele proprietăți care sunt aplicabile în cazul nostru, adică. sunt concepute pentru a controla afișarea pe ecranul monitorului și sunt, de asemenea, acceptate de browserele moderne.

Să ne uităm la principal Reguli CSS pentru înregistrare elemente de text Pe pagina.

• familie de fonturi: familie de fonturi|tip font. Un avertisment: dacă numele fontului conține un spațiu, atunci acest nume trebuie plasat între ghilimele.
• marimea fontului: valoare|%. Aceasta este dimensiunea fontului. Poate fi specificat în pixeli, procente, em. Mai mult, procentul este calculat pe baza mărimii fontului pe care acest element a primit-o prin moștenire.
• grosimea fontului: normal|bold|bolder|lighter|un număr de la 100 la 900. Aceasta este grosimea fontului. 400 = normal, 700 = aldine.
• stilul fontului: normal|italic. Aceasta este înclinația fontului dvs. Implicit este normal.
• varianta de font: normal|small-caps. Aceasta este o literă mică.
• reguli prefabricate font. Acestea vă permit să specificați reguli individuale separate prin spații. În majoritatea regulilor prefabricate ordinea nu este importantă, dar în regula fonturilor este importantă.
• font: font-style font-variant font-weight dimensiunea fontului familia de fonturi. Scriem regulile doar în această ordine. Trebuie specificate regulile font-size și font-family (din moment ce nu au valori implicite), regulile rămase pot fi omise.

familie de fonturi: Arial, Geneva, Helvetica, sans-serif; dimensiunea fontului: 10px; greutate font: bold; font-style: italic; font-variant: small-caps; font: bold 10px Arial;

Reguli pentru lucrul cu text în CSS

• aliniere text: stânga|dreapta|centru|justificare. Acesta este un înlocuitor atributul de aliniere, Acest aliniere orizontala linii. Se aplică numai elementelor bloc.
• text-decor: niciunul|overline (|) subliniere (|) line-through. Acesta este designul linie orizontală(fără linie, linie deasupra unei linii de text, sub o linie de text, barată).
• text-indentare: valoare|%. Aceasta este linia roșie. Procentele sunt calculate în funcție de dimensiunea zonei în care se află textul. Se aplică numai elementelor bloc.
• text-transformare: niciunul|majusculă|majusculă|minuscule (caracterele nu se schimbă, fiecare cuvânt este scris cu majuscule, transformare în minuscule sau litere mari). Aceasta este o transformare a simbolurilor.
• spațiul dintre litere: normal|magnitudine. Aceasta este distanța dintre personaje. Nu poate fi exprimat ca procent.
• spațierea cuvintelor: normal|magnitudine. Aceasta este distanța dintre cuvinte. Nu poate fi exprimat ca procent.
• vertical-align: linie de bază|sub|super|sus|text-top|middle|bottom|text-bottom|%. Aliniere verticală. Aceasta este alinierea elemente inlineîntre ei. Dar pentru elementele de tabel „td” și „th” aliniere verticală aliniază tot conținutul din interior.
• inaltimea liniei: normal|magnitudine|%. Înălțimea liniei în care se află textul.
• spatiu alb: normal|pre|nowrap. Cum se procesează caractere cu spații albeîn elementul nostru (normal - sunt prescurtate și se efectuează împachetarea automată, nowrap - caracterele de spații albe sunt abreviate, dar nu sunt împachetate, pre-spațiile nu sunt procesate în niciun fel, adică nu sunt scurtate și nici nu există împachetare) .

text-align: dreapta; text- decor: subliniere; text-indent: 10px; text-transform: majuscule; spațiere între litere: 10px; spațierea cuvintelor: 10px; vertical-align: top; înălțimea liniei: 5%; spatiu alb: pre;

Liste de stiluri în CSS

Regulile de proiectare a listei în css pot fi aplicate atât pentru întreaga listă, cât și pentru elemente individuale listă.

• tip-list-stil: nici unul|cerc|disc|pătrat|zecimal|alfa-jos|alfa-sus|alfa-jos|roman-inferior|roman-sus. Acesta este tipul de marcare: fără marker, cerc, disc, pătrat, cifre arabe, scrisoriîn registre diferite, numerotarea romană în registre diferite.
• listă-stil-poziție: afară|înăuntru (în afară, înăuntru). Aceasta înseamnă plasarea unei zone cu un marker. Se formează o zonă specială pentru marker: în afara elementului „li” sau în interiorul acestuia (în mod implicit - în afara elementului).
• listă-stil-imagine: niciunul|url. Imagine pentru design marker. Putem specifica adresa URL a imaginii astfel încât aceasta să fie afișată în locul markerului.
• stil de listă: list-style-type list-style-position list-style-image. Acestea. aici scriem toate cele trei reguli de mai sus într-o singură regulă combinată. Ordinea nu contează aici.

list-style-type: pătrat; list-style-position: interior; list- stil- imagine: url("ball.gif "); list- stil: zecimal în interior;

Culoare și proprietăți de fundal în CSS

• culoare: culoare.
• culoare de fundal: culoare|transparent. Aceasta este culoarea de fundal. Implicit este transparent.
• imagine de fundal: niciunul|url. Imagine de fundal. Puteți pune o poză specificând adresa URL a acesteia.
• fundal-poziție: sus|jos|centru|stânga|dreapta|magnitudine|%. Poziționarea imaginii în element.
• atașament de fundal: fix|defilare (snap la element, viewport). Este o chestiune de atașare a unei imagini, din care se calculează coordonatele. Fix - aceasta este pentru a număra coordonatele din zona de vizualizare.
• fundal-repetare: repetare|repetare-x|repetare-y|no-repetare. Repetați: pe ambele axe, repetați pe axa x (orizontală), pe axa y (verticală), nu repetați.
• fundal: transparent culoare de fundal imagine de fundal fundal-repetare fundal-atașament fundal-poziția. O regulă combinată combină toate regulile de fundal.

culoarea rosie; culoare de fundal: #330033; imagine de fundal: url("fon.gif "); fundal- pozitie: dreapta sus; fundal-atașare: fix; fundal- repetare: repetare- x; fundal: #ffffff no- repeat url(fon.gif );

CSS (Foi de stil în cascadă) sau foi de stil în cascadă, sunt folosite pentru a descrie aspect document scris în limbaj de marcare. De obicei, stilurile CSS sunt folosite pentru a crea și schimba stilul elementelor paginii web și interfețe cu utilizatorul scris in Limbi HTMLși XHTML, dar poate fi aplicat și oricărui tip de document XML, inclusiv XML, SVG și XUL.

Foile de stil în cascadă descriu reguli pentru formatarea elementelor folosind proprietăți și valori acceptabile aceste proprietăți. Pentru fiecare element, puteți utiliza un set limitat de proprietăți; alte proprietăți nu vor avea niciun efect asupra acestuia.

O declarație de stil constă din două părți: elementul paginii web − selector, și comenzi de formatare - bloc de anunțuri. Selectorul spune browserului ce element să formateze, iar blocul de declarație (cod între acolade) listează comenzile de formatare - proprietăți și valorile acestora.

Orez. 1. Structura de declarare a stilului CSS

Tipuri de foi de stil în cascadă și specificul acestora

1. Tipuri de foi de stil

1.1. Foaie de stil externă

Foaie de stil externă este un fișier text cu extensia .css, care conține un set de stiluri CSS pentru elemente. Fișierul este creat într-un editor de cod, la fel ca o pagină HTML. Fișierul poate conține doar stiluri, fără marcaj HTML. O foaie de stil externă este conectată la o pagină web folosind o etichetă , situat in interiorul sectiei . Aceste stiluri funcționează pentru toate paginile site-ului.

Puteți atașa mai multe foi de stil la fiecare pagină web adăugând mai multe etichete în succesiune , indicând scopul acestei foi de stil în atributul etichetă media. rel="stylesheet" specifică tipul de link (link către o foaie de stil).

Atributul type="text/css" nu este cerut de standardul HTML5, deci poate fi omis. Dacă atributul lipsește, valoarea implicită este type="text/css" .

1.2. Stiluri interne

Stiluri interneîncorporat într-o secțiune document HTML și sunt definite în interiorul etichetei. Stilurile interne au prioritate față de cele externe, dar sunt inferioare stilurilor inline (specificate prin atributul stil).

...

1.3. Stiluri încorporate

Când scriem stiluri inline, scriem codul CSS în fișierul HTML, direct în interiorul etichetei elementului folosind atributul style:

Fii atent la acest text.

Astfel de stiluri afectează doar elementul pentru care sunt setate.

1.4. regula @import

regula @import Vă permite să încărcați foi de stil externe. Pentru ca directiva @import să funcționeze, trebuie să apară în foaia de stil (externă sau internă) înaintea tuturor celorlalte reguli:

Regula @import este folosită și pentru a include fonturi web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Tipuri de selectoare

Selectoare reprezintă structura unei pagini web. Ele ajută la crearea regulilor pentru formatarea elementelor paginii web. Selectorii pot fi elemente, clasele și identificatorii acestora, precum și pseudo-clase și pseudo-elemente.

2.1. Selector universal

Se potrivește cu orice element HTML. De exemplu, * (marja: 0;) se va reseta la zero marginile pentru toate elementele site-ului. Selectorul poate fi folosit și în combinație cu o pseudo-clasă sau pseudo-element: *:after (stiluri CSS) , *:checked (stiluri CSS) .

2.2. Selector de elemente

Selectoarele de elemente vă permit să formatați toate elementele de acest tip pe toate paginile site-ului. De exemplu, h1 (familie de fonturi: homar, cursiv;) va seta stilul general de formatare pentru toate titlurile h1.

2.3. Selector de clasă

Selectorii de clasă vă permit să specificați stiluri pentru unul sau mai multe elemente cu acelasi nume clasa plasată în locuri diferite pe pagină sau pe pagini diferite site-ul. De exemplu, pentru a crea un titlu cu clasa de titlu, trebuie să adăugați atributul de clasă cu titlul de valoare la eticheta de deschidere

și setați stilul pentru clasa specificată. Stilurile create folosind o clasă pot fi aplicate altor elemente, nu neapărat de acel tip.

Instructiuni de folosire calculator personal

.titlu (transformare text: majuscule; culoare: albastru deschis; )

2.4. Selector ID

Selectorul ID vă permite să formatați unu element specific. Id-ul trebuie să fie unic și poate apărea o singură dată pe o singură pagină.

#sidebar ( lățime: 300px; float: stânga; )

2.5. Selector de descendenți

Selectorii descendenți aplică stiluri elementelor dintr-un element container. De exemplu, ul li (text-transform: majuscule;) - va selecta toate elementele li care sunt copii ale tuturor elementelor ul.

Dacă doriți să formatați descendenții unui anumit element, trebuie să dați acelui element o clasă de stil:

p.first a (culoare: verde;) - acest stil va fi aplicat tuturor legăturilor descendenți ai paragrafului cu prima clasă;

p .first a (culoare: verde;) - dacă adăugați un spațiu, linkurile situate în interiorul oricărei etichete .first class care este un copil al elementului vor fi stilate

Mai întâi a (culoare: verde;) - acest stil va fi aplicat oricărui link situat în interiorul altui element, desemnat de class.first .

2.6. Selector de copii

Un element copil este un copil direct al elementului său care îl conține. Un element poate avea mai multe elemente copil, dar fiecare element poate avea doar un element părinte. Selectorul copil vă permite să aplicați stiluri numai dacă elementul copil vine imediat după elementul părinte și nu există alte elemente între ele, adică elementul copil nu este imbricat în nimic altceva.
De exemplu, p > strong va selecta toate elementele puternice care sunt copii ale elementului p.

2.7. Sora selectoare

Fraternitatea apare între elemente care au un părinte comun. Selectoarele de frați vă permit să selectați elemente dintr-un grup de elemente de același nivel.

h1 + p - va selecta toate primele paragrafe imediat după orice etichetă

fără a afecta paragrafele rămase;

h1 ~ p - va selecta toate paragrafele care sunt sora oricărui titlu h1 și imediat după acesta.

2.8. Selector de atribute

Selectorii de atribute selectează elemente în funcție de numele sau valoarea atributului:

[atribut] - toate elementele care conțin atributul specificat - toate elementele pentru care este specificat atributul alt;

selector[atribut] - elemente de acest tip care conțin atributul specificat, img - doar imagini pentru care este specificat atributul alt;

selector[attribute="valoare"] - elemente de acest tip care conțin atributul specificat cu o anumită valoare, img - toate imaginile al căror titlu conține cuvântul floare;

selector[atribut~="valoare"] - elemente care conțin parțial valoare dată, de exemplu, dacă pentru un element sunt specificate mai multe clase separate printr-un spațiu, p - paragrafe al căror nume de clasă conține caracteristica ;

selector[atribut|="valoare"] - elemente a căror listă de valori de atribut începe cu cuvântul specificat, p - paragrafe al căror nume de clasă este caracteristică sau începe cu caracteristică ;

selector[atribut^="valoare"] - elemente a căror valoare de atribut începe cu valoarea specificată, a - toate legăturile care încep cu http:// ;

selector[attribute$="valoare"] - elemente a căror valoare de atribut se termină valoare specificată, img - toate imaginile în format png;

selector[attribute*="valoare"] - elemente a căror valoare de atribut conține cuvântul specificat oriunde, a - toate linkurile al căror nume conține book .

2.9. Selector de pseudo-clase

Pseudo-clasele sunt clase care nu sunt atașate etichetelor HTML. Acestea vă permit să aplicați reguli CSS elementelor când are loc sau este supus unui eveniment o anumită regulă. Pseudoclase caracterizează elemente cu următoarele proprietăți:

:hover - orice element peste care este plasat cursorul mouse-ului;

:focus - un element interactiv la care a fost navigat folosind tastatura sau activat cu mouse-ul;

:activ - element care a fost activat de utilizator;

:valid - câmpuri de formular al căror conținut a fost verificat în browser pentru conformitatea cu tipul de date specificat;

:invalid — câmpuri de formular al căror conținut nu se potrivește cu tipul de date specificat;

:activat - toate câmpurile de formulare active;

:disabled — câmpuri de formular blocate, adică într-o stare inactivă;

:in-range - câmpuri de formular ale căror valori sunt în intervalul specificat;

:out-of-range - câmpuri de formular ale căror valori nu se încadrează în intervalul specificat;

:lang() - elemente cu text în limba specificată;

:not(selector) - elemente care nu conțin selectorul specificat - clasă, identificator, nume sau tip câmp de formular - :not() ;

:target este un element cu simbolul # care este referit în document;

:checked — elemente de formular selectate (selectate de utilizator).

2.10. Selector structural de pseudoclase

Pseudoclase structurale selectează elementele copil conform parametrului specificat în paranteze:

:nth-child(odd) - elemente copil impar;

:nth-child(even) - chiar elemente copil;

:nth-child(3n) - fiecare al treilea element dintre copii;

:nth-child(3n+2) - selectează fiecare al treilea element, începând cu al doilea copil (+2) ;

:nth-child(n+2) - selectează toate elementele începând cu al doilea;

:nth-child(3) - selectează al treilea element copil;

:nth-last-child() - în lista de elemente copil, selectează elementul cu locație specificată, asemănător cu:nth-child() , dar începând de la ultimul, în sens invers;

:first-child - vă permite să stilați doar primul element copil al etichetei;

:last-child - vă permite să formatați ultimul element copil al etichetei;

:only-child - selectează un element care este singurul element copil;

:empty - selectează elemente care nu au copii;

:root - selectează elementul care este rădăcina în document - element html.

2.11. Selector de pseudoclase de tip structural

Indică un anumit tip de etichetă copil:

:nth-of-type() - selectează elemente similare cu :nth-child() , dar ia în considerare doar tipul elementului;

:first-of-type - selectează primul copil dintr-un anumit tip;

:last-of-type - selectează ultimul element de acest tip;

:nth-last-of-type() - selectează un element tipul datîntr-o listă de elemente conform locației specificate, începând de la sfârșit;

:only-of-type - selectează singurul element de tipul specificat dintre elementele sale fii element părinte.

2.12. Selector de pseudo-element

Pseudoelementele sunt folosite pentru a adăuga conținut, care este generat folosind proprietatea conținut:

:first-letter - selectează prima literă a fiecărui paragraf, se aplică doar elementelor bloc;

:first-line - selectează prima linie a textului elementului, se aplică numai elementelor bloc;

:before - inserează conținutul generat înaintea elementului;

:after - adaugă conținut generat după element.

3. Combinație selectoare

Pentru a selecta mai precis elementele pentru formatare, puteți utiliza combinații de selectoare:

img:nth-of-type(even) - va selecta toate imaginile pare, text alternativ care contine cuvânt css.

4. Gruparea selectoarelor

Același stil poate fi aplicat mai multor elemente în același timp. Pentru a face acest lucru, trebuie să enumerați selectorii necesari în partea stângă a declarației, separați prin virgule:

H1, h2, p, span (culoare: roșie; fundal: alb; )

5. Moștenire și cascadă

Moștenirea și cascada sunt două concepte fundamentale în CSS care sunt strâns legate. Moștenirea este locul în care elementele moștenesc proprietăți de la părintele lor (elementul care le conține). Cascada se manifestă în modul în care tipuri diferite foile de stil sunt aplicate unui document și modul în care regulile conflictuale se suprascriu reciproc.

5.1. Moştenire

Moştenire este mecanismul prin care anumite proprietăți sunt transmise de la un strămoș la descendenții săi. Specificația CSS permite moștenirea proprietăților legate de conținutul text al paginii, cum ar fi culoarea, fontul, spațierea literelor, înălțimea liniilor, stilul listei, alinierea textului, indentarea textului, transformarea textului, vizibilitatea, alb. -spațiu și spațiere între cuvinte. În multe cazuri, acest lucru este convenabil deoarece nu trebuie să setați dimensiunea și familia de fonturi pentru fiecare element de pe pagina web.

Proprietățile legate de formatarea blocurilor nu sunt moștenite. Acestea sunt fundal , chenar , afișare , float și clar , înălțime și lățime , margine , min-max-înălțime și -lățime , outline , overflow , padding , position , text-decoration , vertical-align and z-index .

Moștenirea forțată

Prin utilizarea cuvânt cheie moștenire poate forța un element să moștenească orice valoare de proprietate a elementului său părinte. Acest lucru funcționează chiar și pentru proprietăți care nu sunt moștenite în mod implicit.

Cum sunt setate și cum funcționează stilurile CSS

1) Stilurile pot fi moștenite de la elementul părinte (proprietăți moștenite sau folosind valoarea de moștenire);

2) Stilurile situate în foaia de stil de mai jos suprascrie stilurile situate în tabelul de mai sus;

3) Pot fi aplicate stiluri dintr-un singur element surse diferite. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator browser. Pentru a face acest lucru, faceți clic pe element Click dreapta mouse-ul și selectați „Vizualizare cod” (sau ceva similar). Coloana din dreapta va lista toate proprietățile care sunt setate pe acest element sau moștenite de la un element părinte, împreună cu fișierele de stil în care sunt specificate și număr de serie linii de cod.

Orez. 2. Modul dezvoltator în browser Google Crom

4) Când definiți un stil, puteți utiliza orice combinație de selectori - un selector de element, o pseudo-clasă de element, o clasă sau un identificator de element.

div (chenar: 1px solid #eee;) #wrap (lățime: 500px;).box (float: stânga;).clear (clear: ambele;)

5.2. Cascadă

În cascadă este un mecanism care controlează rezultatul final într-o situație în care reguli CSS diferite sunt aplicate aceluiași element. Există trei criterii care determină ordinea în care sunt aplicate proprietățile — regula!importantă, specificitatea și ordinea în care sunt incluse foile de stil.

Regulă!important

Greutatea unei reguli poate fi specificată folosind cuvântul cheie!important, care este adăugat imediat după valoarea proprietății, de exemplu, span (font-weight: bold!important;) . Regula trebuie plasată la sfârșitul declarației înaintea parantezei de închidere, fără spațiu. Un astfel de anunț va avea prioritate față de toate celelalte reguli. Această regulă vă permite să anulați o valoare de proprietate și să setați una nouă pentru un element dintr-un grup de elemente în cazul în care nu există acces direct la fișierul de stil.

Specificitate

Pentru fiecare regulă, browserul calculează specificitatea selectorului, iar dacă un element are declarații de proprietate conflictuale, se ia în considerare regula care are cea mai mare specificitate. Valoarea specificității are patru părți: 0, 0, 0, 0. Specificitatea selectorului este definită după cum urmează:

pentru id, se adaugă 0, 1, 0, 0;
pentru clasa 0, 0, 1, 0 se adaugă;
pentru fiecare element și pseudo-element se adaugă 0, 0, 0, 1;
pentru un stil inline adăugat direct unui element - 1, 0, 0, 0 ;
Un selector universal nu are specificitate.

H1 (culoare: albastru deschis;) /*specificitate 0, 0, 0, 1*/ em (culoare: argintiu;) /*specificitate 0, 0, 0, 1*/ h1 em (culoare: auriu;) /*specificitate: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (culoare: albastru;) /*specificitate: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (culoare: gri;) /*specificitate 0, 0, 1, 0 */ #sidebar (culoare: portocaliu;) /*specificitate 0, 1, 0, 0*/ li#sidebar (culoare: aqua;) /*specificitate: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Ca rezultat, acele reguli care sunt mai specifice vor fi aplicate elementului. De exemplu, dacă un element are două specificități cu valorile 0, 0, 0, 2 și 0, 1, 0, 1, atunci a doua regulă va câștiga.

Ordinea meselor conectate

Puteți crea mai multe foi de stil externe și le puteți conecta la o singură pagină web. Dacă în mese diferite se va întâlni sensuri diferite proprietățile unui element, apoi, ca rezultat, regula din foaia de stil listată mai jos va fi aplicată elementului.