CSS (Foi de stil în cascadă) sau Foi de stil în cascadă, sunt folosite pentru a descrie aspect un document scris într-un limbaj de marcare. În mod obișnuit, stilurile CSS sunt folosite pentru a crea și schimba stilul elementelor paginii web și al interfețelor de utilizator în care sunt scrise 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 regulile de formatare a elementelor folosind proprietăți și valori admise 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.

Declarația de stil constă din două părți: elementul paginii web − selector, și comenzi de format - bloc de anunțuri. Selectorul spune browserului ce element să formateze și în blocul de declarare (codul din acolade) listează comenzile de formatare - proprietăți și valorile acestora.

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ă reprezintă fisier text cu extensia .css, care conține un set de stiluri CSS pentru elemente. Fișierul este creat în editorul de cod, la fel ca o pagină HTML. Fișierul poate conține doar stiluri, fără markup HTML. O foaie de stil externă este atașată unei pagini 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 , specificând scopul acestei foi de stil în atributul etichetă media. rel="stylesheet" indică tipul de link (link către foaia de stil).

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

1.2. Stiluri interne

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

...

1.3. Stiluri inline

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ă numai elementul pentru care sunt setate.

1.4. regulă @import

regulă @import vă permite să încărcați foi de stil externe. Pentru ca directiva @import să funcționeze, aceasta trebuie să fie plasată î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. Sunt folosite pentru a crea reguli 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;) va reseta marginile pentru toate elementele site-ului. Un selector 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ă stilați 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, adăugați atributul de clasă cu titlul de valoare la eticheta de deschidere

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

Manual de utilizare calculator personal

2.4. Selector ID

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

2.5. Selector de descendenți

Selectorii descendenți aplică stiluri elementelor situate în interiorul unui 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 copiii unui anumit element, trebuie să dați acelui element o clasă de stil:

p.mai întâi a (culoare: verde;) - stilul dat se va aplica tuturor legăturilor, descendenți ai paragrafului cu clasa întâi;

p .first a (culoare: verde;) - dacă adăugați un spațiu, atunci 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, notat cu clasa .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, iar fiecare element poate avea doar un element părinte. Selectorul copil permite aplicarea stilurilor 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

Relațiile de frați apar între elemente care au un părinte comun. Selectoarele de elemente frați vă permit să selectați elemente dintr-un grup de elemente frați.

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

fără a afecta restul paragrafelor;

h1 ~ p va selecta toate paragrafele care sunt frați cu orice 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 setat atributul alt;

selector[atribut] - elemente de acest tip care contin atributul specificat, img - doar pozele pentru care este setat atributul alt;

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

selector[atribut~="valoare"] - elemente care conțin parțial valoare dată, de exemplu, dacă un element are mai multe clase separate printr-un spațiu, p sunt 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ă prezintă 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ă cu valoare specificată, img — toate imaginile în format png;

selector[atribut*="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 atunci când un eveniment are loc sau se supune. o anumită regulă. Pseudoclase caracterizează elemente cu următoarele proprietăți:

:hover - orice element care este trecut cu cursorul mouse-ului;

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

:active - elementul care a fost activat de utilizator;

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

:invalid - câmpuri de formular al căror conținut nu corespunde tipului de date specificat;

:activat - toate câmpurile de formular active;

:disabled - câmpuri de formular dezactivate, 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 sunt incluse în intervalul setat;

: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 elementul # la care se face referire în document;

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

2.10. Selector structural de pseudo-clasă

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 de la al doilea element 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ă, similar cu :nth-child() , dar invers față de ultimul;

: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 copil;

:empty - selectează elemente care nu au copii;

:root - selectează elementul care este rădăcina documentului - element html.

2.11. Selector de pseudo-clasă de tip structural

Indicați un anumit tip de etichetă copil:

:nth-of-type() - selectează elemente prin analogie cu :nth-child() , luând în considerare doar tipul elementului;

:first-of-type - selectează primul copil al tipului dat;

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

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

:only-of-type - selectează singurul element de tipul specificat dintre copiii elementului părinte.

2.12. Selector de pseudo-element

Pseudo-elementele 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 de selectoare

Pentru o selecție mai precisă a elementelor pentru formatare, puteți utiliza combinații de selectoare:

img:nth-of-type(even) - selectează 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, în partea stângă a declarației, enumerați selectorii necesari, despărțiț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 înseamnă că elementele moștenesc proprietăți de la părintele lor (elementul care le conține). Cascada se manifestă în mod tipuri diferite foile de stil sunt aplicate documentului ș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 prevede moștenirea proprietăților legate de conținutul text al unei pagini, cum ar fi culoarea , fontul , spațierea literei , înălțimea liniilor , stilul listei , alinierea textului , indentarea textului , transformarea textului , vizibilitatea , spații albe ș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 de formatare a 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 , contur , overflow , padding , position , text-decoration , vertical-align and z-index .

Moștenirea forțată

Prin intermediul cuvânt cheie moștenire poate forța un element să moștenească orice valoare de proprietate a elementului 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 din foaia de stil de mai jos suprascrie stilurile din foaia de stil de mai sus;

3) Un element poate fi stilat surse diferite. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator al browserului. 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 pentru acest element sau moștenite de la elementul părinte, precum și fișierele de stil în care sunt specificate și număr de serie linii de cod.

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.

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 pusă la sfârșitul declarației înaintea parantezei de închidere, fără spațiu. O astfel de declarație va avea prioritate față de toate celelalte reguli. Această regulă vă permite să anulați valoarea proprietății ș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ă elementul are declarații de proprietate conflictuale, se ia în considerare regula cu cea mai mare specificitate. Valoarea specificității are patru părți: 0, 0, 0, 0 . Specificitatea selectorului este definită după cum urmează:

0, 1, 0, 0 se adaugă pentru id;
pentru clasa 0, 0, 1, 0 se adaugă;
Se adaugă 0, 0, 0, 1 pentru fiecare element și pseudo-element;
pentru un stil inline adăugat direct unui element, 1, 0, 0, 0 ;
selectorul 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 urmare, acele reguli, a căror specificitate este mai mare, 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 lega la aceeași pagină web. Dacă în mese diferite se va întâlni sensuri diferite proprietățile unui element, apoi, ca rezultat, regula care se află în foaia de stil din lista de mai jos va fi aplicată elementului.

Chiar înainte de 1998, care a introdus specificația CSS de nivel 2, elementele de formular aveau deja suport larg în toate browserele majore. Specificația CSS 2 nu a răspuns niciodată la întrebarea cum ar trebui să fie prezentate utilizatorilor elementele de formular. Pentru că elementele de formă fac parte din interfața cu utilizatorulîn fiecare document web, autorii specificației au ales să plece prezentare vizuală Elemente de formular html în mod implicit pentru fiecare browser.

De-a lungul anilor, lipsa detaliilor din specificația referitoare la elementele de formular a forțat dezvoltatorii să creeze un numar mare de teste și exemple, a căror sarcină principală a fost de a aduce componentele vizuale ale tuturor elementelor de formular într-o vizualizare încrucișată. În acest articol, ne vom uita la câteva șabloane css, care vă va permite să aduceți elementele formelor la un numitor comun.

Teste Roger Johansson pentru stilarea elementelor de formular

În 2004 și din nou în 2007, Roger Johansson a creat suite de testare speciale pentru elemente de formular și CSS. Din aceste teste, a reieșit o concluzie care l-a supărat pe Roger:

Deci, ce a arătat experimentul? După cum am observat deja, testele au arătat că cu folosind CSS nu este posibil să controlați stilurile de formular pentru a afișa elemente de formular în același mod în toate browserele și platformele. Testele au arătat, de asemenea, că majoritatea browserelor ignoră multe proprietăți CSS atunci când sunt folosite pentru stilizarea elementelor de formular.

În ciuda adevărului incontestabil al acestor constatări, dezvoltatorii web continuă să experimenteze Elemente CSS forme în căutarea Sfântului Graal, sau cel puțin un compromis rezonabil între redarea implicită a browserului și stilul personalizat.

Model implicit de afișare a elementelor de formular

În mod implicit, specificația CSS 2.1 pentru HTML4 stabilește elemente de formular, cum ar fi zona de text, intrare și selectare, pentru a fi randate în bloc:

Zona de text, introducere, selectare (afișare: bloc inline; )

Dimpotrivă, elementele formular și set de câmpuri au un mod de afișare bloc:

Set de câmpuri, formular (afișare: bloc; )

Modelul de specificații CSS pentru elementele de stil de pe formulare se termină la acest pas. Toate celelalte aspecte ale afișajului vizual al elementelor de formular depind de foaia de stil implicită a browserului. Cu toate acestea, regulile de mai sus înseamnă următoarele:

• Elementele bloc inline pot fi stilate folosind contextul de formatare inline. Asta implică Utilizarea CSS proprietăți precum line-height și vertical-align pentru a controla înălțimea și alinierea verticală a elementului. Proprietățile de umplutură și margine pot fi, de asemenea, utilizate pentru a controla umplutura și marginea pentru elemente de formă. Este demn de remarcat faptul că elementele blocului inline pot fi, de asemenea, controlate folosind lățimea și înălțimea, comportamentul lor în acest sens nu este diferit de elementele bloc normale.
• Elementele bloc pot fi stilizate într-un mod standard, folosind un context obișnuit de formatare a blocurilor. Cu toate acestea, există probleme cu elementele fieldset și legend form deoarece se bazează în întregime pe stilurile browserului însuși.

Apare întrebarea cum să rezolvăm aceste probleme pentru dezvoltatori?

Rezolvarea problemelor de dimensionare a elementelor de formular

Dezvoltatorii web au văzut curând că browserele au tratat elementele blocurilor în linie destul de ciudat atunci când a venit vorba de dimensionarea lor. Determinarea înălțimii duce destul de des la rezultate neașteptate:

Introducere, selectați ( lățime: 120 px; înălțime: 32 px; )

Dezvoltatorii au încercat să rezolve această problemă cu inline-block:

Introducere, selectare ( lățime: 120 px; înălțime: 32 px; afișare: bloc; )

Rezultatele lasă încă mult de dorit, cu excepția elementului textarea. Pentru a rezolva această problemă, mai întâi trebuie să normalizați fontul și dimensiunea fontului pentru elementele de formular:

Introducere, selectare ( lățime: 120px; font: 1em Arial, sans-serif; )

Odată ce fontul este setat, puteți adăuga umplutură:

Introducere, selectare ( lățime: 120px; font: 1em Arial, sans-serif; umplutură: 3px 6px; )

Elementelor de intrare și textarea li se poate da, de asemenea, un chenar, care le va afecta dimensionarea în funcție de modelul casetei:

Intrare, introducere, zonă de text (chenar: 1px solid #ccc; )

elemente de intrare butoanele și tipurile de trimitere pot avea o umplutură suplimentară adăugată de browser. O practică comună este normalizarea acestora:

Intrare, intrare ( umplutură: 2px; )

Problema acestei abordări este că browserele vor aplica adesea prefixe de furnizor proprietăților elementelor, deci nu este întotdeauna posibilă normalizarea umpluturii. De exemplu, pentru web-kit, puteți normaliza astfel:

Intrare, introducere, introducere, intrare::-webkit-file-upload-button, buton ( -webkit-box-align: center; text-align: center; cursor: implicit; culoare: buttontext; padding: 2px 6px 3px; chenar : 2px față de buton de la început; imagine-chenar: inițială; culoare de fundal: față buton; dimensiunea casetei: casetă-chenar; ) intrare, intrare, intrare ( -webkit-aspect: buton; spațiu alb: pre; )

Umplutura funcționează și pe elementele fieldset și legendă, dar cu rezultate diferite:

• Setarea umpluturii setului de câmpuri la 0 resetează padding-ul la implicit numai în unele browsere (nu IE)
• Setarea umpluturii pentru legendă la 0 micșorează acel element

Elementele de selectare, casetă de selectare, radio pot fi normalizate doar cu rezultate bune pentru câteva proprietăți:

• familie de fonturi
• marimea fontului
• Lățime (pentru selectare)
• Captuseala

Aplicarea altor proprietăți acestor elemente de formular produce rezultate inconsecvente.

Alinierea elementelor în forme

Elementele de formă pot fi aliniate vertical și orizontal. Ele pot fi amplasate pe aceeași linie sau într-un grup. Pentru a le alinia pe aceeași linie, puteți utiliza float sau contextul standard inline-block.

Când se utilizează elemente plutitoare, elementele sunt transformate automat în elemente bloc. Aceasta înseamnă că încă nouă reguli de model de cutie oferă acum control asupra acestor elemente.

cu elemente plutitoare sarcina principala este de a realiza o aliniere verticală bună pe linia curentă. În acest caz, este o practică obișnuită să folosiți margini verticale sau umpluturi:

Introducere, selectare ( lățime: 120 px; float: stânga; margine-sus: 0,4 em; )

Această abordare funcționează atunci când nu trebuie să aliniați blocurile cu text, cum ar fi un element de etichetă. În acest caz, puteți utiliza poziționarea relativă, umplutura sau marginea pe un element care conține doar text:

O altă problemă apare cu butoanele. În acest caz, atunci când aveți un buton care este mai mare decât celelalte elemente, puteți seta aliniere verticală folosind poziționarea relativă:

Intrare (float: stânga; lățime: 90 px; poziție: relativă; sus: 0,4 em; )

Această abordare de poziționare relativă funcționează și pentru casetele de selectare și butoanele radio. Poziționare relativă poate fi folosit chiar și pentru a normaliza umplutura din stânga a elementului legendă într-un set de câmpuri.

Dacă utilizați elemente într-un context de formatare inline, puteți utiliza proprietatea vertical-align pentru a alinia vertical:

Etichetă, intrare ( aliniere verticală: mijloc; marginea dreapta: 1 em; )

Rezultate frumoase poate fi realizată prin combinarea acestei proprietăți cu proprietatea line-height. Cu toate acestea, această proprietate trebuie să fie setată pe elementul părinte. Dacă se setează direct pe elementul de formular însuși, se va folosi înălțimea elementului:

Form-rând (linie-înălțime: 1,4; )

Utilizarea declarației de înălțime a unui element părinte asociată cu aceeași valoare de înălțime de linie este, de asemenea, o practică bună:

Form-rând (linie-înălțime: 1,8; înălțime: 1,8 em; )

În contextul formatării inline, puteți utiliza proprietatea text-align pe elementul părinte pentru a alinia conținutul elementului de formular la stânga, la centru sau la dreapta.

Comportament ciudat al intrărilor de fișiere

Element tip de introducere fisierul este ocazie speciala. Un astfel de element ar trebui să fie întotdeauna vizibil și recunoscut în interfața browserului din motive de securitate. Aceasta înseamnă că browserele ignoră în mod deliberat anumite reguli de stil (cum ar fi cele legate de vizibilitate) și tind să-și aplice propriii algoritmi definiți de foaia lor de stil implicită.

De asemenea, unele browsere afișează doar un singur buton, în timp ce altele adaugă un câmp pentru calea fișierului.

Cu toate acestea, dezvoltatorii web au găsit modalități de a evita această limitare. Mai întâi, au înfășurat elementul cu un recipient.