Latest web development tutorials
×

CSS manual de referência

CSS manual de referência CSS seletor CSS Referência discurso CSS Web fontes seguras CSS animação CSS unidade CSS cor CSS valores de cor legais CSS nomes de cores CSS valores de cor hexadecimais CSS Suporte a navegadores

CSS propriedade

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function appearance backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-align box-direction box-flex box-flex-group box-lines box-ordinal-group box-orient box-pack box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight grid-columns grid-rows hanging-punctuation height icon justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position punctuation-trim quotes resize right rotation tab-size table-layout target target-name target-new target-position text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-outline text-overflow text-shadow text-transform text-wrap top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

Referência CSS

nota Este tutorial CSS Referência em todos os principais navegadores testados.


propriedades CSS

CSS Property Group:

coluna "CSS" indica em qual versão CSS a propriedade é definida (CSS1, CSS2 ou CSS3).

propriedades de animação

属性 描述 CSS
@keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 3
animation 复合属性。检索或设置对象所应用的动画特效。 3
animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 3
animation-duration 检索或设置对象动画的持续时间 3
animation-timing-function 检索或设置对象动画的过渡类型 3
animation-delay 检索或设置对象动画的延迟时间 3
animation-iteration-count 检索或设置对象动画的循环次数 3
animation-direction 检索或设置对象动画在循环中是否反向运动 3
animation-play-state 检索或设置对象动画的状态 3

Propriedades do fundo

属性 描述 CSS
background 复合属性。设置对象的背景特性。 1
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 1
background-color 设置或检索对象的背景颜色。 1
background-image 设置或检索对象的背景图像。 1
background-position 设置或检索对象的背景图像位置。必须先指定background-image属性。 1
background-repeat 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 1
background-clip 指定对象的背景图像向外裁剪的区域。 3
background-origin S设置或检索对象的背景图像计算background-position时的参考原点(位置)。 3
background-size 检索或设置对象的背景图像的尺寸大小。 3

Fronteira (Border) e esboço (Contorno) Propriedade

属性 描述 CSS
border 复合属性。设置对象边框的特性。 1
border-bottom 复合属性。设置对象底部边框的特性。 1
border-bottom-color 设置或检索对象的底部边框颜色。 1
border-bottom-style 设置或检索对象的底部边框样式。 1
border-bottom-width 设置或检索对象的底部边框宽度。 1
border-color 置或检索对象的边框颜色。 1
border-left 复合属性。设置对象左边边框的特性。 1
border-left-color 设置或检索对象的左边边框颜色。 1
border-left-style 设置或检索对象的左边边框样式。 1
border-left-width 设置或检索对象的左边边框宽度。 1
border-right 复合属性。设置对象右边边框的特性。 1
border-right-color 设置或检索对象的右边边框颜色。 1
border-right-style 设置或检索对象的右边边框样式。 1
border-right-width 设置或检索对象的右边边框宽度。 1
border-style 设置或检索对象的边框样式。 1
border-top 复合属性。设置对象顶部边框的特性。 1
border-top-color 设置或检索对象的顶部边框颜色 1
border-top-style 设置或检索对象的顶部边框样式。 1
border-top-width 设置或检索对象的顶部边框宽度。 1
border-width 设置或检索对象的边框宽度。 1
outline 复合属性。设置或检索对象外的线条轮廓。 2
outline-color 设置或检索对象外的线条轮廓的颜色。 2
outline-style 设置或检索对象外的线条轮廓的样式。 2
outline-width 设置或检索对象外的线条轮廓的宽度。 2
border-bottom-left-radius 设置或检索对象的左下角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数 3
border-bottom-right-radius 设置或检索对象的右下角圆角边框。 3
border-image 设置或检索对象的边框样式使用图像来填充。 3
border-image-outset 规定边框图像超过边框的量。 3
border-image-repeat 规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。 3
border-image-slice 规定图像边框的向内偏移。 3
border-image-source 规定要使用的图像,代替 border-style 属性中设置的边框样式。 3
border-image-width 规定图像边框的宽度。 3
border-radius 设置或检索对象使用圆角边框。 3
border-top-left-radius 定义左上角边框的形状。 3
border-top-right-radius 定义右下角边框的形状。 3
box-decoration-break 规定行内元素被折行 3
box-shadow 向方框添加一个或多个阴影。 3

Box (Box) Propriedade

属性 描述 CSS
overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 3
overflow-y 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 3
overflow-style 规定溢出元素的首选滚动方法。 3
rotation 围绕由 rotation-point 属性定义的点对元素进行旋转。 3
rotation-point 定义距离上左边框边缘的偏移点。 3

Cor propriedades (Color)

属性 描述 CSS
color-profile 允许使用源的颜色配置文件的默认以外的规范 3
opacity 设置一个元素的透明度级别 3
rendering-intent 允许超过默认颜色配置文件渲染意向的其他规范 3

Preenchimento (Padding) Propriedade

propriedade explicação CSS
acolchoamento Defina todas as propriedades de preenchimento em uma declaração 1
padding-bottom Defina o elemento de preenchimento de fundo 1
padding-left O elemento do padding-left 1
padding-right Elemento é definir o preenchimento direita 1
padding-top Configurações na parte superior elementos para preencher 1

Mídia conteúdo da página Propriedades

属性 说明 CSS
bookmark-label 指定书签的标签 3
bookmark-level 指定了书签级别 3
bookmark-target 指定了书签链接的目标 3
float-offset 在相反的方向推动浮动元素,他们一直具有浮动 3
hyphenate-after 指定一个断字的单词断字字符后的最少字符数 3
hyphenate-before 指定一个断字的单词断字字符前的最少字符数 3
hyphenate-character 指定了当一个断字发生时,要显示的字符串 3
hyphenate-lines 表示连续断字的行在元素的最大数目 3
hyphenate-resource 外部资源指定一个逗号分隔的列表,可以帮助确定浏览器的断字点 3
hyphens 设置如何分割单词以改善该段的布局 3
image-resolution 指定了正确的图像分辨率 3
marks 将crop and/or cross标志添加到文档 3
string-set   3

Size (Dimensão) propriedade

属性 描述 CSS
height 设置元素的高度 1
max-height 设置元素的最大高度 2
max-width 设置元素的最大宽度 2
min-height 设置元素的最小高度 2
min-width 设置元素的最小宽度 2
width 设置元素的宽度 1

Box Modelo Flexível (Flexible Box) Propriedade (novo)

属性 说明 CSS
flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 3
flex-grow 设置或检索弹性盒的扩展比率。 3
flex-shrink 设置或检索弹性盒的收缩比率。 3
flex-basis 设置或检索弹性盒伸缩基准值。 3
flex-flow 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 3
flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。 3
flex-wrap 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。 3
align-content 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。 3
align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 3
align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 3
justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 3
order 设置或检索弹性盒模型对象的子元素出现的順序。 3

Box Modelo Flexível (Flexible Box) Propriedade (old)

propriedade explicação CSS
box-align Especifica como alinhar um bloco de sub-elementos 3
caixa de direção Em que direção for especificado, ele exibe um elemento de caixa de criança 3
box-flex Especificar se uma caixa de sub-elementos são de tamanho flexível ou fixa 3
box-flex-grupo elementos de flexibilidade incluídos no Grupo Flex 3
box-linhas Sempre que é executado no espaço do quadro pai quando um ainda especificar se uma nova linha 3
box-ordinal-group A ordem de sub-elementos quadro de mostrar 3
box-orient Especifica se uma caixa de um elemento filho na direção horizontal ou vertical devem ser estabelecidas 3
box-pack Especifica a caixa lateral, em posição horizontal e a posição vertical da armação verticais 3

Fonte (Font) Propriedade

propriedade explicação CSS
fonte Defina todas as propriedades de fonte em uma declaração 1
font-family As disposições da família de fontes de texto 1
font-size As disposições do tamanho do texto 1
font-style texto estilos de fonte especificados 1
font-variant texto estilos de fonte especificados 1
font-weight espessura da fonte prescrita 1
@ Font-face Uma regra que permite que o site para baixar e usar diferente de "Web-seguro" para o tipo de letra 3
font-size-adjust O valor elementos aspecto predeterminado 3
font-stretch Encolher ou esticar a família da fonte atual 3

atribua a geração de conteúdo (Gerado propriedades de conteúdo)

propriedade explicação CSS
conteúdo Com: before e: conteúdo após pseudo-elemento usado em conjunto com insert gerado 2
counter-increment Aumentar ou diminuir um ou mais contadores 2
counter-reset Criar um ou mais contadores ou redefinir 2
citações Jogo das citações tipos referenciados aninhados 2
colheita Permitir elementos substituídos apenas como um objeto em vez de a área retangular do objeto inteiro 3
move-to Faz com que um elemento a ser removido a partir do fluxo e reinserida num ponto mais adiante no documento 3
page-política String valor é determinado com base na página para aplicar a um determinado elemento no contador 3

Grid (grade) Propriedade

propriedade explicação CSS
grade-colunas Especifica a largura de cada coluna na grade 3
grade-fileiras Especifica a altura de cada coluna na grade 3

Hiperligação propriedades (hiperlink)

propriedade explicação CSS
alvo propriedade estenográfica para definir meta-name, alvo-novo, ea propriedade de posição do alvo 3
meta-name Especifica para abrir o link (destino), onde 3
target-novo Especifica se um novo link de destino se abre uma nova janela ou abrir uma nova guia em uma janela existente 3
-alvo posição- Especificar os novos links de destino deve ser colocado na posição 3

Wireframe (Linebox) Propriedade

propriedade explicação CSS
Alinhamento de ajuste Permite o alinhamento mais preciso de elementos 3
-alinhamento da linha de base Seu nível de linha especificado elemento pai como alinhar 3
baseline-shift Permite reposicionamento da dominante-base em relação ao dominante-baseline 3
dominante-baseline Especifica a linha de base da tabela escalado 3
drop-initial-after-ajuste Defina o ponto de conexão primária suspenso ponto de alinhamento inicial 3
drop-initial-após-align Definir a linha de calibração, com a linha inicial é que ele tem a primeira letra da caixa utilizando o ponto de conexão primária 3
drop-initial-antes-ajuste Configurações suspensa auxiliar ponto de conexão ponto de alinhamento inicial 3
drop-initial-antes-align Definir a linha de calibração, com a linha inicial é que ele tem a primeira letra da caixa de junção auxiliar 3
drop-inicial-size A primeira letra do controle da subsidência locais 3
drop-inicial de valor Ativar um drop-down resultados iniciais 3
inline-box-align Configurar uma fileira de blocos em linha multi-linha com frente alinhados e próximos elementos inline 3
line-empilhamento Uma linha-empilhamento-estratégia de conjunto, line-empilhar-rubi, e line-empilhar-shift atribuir propriedade estenográfica 3
line-empilhamento-ruby Define o método de empilhamento linha para elementos de bloco contendo elementos de anotação de Ruby 3
line-empilhamento-shift Definir linha de base-shift contendo bloco elemento método dos elementos empilhados 3
-Estratégia de empilhamento linha Empilhar conjuntos de métodos contidos nos elementos de bloco do quadro de pilha 3
text-altura dimensão definida bloco de progressão caixa em linha área de texto 3

List (Lista) Propriedade

propriedade explicação CSS
list-style Definir uma lista de todas as propriedades em uma declaração 1
list-style-image A imagem como um marcador de lista 1
list-style-position Set list colocação item de marcador 1
list-style-type Defina o tipo de marcador de lista 1

Margin (Margem) Propriedade

propriedade explicação CSS
margem Defina todas as propriedades de margem em uma declaração 1
margin-bottom Elemento é definido margem inferior 1
margin-left O elemento na margem esquerda 1
margin-right O elemento da margem direita 1
margin-top Elemento é definido na margem 1

Legendas (Marquee) Propriedade

propriedade explicação CSS
marquise direção Definir a direção de conteúdo em movimento 3
marquise-play-count Quantas vezes criaram conteúdos para celular 3
marquise velocidades Definir o conteúdo de rolagem quão rápido 3
-Estilo do famoso conteúdos para celular Styling 3

Várias colunas (Multi-coluna) propriedade

propriedade explicação CSS
coluna de contagem O número de colunas elemento especificado deve ser dividido em 3
coluna de enchimento Especifica como preencher colunas 3
column-gap Especificado lacuna entre as colunas 3
coluna da regra Tudo pronto para propriedade estenográfica coluna rule- propriedades * 3
coluna da regra-color Especificar regras de cor entre colunas 3
coluna da regra de estilo regra de estilo especifica entre as colunas 3
coluna da regra de largura Especifica a largura da regra entre as colunas 3
coluna-span Quantas colunas elemento especificado deve abrangem 3
coluna de largura Especifica a largura das colunas 3
colunas propriedade estenográfica para definir o número de colunas e largura da coluna 3

Página de mídia (Paged mídia) Propriedade

propriedade perder CSS
caber Se a largura e altura atributos não são auto dá uma dica de como enorme elementos substituídos 3
ajuste da posição Determinando o alinhamento do objecto dentro da caixa 3
image-orientação Especifica o usuário-agente adequado para a direita ou girar a imagem 3
página Especificar um determinado tipo de elemento deve exibir uma página 3
tamanho Especificar o conteúdo da página que contém o tamanho da caixa e da orientação 3

Posicionamento (posicionamento) Propriedade

propriedade explicação CSS
fundo bloco de deslocamento na fronteira entre as definições de margens mais baixas segmentação elementos compreendendo sua fronteira 2
claro Qual lado do elemento predeterminado impede que outros elementos flutuantes 1
clipe Corte elementos posicionados absolutamente 2
cursor disposições tipo de cursor para ser exibida (forma) 2
display Tipo especifica os elementos de caixa para ser gerados 1
flutuador São as disposições da caixa deve flutuar 1
esquerda Definição de segmentação elementos que compõem a sua fronteira esquerda margem de deslocamento entre a borda esquerda do bloco 2
transbordamento
O que acontece quando o conteúdo das disposições do elemento de caixa de transbordamento 2
posição Tipo de localização especifica os elementos 2
direito Definir os elementos de posicionamento margem direita contendo uma fronteira bloco de deslocamento e sua fronteira certo entre 2
topo Definir a segmentação elementos contidos na fronteira e as suas compensações margem entre o limite do bloco 2
visibilidade São as disposições de elementos visíveis 2
z-index Definir a ordem de empilhamento dos elementos 2

Paginação (Print) Propriedade

propriedade explicação CSS
órfãos número mínimo de linhas ocorre quando os elementos internos devem ser guia retido no fundo da página 2
page-break-after aba Configurações de elementos comportamentais após 2
-Page-break antes aba Configurações de elementos comportamentais antes 2
page-break-inside O elemento interior da guia comportamento 2
viúvas número mínimo de linhas ocorre quando os elementos internos devem ser aba retida no topo da página 2

Propriedades de rubi

propriedade explicação CSS
ruby-align Ruby e Ruby controle de texto baseado em texto do conteúdo de alinhamento em relação ao outro 3
ruby-overhang Quando o texto ultrapassa base de Rubi Rubi largura, determinar montar o local de qualquer texto texto ruby ​​adjacente é permitido, além de sua base 3
ruby-position Sempre que controla o texto base do rubi 3
ruby-span O controle sobre o comportamento de elementos de anotação 3

Speech (Speech) Propriedade

propriedade explicação CSS
marca Set marcação antes e marcação depois de atribuir propriedades abreviadas 3
mark-depois Permitir marcas nomeados para o fluxo de áudio 3
mark-antes Permitir marcas nomeados para o fluxo de áudio 3
fonemas Especifica que contém o texto do elemento correspondente de uma pronúncia fonética 3
descanso Definir um descanso, antes e descansar-after atribuem propriedades abreviadas 3
rest-depois Um elemento de conteúdo após a chegada, designado para fazer uma pausa ou cumprir com os limites prosódica 3
rest-antes Um elemento de conteúdo antes da chegada, designado para fazer uma pausa ou cumprir com os limites prosódica 3
voice-equilíbrio equilíbrio especificado os canais esquerdo e direito 3
voice-duração Especificar os conteúdos do elemento seleccionado deve ser tomado para tornar o comprimento do 3
voice-campo Especifica o tom de voz média (frequência) 3
voz-pitch-range Especifica a variação média relvado 3
-Rate voz controle de velocidade 3
voz-stress esforços que indicam se concentrar 3
voice-volumes Síntese de voz significa que a amplitude da forma de onda de saída 3

Table (Tabela) Propriedade

propriedade explicação CSS
border-collapse Especifica se a fusão borda da tabela 2
border-spacing A distância predeterminada entre bordas das células adjacentes 2
caption-side localização predeterminada da mesa de título 2
empty-cells Especifica se deve exibir bordas e mesas de fundo nas células vazias no 2
table-disposição Definir algoritmo de layout para as tabelas 2

Texto (Text) propriedade

propriedade explicação CSS
cor Defina a cor do texto 1
direção Texto direcção predeterminada / escrita direcção 2
letter-spacing espaçamento entre caracteres Configuração 1
line-height Definir a altura da linha 1
text-align O alinhamento horizontal das disposições do texto 1
text-decoration Provisão adicionado ao texto do efeito decorativo 1
text-indent As disposições do bloco de texto travessão da primeira linha 1
text-transform controles sensíveis para o texto 1
unicode-bidi 2
vertical-align O alinhamento vertical do elemento 1
white-space Como para definir um elemento de controlo em branco 1
word-spacing configurações de espaçamento entre as palavras 1
pendurando-punctuation Especifica se um sinal de pontuação pode ser além da caixa de linha 3
pontuação-trim Especifica se para remover um sinal de pontuação 3
text-align-last Quando text-align está definido para justificar, o último traçado da linha. 3
text-justificar forma descentralizada alinhamento prescrito quando text-align está definido para justificar o tempo. 3
text-esboço Defina o texto do esboço. 3
text-estouro Elemento especifica quando o texto ultrapassa incluídos, o que deve acontecer 3
text-shadow Adicionar uma sombra ao texto 3
text-wrap Regras especificam texto em contorno 3
palavra-break Especifica regras de quebra de linha para CJK não textual 3
word-wrap Se definir o navegador para ser muito tempo uma palavra envoltório. 3

2D / 3D transformar propriedades

propriedade explicação CSS
transformar Aplicar 2D ou 3D elemento de conversão 3
transform-origin Ele permite que você mude a posição do elemento de conversão 3
transformar-style Espaço 3D especificar elementos como aninhados 3
perspectiva Ver como especificar o elemento 3D é uma vista em perspectiva 3
perspectiva de origem elementos 3D especificar a posição de fundo 3
backface visibilidade Se a definição de um elemento deverá ser visível, não em frente da tela 3

Transição (Transition) Propriedade

propriedade explicação CSS
transição Esta propriedade é uma transição da propriedade, de transição de duração,-timing-função de transição, transição de atraso de forma abreviada. 3
de transição de propriedade Fornecida para a transição de propriedades CSS. 3
de transição de duração Definir o comprimento de tempo de transição realizada. 3
transição-timing-function Definir a função de temporização de transição executada. 3
transition-delay Especifica a transição começa. 3

A aparência do usuário (User-interface) propriedades

propriedade explicação CSS
aparência elementos definição de estilo Exterior 3
box-sizing Ele permite que você se adaptar a região para definir alguma maneira certos elementos 3
ícone Especificar um ícone para o elemento 3
nav-down Especifica o usuário pressiona a posição para baixo tecla para baixo de navegação 3
nav-index Especifica Navigation fim (guia). 3
nav-esquerda Especificar quando o usuário pressiona o botão para a esquerda para navegar localização 3
nav-direita Especifica que o usuário pressione a posição correta quando a navegação para a esquerda 3
nav-up Especifica o usuário pressiona a tecla navegar até uma posição 3
delinear-offset Definir a borda contorno deslocamento fora do quadro da fronteira 3
redimensionar Se a definição dos elementos podem ser redimensionados 3