Forums » CGI & CSS

Guia de Comandos Rápidos - CSS 2.1

  • Oliveira Dario
    • 439 posts
    29 de novembro de 2018 09:49:43 ART

     

    Guia de Comandos Rápidos - CSS 2.1

    Seletores

      Padrão Significado Exemplo CSS Exemplo (X)HTML
    * 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 {
    content: close-quote;
    }

    ...

    Notação

      Padrão Descrição
    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

    Tipos de mídia

      Nome Mídia
    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)
    print 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

    Sintaxe

     
    @import "folha.css" tipo-midia;
    /* Comentários */
    @media tipo-midia {
    seletor {
    Propriedade: valor(es);
    }
    };

    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 cores

      Unidade Descrição
    #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)

    Modelo de caixa

    Modelo de caixa CSS

    Bordas

      Propriedade Descrição Valores Descrição
    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:
    Todas as bordas com espessura 'thin':
    e {border-width: thin;}

    Bordas superior e inferior com espessura 'thin', bordas direita e esquerda com espessura 'thick':
    e {border-width: thin thick;}

    Borda superior com espessura 'thin', bordas direita e esquerda com espessura 'thick', borda inferior com espessura 'medium':
    e {border-width: thin thick medium;}

    Borda superior com espessura 'thin', borda direita com espessura 'thick', borda inferior com espessura 'medium', borda esquerda com espessura 'thin':
    e {border-width: thin thick medium 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:
    e {border-top-color: black; }

    border-color Atalho para definir de uma só vez cores de bordas para todos os lados [ | transparent ] {1,4}

    Exemplos:
    Todas as bordas com a cor 'black':
    e {border-color: black;}

    Bordas superior e inferior com a cor 'black', bordas direita e esquerda com a cor 'silver':
    e {border-color: black silver;}

    Borda superior com a cor 'black', bordas direita e esquerda com a cor 'silver', borda inferior com a cor 'gray':
    e {border-color: black silver 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':
    e {border-color: black silver gray 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)
    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 simples e contínua
    double: Duas linhas 'solid'. A soma das duas linhas e o espaço entre elas é igual ao valor definido em 'border-width'
    groove: Efeito 3D, entalhada
    ridge: Efeito 3D, oposto de 'groove': ressaltada
    inset: Efeito 3D, baixo relevo
    outset: Efeito 3D, alto relevo

    Exemplo:
    e {border-left-style: 
    dotted; }

    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

    Margens

      Propriedade Descrição Valores Descriçã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:
    Todas as margens com 2em:
    body {margin: 2em }

    Margem superior e inferior com 1em, esquerda e direita com 2em:
    body {margin: 1em 2em }

    Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em:
    body {margin: 1em 2em 3em }

    Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em:
    body {margin: 1em 2em 3em 4em }

    Espaçamento

      Propriedade Descrição Valores Descrição
    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:
    Todas as margens com 2em:
    body {padding: 2em }

    Margem superior e inferior com 1em, esquerda e direita com 2em:
    body {padding: 1em 2em }

    Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em:
    body {padding: 1em 2em 3em }

    Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em:
    body {padding: 1em 2em 3em 4em }

    Modelo de formtação visual

      Propriedade Descrição Valores Descrição / Exemplos
    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
    relative: posicionamento é calculado de acordo com o fluxo normal. O efeito de 'position:relative' é indefinido nos elementos 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', e 'table-caption'
    absolute: Posicionamento (e 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:
    @media screen {
    e#exemplo {position: fixed; }}
    @media print {
    e#exemplo {position: static;}}

    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
    right: Distância horizontal em relação à margem direita
    bottom: Distância vertical em relação à margem inferior
    left: Distância horizontal em relação à margem esquerda

    Exemplo:
    e { top: 20px; left: 40px;}

    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'
    right: similar à 'left', mas com o elemento flutuando à direita
    none: o elemento não flutua

    Exemplo:
    e {float: right;}

    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.
    ltr - direção da esquerda para a direita
    rtl - direção da direita para a esquerda

    Exemplo:
    e {direction: rtl;}

    Para que a direção tenha o efeito atribuído, a propriedade 'unicode-bidi' deve conter os valores 'embed' ou 
    'bidi-override'

    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

    Detalhes do modelo de formatação visual

      Propriedade Descrição Valores Descrição / Exemplos
    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

    Efeitos visuais

      Propriedade Descrição Valores Descrição / Exemplos
    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

    Agregador de conteúdo, numeração automática e listas

      Propriedade Descrição Valores Descrição / Exemplos
    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
    circle - círculo vazio
    square - quadrado vazio
    decimal - números decimas, iniciando com 1
    decimal-leading-zero - números decimais com zeros iniciais à esquerda (ex.: 01, 02, 03, ..., 98, 99)
    lower-roman - números romanos minúsculos (i, ii, iii, iv, v, etc.). 
    upper-roman - números romanos maiúsculos (I, II, III, IV, V, etc.)
    georgian - numeração georgeana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...)
    armenian - numeração armênia tradicional
    lower-latin | lower-alpha - letras ascii minúsculas (a, b, c, ... z)
    upper-latin | upper-alpha - letras ascii maiúsculas (A, B, C, ... Z)
    lower-greek - caracteres gregos clássicos alpha, beta, gama, ... (α, β, γ, …)
    none – nenhum marcador de lista

    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

    Cores e Fundo

      Propriedade Descrição Valores Descrição / Exemplos
    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
    right: Equivalente a '100%' do posicionamento horizontal
    bottom: Equivalente a '100%' do posicionamento vertical
    left: Equivalente a '0%' do posicionamento horizontal.
    center: Equivalente a '50%' do posicionamento horizontal ou '50%' do posicionamento vertical

    Exemplo:
    body {background-position: right top; }
    body {background-position: 100% 0; }

    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

    Paginação para impressão

      Propriedade Descrição Valores Descrição / Exemplos
    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

    Fontes tipográficas

      Propriedade Descrição Valores Descrição / Exemplos
    font-family Família(s) de fontes [ [ | ] [, | ]* ] As seguintes famílias-genéricas de fontes são definidas em CSS2.1:
    • 'serif'
    • 'sans-serif'
    • 'cursive'
    • 'fantasy'
    • 'monospace'
    Exemplo: e {font-family: "New Century Schoolbook", serif; }
    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

    Texto

      Propriedade Descrição Valores Descrição / Exemplos
    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

    Tabelas

      Propriedade Descrição Valores Descrição / Exemplos
    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

    Interface de usuário

      Propriedade Descrição Valores Descrição / Exemplos
    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