Taggen link
Taggen link ansluter CSS-filer till en HTML-sida. Dessutom ansluter link några andra filer, till exempel favikon. (Favikon är webbplatsens ikon som syns i webbläsarens flik. Den kan också ses i vissa sökmotorer vid sökning, till exempel i Yandex).
Denna tagg har många attribut och de kan ta olika värden, men i verkliga livet används de nästan inte alls. Det vanligaste är att ansluta CSS och lägga till favikon.
Så här ansluter du CSS:
<link rel="stylesheet" href="style.css">
Så här ansluter du favikon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Taggen link kräver ingen avslutande tagg.
Attribut
| Attribut | Beskrivning |
|---|---|
href |
Sökväg till filen som ska anslutas. |
media |
Typen av enhet som filen ska anslutas för. Vad som menas är att du kan ansluta en CSS-fil endast för stora skärmar (värde screen) eller endast för små skärmar: för mobiler eller surfplattor (värde handheld).
Möjliga värden: all, braille, handheld, print, screen, speech, projection, tty, tv.
Se nedan för mer information.
|
rel |
Typ av fil som ansluts.
Möjliga värden: stylesheet | alternate.
Värdet stylesheet indikerar att en CSS-fil ansluts,
värdet alternate används till exempel för att ange en länk
till en fil i XML-format för att beskriva nyhetsflöde, artikelannonser.
|
charset |
Teckenkodning för den anslutna filen.
Numera är utf-8 standard.
|
type |
Datatyp för den anslutna filen. |
Värden för media-attributet
I HTML5 kan media queries anges som värden.
| Värde | Beskrivning |
|---|---|
all |
Alla enheter. |
screen |
Skärm. |
handheld |
Telefoner, smartphones, enheter med små skärmar. |
braille |
Enheter baserade på Braille-systemet, avsedda för blinda personer. |
speech |
Talsyntetiserare, samt program för att läsa upp text. Talwebbläsare ingår också här. |
print |
Skrivare. |
projection |
Projektorer. |
tty |
Telex, terminaler, bärbara enheter med begränsade skärmmöjligheter. För dessa ska pixlar inte användas som måttenhet. |
tv |
TV-apparater som kan öppna webbsidor (sånt händer). |
Standardvärde: all.
Exempel
Låt oss titta på hur strukturen för en enkel HTML-sida ser ut, där vi lägger till anslutning av CSS-filer och favikon:
<!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>
