Quando um navegador lê uma folha de estilo, ele irá formatar o documento HTML de acordo com as informações na folha de estilo.
Três maneiras de inserir CSS
Há três maneiras de inserir uma folha de estilo:
Folha de estilo externa
Com uma folha de estilo externa, você pode alterar a aparência de um site inteiro, alterando apenas um arquivo!
Cada página deve incluir uma referência para o arquivo de folha de estilo externa dentro do <link> elemento. A <link> elemento vai dentro do <head> seção:
Exemplo
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head> Tente você mesmo " Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter quaisquer tags HTML. O arquivo de folha de estilo deve ser salvo com uma .css extensão.
Aqui é como o "myStyle.css" parece:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} | Não adicione um espaço entre o valor da propriedade e da unidade (como margin-left:20 px; ). A maneira correta é: margin-left:20px; |
|---|
Folha de estilo interna
Uma folha de estilo interna pode ser usado se uma única página tem um estilo único.
Estilos internos são definidos dentro do <style> elemento, dentro do <head> seção de uma página HTML:
Exemplo
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head> Tente você mesmo " Estilos inline
Um estilo alinhado pode ser usada para aplicar um modelo exclusivo de um único elemento.
Para usar estilos inline, adicione o atributo de estilo ao elemento relevante. O atributo de estilo pode conter qualquer propriedade CSS.
O exemplo abaixo mostra como alterar a cor ea margem esquerda de um <h1> elemento:
| Um estilo inline perde muitas das vantagens de uma folha de estilo (misturando conteúdo com apresentação). Utilize este método com moderação! |
|---|
Várias folhas de estilo
Se algumas propriedades foram definidos para o mesmo selector (elemento) em folhas de estilo diferentes, o valor da última folha de estilo de leitura será usado.
Exemplo
Suponha que uma folha de estilo externa tem o seguinte estilo para o <h1> elemento:
h1
{
color: navy;
}então, assumir que uma folha de estilo interna também tem o seguinte estilo para o <h1> elemento:
h1
{
color: orange;
}Se o estilo interno é definido após o link para a folha de estilo externa, os <h1> elementos serão "orange" :
Exemplo
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Tente você mesmo " No entanto, se o estilo interno é definido antes do link para a folha de estilo externa, os <h1> elementos serão "navy" :
Exemplo
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> Tente você mesmo " Cascading Order
O estilo será usado quando não é especificado mais de um estilo para um elemento HTML?
De um modo geral, podemos dizer que todos os estilos irá "cascata" em uma nova folha de estilo "virtual" pelas seguintes regras, onde o número um tem a maior prioridade:
- estilo inline (dentro de um elemento HTML)
- folhas de estilo externas e internas (na seção head)
- padrão do navegador
Assim, um estilo inline (dentro de um elemento HTML específico) tem a prioridade mais alta, o que significa que ele irá substituir um estilo definido dentro do <head> tag, ou em uma folha de estilo externa, ou um valor padrão do navegador.
Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4»