Încorporat - codul este „încorporat” în antetul documentului. Afectează doar pagina în care este „încorporată”.

1

Externe — foile de stil sunt create într-un document separat. Acestea sunt apoi legate de alte documente web și influențează orice document care este legat de ele.

1

Există 15 bune practici pentru lucrul cu CSS.

Păstrează lucrurile în ordine

Urmărirea unei anumite comenzi necesită costuri, dar are un efect pozitiv. Acest lucru este deosebit de important atunci când utilizați CSS. În loc să notezi codurile în ordinea haotică în care ți-au venit în minte, este mult mai bine să organizezi stocarea codurilor după un anumit tipar.

Ar trebui să începeți cu cele mai generale și mai puțin importante puncte, trecând la cele mai importante. Această abordare creează o structură logică care facilitează viitoarele editări CSS. Utilizarea diagramelor și structurilor simple este utilă nu numai pentru editările viitoare, ci și pentru viitorii dezvoltatori.

Evitați CSS inline

Deși CSS inline este util pentru anumite utilizări, ar trebui evitat din anumite motive specifice. Unul dintre argumentele principale este că stilurile inline nu separă conținutul de design. Acest lucru face dificilă proiectarea și dezvoltarea. Un alt motiv este că acest stil este mai greu de întreținut.

Dacă trebuie făcute modificări la codul de stil inline, acele modificări vor trebui făcute pe fiecare pagină care îl conține. În cele din urmă, stilurile CSS inline nu sunt ușor de înțeles și măresc dimensiunea paginii.

Separați conținutul de design

Unul dintre principalele argumente în favoarea utilizării CSS este acela că codurile și HTML sunt stocate separat - acest lucru face ca designerul de layout să le găsească și să le întrețină mai ușor. Aceasta este o soluție bună, mai ales având în vedere faptul că designerul site-ului web nu este neapărat dezvoltatorul de conținut.

Data, titlul și semnătura

Când trebuie să aflați ceva despre CSS, comentariile din partea de sus a codului dvs. pot fi foarte utile. Mai ales atunci când proiectați teme și șabloane pentru alții. De asemenea, este o practică bună să adăugați codul eșantionului de culoare la începutul codului. Acest lucru va economisi mult timp pentru editare și modificări. Nu va fi nevoie să descoperiți codul de culoare. Tot ce trebuie să faci este să-l copiați.

1 /*====== 2 Echipa Onextrapixel 3 Copyright 2011 OXP 4 Scris pentru - www.onextrapixel.com 5 6 mostre de culori 7 ------------- 8 13437a - albastru închis 9 1d74be - albastru mijlociu 10 e1e1e1 - gri deschis 11 a3a4a4 - gri mijlociu 12 8a8a8a - gri 13 ======== */

Salvați biblioteca de șabloane

Dacă o structură este folosită frecvent, de ce să nu păstrați o copie a acesteia? Acest lucru ar permite data viitoare într-o situație similară să nu pornească de la zero. Pentru a face acest lucru, extrageți toate codurile care nu sunt partajate și salvați fișierul ca șablon CSS pentru utilizare ulterioară.

Utilizați comenzile rapide CSS

Pentru a încărca rapid foaia de stil și a economisi timp, utilizați comenzile rapide când codați CSS. Acest truc bun de codare CSS vă va face foaia de stil îngrijită și clară.

In loc de asta:

Ar trebui sa scrii asta:

1 #creion ( marja 2: 8px 7px 0px 5px; // valori sus, dreapta, jos și stânga, respectiv. 3 )

Utilizați tehnici utile de denumire

După cum am menționat mai devreme, unul dintre cele mai bune motive pentru utilizarea CSS este capacitatea de a separa stilurile de conținut. CSS facilitează reproiectarea unui site web fără a afecta HTML. Dacă elementele sunt denumite în așa fel încât va fi dificil să le distingem în viitor, atunci acest lucru va crea unele dificultăți și o pierdere suplimentară de timp. Este necesar să folosiți o denumire simplă, dar în același timp ușor de înțeles a elementelor relevante. În niciun caz nu trebuie să numiți o coloană „coloană din stânga”, deoarece în timpul operațiunilor ulterioare puteți confunda unde se află partea de cod responsabilă pentru conținut și unde direct pentru aspect.

Folosiți o cratimă în loc de un caracter de subliniere

Când utilizați versiuni mai vechi de browsere, CSS-ul se va rupe sau nu va funcționa deloc dacă sunt folosite liniuțe de subliniere. Utilizarea unei cratime în loc de liniuță de subliniere are ca rezultat o mai bună compatibilitate cu browserele mai vechi și mai puține blocări.

Nu te repeta

Unul dintre cele mai bune trucuri CSS pentru a-ți ușura viața este să folosești stenografia ori de câte ori este posibil. Căutați întotdeauna modalități de a grupa elemente similare care ar putea folosi aceeași dimensiune a fontului, margini și culoare. Aveți o înțelegere clară a modului în care CSS va interpreta aceste comenzi rapide. Ordinea de vizualizare este similară cu mișcarea acelui orelor de la 12 - sus, dreapta, jos și apoi stânga.

Mai eficient decât asta:

1 h1 ( 2 marje: 1em 0 2em 0; 3 mărimea fontului: 1em; 4 culori: #222; 5 ) 6 7 h2 ( 8 marje: 1em 0 2em 0; 9 dimensiunea fontului: 1em; 10 culori: #222 unsprezece)

Evitați să folosiți imagini cu adevărat mari

Utilizarea imaginilor mari ca fundal al unei pagini web va crește timpul de încărcare a paginii. O soluție bună este să folosiți imagini mici și, dacă este posibil, să le plasați cu caracteristici CSS acolo unde este necesar.

1 corp ( 2 background:url(bg.jpg) repeat-x; 3 )

Eliminați codul redundant

Utilizarea unora dintre sfaturile de mai sus va ajuta cu adevărat la reducerea dimensiunii foii de stil. Acest lucru va face ca pagina să se încarce mai repede. În plus, o foaie de stil mai mică este mai ușor de întreținut și actualizat. Eliminați întotdeauna codurile redundante și îmbinați acolo unde este posibil.

Un alt truc pentru a face un tabel mai mic este să nu definiți zero ca unitate de măsură. Dacă marginea ar trebui să fie setată la 0, atunci nu este nevoie să scrieți 0px sau 0cm. CSS va înțelege că 0 este zero, indiferent de unitate.

Validare CSS

Dacă apar erori la compilarea codului, trebuie să petreceți timp pentru a le găsi și a le corecta. Pentru a economisi timp, utilizați Validatorul CSS W3C pentru a vă ajuta să găsiți unele dintre cele mai frecvente erori CSS. Acesta este un instrument gratuit și foarte convenabil.

Utilizați funcția Reset CSS

Folosind Resetare CSS, va fi posibil să se evite inconsecvențele între diferite browsere. În practică, acest lucru este important pentru eliminarea câmpurilor care sunt incompatibile, precum și a altor incompatibilități de atribute care fac ca paginile web să arate diferit în browsere diferite. Folosind funcția Reset CSS, veți obține coerența paginii în diferite browsere.

html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronim,adresă,big,cite,code,del,dfn,em,font, img,ins,kbd,q,s,samp,small,strike,puternic,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,etichetă,legendă,tabel,legendă, tbody,tfoot,thead,tr,th,td(margine:0; padding:0; chenar:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family :inherit; vertical-align:baseline; 2:focus (outline:0; ) 3 body (line-height:1; color:#000; background:#fff; ) 4 ol,ul (list-style:none; ) 5 tabel ( border-collapse:separate; border-spacing:0; ) 6 caption,th,td ( text-align:left; font-weight:normal; )

Scrieți mai întâi pentru Gecko, apoi personalizați pentru IE și Webkit

De obicei, dacă CSS funcționează corect pentru browserele Gecko (Netscape, Firefox Mozilla, Camino, Flock), este foarte probabil să funcționeze bine pentru alte browsere - IE și Webkit (Safari, Chrome). Pentru a economisi timp și nervi atunci când încercați să descoperi erorile de codare, este mai bine să începeți prin a scrie CSS pentru browserele Gecko.

Atenție

Este un obicei bun să păstrați foile de stil specifice browserului separate una de cealaltă, inclusiv JavaScript, comentariile condiționate și codul de pe server necesare pentru a face acest lucru.
Această metodă este excelentă pentru a evita atacurile hackerilor asupra foilor de stil de bază.
Acest lucru este, de asemenea, esențial pentru a menține CSS-ul gestionabil.

Concluzie

Există multe beneficii în utilizarea CSS. Nu numai că face ca paginile să se încarce rapid, dar atunci când folosești cele mai bune 15 trucuri CSS de mai sus, nu numai că îți ușurează viața, ci și proiectarea și editarea temelor și șabloanelor. Utilizarea CSS oferă beneficii atunci când lucrați cu Google. Motorul de căutare acordă mai multă pondere conținutului din partea de sus a documentului HTML. Când păianjenii motoarelor de căutare accesează cu crawlere HTML-ul unui site web, ei se uită la conținutul care vine primul. Folosind CSS, este ușor să creați un aspect în care conținutul apare primul, urmat de restul codului sursă al paginilor.

CSS (Foi de stil în cascadă) sau foi de stil în cascadă, sunt folosite pentru a descrie aspectul unui document scris într-un limbaj de marcare. Stilurile CSS sunt de obicei folosite pentru a crea și stiliza elemente ale paginilor web și ale interfețelor utilizator scrise în HTML și XHTML, dar pot fi aplicate ș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 valorile permise pentru acele 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.

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. regulă @import

regulă @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;) va reseta 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

Selectorii de elemente vă permit să formatați toate elementele de un anumit tip de 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ă setați stiluri pentru unul sau mai multe elemente cu același nume de clasă, plasate în locuri diferite pe pagină sau pe pagini diferite ale site-ului. 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.

Instrucțiuni pentru utilizarea unui computer personal

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ă.

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 o 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 caracteristică ;

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[attribute^="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 valoarea 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 atunci când are loc un eveniment sau respectă 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 formular 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 elementelor copil, selectează elementul cu locația specificată, similar 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 documentului - elementul html.

2.11. Selector de pseudo-clasă 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 de tipul dat într-o listă de elemente în funcție de locația specificată, începând de la sfârșit;

:only-of-type - selectează singurul element de tipul specificat dintre elementele fiu ale elementului 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 cu numere pare al căror text alternativ conține cuvântul 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ștenirea și cascada

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ă prin modul în care diferitele tipuri de foi 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ă

Puteți utiliza cuvântul cheie moștenire pentru a 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 situate în foaia de stil de mai jos suprascrie stilurile situate în tabelul de mai sus;

3) Stilurile din diferite surse pot fi aplicate unui element. Puteți verifica ce stiluri sunt aplicate în modul dezvoltator browser. Pentru a face acest lucru, faceți clic dreapta pe element ș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ărul ordinal al liniei 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 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 tabele diferite se găsesc valori diferite ale proprietăților pentru un element, atunci, ca rezultat, regula găsită în foaia de stil listată mai jos va fi aplicată elementului.

Ryan North

În mod ciudat, CSS este considerat atât una dintre cele mai ușoare, cât și una dintre cele mai dificile limbi pentru un dezvoltator web. Cu siguranță este destul de simplu pentru început - definiți proprietățile stilului, valorile pentru anumite elemente și... cam asta este tot ce trebuie să știți! Cu toate acestea, în proiectele mari, situația devine destul de confuză și dificil de organizat CSS-ul într-un mod semnificativ. Schimbarea oricărei linii de CSS pentru a stila un element pe o pagină are adesea consecințe nedorite asupra elementelor din alte pagini.

Pentru a înțelege complexitatea inerentă a CSS, au fost create multe tipuri diferite de bune practici. Problema este că încă nu există un consens cu privire la care sunt cele mai bune și multe dintre ele se contrazic complet. Dacă este prima dată când încerci să înveți CSS, această situație poate fi cel puțin dezorientatoare.

Scopul acestui articol este de a oferi context istoric asupra modului în care tehnicile și instrumentele CSS au evoluat la starea lor actuală în 2018. Odată ce înțelegi această istorie, va fi mai ușor să înțelegi fiecare abordare și cum să o folosești în avantajul tău. Deci, să începem!

Utilizarea CSS pentru stiluri de bază

Funcțional, dar nu foarte frumos. Putem adăuga CSS pentru a îmbunătăți stilul de bază în index.css: