Adăugarea de stiluri css pe o pagină web, IT-șef

În această lecție ne vom uita la diferite moduri de a adăuga stiluri CSS pe o pagină Web.

Adăugarea de stiluri direct element HTML

Adăugați stil la elementul HTML, puteți utiliza atributul de stil. În acest caz, stilul va afecta doar elementul. Această metodă cu aspectul site-ului este mai bine să nu folosească.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est. qui dolorem ipsum, quia voluptas.

Adăugarea de stiluri pentru document HTML

Adăugați stiluri pentru elementele unei pagini web în documentul HTML- șef de secție. La aceleași stiluri vor acționa numai în cadrul acestui site. Această metodă este recomandată atunci când numărul de stiluri nu este foarte mare. De asemenea, această metodă crește pagina de web viteza de download, deoarece browser-ul nu este necesar pentru a căuta și de a conecta fișiere externe CSS.

Lorem ipsum dolor sit amet. Porro quisquam est, qui dolorem ipsum, quia voluptas.

Lorem ipsum dolor sit amet. Porro quisquam est. qui dolorem ipsum, quia voluptas.

Adăugarea de stiluri cu fișiere externe CSS

Adăugați stiluri la pagina web, puteți utiliza un fișier extern CSS. În acest caz, foaia de stil poate fi legat de orice număr de pagini folosind elementul de legătură. care trebuie să fie plasată în capul secțiune.

Adăugarea de stiluri utilizând @import

Adăugați fișierul CSS, puteți utiliza, de asemenea, design-@import. care trebuie să fie plasate în partea de sus a stilului de bloc in documentul HTML. Nu se recomandă această metodă, deoarece aceasta nu garantează coerente fișiere de încărcare CSS. De asemenea, utilizarea acestuia poate duce la erori în pagina web (de exemplu: încărcarea de script poate fi executat înainte de stiluri de încărcare, care depinde).

fișiere CSS conexiune dinamică

Uneori, există situații când aveți nevoie pentru a conecta în mod dinamic fișierul CSS la o pagină web. Această metodă poate fi realizată folosind metoda adăugați biblioteca jQuery.

Notă: Când se folosește această metodă, asigurați-vă că pentru a conecta biblioteca jQuery la pagina web:

adaugă sau stiluri în document HTML

Stiluri prioritare și pentru a minimiza CSS

Din moment ce stiluri pot fi definite în diferite moduri, este necesar să se cunoască prioritatea unei metode față de celălalt. Cea mai mare prioritate este acordată stilurile care sunt adăugate direct la elementul HTML folosind atributul style. Stiluri, încorporate într-un document HTML au prioritate față de stilurile care sunt conectate sub formă de fișiere externe CSS.

Ca urmare a acestui exemplu, textul va fi galben, deoarece stilul specificat folosind atributul de stil are cea mai mare prioritate. Dacă ștergeți un atribut de stil cu valoarea și încărcarea paginii, culoarea textului va fi acum albastru, pentru că stilul specificat în documentul are o prioritate mai mare decât stilurile într-un fișier extern.

minimalizarea CSS

Minimalizarea (cod de reducere) a fișierelor CSS proiectate pentru a reduce volumul lor, ceea ce duce la viteza site-ului a crescut și performanță. De exemplu, ia în considerare procesul de reducere a dimensiunii fișierului cu CSS de optimizare a CSSTidy.

Rulați programul „CMD (linie de comandă)“, în care colectăm programul numele csstidy.exe, și ca parametrul sursă specifică numele fișierului CSS și minimizat fișierul.

Rezultatul minimizand prezentat în figură, care prezintă o dimensiune de intrare, dimensiunea fișierului minimizată și procentul de compresie.