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

3. h1 {
background: #000;
}
#id {
color: #F00;
}
.class {
color: #F00;
}

4. • 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)

5. • 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.

6. a:link é o estado inicial dos links;
- a:link deverá ser a primeira declaração
a:active deverá acontecer mesmo em links já visitados;
- a:active deverá ser declarado depois de a:visited;
a:hover não precisa funcionar em a:active;
a:active pode ser declarado depois de a:hover.
Em consequência a ordem das declarações deve ser:
1. a:link
2. a:visited
3. a:hover
4. a:active

7. A maioria das propriedades que aplicamos a um elemento, irá passar aos seus
"herdeiros", ou seja, os elementos que estão contidos naquele.
<!-- HTML -->
<div class="error">
<p>Preencha o campo <strong>Nome</strong>.</p>
</div>
/* CSS */
.error {
color: #F00;
}

8. As CSS também obedecem algumas regras de precedência. Quando várias regras
se aplicam a um mesmo elemento, o navegador precisa decidir qual delas tem
precedência
1. Regras em linha (atributo style) tem precedência sobre regras em tags style ou
arquivos externos CSS;
2. Seletores de elemento (por exemplo, p) tem a menor precedência (podemos
dizer que, numa escala, este tipo de seletor vale "1");
3. Seletores de classe (por exemplo, .destaque) tem mais precedência (vale
"10");
4. Seletores de id (por exemplo, #conteudo) tem maior precedência (vale "100").

9. CONTEÚDO
COMENTADO

11. margin: 5px; Aplica nas 4 arestas
margin: 5px 10px; Aplica em (acima & abaixo) (direita & esquerda)
margin: 5px 20px 7px; Aplica em (acima) (direita & esquerda) (abaixo)
margin: 5px 15px 0 12px; Aplica em (acima) (direita) (abaixo) (esquerda)
* Mesmo para padding

12. • As vantagens das CSSs (http://www.pinceladasdaweb.com.br/blog/2006/05/13/as-
vantagens-das-css/)
• HTML E CSS NA PRÁTICA –
(http://guilhermemuller.com.br/pt/elearning/html_css_basico/índice)
• Globo.com - (http://www.globo.com)
• Maujor – (http://www.maujor.com)
• ITP Driveby: Cascading Style Sheets (http://www.mandalatv.net/itp/drivebys/css/)
• SlidePlayer: Lesson 03 - Cascading Style Sheets (http://slideplayer.com/slide/8119935/)