Vom afla ce sunt foile de stil în cascadă, ce este stilul CSS și vom afla cum să-l setăm pentru elemente HTML.
Pentru acest articol ai deja înţelegere clară că Hypertext Markup Language este folosit pentru a descrie conținutul unei pagini web. Când navigăm pe internet, observăm că paginile arată diferit: culori, fonturi, diferite spațiere între linii, imagini de fundalși chiar animație. Fără a o pune într-o cutie îndepărtată, vreau să vă explic imediat că modul în care vor arăta aceste pagini sunt influențate de foi de stil în cascadă (Foi de stil în cascadă - CSS). Ca parte a tutorialului HTML, vom analiza pe scurt 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 al paginii, de ex. aproximativ vorbind, este o regulă care spune browserului cum să formateze un anumit element (de exemplu, să schimbe culoarea fundalului sau a fontului).
Fiecare element HTML are stil implicit... Modificarea stilului implicit într-un element HTML se poate face folosind atributul de stil global. Atributul specifică incorporat (în linie) Stilul CSS pentru element. CSS inline este folosit pentru a aplica un stil unic unuia element HTML... În cadrul învăţarea HTML vom acoperi doar utilizarea CSS inline.
Sugestie: Acest exemplu folosește următoarele culori: alb(Alb), kaki(kaki), gri(Gri). Fontul Verdana este folosit pentru textul poeziei.
Dacă întâmpinați dificultăți în finalizarea sarcinii, inspectați codul paginii deschizând exemplul în fereastra separata făcând clic pe imagine.
Știm deja că, pentru ca site-ul web să arate frumos și elegant, trebuie să lucrăm cu un fișier CSS. Și pentru ca stilurile noastre să fie aplicate, este necesar să ne conectă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ă.
Stilul etichetei HTML
Esența acestei metode este că încorporăm designul necesar în interiorul etichetei. Pentru aceasta, 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 sunt instrucțiunile de stil care trebuie aplicate elementului specificat.
De exemplu, să setăm marimi diferite font pentru două paragrafe diferite de text:
< p style= "font-size:25px;" >Dați acestei porțiuni de text o înălțime a literei de 25 de pixeli. < p style= "dimensiune font: 15px; culoare: # 2400ff;"> Și acest text va fi cu litere, înălțimea de 15 pixeli și, de asemenea, nuanța în albastru pentru a demonstra aplicarea mai multor stiluri în același timp.
dezavantaje
Exemplul demonstrează perfect modul în care acest tip de stil blochează codul paginii.
De asemenea, puteți observa câteva dezavantaje ale utilizării acestei tehnici de styling. Prima dintre ele poate fi numită răspândirea stilului în întregul document, ceea ce, din perspectiva editării, va complica uneori procesul.
De asemenea, va fi dificil să formatați volume mari de text. Cred că nimeni nu este mulțumit de perspectiva de a prescrie o dimensiune a fontului pentru fiecare paragraf, mai ales dacă există 40 de astfel de paragrafe.
Chiar și atunci când utilizați stiluri inline, devine imposibil să folosiți pseudo-clase, ceea ce leagă în mare măsură 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 utilizarea diferitelor ghilimele la stiluri de scriere.
Pentru claritate, să aruncăm o privire 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"> Și asta este corect. < div style= "font-family: " Roboto Condensed ", sans-serif" >Aceasta nu este o intrare validă. < div style= "font-family: " Roboto Condensed ", sans-serif" >Și nici asta nu este adevărat
Privind calculele prezentate mai sus, concluzia logică sugerează că utilizarea stilurilor inline este asociată cu o serie de complicații și inconveniente semnificative.
Când să folosiți stilul inline
În ciuda tuturor defectelor, stilul inline nu a fost inventat degeaba. Webmasterii se referă adesea la ele pentru stilul programatic. De exemplu, să ne uităm la acest cod.
< div id= "productRate" > < div style= "width: 40%" >
Scrierea lățimii necesare pentru acest bloc va fi cea mai simplă operație.
O situație similară poate apărea atunci când este necesară înlocuirea imaginii de fundal (de exemplu) a unui utilizator sub rolul de administrator. În acest caz etichetă img poate să nu funcționeze. Prin urmare, merită să ne referim la atributul stil:
< div style= "background:url(fon.jpg)" >
De asemenea, programatorii apelează adesea la stiluri inline atunci când proiectează ferestre pop-up. Adesea, acest proces are loc după cum urmează: un bloc, peste proiectarea căruia lucru în curs, display: block este scris, iar restul ferestrelor sunt ascunse de 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 redată în prezent
Rezultat
Utilizarea stilurilor inline este asociată cu o serie de dificultăți și inconveniente, cu toate acestea, în procesul de stilare a unor elemente, webmasterii apelează adesea la această metodă pentru a-și optimiza munca.
Există patru moduri de a seta CSS stil pentru etichete HTML.
1) Stilul inline.
2) Introdus stil
3) Importat stil.
4) Stil din fișier.
Și în acest articol vom trece peste toate cele patru metode.
Pentru început, prima cale este stil inline... Acest stil este specificat direct în eticheta în sine. De exemplu:
text
V în acest caz setăm elementul la " text„va fi în mărime 150% si aliniat la centru... Acesta este un exemplu în stil inline.
A doua cale este încorporată Stilul CSS, adică stilul care este setat în capul documentului, în etichetă ... De exemplu, așa:
Aici se va întâmpla următoarele: pentru toate elementele din interiorul etichetei
se va face următoarele: culoarea lor va fi roșie și marginea de sus va fi de 100 de pixeli.
A treia modalitate de atribuire Stilul CSS- aceasta este stiluri importate... Ei sunt, de asemenea, ca încorporat sunt setate în capul documentului, dar deja dintr-un fișier. Iată un exemplu:
Aici stilurile din fișier vor fi aplicate întregii pagini" my.css".
Și ultima privire Stiluri CSS sunt stilurile din fișier. Aceasta metoda este cea mai comună, și constă în includerea fișierului de stil prin etichetă în capul documentului. De exemplu, în acest fel:
Această metodă este foarte asemănătoare cu calea anterioară dar eticheta nu este folosită aici
Dacă scrieți un astfel de cod între etichete ... , atunci toate titlurile de primul nivel vor fi albastre. Cu această metodă, stilurile sunt setate folosind etichete ... De asemenea, tegu , dar nu și site-ul în ansamblu.
Titlu de primul nivel
Titlu de nivel al treilea centrat în documentul html
Titlu de nivel al șaselea, aliniat la dreapta pe pagina web
După aceea creăm fișier nou astfel de continut:
H1 (culoare: albastru;)
H3 (culoare: roșu;)
H6 (culoare: verde;)
Și salvează-l ca stil cu extensie * css... Vezi rezultatul. Acesta este fișierul nostru html cu anteturi. Să analizăm acum cum funcționează această construcție. Într-un document html cu titluri, ne aflăm între etichete ... a scris următorul rând:
Aici folosind eticheta legăm foile de stil la documentul html. Atribut href se referă la locația în care se află foaia de stil, acesta este un atribut obligatoriu. Atribut tipștim deja că specifică tipul foii de stil. Atribut rel indică relația fișierului inclus cu documentul html dat. În cazul nostru, valoarea atributului rel = "foaia de stil" indică faptul că am adăugat principalul foaia de stil. Avantajul acestei metode de specificare a foilor de stil este că, dacă doriți să schimbați designul site-ului în ansamblu, trebuie să schimbați doar un fișier cu foi de stil.
