Top Banner
12

CSS - Cascading Style Sheets - 2

Jan 20, 2017

Download

Software

Israel Messias
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CSS - Cascading Style Sheets - 2
Page 2: CSS - Cascading Style Sheets - 2
Page 3: CSS - Cascading Style Sheets - 2

h1 {

background: #000;

}

#id {

color: #F00;

}

.class {

color: #F00;

}

Page 4: CSS - Cascading Style Sheets - 2

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

Page 5: CSS - Cascading Style Sheets - 2

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

Page 6: CSS - Cascading Style Sheets - 2

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

Page 7: CSS - Cascading Style Sheets - 2

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;

}

Page 8: CSS - Cascading Style Sheets - 2

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").

Page 9: CSS - Cascading Style Sheets - 2

CONTEÚDOCOMENTADO

Page 10: CSS - Cascading Style Sheets - 2
Page 11: CSS - Cascading Style Sheets - 2

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

Page 12: CSS - Cascading Style Sheets - 2

• 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/)