Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Seletores css

446 views

Published on

  • Be the first to comment

  • Be the first to like this

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
  7. 7. EXEMPLO DE SELETOR Para esse exemplo iremos utilizar o seletor e:active, esse seletor aplica-se para qualquer elemento quando for ativado pelo usuário, no exemplo a seguir iremos utilizar o elemento <a>. Quando o usuário clicar no link para acessar a página do google, o mesmo irá mudar de color no caso LIME, conforme ilustrado no exemplo abaixo: Código: Navegador:

×