Article image
Raja Novaes
Raja Novaes15/06/2022 08:33
Compartilhe

DICIONÁRIO DE TERMOS NO CSS (em construção)

  • #CSS

Introdução 

Esse material foi elaborado visando ser uma fonte de consulta que poderá esclarecer alguma dúvida sobre termos usados no CSS. 

Inicialmente esse material conta com a explicação de algumas propriedades utilizadas, mas o objetivo é incluir outras categorias em outros momentos. 

Fique a vontade para contribuir, deixe nos comentários termos que podem ser adicionados, além é claro da sua opinião sobre esse material. 

Sumário

# A B C D E F H J L M O P R T U V W Z

PROPRIEDADES

#

  • @keyframes - Especifica o código de animação.

A

  • align-content - Modifica o comportamento da propriedade flex-wrap. É semelhante a align-items, mas em vez de alinhar itens flexíveis, alinha linhas flexíveis.
  • align-items - Alinha verticalmente os itens flexíveis quando os itens não usam todo o espaço disponível no eixo cruzado.
  • align-self - Especifica o alinhamento de um item flexível (substitui a propriedade align-items do contêiner flexível).
  • animation - Uma propriedade abreviada para definir todas as propriedades de animação.
  • animation-delay - Especifica um atraso para o início de uma animação.
  • animation-direction - Especifica se uma animação deve ser reproduzida para frente, para trás ou em ciclos alternados.
  • animation-duration - Especifica quanto tempo uma animação deve levar para completar um ciclo.
  • animation-fill-mode - Especifica um estilo para o elemento quando a animação não está sendo reproduzida (antes de começar, depois de terminar ou ambos).
  • animation-iteration-count - Especifica o número de vezes que uma animação deve ser reproduzida.
  • animation-name - Especifica o nome da animação @keyframes.
  • animation-play-state - Especifica se a animação está em execução ou pausada.
  • animation-timing-function - Específica a curva de velocidade da animação.

B

  • backface-visibility - Define se um elemento deve ou não estar visível quando não está voltado para a tela.
  • background - Define todas as propriedades do plano de fundo em uma declaração.
  • background-attachment - Define se uma imagem de fundo é fixa ou rola com o resto da página.
  • background-clip - Especifica a área de pintura do plano de fundo.
  • background-color - Define a cor de fundo de um elemento.
  • background-image - Define a imagem de fundo para um elemento.
  • background-origin - Específica onde a(s) imagem(ns) de fundo está(ão) posicionada(s).
  • background-position - Define a posição inicial de uma imagem de fundo.
  • background-repeat - Define como uma imagem de fundo será repetida.
  • background-size - Especifica o tamanho das imagens de fundo.
  • border - Define todas as propriedades da borda em uma declaração.
  • border-bottom - Define todas as propriedades da borda inferior em uma declaração.
  • border-bottom-color - Define a cor da borda inferior.
  • border-bottom-left-radius - Define a forma da borda do canto inferior esquerdo.
  • border-bottom-right-radius - Define a forma da borda do canto inferior direito.
  • border-bottom-style - Define o estilo da borda inferior.
  • border-bottom-width - Define a largura da borda inferior.
  • border-collapse - Especifica se as bordas da tabela devem ou não ser recolhidas.
  • border-color - Define a cor das quatro bordas.
  • border-image - Uma propriedade abreviada para definir todas as propriedades border-image-*.
  • border-image-outset - Especifica a quantidade pela qual a área da imagem da borda se estende além da caixa da borda.
  • border-image-repeat - Specifies whether the border image should be repeated, rounded or stretched.
  • border-image-slice - Específica como cortar a imagem da borda.
  • border-image-source - Especifica o caminho para a imagem a ser usada como borda.
  • border-image-width - Especifica as larguras da imagem da borda.
  • border-left - Define todas as propriedades da borda esquerda em uma declaração.
  • border-left-color - Define a cor da borda esquerda.
  • border-left-style - Define o estilo da borda esquerda.
  • border-left-width - Define a largura da borda esquerda.
  • border-radius - Define todas as quatro propriedades border-*-radius para cantos arredondados.
  • border-right - Define todas as propriedades da borda direita em uma declaração.
  • border-right-color - Define a cor da borda direita.
  • border-right-style - Define o estilo da borda direita.
  • border-right-width - Define a largura da borda direita.
  • border-spacing - Especifica a distância entre as bordas das células adjacentes.
  • border-style - Define o estilo das quatro bordas.
  • border-top - Define todas as propriedades da borda superior em uma declaração.
  • border-top-color - Define a cor da borda superior.
  • border-top-left-radius - Define a forma da borda do canto superior esquerdo.
  • border-top-right-radius - Define a forma da borda do canto superior direito.
  • border-top-style - Define o estilo da borda superior.
  • border-top-width - Define a largura da borda superior.
  • border-width - Define a largura das quatro bordas.
  • bottom - Define a borda da margem inferior para uma caixa posicionada.
  • box-shadow - Adiciona uma ou mais sombras a um elemento.
  • box-sizing - Define como a largura e a altura de um elemento são calculadas: devem incluir preenchimento e bordas ou não.

C

  • caption-side - Especifica o posicionamento de uma legenda de tabela.
  • clear - Específica o que deve acontecer com o elemento que está próximo a um elemento flutuante.
  • clip - Recorta um elemento posicionado absolutamente.
  • color - Especifica a cor do texto.
  • column-count - Especifica o número de colunas em que um elemento deve ser dividido.
  • column-fill - Específica como preencher as colunas.
  • column-gap - Especifica o intervalo entre as colunas.
  • column-rule - Uma propriedade abreviada para definir todas as propriedades column-rule-*.
  • column-rule-color - Especifica a cor da regra entre as colunas.
  • column-rule-style - Especifica o estilo da regra entre as colunas.
  • column-rule-width - Especifica a largura da regra entre as colunas.
  • column-span - Especifica quantas colunas um elemento deve abranger.
  • column-width - Especifica uma largura ideal sugerida para as colunas.
  • columns - Uma propriedade abreviada para definir a largura da coluna e a contagem de colunas.

D

  • direction - Especifica a direção do texto/direção da escrita.
  • display - Específica como um elemento deve ser exibido.
  • display - Especifica o tipo de caixa usado para um elemento HTML.

E

  • empty-cells - Especifica se as bordas e o plano de fundo devem ou não ser exibidos em células vazias em uma tabela.

F

  • flex - Uma propriedade abreviada para as propriedades flex-grow, flex-shrink e flex-basis.
  • flex-basis - Especifica o comprimento inicial de um item flexível.
  • flex-direction - Especifica a direção dos itens flexíveis dentro de um contêiner flexível.
  • flex-flow - Uma propriedade abreviada para flex-direction e flex-wrap.
  • flex-grow - Específica quanto um item flexível crescerá em relação ao restante dos itens flexíveis dentro do mesmo contêiner.
  • flex-shrink - Especifica o quanto um item flexível diminuirá em relação ao restante dos itens flexíveis dentro do mesmo contêiner
  • flex-wrap - Especifica se os itens flexíveis devem ser agrupados ou não, se não houver espaço suficiente para eles em uma linha flexível.
  • float - Especifica se um elemento deve flutuar para a esquerda, direita ou nada.
  • font - Define todas as propriedades da fonte em uma declaração.
  • font-family - Especifica a família de fontes para texto.
  • font-size - Especifica o tamanho da fonte do texto.
  • font-style - Especifica o estilo da fonte para o texto.
  • font-variant - Especifica se um texto deve ou não ser exibido em uma fonte de versalete.
  • font-weight - Especifica o peso de uma fonte.

H

  • height - Define a altura de um elemento.

J

  • justify-content - Alinha horizontalmente os itens flexíveis quando os itens não usam todo o espaço disponível no eixo principal.

L

  • left - Define a borda da margem esquerda para uma caixa posicionada.
  • letter-spacing - Especifica o espaço entre os caracteres em um texto.
  • line-height - Especifica a altura da linha.
  • list-style - Define todas as propriedades de uma lista em uma declaração.
  • list-style-image - Especifica uma imagem como marcador de item de lista.
  • list-style-position - Especifica a posição dos marcadores de item de lista (pontos de bala).
  • list-style-type - Especifica o tipo de marcador de item de lista.

M

  • margin - Uma propriedade abreviada para definir todas as propriedades de margem em uma declaração.
  • margin-bottom - Define a margem inferior de um elemento.
  • margin-left - Define a margem esquerda de um elemento.
  • margin-right - Define a margem direita de um elemento.
  • margin-top - Define a margem superior de um elemento.
  • mask-image - Especifica uma imagem a ser usada como uma camada de máscara para um elemento.
  • mask-mode - Especifica-se a imagem da camada de máscara é tratada como uma máscara de luminância ou como uma máscara alfa.
  • mask-origin - Especifica a posição de origem (a área de posição da máscara) de uma imagem de camada de máscara.
  • mask-position - Define a posição inicial de uma imagem de camada de máscara (em relação à área de posição da máscara).
  • mask-repeat - Específica como a imagem da camada de máscara é repetida.
  • mask-size - Especifica o tamanho de uma imagem de camada de máscara.
  • max-height - Define a altura máxima de um elemento.
  • max-width - Define a largura máxima de um elemento.
  • min-height - Define a altura mínima de um elemento.
  • min-width - Define a largura mínima de um elemento.

O

  • object-fit - Especifica como um <img> ou <video> deve ser redimensionado para caber em seu contêiner.
  • object-position - Especifica como um <img> ou <video> deve ser posicionado com coordenadas x/y dentro de sua "própria caixa de conteúdo".
  • order - Especifica a ordem dos itens flexíveis dentro do mesmo contêiner.
  • outline - Uma propriedade abreviada para definir a largura do contorno, o estilo do contorno e a cor do contorno em uma declaração.
  • outline-color - Define a cor de um contorno.
  • outline-offset - Especifica o espaço entre um contorno e a borda ou borda de um elemento.
  • outline-style - Sets the style of an outline.
  • outline-width - Define a largura de um contorno.
  • overflow - Específica o que acontece se o conteúdo ultrapassar a caixa de um elemento.
  • overflow-wrap - Especifica se o navegador pode ou não quebrar linhas com palavras longas, se elas ultrapassarem seu contêiner.
  • overflow-x - Especifica o que fazer com as bordas esquerda/direita do conteúdo se ultrapassar a área de conteúdo do elemento.
  • overflow-y - Especifica o que fazer com as bordas superior/inferior do conteúdo se ultrapassar a área de conteúdo do elemento.

P

  • padding - Uma propriedade abreviada para definir todas as propriedades de preenchimento em uma declaração.
  • padding-bottom - Define o preenchimento inferior de um elemento.
  • padding-left - Define o preenchimento esquerdo de um elemento.
  • padding-right - Define o preenchimento direito de um elemento.
  • padding-top - Define o preenchimento superior de um elemento.
  • perspective - Específica a perspectiva de como os elementos 3D são visualizados.
  • perspective-origin - Especifica a posição inferior dos elementos 3D.
  • position - Especifica o tipo de posicionamento de um elemento.

R

  • resize - Especifica se um elemento é ou não redimensionável pelo usuário.
  • right - Define a borda da margem direita para uma caixa posicionada.

T

  • table-layout - Define o algoritmo de layout a ser usado para uma tabela.
  • text-align - Especifica o alinhamento horizontal do texto.
  • text-align-last - Específica como alinhar a última linha de um texto.
  • text-decoration - Define todas as propriedades de decoração de texto em uma declaração.
  • text-decoration-color - Especifica a cor da decoração de texto.
  • text-decoration-line - Especifica o tipo de decoração de texto a ser usado (sublinhado, sobrelinhado, etc.)
  • text-decoration-style - Especifica o estilo da decoração do texto (sólido, pontilhado, etc.)
  • text-decoration-thickness - Especifica a espessura da linha de decoração de texto.
  • text-indent - Especifica o recuo da primeira linha em um bloco de texto.
  • text-justify - Específica como o texto justificado deve ser alinhado e espaçado.
  • text-overflow - Específica como o conteúdo transbordado que não é exibido deve ser sinalizado ao usuário.
  • text-shadow - Específica o efeito de sombra adicionado ao texto.
  • text-transform - Controla a capitalização do texto (letras maiúsculas e minúsculas).
  • top - Define a borda da margem superior para uma caixa posicionada.
  • transform - Aplica uma transformação 2D ou 3D a um elemento.
  • transform-origin - Permite alterar a posição em elementos transformados.
  • transform-style - Especifica como os elementos aninhados são renderizados no espaço 3D.
  • transition - Uma propriedade abreviada para definir as quatro propriedades de transição em uma única propriedade.
  • transition-delay - Especifica um atraso (em segundos) para o efeito de transição.
  • transition-duration - Especifica quantos segundos ou milissegundos um efeito de transição leva para ser concluído.
  • transition-property - Especifica o nome da propriedade CSS para a qual se destina o efeito de transição.
  • transition-timing-function - Específica a curva de velocidade do efeito de transição.

U

  • unicode-bidi - Usado junto com a propriedade direction para definir ou retornar se o texto deve ser substituído para oferecer suporte a vários idiomas no mesmo documento.

V

  • vertical-align - Define o alinhamento vertical de um elemento.
  • visibility - Especifica se um elemento deve ou não ser visível.

W

  • white-space - Específica como lidar com espaços em branco dentro de um elemento.
  • width - Define a largura de um elemento.
  • word-break - Especifica regras de quebra de linha para scripts não CJK.
  • word-spacing - Especifica o espaço entre as palavras em um texto.
  • word-wrap - Permite que palavras longas possam ser quebradas e passar para a próxima linha.
  • writing-mode - Especifica se as linhas de texto são dispostas horizontalmente ou verticalmente.

Z

  • z-index - Define a ordem de pilha de um elemento.

Importante

Esse material está sendo elaborado à medida que vou aprofundando nos meus estudos no desenvolvimento fullstack. 

Caso tenha alguma observação a ser feita ou queira a informar algum conteúdo a ser incluído deixe nos comentários.  

Compartilhe
Comentários (11)
Raja Novaes
Raja Novaes - 15/06/2022 15:33

Rafael Miguel,


Pois foi uma sugestão do Eric.


Daí fiz em parte do artigo para avaliar com ficaria a leitura do documento.


Ainda estou avaliando qual padrão adotar nos meu artigos.

RM

Rafael Miguel - 15/06/2022 12:46

Parabéns! Recomendo utilizar outra cor no lugar do amarelo, pois não contrasta muito bem com o branco, dificultando a leitura. Opte por tons de escuros

Pedro Santos
Pedro Santos - 15/06/2022 11:38

Ficou muito show, parabéns!

Fabio Torres
Fabio Torres - 15/06/2022 10:45

Massa Raja, parabéns pelo artigo.

J

Jefferson - 15/06/2022 10:37

show de bola, vai ajudar bastante!

JS

Jean Sousa - 15/06/2022 10:30

Parabéns Raja. Fantástico material. Muito bom!!

Willans Junes
Willans Junes - 15/06/2022 09:43

Muito Bom Raja, com isto temos docs de CSS bem na mao, Valeu, Parabens.

Raja Novaes
Raja Novaes - 15/06/2022 09:15

Eric,


Obrigado pelo retorno, irei me preocupar com essa questão em outras publicações.


Se você quiser me manda seu email que lhe envio em PDF para vc.


Obrigado pelo retorno e abraços.

A

Aylla - 15/06/2022 09:00

Caramba, muito bom! Já vou salvar aqui!

Eric Castro
Eric Castro - 15/06/2022 08:48

Seu artigo esta muito legal, parabéns, mas como eu sou miope e tenho astigmatismo, vou te dar uma sugestão ao inves do preto no cinza escuro use uma cor mais clara como o amarelo por exemplo, isso facilita a leitura.

Ronald Chaves
Ronald Chaves - 15/06/2022 08:47

Caraca, muito legal Raja!! Gostei bastante. Vi termos que nunca tinha visto aq kkkkkk