Guia de referência rápida css

681 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
681
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guia de referência rápida css

  1. 1. 28/11/12 Guia de Ref erência Rápida CSS Guia de Referência CSS 2.1 CONTEÚDO Módulos Seletores Notação Tipos de mídias Sintaxe Unidades Modelo de caixa Bordas Margens Espaçamento Modelo de formatação visual Detalhes do modelo de formatação visual Efeitos visuais Agregador de conteúdo, numeração automática e listas Cores e fundo Paginação para impressão Fontes tipográficas Texto Tabelas Interface de usuário SELETORES Padrão Significado Exemplo CSS Exemplo (X)HTML *{ Seletor universal: * clr #000 oo: 000; Aplicável a todos os elementos qualquer elemento } Seletor de tipo de e{ elemento: seleciona e fn-aiy sn- <>..<e otfml: as e . /> qualquer elemento srf} ei; <e> Seletor contextual:seleciona h e { 1 m qualquer elemento ef clr bu; oo: le <>.<>../>.<e e..f..<f../> <f> que estiver } contido num elemento <e> Seletor de elementos-filho: bd >p{ oy seleciona qualquer e>f ln-egt 13 iehih: .; <>.<>.<f../> e..f../>.<e elemento <f> } descendente direto de um elemento <e> Seletor adjacente: seleciona o elemento <f> que h +h { 1 2 e+f mri-o:-m; agntp 5m <>.<><f../> e..f />.<e estiverwww.w3c.br/div ulgacao/guiasref erencia/css2/ } 1/34
  2. 2. 28/11/12 Guia de Ref erência Rápida CSS estiver } imediatamente após um elemento <e> Seletor de classe: seleciona o(s) h.atrl{ 1psoa ecas .lse elemento(s) <e> em clr gen oo: re; < cas"lse../ e ls=cas". > que se aplicou a } "classe" Seletor de ID: h#hpe1{ 1catr seleciona o eI #d t x - l g : c n e ;< i = I " . / etain etr e d"d.. > elemento <e> } identificado com Id Agrupamento de h,h { 1 2 seletores: Seleciona e,f fn-aiy sn- <>…<e …<>…<f otfml: as e /> f /> os elementos <e> e srf } ei; <f> do agrupamento Seletor de Atributo: seleciona o h[il]{ 1tte e[ti] arb elemento <e> que clr bu; oo: le < arb"ao"../ e ti=vlr . > contenha o atributo } indicado Seletor de Atributo: sa[ls=xml] pncaseepo seleciona o e { elemento <e> com o < cas"xml"../ e ls=eepo . > [ti=vlr] arb"ao" clr bu; oo: le mesmo atributo e } “valor” Seletor de Atributo: seleciona o elemento <e> em arl=cprgt] [e~"oyih" e que “valor” de { < rl"oyih cplf a e=cprgt oyet [ t i ~ " a o " atributo esteja em arb=vlr] clr rd oo: e; cpeio".>…<a oydtr.. /> uma lista de valores }? separadas por espaços Seletor de Atributo: seleciona o elemento <e> em *ln|"t]{ [ag=p" e [ t i | " a " que valor do atributo arb=vl] clr rd oo: e; < ln=p-R ..> e ag"tB" ./ seja idêntico a “val” } ou inicia-se com “val” Pseudo-classe primeiro filho: d v > p f r t c i d< > Ú t m P a t s d o a i :is-hl P lio ne e nt seleciona o primeiro { <I cas"oa> DV ls=nt" efrtcid :is-hl elemento <e> tx-net 0 etidn: ; <>Pier Paó nt P rmio ps oa. descendente do } <DV /I> elemento-pai Pseudo-classe link: aplica-se ao aln { :ik elemento <a> com <a aln :ik clr rd oo: e; hiperlinks ou he=ht:/neeoln/>ik/> rf"tp/edrç.ik"ln<a } âncoras ainda não visitados Pseudo-classe visited: aplica-se ao avstd{ :iie <a avstd :iie elemento <a> com clr bu; oo: le he=ht:/neeoln/>ik/> rf"tp/edrç.ik"ln<a hiperlinks ou } âncoras já visitados Pseudo-classewww.w3c.br/div ulgacao/guiasref erencia/css2/ 2/34
  3. 3. 28/11/12 Guia de Ref erência Rápida CSS Pseudo-classe aatv { :cie active: aplica-se ao <a eatv :cie clr lm; oo: ie elemento <e> he=ht:/neeoln/>ik/> rf"tp/edrç.ik"ln<a } quando este for ativado pelo usuário Pseudo-classe hover: aplica-se ao ahvr{ :oe elemento <e> <a ehvr :oe clr ylo; oo: elw quando o cursor he=ht:/neeoln/>ik/> rf"tp/edrç.ik"ln<a } estiver sobre ele, mas sem ativá-lo Pseudo-classe focus: aplica-se ao afcs{ :ou elemento <e> <a efcs :ou bcgon:ylo; akrud elw quando o foco he=ht:/neeoln/>ik/> rf"tp/edrç.ik"ln<a } estiver posicionado nele Pseudo-classe lang: aplica-se ao hm:agp) tlln(t elemento <e> se eln(a) :agvl { u t s » ;< l n = p " . . / qoe: « e ag"t . > este estiver } marcado com o idioma “val” Pseudo-elemento pfrtln { :is-ie first-line: aplica-se à efrtln :is-ie tx-rnfr: ettasom <>.<e e../> primera linha do uprae } pecs; elemento <e> pfrtlte { :is-etr Pseudo-elemento fn-ie 3m otsz: e; first-letter: aplica-se efrtlte :is-etr fn-egt otwih: <>.<e e../> à primera letra do nra; oml elemento <e> } Pseudo-elemento before: aplica ebfr { :eoe conteúdo cnet oe- otn: pn ebfr :eoe <>.<e e../> especificado em qoe ut; posição anterior ao } elemento <e> Pseudo-elemento after: aplica eatr{ :fe conteúdo cnet coe otn: ls- eatr :fe <>.<e e../> especificado em qoe ut; posição posterior ao } elemento <e> NOTAÇÃO Padrão Descrição ab a seguido de b (ab) a e b agrupados [a|b] a ou b [a| b] | a ou b ou ambos a? a é opcional a* Zero ou vários a a+ Um ou vários a a{,m n } a no mínimo n vezes e máximo mwww.w3c.br/div ulgacao/guiasref erencia/css2/ 3/34
  4. 4. 28/11/12 Guia de Ref erência Rápida CSS TIPOS DE MÍDIA Nome Mídia al l Todos os dispositivos bale ril Dispositivos táteis braille ebse mosd Impresoras braille Dispositivos manuais/portáteis (tela pequena, monocromática, gráficos hnhl aded bitmap, banda limitada) Impresso, material opaco e documentos visualizados na tela em modo de pit rn impressão poeto rjcin Projetores sre cen Telas de computador sec peh Sintetizadores de voz. Similar a "aural" Mídias que utilizam caracteres de tamanho fixo, como terminais ou ty t dispositivos portáteis com capacidades limitadas de tela tv Televisores SINTAXE @mot"oh.s"tp-ii; ipr flacs iomda / Cmnáis* * oetro / @ei tp-ii { mda iomda sltr{ eeo Poreae vlre) rpidd: ao(s; } }; UNIDADES UNIDADES DE TAMANHO RELATIVAS Unidade Descrição px Tamanho em pixels (relativo ao dispositivo) em Tamanho relativo à fonte utilizada no elemento ao qual está inserido ex Correspondente à altura da fonte x’ UNIDADES DE TAMANHO ABSOLUTAS Unidade Descrição in Polegadas (1polegada = 2.54 cm) cm Centímetros mm Milímetros pt Pontos (1pt = 1/72 polegadas) pc Picas (1pica = 12 pontos) PORCENTAGEM Unidade Descrição % Porcentagem 0 Valor 0 não requer atribuição de unidade REPRESENTAÇÃO DE CORESwww.w3c.br/div ulgacao/guiasref erencia/css2/ 4/34
  5. 5. 28/11/12 Guia de Ref erência Rápida CSS Unidade Descrição #RGB RGB Cor RGB (6 valores hexadecimais) #G RB Notação simplificada (#RGB = #RRGGBB) rbRGB g(,,) Cor RGB (3 valores de 0 a 255) rbR,%B) g(%G,% Cor RGB (3 valores percentuais) MODELO DE CAIXA BORDAS Propriedade Descrição Valores Descrição thin: espessura fina medium: espessura bre-o-it odrtpwdh [ thin | média bre-ih-it odrrgtwdh medium | thick: Largura das bordas em cada um dos quatro lados: bre-otm odrbto- thick | espessura superior, direito, inferior e esquerdo wdh it <tamanho> grossa bre-etwdh odrlf-it ] Exemplo: e{odr bre- bto- otm wdh it: mdu;} eim Exemplos: Todas as bordas com espessura thin: e{odr bre- wdh it: ti; hn}www.w3c.br/div ulgacao/guiasref erencia/css2/ 5/34
  6. 6. 28/11/12 Guia de Ref erência Rápida CSS Bordas superior e inferior com espessura thin, bordas direita e esquerda com espessura thick: e{odr bre- wdh it: ti hn tik} hc; Borda superior com espessura thin, bordas direita e [ thin | esquerda medium | com Atalho para definir de uma só vez larguras de bordas bre-it odrwdh thick | espessura para todos os lados <tamanho> thick, ] {1,4} borda inferior com espessura medium: e{odr bre- wdh it: ti tik hn hc mdu; eim} Borda superior com espessura thin, borda direita com espessura thick, borda inferior com espessura medium, borda esquerda com espessura thin: e{odr bre- wdh it: ti tik hn hc mdu eimwww.w3c.br/div ulgacao/guiasref erencia/css2/ 6/34
  7. 7. 28/11/12 ti; hn} bre-o-oo odrtpclr Exemplo: bre-ih-oo odrrgtclr [ <color> | Cor das bordas em cada um dos quatro lados: superior, e{odr bre- bre-otm odrbto- transparent direito, inferior e esquerdo tpclr o-oo: clr oo ] bak } lc; bre-etclr odrlf-oo Exemplos: Todas as bordas com a cor black: e{odr bre- clr oo: bak} lc; Bordas superior e inferior com a cor black, bordas direita e esquerda com a cor silver: e{odr bre- clr oo: bak lc sle; ivr} Borda superior com a cor black, bordas direita e esquerda [ <color> | com a cor Atalho para definir de uma só vez cores de bordas para bre-oo odrclr transparent silver, todos os lados borda ] {1,4} inferior com a cor gray: e{odr bre- clr oo: bak lc sle ivr ga;} ry Borda superior com a cor black, borda direita com a cor silver, bordawww.w3c.br/div ulgacao/guiasref erencia/css2/ 7/34
  8. 8. 28/11/12 Guia de Ref erência Rápida CSS inferior com a cor gray, borda esquerda com a cor white: e{odr bre- clr oo: bak lc sle ivr ga ry wie } ht; none: nenhuma borda (largura computada como zero) hidden: idêntico à none, exceto na resolução de conflito de bordas nos elementos de uma tabela dotted: série de pontos dashed: série de segmentos de pequenas linhas solid: segmento de linha [ none | simples e hidden | contínua bre-o-tl odrtpsye dotted | double: bre-ih-tl odrrgtsye dashed | Duas Estilo de bordas em cada um dos quatro lados: superior, linhas bre-otm odrbto- solid | direito, inferior e esquerdo solid. A sye tl double | bre-etsye odrlf-tl groove | soma das ridge | inset duas | outset ] linhas e o espaço entre elas é igual ao valor definido em border- widthwww.w3c.br/div ulgacao/guiasref erencia/css2/ groove: 8/34
  9. 9. 28/11/12 Guia de Ref erência Rápida CSS groove: Efeito 3D, entalhada ridge: Efeito 3D, oposto de groove: ressaltada inset: Efeito 3D, baixo relevo outset: Efeito 3D, alto relevo Exemplo: e{odr bre- lf- et sye tl: dte;} otd Exemplos: Todas as bordas com estilo solid: e{odr bre- sye tl: sld} oi; Bordas superior e inferior com estilo solid, bordas direita e esquerda com estilo dotted: e{odr bre- sye tl: sld oi dte; otd} Borda superior com estilo solid, bordas [ none | direita e hidden | esquerda dotted | com estilo dashed | dotted, Atalho para definir de uma só vez estilos de bordas para solid | borda bre-tl odrsye todos os lados double | inferior groove | com o ridge | inset estilo | outset ] dashed:www.w3c.br/div ulgacao/guiasref erencia/css2/ {1,4} e{odr bre- 9/34
  10. 10. 28/11/12 Guia de Ref erência Rápida CSS {1,4} e{odr bre- clr oo: sld oi dte otd dse;} ahd Borda superior com estilo solid, borda direita com estilo dotted, borda inferior com estilo dashed, borda esquerda com o estilo double: e{odr bre- clr oo: sld oi dte otd dse ahd dul;} obe [ <border- Exemplo: bre-o odrtp top-width> e{odr bre- bre-ih odrrgt Atalho para definir largura, estilo e cor das bordas || <border- bto: otm bre-otm odrbto superior, direita, inferior ou esquerda top-style> || tik hc bre-et odrlf <border- sld oi top-color> ] rd} e; [ <border- Exemplo: top-width> e{odr bre: || <border- bre odr Atalho para largura, estilo e cor das quatro bordas tik hc top-style> || sld oi <border- rd} e; top-color> ] Obs.: Valores em negrito são os adotados como padrão MARGENS Propriedade Descrição Valores Descrição mri-o agntp Exemplo: [ <tamanho> | mri-ih agnrgt Tamaho da margem para cada um dos lados: bd oy <porcentagem> mri-otm agnbto superior, direito, inferior e esquerdo {agn mri- | auto ] mri-et agnlf tp 2m} o: e Exemplos: Todas as margens com 2em: bd oy {agn mri:www.w3c.br/div ulgacao/guiasref erencia/css2/ 2m} e 10/34
  11. 11. 28/11/12 2m} e Margem superior e inferior com 1em, esquerda e direita com 2em: bd oy {agn mri: 1m2m} e e Margem superior com 1em; [ <tamanho> | direita com Atalho para definir de uma só vez o tamanho da mri agn <porcentagem> 2em; margem para todos os lados | auto ]{1,4} inferior com 3em; e esquerda com 2em: bd oy {agn mri: 1m2m e e 3m} e Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: bd oy {agn mri: 1m2m e e 3m4m} e e ESPAÇAMENTO Propriedade Descrição Valores Descrição pdigtp adn-o Exemplo: Distância utilizada para espaçamento em cada um [ <tamanho> | pdigrgt adn-ih bd oy dos quatro lados: superior, direito, inferior e <porcentagem> pdigbto adn-otm {adn- pdig esquerdo ] pdiglf adn-et tp 2m} o: e Exemplos: Todas as margens com 2em: bd oy {adn: pdig 2m} ewww.w3c.br/div ulgacao/guiasref erencia/css2/
  12. 12. 28/11/12 Guia de Ref erência Rápida CSS Margem superior e inferior com 1em, esquerda e direita com 2em: bd oy {adn: pdig 1m2m} e e Margem superior com 1em; [ <tamanho> | direita com Atalho para definir de uma só vez a distância de pdig adn <porcentagem> 2em; espaçamento para todos os lados inferior ]{1,4} com 3em; e esquerda com 2em: bd oy {adn: pdig 1m2m e e 3m} e Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: bd oy {adn: pdig 1m2m e e 3m4m} e e MODELO DE FORMTAÇÃO VISUAL Descrição / Propriedade Descrição Valores Exemplos inline: O elemento renderizado em uma ou mais linhas block: renderizado como um bloco list-item: renderizado como um item de lista e em linha(s) run-in:www.w3c.br/div ulgacao/guiasref erencia/css2/ 12/34
  13. 13. renderizado como bloco ou linha(s), dependendo do contexto [ inline | block | inline-block: list-item | run-in renderizado em | inline-block | uma linha table | inline- simples, mas table | table- comporta-se row-group | como um bloco table-header- table, inline-dsly ipa Modos de exibição do conteúdo group | table- table, table- footer-group | row-group, table-row | table-column, table-column- table-column- group | table- group, table- column | table- header-group, cell | table- table-footer- caption | none ] group, table- row, table-cell, table-caption: esses valores farão com que o elemento se comporte como uma tabela (sujeito a restrições descritas no capítulo sobre tabelas) none: o elemento não será mostrado no modo visual Exemplo: e {ipa: dsly nn; oe} static: Posicionamento normal de acordo com o fluxo normal dos elementos na página. As proprieades top, right, bottom, e left não se aplicam relative: posicionamento é calculado de acordo com o fluxo normal. O efeito de position:relative é indefinido nos elementos 13/34
  14. 14. 28/11/12 Guia de Ref erência Rápida CSS table-row- group, table- header-group, table-footer- group, table- row, table- column-group, table-column, table-cell, e table-caption absolute: [ static | Posicionamento relative | (e psto oiin Esquema de posicionamento absolute | fixed possivelmente o ] tamanho) é especificado com as propriedades top, right, bottom, e left. Essas propriedade são especificadas em relação ao conteúdo do bloco fixed: Posicionamento é calculado tal como o modelo absolute, mas adicionalmente se manterá fixo, mesmo que se utilize a barra de rolagem Exemplo: @ei sre { mda cen eeepo #xml {oiin psto: fxd } ie; } @ei pit{ mda rn eeepo #xml {oiin psto: sai;} ttc} top: Distância vertical em relação à margem superior right: Distância horizontal em relação à margem direita bottom: tp o [ <tamanho> | Distância rgt ih Distância do elemento com relação à <porcentagem> vertical em bto otm extremidade de seu elemento-pai | auto ] relação à lf etwww.w3c.br/div ulgacao/guiasref erencia/css2/ margem inferior 14/34

×