Seletores css

242 visualizações

Publicada em

Seletores css

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
242
No SlideShare
0
A partir de incorporações
0
Número de incorporações
10
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Seletores css

  1. 1. SELETORES CSS Garcia, Diogo
  2. 2. 1.SELETORES CSS O que são os seletores CSS? O CSS atinge a formatação do código de forma bem abrangente e modular e isto é feito através dos seletores CSS, estes por sua vez nos permite selecionar diversos trechos de código e aplicar estilos a eles. Isto é feito através de um conceito simples aonde utilizamos alguns pontos chaves do HTML, como âncora para estipular os estilos. 1.1 SELETOR UNIVERSAL Padrão Significado Exemplo CSS Exemplos HTML * Qualquer elemento *{ color: #000000; } Aplicável a todos os elementos 1.2 SELETOR DE TIPO DE ELEMENTO Padrão Significado Exemplo CSS Exemplos HTML e Seleciona qualquer elemento <e> e{ font-family: sans- serif;} <e>...</e> 1.3 SELETOR CONTEXTUAL Padrão Significado Exemplo CSS Exemplos HTML e f Seleciona qualquer elemento <f> que estiver contido num elemento <e>. h1 em { color: blue; } <e>...<f>...</f>...</e>
  3. 3. 1.4 SELETOR DE ELEMENTOS FILHO Padrão Significado Exemplo CSS Exemplos HTML e > f Seleciona qualquer elemento <f> descendente direto de um elemento <e>. body > p { line-height: 1.3; } margin-top: -5mm; } color: blue; } <e>...<f>...</f>...</e> 1.5 SELETOR ADJACENTE Padrão Significado Exemplo CSS Exemplos HTML e + f Seleciona qualquer elemento <f> que estiver imediatamente após um elemento <e>. h1 + h2 { margin-top: -5mm; } <e>...</e> <f>....<f> 1.6 SELETOR CLASSE Padrão Significado Exemplo CSS Exemplos HTML e.classe Seleciona o(s) elemento(s) <e> em que se aplicou a "classe". h1.pastoral { color: green; } <e class="classe"... /> 1.7 SELETOR ID Padrão Significado Exemplo CSS Exemplos HTML e# ID Seleciona o elemento <e> identificado com ID. h1#chapter1 { text-align: center; } <e Id="Id"... /> 1.8 AGRUPAMENTO DE SELETORES Padrão Significado Exemplo CSS Exemplos HTML e , f Seleciona os elementos <e> e <f> do agrupamento. h1, h2 { font-fanily: sans- serif; } <e> ... </e> ... <f> ... </f>
  4. 4. 1.9 SELETORES DE ATRIBUTO Padrão Significado Exemplo CSS Exemplos HTML e [atrib] Seleciona o elemento <e> que contenha o atributo indicado. h1 [title] { color: blue; } <e atrib="valor" .... /> Padrão Significado Exemplo CSS Exemplos HTML e [atrib="valor"] Seleciona o elemento <e> com o mesmo atributo e "valor". span [class=exemplo] { color: blue; } <e> ... </e> ... <f> ... </f> Padrão Significado Exemplo CSS Exemplos HTML e [atrib~="valor"] Seleciona o elemento <e> em que "valor" de atributo esteja em uma lista de valores separadas por espaços. a [rel~="copyright"] { color: red; } <a rel="copyright copyleft copyditor" ...> .. </a> Padrão Significado Exemplo CSS Exemplos HTML e[atrib | ="val"] Seleciona o elemento <e> em que valor do atributo seja idêntico a "val" ou inicia-se com "val". a[lang|"pt"] { color: red; } <e lang="pt-BR" .../> 1.10 PSEUDO-CLASSES Padrão Significado Exemplo CSS Exemplos HTML e:first-child Seleciona o primeiro elemento <e> descendente do elemento-pai. div > p:first-child { text-indent: 0; } <p> Último p antes de 'nota' <DIV class="nota"> <p> Primeiro p após nota'. </div> Padrão Significado Exemplo CSS Exemplos HTML a:link Aplica-se ao elemento <a> com hiperlinks ou âncoras ainda não visitados. a:linh { color: red; } <a href="http://endereço. link/ ">link</a>
  5. 5. Padrão Significado Exemplo CSS Exemplos HTML e:visited Aplica-se ao elemento <a> com hiperlinks ou âncoras já visitados. a: visited { color: blue; } <a href="http://endereço. link/ ">link</a> Padrão Significado Exemplo CSS Exemplos HTML e:active Aplica-se ao elemento <e> quando este for ativado pelo usuario. Aplica-se ao elemento <e> quando este for ativado pelo usuario. a: active { color: line; } <a href="http://endereço. link/ ">link</a> Padrão Significado Exemplo CSS Exemplos HTML e:hover Aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo. a: hover { color: yellow; } <a href="http://endereço. link/ ">link</a> Padrão Significado Exemplo CSS Exemplos HTML e:focus Aplica-se ao elemento <e> quando o o foco estiver posicionado nele. a: focus { background: yellow; } <a href="http://endereço. link/ ">link</a> Padrão Significado Exemplo CSS Exemplos HTML e:lang(val) Aplica-se ao elemento <e> se estiver marcado com o idioma "val" html:lang(pt) {quotes: '<< ' ' >>';} <e lang="pt" ... /> 1.11 PSEUDO-ELEMENTOS Padrão Significado Exemplo CSS Exemplos HTML e:first-line Aplica-se ao elemento à primeira linha do elemento <e>. p:first-line { text-transform: uppercase;} <e>...</e>
  6. 6. Padrão Significado Exemplo CSS Exemplos HTML e:first-letter Aplica-se à primeira letra do elemento <e>. p: first-letter { font-size: 3em; font- weight: normal; } <e>...</e> Padrão Significado Exemplo CSS Exemplos HTML e:before Aplica conteúdo especificado em posição anterior ao elemento <e>. e: before { content: open-quote; } <e>...</e> Padrão Significado Exemplo CSS Exemplos HTML e:after Aplica conteúdo especificado em posição anterior ao elemento <e>. e: after { content: close-quote; } <e>...</e> Fonte: W3C Link: http://www.w3c.br/pub/Materiais/PublicacoesW3C/guia-css-w3cbr.pdf

×