![tableless.com.br Referência rápida de CSS
Sintaxe Modelos de Caixa Para caixas
Sintaxe height height; width; background
seletor {propriedade: valor;} margin-top; border
margin-right; border-bottom
CSS Externo border-left
width margin-bottom;
<link rel=”stylesheet” type=”text/css” border-right
margin-left;
href=”arquivo.css” /> border-top
padding-top;
CSS Interno padding-right; font
<style type=”text/css”> padding-bottom; list-style
border margin
seletor {propriedade: valor;} padding-left;
margin padding padding
</style>
CSS em linha Border Comentário
<tag style=”propriedade: valor;”> /* Comentário */
border-width Largura da borda
border-style dashed; dotted; double; groove; inset; Pseudo
Uso Geral outset; ridge; solid; none; Selectors
class Termo precedido por um ponto . border-color Cor da borda
:hover
ID Termo precedido por um # :active
Position :focus
div Elemento para dividir o layout
clear O elemento ignora o float de outros elementos :link
span Formatação em linha
both, left, right, none :visited
color Cor do texto
O elemento flutua para a esquerda ou direita
cursor Muda o cursos do mouse left, right, none
display block; inline; list-item; none left Desloca o elemento pela esquerda Media Types
Quando o conteúdo transborda auto, length values [pt, in, cm, px] all
do elemento. top Desloca o elemento pelo topo braille
visible, hidden, scroll, auto auto, length values [pt, in, cm, px] embossed
visibility visible, hidden position static, relative, absolute handheld
print
z-index Muda os elementos de camada projection
Para fontes auto, integer [higher numbers on top] screen
font-style italic, normal speech
font- normal, small-caps Background tty
variant background-color Muda a cor do background tv
font- bold, normal, lighter, bolder, background-image Define uma imagem de background Unidades
weight integer [100-900]
background-repeat repeat, no-repeat, repeat-x, repeat-y Numerais
font-size Tamanho da font background- Define se o background rola c/ a página %
attachment em
font-family Especifica a família da font
pt
background- (x y), top, center, bottom, left, right px
Para caixas de texto position
Keywords
letter-spacing Espaçamento entre as letras bolder
line-height Altura da entrelinha List lighter
text-align Alinhamento horizontal do texto list-style- Muda o tipo de bullet dos ítens de lista (li) larger
text- blink, line-through, none, type disc; circle; square; decimal; lower-roman; normal
decoration overline, underline upper-roman; lower-alpha; upper-alpha; none
text-indent Identação do texto Muda a posição do bullet
list-style- position
text- inside; outside
capitalise, lowercase, uppercase
transform list-style-style Define uma imagem como bullet
vertical-align Alinhamento vertical
word-spacing Espaço entre as palavras
Seletores
Propriedades herdadas
azimuth line-height * Define propriedade para TODOS os elementos
border-collapse list-style <tag> Define para todas as tags especificadas
border-spancing page tag * TUDO dentro da tag receberá as características
caption-side quotes tag tag Elemento dentro de elemento (EX: div span)
color speak tag, tag Agrupa vários elementos para a mesma caracteristica
cursor text-align EX: div, p, h1, h2, h3
direction text-indent tag > tag Seleciona elemento que é filho direto de outro.
empty-cells text-transform EX: div > span
font word-spacing tag + tag Seleciona todo elemento que é precedido por outro
letter-spacing white-space EX: div + p
.nome Todos elementos com a classe determinada
#nome Todos elementos com a identificação determinada
Versão original em ingles por: tag#nome Especifica elemento com classe ou identificação
tag.nome determinada
liquidicity
tag[atributo] Seleciona tag com determinado atributo
Seleciona tag com atributo com um
tag[atributo=”valor”] valor especifico
Especifica o valor de uma tag que
tag[atributo~=”valor”] tenha um atributo com diversos
valores separados com espaços.](https://image.slidesharecdn.com/referenciacss-110712204114-phpapp02/85/Referencia-CSS-1-320.jpg)
Referencia CSS
- 1. tableless.com.br Referência rápida de CSS Sintaxe Modelos de Caixa Para caixas Sintaxe height height; width; background seletor {propriedade: valor;} margin-top; border margin-right; border-bottom CSS Externo border-left width margin-bottom; <link rel=”stylesheet” type=”text/css” border-right margin-left; href=”arquivo.css” /> border-top padding-top; CSS Interno padding-right; font <style type=”text/css”> padding-bottom; list-style border margin seletor {propriedade: valor;} padding-left; margin padding padding </style> CSS em linha Border Comentário <tag style=”propriedade: valor;”> /* Comentário */ border-width Largura da borda border-style dashed; dotted; double; groove; inset; Pseudo Uso Geral outset; ridge; solid; none; Selectors class Termo precedido por um ponto . border-color Cor da borda :hover ID Termo precedido por um # :active Position :focus div Elemento para dividir o layout clear O elemento ignora o float de outros elementos :link span Formatação em linha both, left, right, none :visited color Cor do texto O elemento flutua para a esquerda ou direita cursor Muda o cursos do mouse left, right, none display block; inline; list-item; none left Desloca o elemento pela esquerda Media Types Quando o conteúdo transborda auto, length values [pt, in, cm, px] all do elemento. top Desloca o elemento pelo topo braille visible, hidden, scroll, auto auto, length values [pt, in, cm, px] embossed visibility visible, hidden position static, relative, absolute handheld print z-index Muda os elementos de camada projection Para fontes auto, integer [higher numbers on top] screen font-style italic, normal speech font- normal, small-caps Background tty variant background-color Muda a cor do background tv font- bold, normal, lighter, bolder, background-image Define uma imagem de background Unidades weight integer [100-900] background-repeat repeat, no-repeat, repeat-x, repeat-y Numerais font-size Tamanho da font background- Define se o background rola c/ a página % attachment em font-family Especifica a família da font pt background- (x y), top, center, bottom, left, right px Para caixas de texto position Keywords letter-spacing Espaçamento entre as letras bolder line-height Altura da entrelinha List lighter text-align Alinhamento horizontal do texto list-style- Muda o tipo de bullet dos ítens de lista (li) larger text- blink, line-through, none, type disc; circle; square; decimal; lower-roman; normal decoration overline, underline upper-roman; lower-alpha; upper-alpha; none text-indent Identação do texto Muda a posição do bullet list-style- position text- inside; outside capitalise, lowercase, uppercase transform list-style-style Define uma imagem como bullet vertical-align Alinhamento vertical word-spacing Espaço entre as palavras Seletores Propriedades herdadas azimuth line-height * Define propriedade para TODOS os elementos border-collapse list-style <tag> Define para todas as tags especificadas border-spancing page tag * TUDO dentro da tag receberá as características caption-side quotes tag tag Elemento dentro de elemento (EX: div span) color speak tag, tag Agrupa vários elementos para a mesma caracteristica cursor text-align EX: div, p, h1, h2, h3 direction text-indent tag > tag Seleciona elemento que é filho direto de outro. empty-cells text-transform EX: div > span font word-spacing tag + tag Seleciona todo elemento que é precedido por outro letter-spacing white-space EX: div + p .nome Todos elementos com a classe determinada #nome Todos elementos com a identificação determinada Versão original em ingles por: tag#nome Especifica elemento com classe ou identificação tag.nome determinada liquidicity tag[atributo] Seleciona tag com determinado atributo Seleciona tag com atributo com um tag[atributo=”valor”] valor especifico Especifica o valor de uma tag que tag[atributo~=”valor”] tenha um atributo com diversos valores separados com espaços.