Aplicarea stilurilor în html. Includerea CSS în codul html. Inclusiv un fișier CSS separat

CSS înseamnă „Cascading Style Sheets”, ceea ce înseamnă „Cascading Style Sheets”. Folosit pentru a proiecta pagini web. Dacă codul HTML conține conținutul (ce va afișa browserul), atunci CSS-ul determină designul acestuia (cum îl va afișa browserul). Frumusețea CSS este că, cu ajutorul unui singur stil, puteți proiecta toate aceleași tipuri de elemente ale unei pagini sau ale unui întreg site (toate linkurile, paragrafele, listele deodată). Cu un stil CSS, definiți o dată cum ar trebui să arate un anumit element, de exemplu, imaginile, și își schimbă designul în toate documentele simultan. Pentru a modifica formatarea textului pe site-ul dvs., trebuie să schimbați codul CSS o singură dată.

Elemente CSS de bază

Așa cum HTML este format din etichete, atribute și valori, CSS este alcătuit din etichete elemente proprii. Esența constructelor CSS poate fi explicată după cum urmează: „Specificați ce element de pagină să stilați și specificați cum să îl stilați.” Iată care sunt elementele de bază ale CSS.

Selector. Un identificator care spune browserului la ce element de pagină să aplice designul. Datorită acesteia, browserul „înțelege” că stilul este destinat, de exemplu, să proiecteze liste sau tabele.
Bloc de declarații de stil. Este scris după selector și este cuprins între acolade. Specifică stilul elementului (designul acestuia). Blocul de declarații de stil este format din două părți.
Proprietate. Un analog al unui atribut în HTML. Determină ce proprietate de aspect va fi modificată.
Sens. Specificat unei proprietăți prin două puncte și determină exact cum va fi modificată proprietatea.

Pot exista mai multe proprietăți și valori într-un bloc de declarații de stil, caz în care acestea sunt enumerate separate prin punct și virgulă.

Tipuri de selectoare

În funcție de proprietățile elementelor de pagină pe care le definesc, selectoarele vin în diferite tipuri.

universal. Setează reguli pentru toate elementele de pagină care nu au alte reguli setate.
Cod * (dimensiunea fontului: 14px;) setează dimensiunea fontului la 14 pixeli pentru toate elementele documentului pentru care alte reguli nu sunt specificate folosind alți selectori.
Tega. Acest tip de selector specifică regulile de formatare pentru conținutul unei anumite etichete HTML. Numele selectorului este același cu numele descriptorului, scris doar fără paranteze unghiulare: p, h1, ul.
De exemplu, cod h2 (culoarea rosie;) seturi Culoarea verde text pentru toate titlurile de al doilea nivel, adică conținutul etichetelor
.
Atribut. Folosind acest grup de selectoare, puteți determina stilul conținutului tuturor etichetelor care au specificat atribut specific. Selectoarele pot fi specificate mai precis prin specificarea nu numai a numelui atributului, ci și a valorii atribuite acestuia, precum și a numelui etichetei care îl conține. Acest lucru poate fi folosit pentru a face designul mai individual.
clasă. Un tip de selectoare pentru atunci când trebuie să formatați diferit conținutul etichetelor de același tip. De exemplu, doriți să faceți roșu linkurile din partea de jos a site-ului, în timp ce toate celelalte ar trebui să rămână albastre, așa cum au fost. Pentru a aplica regulile de clasă unui element de site, trebuie să specificați numele clasei în atribut clasă eticheta corespunzătoare.

Să spunem că folosim clasa Etapa elementelor individuale trebuie să li se acorde o marjă din stânga de 15 pixeli.

Codul CSS va fi astfel:

Pas (marja-stânga: 15px;)

Codul HTML care va lega elementul la regulă va fi:

Text indentat

ID. Folosit împreună cu atributul id Etichetă HTML și este utilizată atunci când proprietățile trebuie setate pentru un singur element. Spre deosebire de un selector de clasă, al cărui nume este precedat de un punct, acesta este scris folosind un hash:

#exclusiv (culoare:portocaliu;)

Contextual. În HTML, anumite etichete se găsesc adesea în interiorul altor etichete, iar selectorii contextuali ajută la definirea regulilor doar pentru astfel de cazuri. De exemplu, le puteți folosi pentru a formata elemente din liste numerotate sau text italic din paragrafe:

P i (familie fint: Century;)

Restul grupurilor de selectoare se bazează pe o combinație a tipurilor enumerate, precum și pe principiul moștenirii, atunci când element copil preia proprietățile părintelui.

Combinarea și gruparea selectoarelor este convenabilă în multe situații. De exemplu, pentru a stabili reguli de clasă Etapa numai pentru link-uri, trebuie să specificați ambii selectori separați printr-un punct (mai întâi eticheta, apoi clasa):

A.pas (marja-stânga: 15px;)

Cum să includeți CSS într-o pagină HTML?

Există mai multe moduri de a face ca instrumentele de creare a site-urilor web să interacționeze între ele. Pe baza metodei de adăugare, stilurile sunt împărțite în următoarele categorii.

Stiluri încorporate

Setați în document direct în interiorul etichetei HTML folosind atributul stil. Avea cea mai mare prioritate. Aceasta înseamnă că, dacă este specificat un design diferit pentru același element, atunci se va acorda preferință regulii care este scrisă în interiorul etichetei. Selectorul pentru stilul încorporat nu este necesar, deoarece legătura dintre stil și etichetă este evidentă - designul etichetei este specificat în acesta.

Următorul cod stabilește dimensiunea și culoarea fontului pentru textul din interiorul etichetei

Text formatat folosind un stil intern.

Stiluri globale

Setați prin etichetă …

Stiluri înrudite

Cel mai convenabil, pentru că cu ajutorul lor te poți înregistra cu ușurință stil uniform tot site-ul. Un stil legat înseamnă că toate stilurile CSS sunt într-un fișier separat cu extensia .css.

Această abordare este, de asemenea, convenabilă deoarece separă regulile de proiectare a paginii de conținutul lor, codul CSS poate fi schimbat cu ușurință fără a interfera cu fișierele HTML, iar principiul separării codului este foarte important, mai ales în proiectele mari.

Pentru a lega regulile dintr-un fișier CSS la o pagină HTML, utilizați eticheta adăugat la recipient , și atributele sale.

Iată linia care leagă regulile din fișier stilul meu.css cu pagina HTML:

rel="foaia de stil" specifică faptul că eticheta se referă la un fișier de foaie de stil, href="mysyle.css"își stabilește adresa. Regulile de adresare sunt aceleași ca pentru legăturile obișnuite - calea poate fi absolută, relativă etc.

Stiluri importate

Folosind comanda @import puteți adăuga stiluri dintr-un fișier CSS la tabelul curent. Acest lucru poate fi necesar, de exemplu, dacă doriți să completați designul individual al unui document, definit folosind stiluri globale, cu reguli universale de la dosar separat. Metoda nu poate fi utilizată cu stiluri inline.

Codul de mai jos importă un tabel de fișiere în document orice.css, care se află în folderul cu documentul HTML editat:

@import url(any.css);

Comanda este scrisă în linia de sub eticheta de deschidere

Știm deja că, pentru ca site-ul web să arate frumos și elegant, trebuie să lucrăm cu fișierul CSS. Și pentru ca stilurile noastre să fie aplicate trebuie să combinăm fișier HTMLși un fișier CSS.

Există mai multe opțiuni pentru efectuarea acestei operații: utilizarea foilor de stil imbricate, foilor de stil externe și stilul inline.

Astăzi vom vorbi despre această din urmă metodă.

Injectarea stilului într-o etichetă HTML

Esenta aceasta metoda este că implementăm designul necesar în interiorul etichetei. Un separat atribut – stil. Acest atribut poate fi aplicat la orice etichetă, dar numai în corpul site-ului, adică în interiorul corpului. Valoarea acestui atribut este reprezentată de operatorii acelor stiluri care trebuie aplicate unui element dat.

De exemplu, să setăm marimi diferite font pentru două paragrafe diferite de text:

< p style= "font-size:25px;" >Setați această bucată de text la o înălțime a literei de 25 de pixeli. < p style= "dimensiune font:15px; culoare:#2400ff;"> Și acest text va avea litere, înalte de 15 pixeli, și îl vom nuanța și în albastru pentru a demonstra utilizarea mai multor stiluri în același timp.

Defecte

Exemplul demonstrează perfect modul în care un astfel de stil blochează codul paginii.

De asemenea, puteți observa câteva dezavantaje ale utilizării acestei tehnici de stilizare. Prima dintre ele este răspândirea stilului în întregul document, care în viitorul editării va complica semnificativ procesul.

De asemenea, va fi dificil să formatați cantități mari de text. Cred că nimeni nu este mulțumit de perspectiva de a specifica o dimensiune a fontului pentru fiecare paragraf, mai ales dacă există 40 de astfel de paragrafe.

Chiar și atunci când utilizați stiluri încorporate, devine imposibil să folosiți pseudo-clase, care într-o mare măsură leagă mâinile unui designer web.

De asemenea, merită remarcată confuzia care va apărea cu siguranță în utilizarea atributului stil. Această confuzie va apărea din cauza utilizării citate diferite atunci când adăugați stiluri.

Pentru claritate, să ne uităm la exemplul de mai jos:

< div style= „familie de fonturi: „Roboto Condensed”, sans-serif”> Intrarea este corectă. < div style= „familie de fonturi: „Roboto Condensed”, sans-serif”> Si asta e corect. < div style= "font-family: " Roboto Condensed ", sans-serif" >Aceasta nu este o intrare corectă. < div style= "font-family: " Roboto Condensed ", sans-serif" >Și nici asta nu este adevărat

Privind calculele furnizate mai sus, concluzia logică sugerează că utilizarea stilurilor încorporate este asociată cu o serie de complicații și inconveniente semnificative.

Când să utilizați stilul inline

În ciuda tuturor deficiențelor, stilul încorporat nu a fost inventat în zadar. Webmasterii apelează adesea la ei în cazul atribuirii stilului programatic. De exemplu, să ne uităm la acest cod

< div id= "productRate" > < div style= "width: 40%" >

Înregistrarea lățimii necesare pentru acest bloc va fi o operațiune simplă.

O situație similară poate apărea dacă este necesară înlocuirea imaginii de fundal (de exemplu) a unui utilizator cu rolul de administrator. În acest caz etichetă img poate să nu se potrivească. Prin urmare, merită să ne referim la atributul stil:

< div style= "background:url(fon.jpg)" >

De asemenea, programatorii apelează adesea la stiluri încorporate atunci când creează ferestre pop-up. Adesea, acest proces decurge astfel: blocului asupra căruia se lucrează design îi este atribuit display:block, iar ferestrele rămase sunt ascunse folosind display:none, astfel încât să nu interfereze vizual cu munca programatorului. Iată un exemplu:

< div class = "element" style= "display:block" >Fereastra pop-up care este în curs de proiectare

Concluzie

Utilizarea stilurilor încorporate este asociată cu o serie de dificultăți și inconveniente, cu toate acestea, în procesul de proiectare a anumitor elemente, webmasterii apelează adesea la această metodă pentru a-și optimiza munca.

Să aflăm ce sunt foile de stil în cascadă, ce sunt Stilul CSSși aflați cum să-l setați pentru elemente HTML.

Prin acest articol aveți deja o înțelegere clară a acestei limbi marcare hipertext folosit pentru a descrie conținutul unei pagini web. În timp ce călătorim pe Internet, observăm că paginile arată diferit: culori, fonturi, spațiere între linii diferite, imagini de fundalși chiar animație. Fără să-l pun pe dos, vreau să vă explic imediat că felul în care vor arăta aceste pagini este influențat de cele folosite. foi de stil în cascadă (Foi de stil în cascadă - CSS). În Tutorial HTML Ne vom uita pe scurt la utilizarea foilor de stil în cascadă, le puteți studia în detaliu după acest curs în secțiunea Tutorial CSS.

Ce este stilul? Seturi de stil aspect orice element de pagină, adică aproximativ vorbind, aceasta este o regulă care spune browserului cum să formateze element specific(de exemplu, schimbați culoarea fundalului sau a fontului).

Fiecare element HTML are stil implicit. Modificarea stilului implicit al unui element HTML se poate face folosind atributul global stil. Atributul specifică incorporat (în linie) Stilul CSS pentru element. CSS inline este folosit pentru a aplica un stil unic unuia element HTML. În scopul învățării HTML, ne vom uita doar la utilizarea CSS inline.

Sugestie: Acest exemplu folosește următoarele culori: alb(alb), kaki(kaki), gri(gri). Fontul folosit pentru textul poeziei este Verdana.

Dacă întâmpinați dificultăți în finalizarea sarcinii, atunci inspectați codul paginii deschizând exemplul într-o fereastră separată făcând clic pe imagine.