Material do curso de Desenvolvedor para Internet no SENAC de São Miguel do Oeste-SC

3. • Folha de estilo externa (3)
<link rel="stylesheet" type="text/css" href="estilo.css">

4. • Folha de estilo incorporada (2)
<style rel="stylesheet" type="text/css">
body {
background: #000 url(imagens/minhaimagem.gif);
}
</style>

5. • Folha de estilo inline (1)
<p style="color:#000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>

7. • Seletor de tipo: utilizando este seletor, selecionamos todas as tags de um
mesmo tipo. Exemplo: a, p, h1
• Seletor de classe: utilizando este seletor, selecionamos os elementos com a
classe aplicada. Exemplo: .destaque seleciona todos os elementos com a
classe "destaque".
• Seletor de id: utilizando este seletor, selecionamos a tag com id especificada.
Exemplo: #cabecalho irá selecionar o elemento com a id "cabecalho".
• Seletor descendente: utilizando este seletor, podemos escolher um ou mais
elementos que estão dentro de outro. Exemplo: body div .paragrafo (body -> div
-> .paragrafo)

8. • Pseudo-classes são tipos de classes especiais que não são definidas pelo
desenvolvedor (já são pré-definidas). O seletor de pseudo-classe é escrito com
o nome do elemento + dois pontos + nome da pseudo-classe.
• Uso comum na tag <a>
• a:link, estilizamos links não-visitados, em seu estado normal.
• a:visited, estilizamos apenas links visitados, que já foram clicados.
• a:hover, estilizamos quando o mouse está em cima do mesmo.
• a:focus, estilizamos quando os selecionamos com o teclado, através da
tecla Tab.
• a:active, estilizamos quando o mouse está sendo clicado ou pressionamos
Enter, ativando o link.