
El elemento link define las relaciones entre el documento actual y un recurso externo. Uno de los usos de esta etiqueta incluye definir una relación entre las páginas entre las que navegar, pero el uso más común de este elemento es incluir hojas de estilo.
Utilice la siguiente forma para que el elemento <link>
incruste una hoja de estilo en su documento:
< link href = "style.css" rel = "hoja de estilo" >
Tarjeta de artículo
Clasificaciones de contenido | Metadatos |
---|---|
Contenido permitido | Ninguno, este artículo está vacío. |
Acrónimo | Dado que este elemento está vacío, se debe proporcionar la etiqueta de inicio y se debe omitir la etiqueta de finalización. |
Elementos del padre | Cualquier elemento que acepte elementos de metadatos dentro de él. |
Interfaz DOMO | HTMLLinkElement |
Soporte de navegadores
Chrome | Firefox | Edge | Safari | Ópera |
---|---|---|---|---|
Soportado | Soportado | Soportado | Soportado | Soportado |
Características
En este elemento link se pueden utilizar propiedades globales.
as
Esta propiedad se usa cuando la relación se usa rel="preload"
solo con el elemento <link>
. Especifica el tipo de contenido que se cargará a través del elemento <link>
, esto es necesario para priorizar el contenido, enviar un pedido válido y más.
disabled
Esta propiedad se usa para deshabilitar una relación entre elementos <link>
y se usa con JavaScript para habilitar y deshabilitar determinadas hojas de estilo de forma dinámica. Vale la pena señalar que se recomienda no usar esta función en absoluto, y la mencionamos con fines de conocimiento.
href
Esta propiedad especifica la URL del recurso dado y la URL puede ser absoluta (absoluta) o relativa.
hreflang
Esta propiedad especifica el idioma del recurso referenciado y hay una lista de valores permitidos en el documento BCP47. Esta función sólo se puede utilizar si una función está href
disponible.
Un ejemplo del uso de esta propiedad para especificar el idioma de la página principal, hemos indicado la relación con la página de destino a través de la propiedad rel
:
ref = "bigcode-page.html" rel = "parent" hreflang = "es" >
media
Esta propiedad especifica a qué consulta de medios se aplica el recurso actual, es decir, el valor de esta propiedad debe ser un tipo de consulta de medios. Esta función es útil cuando se conecta más de una hoja de estilo externa, lo que permite que el navegador elija la hoja de estilo que mejor se adapte al dispositivo mediante el navegador.
En los días de HTML 4, se permite el uso de una lista separada por espacios para algunos tipos de consulta de medios como: print
, screen
, aural
y braille
. Pero llegó HTML5 y amplió la lista anterior para incluir todos los tipos de consultas de medios.
Ejemplo de cómo proporcionar dos hojas de estilo diferentes, una para pantallas y otra para imprimir:
< link rel = "stylesheet" type = "text / css" href = "theme.css" > < link rel = "stylesheet" type = "text / css" href = "print.css" media = "print" >
rel
Esta propiedad define la relación entre el documento al que se hace referencia en el elemento <link>
y el documento actual. El valor de esta propiedad debe ser una lista separada por espacios de los tipos de relación permitidos .
El uso más común de esta propiedad es agregar una relación a una hoja de estilo externa, cuando el valor de esta propiedad se establece en stylesheet
, y apuntar href
a la URL de la hoja de estilo externa que se utilizará para dar formato a la página.
Ejemplo de uso de la relación icon
para establecer un icono para un documento:
< link rel = "icon" href = "/favicon.ico" >
sizes
Esta propiedad define los tamaños de los iconos para los medios visuales dentro del recurso referenciado, y esta propiedad se puede usar si la relación ( rel
) es icon
. Esta propiedad puede tomar los siguientes valores:
any
: Esto significa que el icono se puede cambiar de tamaño a cualquier tamaño, es decir, es una imagen vectorial, cómoimage/svg+xml
.- Una lista de medidas separadas por un solo espacio, en la que cada medida está representada por la fórmula «Ancho en píxeles x Alto en píxeles». Todas las medidas enumeradas deben incluirse en el recurso.
Nota: la mayoría de los formatos de iconos pueden almacenar sólo un icono, lo que significa que la mayoría de las propiedades sizes
tendrán una sola escala.
Nota: iOS no admite esta función, porque los dispositivos iPhone y iPad utilizan un valor de propiedad no estándar rel
para identificar los iconos ( apple-touch-icon
y apple-touch-startup-icon
).
Title
La propiedad title
tiene una forma especial en el elemento <link>
, y cuando se usa con una relación, <link rel="stylesheet">
definirá estilos alternativos, y su uso incorrecto ignorará la hoja de estilo por completo.
El usuario puede elegir una hoja de estilo específica para aplicar a la página (esto se puede hacer en Firefox a través del menú Ver> Estilo de página). Esto brinda a los usuarios la posibilidad de ver varias versiones formateadas de la página.
< link href = "default.css" rel = "stylesheet" title = "Default Style" > < link href = "fancy.css" rel = "alternate stylesheet" title = "Fancy" > < link href = "basic.css " rel = "Alternar la hoja de estilo" title = "Basic" >
type
Esta propiedad se utiliza para definir el tipo de contenido al que hace referencia el elemento <link>
, y el valor de esta propiedad debe ser un tipo MIME válido como text/html
o text/css
etc.
El uso más común de esta propiedad es definir el tipo de hoja de estilo, y el valor más común para esta propiedad es text/css
. Hoja de estilo en cascada, que también se usa en las relaciones rel="preload"
para que el navegador no descargue ningún archivo que no admita.
< link rel = "stylesheet" type = "text / css" href = "theme.css" >
Notas
- El elemento solo puede existir
<link>
dentro del elemento<head>
, pero se puede repetir para cualquier número. - Las especificaciones HTML y XHTML definen controladores de eventos para un elemento link, pero no está claro cómo usarlos.
- El estándar XHTML 1.0 requiere que se agregue una barra a elementos vacíos
<link>
como</link>
.
Ejemplos de Uso
Eventos de carga de hojas de estilo:
Puede determinar qué sucede cuando la hoja de estilo completa la carga observando la ocurrencia del evento load
, de manera similar puede saber cuándo ocurrió un error durante la interpretación de la hoja de estilo observando la ocurrencia del evento error
:
< script > function sheetLoaded() { //hacer algo cuando se carga la hoja de estilo } function sheetError() { consola . log ( "Ocurrió un error al cargar la hoja de estilo" ); } </ script > < link rel = "stylesheet" href = "mystylesheet.css" onload = "sheetLoaded()" onerror = "sheetError()" >
Tenga en cuenta que el evento load
ocurrirá cuando cargue e interprete la hoja de estilo y todo su contenido (incluido el contenido incluido en ella), y justo antes de comenzar a aplicar los estilos a los elementos de la página.
Formato Predeterminado
La mayoría de los navegadores ocultan el elemento <link>
estableciendo la propiedad display
en none
:
link { display: none; }
- Elemento summary en HTML
- Elemento details en HTML
- Elemento meter en HTML
- Elemento legend en HTML
- Elemento textarea en HTML
- Elemento select en HTML
- Elemento progress en HTML
- Elemento output en HTML
- Elemento option en HTML
- Elemento optgroup en HTML
- Elemento track en HTML
- Elemento label en HTML
- Elemento input en HTML
- Elemento form en HTML
- Elemento fieldset en HTML
- Elemento datalist en HTML
- Elemento button en HTML
- Elemento tr en HTML
- Elemento thead en HTML
- Elemento th en HTML
- Elemento tbody en HTML
- Elemento tfoot en HTML
- Elemento table en HTML
- Elemento td en HTML
- Elemento colgroup en HTML
- Elemento col en HTML
- Elemento caption en HTML
- Elemento del en HTML
- Elemento script en HTML
- Elemento noscript en HTML
- Elemento canvas en HTML
- Elemento picture en HTML
- Elemento ins en HTML
- Elemento video en HTML
- Elemento source en HTML
- Elemento param en HTML
- Elemento object en HTML
- Elemento embed en HTML
- Elemento map en HTML
- Elemento img en HTML
- Elemento audio en HTML
- Elemento area en HTML