Tag-ul link
Tag-ul link conectează fișiere CSS la o pagină
HTML. În plus, link conectează
și alte tipuri de fișiere, de exemplu, favicon.
(Favicon este iconița site-ului, care este
vizibilă în fila browser-ului. De asemenea, poate fi
văzut în anumite motoare de căutare în rezultatele de căutare
lângă site-uri, de exemplu în Yandex).
Acest tag are foarte multe atribute și acestea pot lua valori diverse, însă în practică aproape toate nu sunt utilizate. Cele mai populare sunt conectarea CSS-ului și adăugarea favicon-ului.
Cum se conectează CSS:
<link rel="stylesheet" href="style.css">
Cum se conectează favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Tag-ul link nu necesită un tag de închidere.
Atribute
| Atribut | Descriere |
|---|---|
href |
Calea către fișierul de conectat. |
media |
Tipul de dispozitiv pentru care trebuie conectat fișierul. În esență - puteți conecta un fișier CSS doar pentru ecrane mari (valoarea screen)
sau doar pentru ecrane mici: pentru telefoane mobile sau tablete (valoarea handheld).
Valori posibile: all, braille, handheld, print, screen, speech, projection, tty, tv.
Mai multe detalii mai jos.
|
rel |
Tipul fișierului de conectat.
Valori posibile: stylesheet | alternate.
Valoarea stylesheet indică faptul că se conectează un fișier CSS,
valoarea alternate este utilizată, de exemplu, pentru a indica link-ul
către un fișier în format XML pentru descrierea fluxului de știri, anunțurilor articolelor.
|
charset |
Codarea fișierului de conectat.
În prezent, standardul este utf-8.
|
type |
Tipul de date al fișierului de conectat. |
Valorile atributului media
În HTML5, ca valori pot fi specificate interogări media (media queries).
| Valoare | Descriere |
|---|---|
all |
Toate dispozitivele. |
screen |
Ecranul monitorului. |
handheld |
Telefoane, smartphone-uri, dispozitive cu ecran mic. |
braille |
Dispozitive bazate pe sistemul Braille, destinate persoanelor cu deficiențe de vedere. |
speech |
Sintetizatoare vocale, precum și programe pentru redarea textului cu voce tare. Aici se includ și browserele vocale. |
print |
Imprimante. |
projection |
Proiectoare. |
tty |
Teletipuri, terminale, dispozitive portabile cu capacități limitate ale ecranului. Pentru acestea nu ar trebui utilizați pixeli ca unitate de măsură. |
tv |
Televizoare care pot deschide pagini web (se întâmplă și așa ceva). |
Valoare implicită: all.
Exemplu
Să vedem cum arată structura unei pagini HTML simple, căreia îi adăugăm conectarea fișierelor CSS și a favicon-ului:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
