Etiqueta link
La etiqueta link conecta archivos CSS a una
página HTML. Además, link conecta
algunos otros archivos, por ejemplo, el favicon.
(El favicon es el icono del sitio, que
es visible en la pestaña del navegador. También se puede
ver en algunos motores de búsqueda al buscar,
junto a los sitios, por ejemplo en Yandex).
Esta etiqueta tiene muchos atributos y estos pueden tomar diversos valores, sin embargo en la vida real prácticamente no se utilizan todos. Lo más popular es la conexión de CSS y la adición del favicon.
Cómo conectar CSS:
<link rel="stylesheet" href="style.css">
Cómo conectar el favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
La etiqueta link no requiere etiqueta de cierre.
Atributos
| Atributo | Descripción |
|---|---|
href |
Ruta al archivo que se va a conectar. |
media |
Tipo de dispositivo para el cual se debe conectar el archivo. Lo que significa: puedes conectar un archivo CSS solo para pantallas grandes (valor screen)
o solo para pantallas pequeñas: para móviles o tablets (valor handheld).
Valores posibles: all, braille, handheld, print, screen, speech, projection, tty, tv.
Ver más abajo para más detalles.
|
rel |
Tipo de archivo que se conecta.
Valores posibles: stylesheet | alternate.
El valor stylesheet indica que se conecta un archivo CSS,
el valor alternate se utiliza, por ejemplo, para indicar un enlace
a un archivo en formato XML para describir fuentes de noticias, avances de artículos.
|
charset |
Codificación del archivo que se conecta.
Actualmente, el estándar es utf-8.
|
type |
Tipo de datos del archivo que se conecta. |
Valores del atributo media
En HTML5, como valores se pueden especificar consultas de medios (media queries).
| Valor | Descripción |
|---|---|
all |
Todos los dispositivos. |
screen |
Pantalla de monitor. |
handheld |
Teléfonos, smartphones, dispositivos con pantalla pequeña. |
braille |
Dispositivos basados en el sistema Braille, destinados para personas ciegas. |
speech |
Sintetizadores de voz, así como programas para reproducir texto en voz alta. Aquí también se incluyen los navegadores de voz. |
print |
Impresoras. |
projection |
Proyectores. |
tty |
Teletipos, terminales, dispositivos portátiles con capacidades limitadas de pantalla. Para ellos no se deben utilizar píxeles como unidad de medida. |
tv |
Televisores que pueden abrir páginas web (también existe eso). |
Valor por defecto: all.
Ejemplo
Veamos cómo se ve la estructura de una página HTML más simple, a la que agregaremos la conexión de archivos CSS y el favicon:
<!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>
