Translate to English Translate to Spanish Translate to French Translate to German Translate to Italian Translate to Russian Translate to Chinese Translate to Japanese

Rating: 1.7/5 (56 votos)



ONLINE
5










CSS

CSS

 
 
Módulo de fontes tipográficas
PropriedadeDescriçãoValoresDescrição / Exemplos
font-family Família(s) de fontes [ [ <nome-fonte> | <família-genérica> ] [, <nome-fonte> | <família-genérica> ]* ] As seguintes famílias-genéricas de fontes são definidas em CSS:
  • 'Arial'
  • 'Sans-Serif'
  • 'Verdana'
  • 'Helvetica'
  • 'Geneva'
Exemplo: e {font-family: Verdana, Arial, Helvetica, sans-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] | <tamanho> | <porcentagem> ] 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 [ [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | 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; }

 

Módulo de texto
PropriedadeDescriçãoValoresDescrição / Exemplos
text-indent Recuo à esquerda da primeira linha em um bloco de texto [ <tamanho> | <porcentagem> ] 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 | <tamanho> ] Exemplo:
e {letter-spacing: 0.1em; }
word-spacing Espaçamento entre palavras [ normal | <tamanho> ] 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; }

 

Módulo de detalhes do modelo de formatação visual
PropriedadeDescriçãoValoresDescrição / Exemplos
width Largura [ <tamanho> | <porcentagem> | auto ] Exemplo:
e {width: 25%;}
min-width Largura mínima [ <tamanho> | <porcentagem>] Exemplo:
e {min-width: 200px;}
max-width Largura máxima [ <tamanho> | <porcentagem> | none ] Exemplo:
e {max-width: 600px;}
height Altura [ <tamanho> | <porcentagem> | auto ] Exemplo:
e {height: 250px;}
min-height Altura mínima [ <tamanho> | <porcentagem>] Exemplo:
e {min-height: 30%;}
max-height Altura máxima [ <tamanho> | <porcentagem> | none ] Exemplo:
e {max-height: 70%;}
line-height Distância entre as linhas de um texto [ normal | <número> | <tamanho> | <porcentagem> ] Exemplo:
e {line-height: 1.2em;}
vertical-align Alinhamento vertical do texto [ baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentagem> | <tamanho> ] 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;}

 

Módulo de cores e fundo
PropriedadeDescriçãoValoresDescrição / Exemplos
color Cor do texto presente no elemento <color> Exemplo:
e {color: red; }
e {color: rgb(255,0,0); }
background-color Cor de fundo do elemento [ <color> | 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(https://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. [ [ <porcentagem> | <tamanho> | left | center | right ] [ <porcentagem> | <tamanho> | 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 [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] Exemplo:
e {background: red url("chess.png")
repeat-x fixed 50% right; }

 

Módulo de Bordas
PropriedadeDescriçãoValoresDescriçã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 | <tamanho> ] 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 | <tamanho> ] {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 [ <color> | transparent ]

Exemplo:
e {border-top-color: black; }
border-color Atalho para definir de uma só vez cores de bordas para todos os lados [ <color> | 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 [ <border-top-width> || <border-top-style> || <border-top-color> ] Exemplo:
e {border-bottom: thick solid red;}
border Atalho para largura, estilo e cor das quatro bordas [ <border-top-width> || <border-top-style> || <border-top-color> ] Exemplo:
e {border: thick solid red;}

 

Módulo de espaçamento
PropriedadeDescriçãoValoresDescriçã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 [ <tamanho> | <porcentagem> ] Exemplo:
body {padding-top: 2em }
padding Atalho para definir de uma só vez a distância de espaçamento para todos os lados [ <tamanho> | <porcentagem> ]{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 }

 

Módulo de margens
PropriedadeDescriçãoValoresDescrição
margin-top
margin-right
margin-bottom
margin-left		 Tamaho da margem para cada um dos lados: superior, direito, inferior e esquerdo [ <tamanho> | <porcentagem> | auto ] Exemplo:
body {margin-top: 2em }
margin Atalho para definir de uma só vez o tamanho da margem para todos os lados [ <tamanho> | <porcentagem> | 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 }

 

Módulo de formatação visual
PropriedadeDescriçãoValoresDescriçã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 [ <tamanho> | <porcentagem> | 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 | <número inteiro> ] 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