Prof. Risiberg Teixeira email: risiberg.teixeira@ifrj.edu.br
Seletores
◦ Regras, declarações
◦ Múltiplas declarações
◦ Seletor múltiplo
◦ Valores
os seletores podem estar dentro de um arquivo de texto com extensão “.css" ou embutidas em um arquivo HTML.
Exemplo:
H1 {font-size: 24pt}
H1 {color: blue}
3 Prof. Risiberg Teixeira
Várias declarações de estilo podem ser aplicadas de uma vez a um seletor. As declarações, então, precisam ser separadas por ponto-e-vírgula (;)
Exemplo:
H1 {font-size: 18pt; color: blue; font-family: Caslon, serif}
5 Prof. Risiberg Teixeira
<style type="text/css">
h1, h2 {color: #21C9FF;
font-style: italic;
font:"Arial Narrow";
}
</style>
<body>
<h1> Formatação multipla para seletores </h1>
<h2> Mesma formatação de H1 </h2>
</body>
Os valores são aplicados às propriedades e têm uma sintaxe que depende da propriedade que os usa.
<style type="text/css">
h1, h2 {color: #21C9FF;
font-style: italic;
font:"Arial Narrow";
}
p.a {color: red;}
p.b {color: #ff0000;}
p.c {color: rgb(100%, 0%, 0%);}
<p class="a"> Formatação seletor simples definição </p>
<p class="b"> Formatação seletor simples definição </p>
<p class="c"> Formatação seletor simples definição </p>
<p class="d"> Formatação seletor simples definição </p>
Crie o arquivo sobre.css com o conteúdo:
body { color: #333333;
font-family: "Lucida Sans Unicode", sans-serif; }
p { background-image: url(imagem/background.jpg); } h2 { border-bottom: 2px solid #333333;}
Vincule o arquivo “sobre.css” dentro da página pagina_teste.html através da tag <link rel="stylesheet"
href="css/sobre.css"> que deverá ficar dentro da tag
<head></head>;
No arquivo sobre.html vamos falar do IFRJ. Defina a tag <h1>
IFRJ – ensino de qualidade</h1>;
Crie 3 parágrafos com 4 linhas cada. Coloque um subtítulo para o segundo e terceiro parágrafo com a tag <h2>.
Prof. Risiberg Teixeira 7
