A tag link
A tag link conecta arquivos CSS a uma página
HTML. Além disso, link conecta
alguns outros arquivos, por exemplo, o favicon.
(O favicon é o ícone do site, que é
visível na aba do navegador. Também pode ser
visto em alguns mecanismos de busca ao pesquisar
ao lado dos sites, por exemplo no Yandex).
Esta tag tem muitos atributos e eles podem assumir valores diversos, no entanto na vida real eles praticamente não são usados. O mais popular é a conexão do CSS e a adição do favicon.
Como conectar o CSS:
<link rel="stylesheet" href="style.css">
Como conectar o favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
A tag link não requer uma tag de fechamento.
Atributos
| Atributo | Descrição |
|---|---|
href |
Caminho para o arquivo a ser conectado. |
media |
Tipo de dispositivo para o qual o arquivo deve ser conectado. O que isso significa - você pode conectar um arquivo CSS apenas para telas grandes (valor screen)
ou apenas para telas pequenas: para celulares ou tablets (valor handheld).
Valores possíveis: all, braille, handheld, print, screen, speech, projection, tty, tv.
Veja mais detalhes abaixo.
|
rel |
Tipo de arquivo a ser conectado.
Valores possíveis: stylesheet | alternate.
O valor stylesheet indica que um arquivo CSS está sendo conectado,
o valor alternate é usado, por exemplo, para indicar um link
para um arquivo no formato XML para descrever um feed de notícias, resumos de artigos.
|
charset |
Codificação do arquivo a ser conectado.
Atualmente, o padrão é utf-8.
|
type |
Tipo de dados do arquivo a ser conectado. |
Valores do atributo media
No HTML5, consultas de mídia podem ser especificadas como valores.
| Valor | Descrição |
|---|---|
all |
Todos os dispositivos. |
screen |
Tela de monitor. |
handheld |
Telefones, smartphones, dispositivos com tela pequena. |
braille |
Dispositivos baseados no sistema Braille, destinados a pessoas cegas. |
speech |
Sintetizadores de voz, bem como programas para reproduzir texto em voz alta. Isso também inclui navegadores de voz. |
print |
Impressoras. |
projection |
Projetores. |
tty |
Teletipos, terminais, dispositivos portáteis com capacidades de tela limitadas. Eles não devem usar pixels como unidade de medida. |
tv |
Televisores que podem abrir páginas web (isso também acontece). |
Valor padrão: all.
Exemplo
Vamos ver a estrutura de uma página HTML mais simples, à qual adicionaremos a conexão de arquivos CSS e do 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>
