CSS - 4. Referência Básica


Aqui listarei todas as opções básicas de referência do CSS, compatíveis de forma básica em geral para todos os navegadores, ou seja, não haverão aqui itens do CSS3 ou semelhantes, mas apenas o básico que funciona até hoje, e, é o melhor para se começar é do começo.

background: Define-se o fundo para um determinado elemento.
background-attachment: Como o fundo deverá se comportar.
background-color: Define-se uma cor de fundo.
background-image: Define-se uma imagem de fundo.
background-position: Define-se a posição do fundo do elemento.
background-repeat: Define se o fundo deverá se repetir, e para qual sentido.

border: Define-se um tipo de borda para um elemento.
border-bottom: Define-se como será a borda inferior do elemento.
border-bottom-color: Define-se a cor da borda inferior.
border-bottom-width: Define-se o tamanho da borda inferior. Valores: thin para fino por exemplo.
border-color: Define-se a cor da borda.
border-left: Define-se como será a borda esquerda do elemento.
border-left-color: Define-se a cor da borda esquerda.
border-left-width: Define-se o tamanho da borda esquerda.
border-right: Define-se como será a borda direita do elemento.
border-right-color: Define-se a cor da borda direita.
border-right-width: Define-se o tamanho da borda direita.
border-style: Define-se o tipo de estilo de borda, como solid, dashed, dotted, double.
border-top: Define-se como será a borda superior do elemento.
border-top-color: Define-se a cor da borda superior.
border-top-width: Define-se o tamanho da borda superior.
border-width: Define-se qual será o tamanho da borda. Ex:. thick, 3px medium, thin.

color: Define-se uma cor para o elemento. Ex.: #000000, black, gray ou rgb(20,20,20).

float: Permite que um elemento seja posicionado ao lado direito ou esquerdo, e o texto ao redor (ou outros elementos) fiquem posicionados ao seu redor em alinhamento automático. Usos comuns são left, right, none, e também initial e inherit.
font: Define-se fonte, estilo, para um determinado texto.
font-family: Define-se qual o tipo de fonte desejada para um texto.
font-style: Define-se o estilo da fonte, como itálico, obliquo, ou normal.
font-variant: Define-se se o texto deve usar somente letras maiúsculas, entretanto, com um tamanho menor para as letras, ao usar o valor small-caps.
font-weight: Define-se qual o tamanho do negrito da fonte, caso a fonte escolhida suporte.

height: Define-se o tamanho de altura de um determinado elemento.

letter-spacing: Define-se o tamanho do espaçamento entre as letras.

line-height: Define-se qual o tamanho da altura de uma determinada linha.
line-style: Define-se um marcador de uma lista para um determinado parágrafo.
line-style-image: Define-se uma imagem para ser usada como marcador.
line-style-position: Define-se qual a posição do marcador em um parágrafo.
line-style-type: Define-se o tipo de marcador padrão, como circle, square.

overflow: Define-se o uso de barra de rolagem em algum elemento ou na página.

padding: Define-se o tamanho da margem interna de um elemento.
padding-bottom: Tamanho da margem inferior interna de um elemento.
padding-left: Tamanho da margem esquerda interna de um elemento.
padding-right: Tamanho da margem direita interna de um elemento.
padding-top: Tamanho da margem superior interna de um elemento.

page-break-after: Permite realizar uma quebra de página para o elemento. Útil em impressão para definir que deve quebrar a página somente depois do elemento.
page-break-before: Mesmo do item anterior, mas para quebrar apenas antes do elemento, garantindo que o mesmo esteja na próxima folha de impressão.

position: Define-se o método de posicionamento do elemento na página. Por padrão o método é static, seguindo o posicionamento conforme sua apresentação. Com o valor absolute, passa a assumir uma posição que pode sobrepor outros elementos, se orientando conforme o z-index.

text-align: Define-se a orientação do alinhamento de um texto dentro de um elemento, como right, center, left, justify.

text-decoration: Define se um texto deve ou não ter algum tipo de decoração, como por exemplo underline, overline, line-through.

text-indent: Define-se qual o tamanho do espaçamento da primeira linha em um parágrafo, como se fosse um tab para iniciar um parágrafo.

text-transform: Altera-se o texto atual entre letras maiúsculas, minúsculas, ou deixando apenas as primeiras palavras com a letra maiúscula, usando respectivamente: uppercase, lowercase, capitalize.

vertical-align: Define-se qual o posicionamento de uma imagem no meio de um texto, como um elemento ou um emoticon. Por padrão, a imagem é alinhada junto a margem do texto com o valor baseline.

visibility: Define se um elemento deve ser visível ou não.

width: Define-se o tamanho de largura de um determinado elemento.

z-index: Define-se a um objeto que possui a posição absolute, onde ele se encontra na ordem de outros elementos. Quanto menor o valor, atrás ficará de outros elementos com um número maior.


Esta é a referência básica do CSS, compatível com os mais diversos tipos de navegadores, e que só com estes elementos, é possível fazer praticamente tudo em questão de layouts.




Comentários