Lucrări de laborator № 4
Scopul lucrării: formarea abilităților de a crea documente HTML utilizând foi de stil cascadă.
Scurt informații teoretice
Ce sunt foile de stil?
Ați creat paginile anterioare, deoarece au fost create mai devreme înaintea apariției foilor de stil cascadă sau CSS (Cascading Style Sheets).
Principalele probleme cu care se confruntă dezvoltatorii de site-uri înainte de apariția CSS:
Problema poziționării (aspectul paginii). Deși tabelele au fost folosite pentru acest lucru (nu au fost intenționate pentru acest scop încă de la început), nu au rezolvat toate problemele. Nu este posibil să faceți următoarele:
- Nu puteți specifica o dimensiune fixă pentru niciun bloc. De exemplu, un bloc de text va fi fragmentat când este plin (chiar dacă este într-un tabel).
- Nu puteți specifica o poziție fixă a blocului pe pagină.
- Nu puteți pune un bloc pe altul. De exemplu, încercați să împingeți fotografia peste o masă sau o altă imagine.
Cea de-a doua problemă a fost că de fiecare dată am trebuit să reglez dimensiunile și culorile fontului, proprietățile tablelor de celule etc. pe pagini. Acest lucru a crescut foarte mult dimensiunea paginii, ceea ce înseamnă că se încarcă mai lent. Dacă doriți să modificați dimensiunea culorii sau a fontului, va trebui să editați toate paginile.
A treia problemă a fost că toate browserele au setări individuale. De exemplu, în browser puteți mări fontul, ceea ce va distorsiona întreaga pagină.
Folosind CSS, aceste probleme pot fi rezolvate.
Modalități de utilizare a CSS
Există trei moduri de a aplica coli de stil:
Foi de stiluri interne (foi de stil inline) - cu ajutorul unui atribut special plasat direct în etichetele HTML.
exemplu
exemplu
După cum puteți vedea, foaia de stil inliniată este mai mult decât HTML. Prin urmare, ISS ar trebui să fie utilizat numai dacă doriți să specificați un element specific al stilului dvs. individual.
Utilizând atributul de stil suplimentar, putem defini parametrii de stil de care avem nevoie în orice etichetă. Acesta este cel mai simplu mod și funcționează în cadrul unei singure etichete. Dar imaginați cât va crește dimensiunea fișierului și cât de neplăcut va fi să o remediați dacă specificăm stilul fiecărei etichete.
Foi de stil globale - defini stilul elementelor din întregul document.
Pentru aceasta, utilizați eticheta