Introdução ao CSS [ricardoveloso.com.br]
Este tutorial é destinado àqueles que não sabem como incluir e aplicar CSS em páginas HTML. São incluídos códigos de exemplo em HTML e CSS e, são citadas as formas possíveis de inclusão e aplicação de folhas de estilo de CSS.
Como incluir CSS em uma página
Há três formas de incluir códigos CSS em uma página:
- Declarando o arquivo CSS externo (dentro de
<head>) - Incluindo diretamente no cabeçalho (dentro de
<head>) - Incluindo diretamente em uma tag (dentro de
<body>)
Segue abaixo as três formas, onde "estilo.css" é o nome do arquivo de folha de estilos usado:
Primeira forma: Declarando o arquivo CSS externo (dentro de <head>)
<link rel="stylesheet" type="text/css" href="estilo.css" />Você pode especificar opcionalmente o "tipo de mídia" (chamado "Media Query") para o qual o arquivo CSS se aplica. Por exemplo, você pode querer criar um estilo mais simples que se aplica apenas a páginas impressas, economizando tinta:
<link rel="stylesheet" type="text/css" href="estilo.css" media="print" />Também, você pode especificar mais de um tipo, separado por vírgula:
<link rel="stylesheet" type="text/css" href="estilo.css" media="print, handheld" />Existem atualmente 10 tipos de mídia válidos, sendo os 3 primeiros compatíveis com a maioria dos navegadores.
| Tipo | Descrição |
|---|---|
| all | Todos os dispositivos (é o padrão) |
| screen | Telas de computadores |
| Páginas impressas | |
| handheld | Dispositivos de mão, como celulares |
| projection | Projetores |
| tv | Televisores |
| braille | Dispositivos táteis de braille |
| embossed | Impressão em relevo de braille |
| speech | Dispositivos sintetizador de voz |
| tty | Teletipos e dispositivos portáteis de capacidade limitada |
Alternativamente, pode ser declarado da seguinte maneira (o tipo de mídia é opcinal):
<style type="text/css">@import url("estilo.css") print, handheld;</script>
Segunda forma: Incluindo diretamente no cabeçalho (dentro de <head>)
<head>
<style type="text/css">
span {
color: blue;
background-color: black;
}
</style>
</head>
<body>
<span>Usando uma folha de estilo declarada no cabeçalho.</span>
</body>Também é possível especificar o tipo de mídia usando essa forma:
<head>
<style type="text/css">
@media all {
span {
color: blue;
background-color: black;
}
}
</style>
</head>
<body>
<span>Usando uma folha de estilo declarada no cabeçalho.</span>
</body>Terceira forma: Incluindo diretamente em uma tag (dentro de <body>)
<span style="color: blue; background-color: black;">
Usando uma folha de estilo.
</span>Como aplicar CSS em uma página
Há três formas de aplicar folhas de estilo CSS a uma página:
- Aplicando por tag
- Aplicando por classe
- Aplicando por id
Primeira forma: Aplicando por tag
Código CSS:
span {
color: blue;
background-color: black;
}Código HTML:
<span>Usando uma folha de estilo por tag.</span>Segunda forma: Aplicando por classe
Código CSS:
.classe1 {
color: blue;
background-color: black;
}Código HTML:
<span class="classe1">Usando a classe “classe1”.</span>Terceira forma: Aplicando por id
Código CSS:
#id1 {
color: blue;
background-color: black;
}Código HTML:
<span id="id1">Usando a id “id1”.</span>Para saber a diferença entre classe e id, veja "Diferença entre class e id".
0 comentários:
Postar um comentário