Guia de Comandos Rápidos - CSS 2.1
| * | Seletor universal: qualquer elemento | * { color: #000000; } |
Aplicável a todos os elementos |
| e | Seletor de tipo de elemento: seleciona qualquer elemento | e { font-family: sans-serif;} |
... |
| e f | Seletor contextual:seleciona qualquer elemento que estiver contido num elemento | h1 em { color: blue; } |
.......... |
| e > f | Seletor de elementos-filho: seleciona qualquer elemento descendente direto de um elemento | body > p { line-height: 1.3; } |
......... |
| e + f | Seletor adjacente: seleciona o elemento que estiver imediatamente após um elemento | h1 + h2 { margin-top: -5mm; } |
... ... |
| e.classe | Seletor de classe: seleciona o(s) elemento(s) em que se aplicou a "classe" | h1.pastoral { color: green; } |
|
| e#Id | Seletor de ID: seleciona o elemento identificado com Id | h1#chapter1 { text-align: center; } |
|
| e , f | Agrupamento de seletores: Seleciona os elementos e do agrupamento | h1, h2 { font-family: sans-serif; } |
… … … |
| e [atrib] | Seletor de Atributo: seleciona o elemento que contenha o atributo indicado | h1[title] { color: blue; } |
|
| e [atrib="valor"] | Seletor de Atributo: seleciona o elemento com o mesmo atributo e “valor” | span[class=exemplo] { color: blue; } |
|
| e [atrib~="valor"] | Seletor de Atributo: seleciona o elemento em que “valor” de atributo esteja em uma lista de valores separadas por espaços | a[rel~="copyright"]{ color: red; }? |
… |
| e [atrib|="val"] | Seletor de Atributo: seleciona o elemento em que valor do atributo seja idêntico a “val” ou inicia-se com “val” | *[lang|="pt"] { color: red; } |
|
| e:first-child | Pseudo-classe primeiro filho: seleciona o primeiro elemento descendente do elemento-pai | div > p:first-child { text-indent: 0; } |
Último P antes de 'nota' Primeiro P após nota'. |
| a:link | Pseudo-classe link: aplica-se ao elemento com hiperlinks ou âncoras ainda não visitados | a:link { color: red; } |
link |
| a:visited | Pseudo-classe visited: aplica-se ao elemento com hiperlinks ou âncoras já visitados | a:visited { color: blue; } |
link |
| e:active | Pseudo-classe active: aplica-se ao elemento quando este for ativado pelo usuário | a:active { color: lime; } |
link |
| e:hover | Pseudo-classe hover: aplica-se ao elemento quando o cursor estiver sobre ele, mas sem ativá-lo | a:hover { color: yellow; } |
link |
| e:focus | Pseudo-classe focus: aplica-se ao elemento quando o foco estiver posicionado nele | a:focus { background: yellow; } |
link |
| e:lang(val) | Pseudo-classe lang: aplica-se ao elemento se este estiver marcado com o idioma “val” | html:lang(pt) {quotes: '« ' ' »'; } | |
| e:first-line | Pseudo-elemento first-line: aplica-se à primera linha do elemento | p:first-line { text-transform: uppercase; } |
... |
| e:first-letter | Pseudo-elemento first-letter: aplica-se à primera letra do elemento | p:first-letter { font-size: 3em; font-weight: normal; } |
... |
| e:before | Pseudo-elemento before: aplica conteúdo especificado em posição anterior ao elemento | e:before { content: open-quote; } |
... |
| e:after | Pseudo-elemento after: aplica conteúdo especificado em posição posterior ao elemento |
e:after { |
... |
| a b | a seguido de b |
| ( a b ) | 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 {n, m} | a no mínimo n vezes e máximo m |
| all | Todos os dispositivos |
| braille | Dispositivos táteis braille |
| embossed | Impresoras braille |
| handheld | Dispositivos manuais/portáteis (tela pequena, monocromática, gráficos bitmap, banda limitada) |
| Impresso, material opaco e documentos visualizados na tela em modo de impressão | |
| projection | Projetores |
| screen | Telas de computador |
| speech | Sintetizadores de voz. Similar a "aural" |
| tty | Mídias que utilizam caracteres de tamanho fixo, como terminais ou dispositivos portáteis com capacidades limitadas de tela |
| tv | Televisores |
| @import "folha.css" tipo-midia; |
| /* Comentários */ |
| @media tipo-midia { seletor { Propriedade: valor(es); } }; |
| px | Tamanho em pixels (relativo ao dispositivo) |
| em | Tamanho relativo à fonte utilizada no elemento ao qual está inserido |
| ex | Correspondente à altura da fonte 'x’ |
| in | Polegadas (1polegada = 2.54 cm) |
| cm | Centímetros |
| mm | Milímetros |
| pt | Pontos (1pt = 1/72 polegadas) |
| pc | Picas (1pica = 12 pontos) |
| % | Porcentagem |
| 0 | Valor '0' não requer atribuição de unidade |
| #RRGGBB | Cor RGB (6 valores hexadecimais) |
| #RGB | Notação simplificada (#RGB = #RRGGBB) |
| rgb(R,G,B) | Cor RGB (3 valores de 0 a 255) |
| rgb(R%,G%,B%) | Cor RGB (3 valores percentuais) |
| border-top-width border-right-width border-bottom-width border-left-width |
Largura das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo | [ thin | medium | thick | ] | thin: espessura fina medium: espessura média thick: espessura grossa Exemplo: e {border-bottom-width: medium; } |
| border-width | Atalho para definir de uma só vez larguras de bordas para todos os lados | [ thin | medium | thick | ] {1,4} |
Exemplos: Bordas superior e inferior com espessura 'thin', bordas direita e esquerda com espessura 'thick': Borda superior com espessura 'thin', bordas direita e esquerda com espessura 'thick', borda inferior com espessura 'medium': Borda superior com espessura 'thin', borda direita com espessura 'thick', borda inferior com espessura 'medium', borda esquerda com espessura 'thin': |
| border-top-color border-right-color border-bottom-color border-left-color |
Cor das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo | [ | transparent ] |
Exemplo: |
| border-color | Atalho para definir de uma só vez cores de bordas para todos os lados | [ | transparent ] {1,4} |
Exemplos: Bordas superior e inferior com a cor 'black', bordas direita e esquerda com a cor 'silver': Borda superior com a cor 'black', bordas direita e esquerda com a cor 'silver', borda inferior com a cor 'gray': Borda superior com a cor 'black', borda direita com a cor 'silver', borda inferior com a cor 'gray', borda esquerda com a cor 'white': |
| border-top-style border-right-style border-bottom-style border-left-style |
Estilo de bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo | [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] |
none: nenhuma borda (largura computada como zero) Exemplo: |
| border-style | Atalho para definir de uma só vez estilos de bordas para todos os lados | [ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4} | Exemplos: Todas as bordas com estilo 'solid': e {border-style: solid;} Bordas superior e inferior com estilo 'solid', bordas direita e esquerda com estilo 'dotted': e {border-style: solid dotted;} Borda superior com estilo 'solid', bordas direita e esquerda com estilo 'dotted', borda inferior com o estilo 'dashed': e {border-color: solid dotted dashed; } Borda superior com estilo 'solid', borda direita com estilo 'dotted', borda inferior com estilo 'dashed', borda esquerda com o estilo 'double': e {border-color: solid dotted dashed double; } |
| border-top border-right border-bottom border-left |
Atalho para definir largura, estilo e cor das bordas superior, direita, inferior ou esquerda | [ || || ] | Exemplo: e {border-bottom: thick solid red;} |
| border | Atalho para largura, estilo e cor das quatro bordas | [ || || ] | Exemplo: e {border: thick solid red;} |
Obs.: Valores em negrito são os adotados como padrão
| margin-top margin-right margin-bottom margin-left |
Tamaho da margem para cada um dos lados: superior, direito, inferior e esquerdo | [ | | auto ] | Exemplo: body {margin-top: 2em } |
| margin | Atalho para definir de uma só vez o tamanho da margem para todos os lados | [ | | auto ]{1,4} |
Exemplos: Margem superior e inferior com 1em, esquerda e direita com 2em: Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em: Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: |
| padding-top padding-right padding-bottom padding-left |
Distância utilizada para espaçamento em cada um dos quatro lados: superior, direito, inferior e esquerdo | [ | ] | Exemplo: body {padding-top: 2em } |
| padding | Atalho para definir de uma só vez a distância de espaçamento para todos os lados | [ | ]{1,4} |
Exemplos: Margem superior e inferior com 1em, esquerda e direita com 2em: Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em: Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: |
| display | Modos de exibição do conteúdo | [ inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none ] | 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: renderizado como bloco ou linha(s), dependendo do contexto inline-block: renderizado em uma linha simples, mas comporta-se como um bloco table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-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 {display: none;} |
| position | Esquema de posicionamento | [ static | relative | absolute | fixed ] |
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 |
| top right bottom left |
Distância do elemento com relação à extremidade de seu elemento-pai | [ | | auto ] |
top: Distância vertical em relação à margem superior Exemplo: |
| float | Posicionamento adjacente à esquerda ou à direita do elemento | { left | right | none ] |
left: o elemento será posicionado flutuando à esquerda. O fluxo do conteúdo não integrante do elemento será posicionado à direita a partir do 'top' do elemento que recebe a propriedade 'float' |
| clear | Controle para os posicionamentos float | [ none | left | right | both ] | none: nenhum controle de limpeza de flutuação será executado left: limpeza de flutuação à esquerda: o elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda right: limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante à direita both: o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante, seja à direita ou à esquerda Exemplo: e { clear: both;} |
| z-index | Níveis de profundidade de sobreposição de elementos | [ auto | ] | Os números serão considerados para ordenar os elementos que ficarão sobrepostos, do mais baixo para o mais alto: 'z-index: 1'; 'z-index:2'; 'z-index: 3'; … Exemplo: e {z-index: 1;} |
| direction | Define a direção de um texto: esquerda para direita; direita para esquerda | [ ltr | rtl ] |
Utilizado em clientes que têm suporte a idiomas e escrita bidirecional. Exemplo: Para que a direção tenha o efeito atribuído, a propriedade 'unicode-bidi' deve conter os valores 'embed' ou |
| unicode-bidi | Interação entre textos bidirecionais | [ normal | embed | bidi-override ] | Utilizado em clientes que têm suporta a idiomas e escrita bidirecional normal – o elemento não embutirá o algoritmo com suporte bidirecional embed – embutirá algoritmo bidirecional bidi-override – permite a sobreposição |
Obs.: Valores em negrito são os adotados como padrão
| width | Largura | [ | | auto ] | Exemplo: e {width: 25%;} |
| min-width | Largura mínima | [ | ] | Exemplo: e {min-width: 200px;} |
| max-width | Largura máxima | [ | | none] | Exemplo: e {max-width: 600px;} |
| height | Altura | [ | | auto ] | Exemplo: e {height: 250px;} |
| min-height | Altura mínima | [ | ] | Exemplo: e {min-height: 30%;} |
| max-height | Altura máxima | [ | | none] | Exemplo: e {max-height: 70%;} |
| line-height | Distância entre as linhas de um texto | [ normal | | | ] | Exemplo: e {line-height: 1.2em;} |
| vertical-align | Alinhamento vertical do texto | [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | | ] | baseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base no elemento, será considerado sua margem inferior sub - A linha de base do elemento será alinhada com a linha de base de conteúdo subscrito do elemento superior super - A linha de base do elemento será alinhada com a linha de base de conteúdo superescrito do elemento superior top - Alinha o topo do elemento com a linha de topo do elemento superior text-top - A base superior do elemento será alinhada com a linha superior do conteúdo de textos do elemento-pai middle - A linha central do elemento e de seu elemento superior serão consideradas para alinhamento. (linha central do elemento superior = ponto central da altura da letra 'x') bottom - Alinha o rodapé do elemento com o rodapé do elemento superior text-bottom - A base inferior do elemento será alinhada com a linha inferior do conteúdo de textos do elemento-pai Exemplo: e {vertical-align: sub;} |
Obs.: Valores em negrito são os adotados como padrão
| overflow | Comportamento do browser quando o conteúdo do elemento for maior que sua área | [ visible | hidden | scroll | auto ] | visible - Todo o conteúdo do elemento estará visível (não cortado) e talvez conforme a área seja renderizado para fora do elemento hidden - O conteúdo será cortado (se maior que a área disponível) e não haverá barra de rolagens no elemento scroll - O conteúdo será cortado (se maior que a área disponível) mas haverá barra de rolagens no elemento. Quando a mídia for especificada como 'print', o conteúdo do elemento poderá ser impresso. auto - O método será atribuído pelo browser cliente Exemplo: e {overflow: scroll;} |
| clip | Especifica região de um elemento a ser exibida | [ rect (, , , ) | auto ] | rect – Delimita área retangular do elemento (topo, direita, rodapé, esquerda) na qual o conteúdo ficará visível auto - O elemento não terá clip e sua própria área será idêntica à de visualização Exemplo: e {clip: rect(5px, 40px, 45px, 5px); } |
| visibility | Define se um elemento estará ou não visível | [ visible | hidden | collapse ] | visible - O elemento será exibido hidden - O elemento não será exibido, ficando totalmente transparente. Mas o leiaute da página continuará sendo afetado collapse - Mesmo efeito que hidden, mas aplicável a elementos de tabela Exemplo: e {visibility: hidden; } |
Obs.: Valores em negrito são os adotados como padrão
| content | Agregador de conteúdo para os pseudo-elementos :after e :before | [ normal | none | [ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote]+ ] | none: Nenhum conteúdo será agregado. normal: Como 'none', para os pseudo-elementos :before e :after : Conteúdo de texto específico será agregado. : Valor de uma URI designando um recurso externo (como uma imagem). Se o browser não puder exibir recursos externos, ele não aparecerá ou alguma indicação apontará essa impossibilidade : Contadores cujos valores serão agregados. Podem ser especificados com duas diferentes funções: 'counter()' ou 'counters()'. A primeira pode ser de duas formas: 'counter(name)', para usar estilo padrão; ou 'counter(name, style)', para especificar o estilo. O texto que será agregado corresponde ao valor de incremento do contador para um determinado campo 'name' no pseudo-elemento específico; e sua formatação será a indicada em 'style' (o padrão é 'decimal'). As opções para 'style' são as mesmas possíveis em 'list-style-type'. As seguintes palavras não podem ser usadas para 'name': 'none', 'inherit' ou 'initial'. A outra função também tem duas formas: 'counters(name, string)', para usar estilo padrão; ou 'counters(name, string, style)', para indicar estilo. Para obter mais informações sobre counters, acesse http://www.w3.org/TR/CSS21/generate.html#counters�� open-quote | close-quote - O conteúdo agregado será substituído por aspas no-open-quote | no-close-quote - Nenhum conteúdo é introduzido, mas incrementa (decrementa) attr(X) - Esta função retorna a 'string' como um valor do atributo X. A 'string' não será interpretada pelo processador do CSS Exemplo: H1:before {content: counter(secao, upper-roman) "-" } |
| quotes | Especifica aspas utilizadas em citações | [ [ ]+ | none ] | Exemplo, especificando dois pares de aspas para idiomas diferentes: e:lang(en) {quotes: '"' '"' "'" "'" } e:lang(pt) { quotes: "«" "»" '"' '"' } |
| counter-reset | Inicializa um contador identificado na propriedade 'content' | [ [ ? ]+ | none ] | Exemplo: h1 {counter-reset: secao; } |
| counter-increment | Incrementa um contador identificado na propriedade 'content' | [ [ ? ]+ | none ] | Exemplo: H2:before { content: counter(capitulo) "." counter(secao) " "; counter-increment: secao; } |
| list-style | Atalho para definir de uma só vez todas as propriedades de lista: type, position e image | [ || || ] | Exemplo: li {list-style: decimal-leading-zero outside url(imagem.jpg); } |
| list-style-image | Imagem aplicada aos elementos de uma lista | [ url("http://...") | none ] | Exemplo: li { list-style-image: url("http://png.com/ellipse.png");} |
| list-style-type | Estilo visual aplicado aos marcadores de uma lista | [ disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none ] |
disc - ponto sólido Exemplo: li {list-style-type: lower-alpha;} |
| list-style-position | Posicionamento interno dos marcadores de uma lista | [ inside | outside ] | inside – conteúdo da lista será indentado, mas o texto não será alinhado após quebra de linha outside – diferente de inside, o texto será alinhado na indentação mesmo com quebra de linha Exemplo: ul {list-style-position: outside; } ul.compact {list-style-position: inside;} |
Obs.: Valores em negrito são os adotados como padrão
| color | Cor do texto presente no elemento | Exemplo: e {color: red; } e {color: rgb(255,0,0); } |
|
| background-color | Cor de fundo do elemento | [ | transparent ] | Para 'transparent' será adotada a cor de fundo do elemento superior e na ausência deste, a cor de fundo padrão do browser Exemplo: e {background-color: #f00; } e {background-color: transparent; } |
| background-image | Imagem de fundo do elemento | [ url(...) | none ] | Exemplo: e {background-image: url(http://caminho/imagem.jpg); } |
| background-repeat | Define se e como a imagem de fundo utilizada se repetirá | [ repeat | repeat-x | repeat-y | no-repeat ] | repeat: a imagem é repetida em ambas as direções: horizontal e vertical repeat-x: a imagem é repetida somente horizontalmente repeat-y: a imagem é repetida somente verticalmente. no-repeat: a imagem não será repetida e somente uma cópia da mesma será renderizada Exemplo: e {background-repeat: no-repeat;} |
| background-attachment | Define se a imagem de fundo utilizada será fixa ou com rolagem | [ scroll | fixed ] | scroll: a imagem acompanha a rolagem da página na janela do browser, mantendo-se como imagem de fundo fixed: a imagem é fixada na página e não acompanhará a rolagem da página |
| background-position | Posição da imagem de fundo utilizada. | [ [ | | left | center | right ] [ | | top | center | bottom]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] |
top: Equivalente a '0%' do posicionamento vertical Exemplo: |
| background | Atalho para definir de uma só vez todas as propriedades de imagem de fundo | [ || || || || ] | Exemplo: e {background: red url("chess.png") repeat-x fixed 50% right; } |
Obs.: Valores em negrito são os adotados como padrão
| page-break-before | Define quebra de página antes do elemento | [ auto | always | avoid | left | right ] | auto: insere quebra de página somente se necessário always: sempre insere quebra de página antes do elemento avoid: evita inserir quebra de página antes do elemento left: insere uma ou duas quebras de páginas antes do elemento, de modo que a página gerada seja uma página par right: insere uma ou duas quebras de páginas antes do elemento, de modo que a página gerada seja uma página ímpar Exemplo: e {page-break-before: always; } |
| page-break-after | Define quebra de página após o elemento | [ auto | always | avoid | left | right ] | auto: insere quebra de página somente se necessário always: sempre insere quebra de página após o elemento avoid: evita inserir quebra de página após o elemento left: insere uma ou duas quebras de páginas após o elemento, de modo que a página gerada seja uma página par right: insere uma ou duas quebras de páginas após o elemento, de modo que a página gerada seja uma página ímpar Exemplo: e {page-break-after: always; } |
| page-break-inside | Define ou evita quebra de páginas dentro de um elemento | [ avoid | auto ] | auto: insere quebra de página somente se necessário avoid: evita inserir quebra de página dentro do elemento Exemplo: e {page-break-inside: avoid; } |
| orphans | Número mínimo de linhas antes da quebra de um parágrafo que pode aparecer no final de uma página | Somente valores positivos são permitidos Exemplo: e {orphans: 2; } |
|
| widows | Número mínimo de linhas após a quebra de um parágrafo que pode aparecer no início de uma página | Somente valores positivos são permitidos Exemplo: e {widows: 2; } |
Obs.: Valores em negrito são os adotados como padrão
| font-family | Família(s) de fontes | [ [ | ] [, | ]* ] | As seguintes famílias-genéricas de fontes são definidas em CSS2.1:
|
| font-style | Estilo utilizado na fonte | [ normal | italic | oblique ] | normal: fonte do elemento sem efeito itálico ou oblíquo italic: fonte do elemento com efeito itálico oblique: fonte do elemento com efeito oblíquo Exemplo: e {font-style: italic; } |
| font-variant | Exibe o texto em pequena caixa-alta (versalete) ou fonte normal | [ normal | small-caps ] | normal: fonte do elemento sem efeito de capitalização small-caps: fonte do elemento com efeito de pequena caixa alta (versalete) Exemplo: e {font-variant: small-caps; } |
| font-weight | Peso da fonte | [ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ] | normal: fonte do elemento com efeito padrão de peso (corresponde ao valor 400) bold: fonte do elemento com efeito de negrito (corresponde ao valor 700) bolder: fonte do elemento com o valor de peso imediatamente superior ao do valor herdado (p.ex: de 400 para 500) lighter: fonte do elemento com o valor de peso imediatamente inferior ao do valor herdado (p.ex: de 400 para 300) Exemplo: e {font-weight: bold; } |
| font-size | Tamanho da fonte | [ [ xx-small | x-small | small | medium | large | x-large | xx-large] | [larger | smaller] | | ] | medium: fonte do elemento com valor padrão de tamanho e equivalente ao padrão do browser. Os demais valores ( xx-small | x-small | small | large | x-large | xx-large) são calculados pelo browser considerando esse valor 'medium'. larger | smaller: aumenta ou diminui o tamanho em relação ao valor herdado. tamanho: valor absoluto. Não são permitidos valores negativos. porcentagem: porcentagem do tamanho do valor herdado. Exemplo: e {font-size: 90%; } |
| font | Atalho para definir de uma só vez todas as propriedades de fonte | [ [ [ || || ]? [ / ]? ] | caption | icon | menu | message-box | small-caption | status-bar ] | Além dos valores para as propriedades de estilo, variação, peso, tamanho, altura da linha e família, pode-se utilizar os seguintes, de acordo com o ambiente do usuário: caption: fonte utilizada por controles com legenda (ex.: botões, drop-downs, etc.) icon: fonte utilizada em ícones menu: fonte utilizada em menus do sistema (ex.: dropdown menus e menus suspensos) message-box: fonte utilizada em caixas de diálogo. small-caption: fonte utilizada em controles com legenda reduzida status-bar: fonte utiliza em barra de status das janelas Exemplo: e {font: 300 italic 1.3em/1.7em "Helvetica", sans-serif; } |
Obs.: Valores em negrito são os adotados como padrão
| text-indent | Recuo à esquerda da primeira linha em um bloco de texto | [ | ] | Exemplo: e {text-indent: 3em; } |
| text-align | Alinhamento do texto | [ left | right | center | justify ] | left: alinhamento do texto à esquerda right: alinhamento do texto à direita center: alinhamento do texto centralizado justify: alinhamento do texto justificado Exemplo: e {text-align: center; } |
| text-decoration | Efeitos decorativos no texto como sublinhado, tachado, linha acima e piscante | [ none | [ underline || overline || line-through || blink ] ] | none: não produz decoração no texto do elemento underline: cada linha de texto do elemento terá uma linha abaixo (sublinhado) overline: cada linha de texto do elemento terá uma linha acima line-through: cada linha de texto do elemento terá uma linha cortando-o ao meio (tachado) blink: textos piscantes alternadamente entre visíveis e não visíveis Exemplo: e {text-decoration: underline; } |
| letter-spacing | Espaçamento entre caracteres | [ normal | ] | Exemplo: e {letter-spacing: 0.1em; } |
| word-spacing | Espaçamento entre palavras | [ normal | ] | Exemplo: e {word-spacing: 1em; } |
| text-transform | Transforma o texto em maiúsculas/minúsculas | [ capitalize | uppercase | lowercase | none ] | capitalize: coloca o primeiro caracter de cada palavra do elemento em maiúsculas (caixa alta) uppercase: coloca todos os caracteres de cada palavra do elemento em maiúsculas (caixa alta) lowercase: coloca todos os caracteres de cada palavra do elemento em minúsculas (caixa baixa) none: não aplica efeitos de capitalização Exemplo: e {text-transform: capitalize; } |
| white-space | Definições sobre espaços em branco num determinado elemento | [ normal | pre | nowrap | pre-wrap | pre-line ] | normal: utiliza a configuração padrão do browser para espaçamentos em branco pre: todos os espaços em branco presentes no código fonte serão exibidos no elemento nowrap: os espaços em branco serão tratados como 'normal', mas as quebras de linha serão suprimidas pre-wrap: todos os espaços em branco contantes no código-fonte serão exibidos no elemento pre-line: os espaços em branco serão tratados como normal. Exemplo: e {white-space: pre; } |
Obs.: Valores em negrito são os adotados como padrão
| caption-side | Posicionamento do título em relação à tabela | [ top | bottom ] | top: Posicionamento do título antes da área da tabela bottom: Posicionamento do título abaixo da área da tabela Exemplo: e {caption-side: bottom; } |
| table-layout | Define o algoritmo usado para a renderização da tabela | [ auto | fixed ] | auto: utiliza algum algoritmo de leiaute automático. fixed: utiliza algoritmo de leiaute fixo. Exemplo: table {table-layout: fixed; } |
| border-collapse | Seleciona o modelo de bordas a ser utilizado | [ collapse | separate ] | separate: as bordas serão renderizadas para cada célula, dado a impressão de linha duplacollapse: as bordas das células serão mescladas, dando a impressão de uma única linha Exemplo: table {border-collapse: collapse; } |
| border-spacing | Distância entre as bordas de células adjacentes (quando 'border-collapse=separated') | ? | Exemplo: table {border-spacing: 15pt; } table {border-spacing: 10pt 5pt; } |
| empty-cells | Visibilidade das bordas de células sem conteúdo | [ show | hide ] | show: exibe as células vazias da tabela hide: não exibe as células vazias da tabela Exemplo: table {empty-cells: hide; } |
Obs.: Valores em negrito são os adotados como padrão
| cursor | Especifica o cursor | [ [http://.../cursor.ico,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] | Exemplo: e {cursor:help; } |
| outline-width | Largura da linha de contorno | Aceita os mesmos valores de 'border-width' Exemplo: e {outline-width: thin; } |
|
| outline-style | Estilo da linha de contorno | Aceita os mesmos valores de 'border-style' Exemplo: e {outline-style: dotted; } |
|
| outline-color | Cor da linha de contorno | [ | invert ] | color: valor correspondente a uma cor invert: cor inversa à área do elemento (prática comum para tornar o 'focus' visível) Exemplo: e {outline-color: #f00; } |
| outline | Atalho para definir de uma só vez todas as propriedades de outline | [ || || ] | Exemplo: active {outline: black dotted thick; } |
| speak-header | (Aural) Freqüência em que os 'headers' da tabela serão pronunciados. Utilizado quando 'media=speech' | [ once | always ] | once: Os títulos de tabelas serão 'falados' uma vez, antes da série de células always: Os títulos de tabelas serão 'falados' sempre que ocorrer uma célula pertinente Exemplo: e {speak-header: always; } |
Obs.: Valores em negrito são os adotados como padrão
joker gaming ถือเป็นเกมเดิมพันออนไลน์ joker โปร ที่ได้รับความนิยมมากที่สุด ณ เวลานี้ เป็นหนึ่งในเกมออนไลน์ reeffutures2018 ที่เป็นที่สนใจของนักลงทุน ในเกมพนันมากมาย เป็นเกม xopg.net ที่เล่นได้ง่าย mavoixtavoie ไม่จำเป็นที่จะต้องลงทุนเยอะ สมัคร joker ก็สามารถเล่นสล็อตออนไลน์ได้ essentialsforasoul สามารถสร้างกำไรได้ เพียงแค่ทำการกดสปินเท่านั้น herbalpertpresents ก็มีโอกาสที่จะได้รับรางวัลใหญ่อยู่เสมอ เทคนิคสล็อต และไม่จำเป็นต้องใช้ความคิดที่มากมายอะไร gclub ก็สามารถร่วมสนุก slot joker ในการเล่นเกมสล็อตออนไลน์ northbristol
