Foi de stil în cascadă au multe beneficii. Acestea vă permit să utilizați aceeași foaie de stil pe întregul site web. Există două moduri de a face acest lucru:
- conectarea cu elementul LINK
- importând cu comanda @import
Avantajele și dezavantajele foilor de stil externe
Unul dintre cele mai bune lucruri despre foi de stil în cascadă este că le puteți folosi pentru a vă menține site-ul consecvent. Cel mai simplu mod de a face acest lucru este să legați sau să importați o foaie de stil externă. Dacă utilizați aceeași foaie de stil externă pentru fiecare pagină a site-ului dvs., puteți fi sigur că toate paginile vor avea același lucru stiluri.
Unele dintre avantajele utilizării foilor de stil externe includ faptul că puteți controla aspectul mai multor documente simultan. Acest lucru este util mai ales dacă lucrați cu o echipă de oameni pentru a vă crea site-ul web. Multe reguli de stil pot fi greu de reținut și, deși este posibil să aveți un ghid de stil tipărit, este plictisitor să aveți să o răsfoiți în mod constant pentru a determina dacă textul de exemplu urmează să fie scris cu font Arial de 12 puncte sau 14 puncte Curier.
Puteți crea clase de stiluri care pot fi apoi utilizate pe multe elemente HTML diferite. Dacă folosiți des un font special Wingdings pentru a pune accent pe diverse lucruri de pe pagina dvs., puteți utiliza Wingdings clasa pe care ați configurat-o în foaia de stil pentru a le crea, mai degrabă decât a defini un stil specific pentru fiecare instanță a accent.
Vă puteți grupa cu ușurință stilurile pentru a fi mai eficienți. Toate metodele de grupare care sunt disponibile pentru CSS pot fi utilizate în foi de stil externe, iar acest lucru vă oferă mai mult control și flexibilitate pe paginile dvs.
Acestea fiind spuse, există și motive foarte bune pentru a nu folosi foi de stil externe. În primul rând, pot crește timpul de descărcare dacă vă conectați la multe dintre ele.
De fiecare dată când creați un fișier CSS nou și îl conectați sau îl importați în documentul dvs., este necesar ca browserul web să efectueze un alt apel către serverul Web pentru a obține fișierul. Și apelurile de server încetinesc timpul de încărcare a paginii.
Dacă aveți doar un număr mic de stiluri, acestea pot crește complexitatea paginii dvs. Deoarece stilurile nu sunt vizibile chiar în HTML, oricine se uită la pagină trebuie să obțină un alt document (fișierul CSS) pentru a afla ce se întâmplă.
Cum se creează o foaie de stil externă
Foile de stil externe sunt scrise în același mod ca foile de stil încorporate și în linie. Dar tot ce trebuie să scrie este stilul selector si declaraţie. Nu aveți nevoie de un element sau atribut STYLE în document.
Ca la toate celelalte CSS, sintaxa unei reguli este:
selector {proprietate: valoare; }
Aceste reguli sunt scrise într-un fișier text cu extensia.
.css. De exemplu, ați putea denumi foaia de stil.
stiluri.css.
Conectarea documentelor CSS
Pentru a lega o foaie de stil, utilizați elementul LINK. Acesta are atributele rel și href. Atributul rel spune browserului ce conectați (în acest caz, o foaie de stil), iar atributul href deține calea către fișierul CSS.
Există, de asemenea, un tip de atribut opțional pe care îl puteți utiliza pentru a defini tipul MIME al documentului conectat. Acest lucru nu este necesar în HTML5, dar trebuie utilizat în documentele HTML 4.
Iată codul pe care l-ați folosi pentru a lega o foaie de stil CSS numită styles.css:
Și într-un document HTML 4 ați scrie:
type = "text / css">
Importul foi de stil CSS
Foile de stil importate sunt plasate în elementul STIL. Apoi, puteți utiliza și stilurile încorporate, dacă doriți. De asemenea, puteți include stiluri importate în foile de stil legate. În documentul STYLE sau CSS, scrieți:
@ import url (' http://www.yoursite.com/styles.css');