Acest capitol explică în detaliu de ce Cascading Style Sheets (Cascading Style Sheets, CSS), numite în cascadă. Pentru a începe, să ne amintim modul în care putem adăuga stil într-o pagină web:
- conectați o foaie de stil extern;
- Adăugați o foaie de stil intern în document HTML;
- defini element de stil, aplicând atributul style tag la valorile cerute (inline-stil).
Aceste metode de stiluri adăugarea pot fi utilizate simultan. De exemplu, pentru etichetă
Acesta poate fi setat în același timp, ca și stilul în foaia de stil externe și interne. In plus, mai multe variante de formatare tag-uri pot fi scrise într-un stylesheet
. De exemplu:
În acest exemplu, eticheta
trei opțiuni de formatare specificate. Dar cum browser-ul prioritizează între stiluri? Ce stil de cele de mai sus vor fi selectate și pe ce bază? Suntem noi și să fie văzut.
stiluri de priorități
Cascade CSS - acesta este mecanismul prin care elementul HTML document poate fi folosit pentru mai mult de un CSS regulă. Regulile pot proveni din diferite surse: .. Din foile de stil externe și interne din moștenirea din elemente părinte, din clase și ID-ul din selectorul de tag-ul de pe atributul style, etc. Ca și în aceste cazuri, este de multe ori un conflict de stiluri, a fost creat sistemul de priorități: în cele din urmă se aplică stilul care provine dintr-o sursă cu o prioritate mai mare.
Ce surse sunt mai semnificative, și care - cel puțin? Înțelege acest lucru va ajuta la acest tabel, în care respectiva greutate (importanta) a fiecărui selector. Cu cât greutatea, cea mai mare prioritate:
Dacă sa întâmplat ca două selectoare au aceeași greutate, prioritatea acordată stilului, care se află mai jos în codul. În cazul în care un element este specificat și stil în exterior și tabelele interne, prioritatea este acordată stilului mesei, care se află mai jos în codul.
Exemplu: în foaia de stil intern este setat la tag-ul roșu
. și în străină - verde pentru aceeași etichetă. Documentul HTML, primul lucru pe care le-ați conectat o foaie de stil extern, și apoi se adaugă la un tabel intern cu o etichetă . Ca urmare, culoarea etichetei
Acesta va fi de culoare roșie.
Aceasta este - una dintre modalitățile de a controla relevanța stiluri. O altă modalitate de a mări prioritatea - crește în mod specific selectorul de greutate, cum ar fi prin adăugarea sau ID-ul de clasă.
Resetarea stiluri folosind reset.css
În capitolul precedent am menționat deja faptul că fiecare browser are propriile sale stiluri de built-in HTML-documente concepute pentru a îmbunătăți lizibilitatea. Probabil că ai văzut deja, se pare ca „goale“, pagina Web într-un browser: albastru subliniat link-uri, font negru, pozițiile îndrăznețe, și așa mai departe ..
Fiecare browser are diferențele sale în stiluri încorporate: de exemplu, în IE nu este indentat de la marginea de sus a ferestrei, și Firefox este. Există mai multe astfel de diferențe. Deci, ele nu interferează cu eco-browser când scrieți propriile stiluri CSS, puteți utiliza metoda de resetare Styles interne.
Instrumentul pentru a reseta stilul - este, de fapt, același tabel cu CSS, care descrie regulile care restabilite stilurile integrate browser-ul, de stabilire a valorilor de bază ale proprietăților. Aceasta se numește reset.css masă și servește, astfel încât să puteți începe să creați un stil „de la zero“. Aici este un exemplu al unui tabel de descărcare standard de:
Desigur, există și alte variante de resetare CSS, de exemplu, este acum Normalize.css mai popular. care, spre deosebire de resetare CSS, acesta păstrează multe foi de stil implicit util, și nu le spală curat. Acest lucru este convenabil, deoarece eliminând necesitatea de a re-declara stilul de multe elemente standard.
Dacă doriți, puteți crea și fișierul stiluri de resetare în funcție de nevoile dumneavoastră.
Și acum câteva cuvinte despre ceea ce face tabelul de mai sus este stiluri de resetare:
- un prim selector conține cele mai populare tag-uri pentru care îndepărtează orice umplutură, de teren și cadru, precum și, de asemenea, atribuite dimensiunea fontului de 100%;
- al doilea selector de grup pentru tag-uri corecte afișare HTML5 în browsere mai vechi;
- cu proprietatea line-height corp selector este setat distanța dintre rânduri egale (spațiere) pentru text;
- ol pentru liste. ul îndepărtat markeri;
- a ridicat citate și alte tipuri de conținut, înainte și după conținutul etichetei blockquote. q;
- adăugând cadru simplificat pentru celulele din foaia de calcul.
resetare stylesheet trebuie să fie conectat înainte de stiluri proprii. Dacă citiți cu atenție paragraful cu privire la prioritățile care au deja înțeles de ce reset.css ar trebui să fie în fața altor stiluri: deoarece regulile specificate în codul de mai jos, rescrie regulile anunțate anterior.
Cascade CSS - stiluri este abilitatea de a se suprapun și se amestecă. Elementul final al stilului, care este vizibil în browser-ul - este o combinație de mai multe stiluri aplicate în mod consecvent.
Când regula de conflict este declanșat priorități mai multe stiluri. Se acordă preferință un stil care este considerat a fi mai semnificativ.
Trebuie să știi cum prioritățile regulilor de alocare între stiluri pentru a crea un foi de stil știință de carte.
Prima parte a programului nostru de instruire este de peste. A doua secțiune a cărții, vom începe prin studierea fonturi CSS fonturi web și modul în care se conectează.