Fundamentos de CSS [guia de edição de temas smf]

[candidosa2]

O que é CSS?
HTML nos oferece inúmeras possibilidades no campo da formatação de texto. CSS, Cascading Style Sheets com grafia longa ou modelos de estilo em turco levam isso um passo adiante, nos dando a oportunidade de preparar modelos globais para nossas páginas, bem como o estilo de uma única letra; ou seja, também pode ser usado para alterar propriedades como cor, fonte, tamanho. A característica mais importante desta técnica é sua flexibilidade de uso.
Não usamos centenas de cores e fontes em uma página da web devido a regras estéticas. Em geral, usamos algumas cores e algumas fontes que são compatíveis entre si, portanto, em vez de especificá-las separadamente em cada página, podemos defini-las uma vez com a ajuda do CSS e usá-las em toda a nossa página. forma, evitamos alterar dezenas de páginas durante a atualização.
Os códigos CSS são escritos dentro de códigos HTML. Dependendo do tipo, eles podem estar nas seções do corpo ou da cabeça. Além desses, arquivos CSS externos podem ser criados e chamados dentro do documento HTML quando necessário.
O Microsoft Internet Explorer e o Netscape têm interpretações diferentes sobre CSS e quase todos os outros assuntos. Neste ponto, é mais apropriado escrever códigos que ambos os navegadores interpretarão da mesma forma / semelhante.

RECURSOS DO LINK
a: O estado do link antes de ser clicado ou pairado quando a página é aberta.
a: hover: o estado do link quando o cursor é passado.
a: ativo: o estado do link no momento em que foi clicado.
a: visitado: o status do link após ser clicado.


FORMAÇÃO:
color: define a cor do link.
background-color: define a cor de fundo do link.
background-image: Adiciona uma imagem ao fundo do link (também pode ser gif animado).
decoração de texto: Link acima, abaixo, etc. Determina se é listrado ou não.
font-weight: Determina a espessura ou finura do texto.
borda: adiciona uma borda ao redor do link.
display: a célula que contém o link, linha, etc. permite que a área desejada seja selecionada.

LISTAR RECURSOS
disco: Permite que o formato da lista seja em disco (círculo sólido).
círculo: faz com que a lista forme um círculo.
quadrado: torna o formato da lista um quadrado.
decimal: permite que o formato da lista consista em números.
romano inferior: permite que o formato de lista seja composto por algarismos romanos pequenos, como i, ii, iii.
romano superior: permite que o formato de lista seja composto por algarismos romanos maiúsculos, como I, II, II.
alfa-inferior: torna o formato de lista a, b, c minúsculo.
alfa superior: permite que o formato da lista seja capitalizado como A, B, C.
nenhum: torna a lista sem ícones.
dentro: faz com que a segunda linha da lista comece da extrema esquerda.
Fora: faz com que a segunda linha da lista comece no mesmo lugar que a primeira linha.
list-style-image: faz com que a lista formate uma imagem.

PROPRIEDADES DA CAMADA
posição: Determina a posição da camada.
absoluto: Permite que a camada seja posicionada com base na janela.
relativo: permite que a camada seja localizada com base na camada anterior.
estático: permite que a camada seja posicionada estaticamente (canto superior esquerdo por padrão).
topo: determina o quão abaixo do topo a camada deve estar.
esquerda: determina a distância que a camada deve estar da esquerda.
largura: determina a largura da camada.
altura: determina a altura da camada.
estouro: determina o que acontece com a parte da camada que não se ajusta à altura e largura especificadas.
auto: é determinado automaticamente.
scroll: Faz com que apareça adicionando uma barra de rolagem.
visível: faz com que áreas que não cabem apareçam sobrepondo a camada além das dimensões especificadas.
oculto: oculta lugares que não cabem.
visibilidade: ajusta a visibilidade da camada.
visível: torna a camada visível.
oculto: oculta a camada.
Z-index: determina a ordem em que as camadas serão exibidas de baixo para cima. Um valor de 1 indica que a camada estará na parte inferior.

RECURSOS DA FONTE
font-family: determina o tipo de fonte (como Arial, Verdana).
estilo da fonte: permite que o texto fique normal ou itálico.
font-variant: permite que o texto seja normal ou todas as letras maiúsculas.
font-weight: Determina a espessura-finura do texto.
font-size: Determina o tamanho do texto.

CARACTERÍSTICAS DO TEXTO
espaçamento entre palavras: determina o espaço a ser deixado entre as palavras.
espaçamento entre letras: especifica o espaço a ser deixado entre as letras.
decoração de texto: abaixo, acima, etc. da palavra. Determina se ele é desenhado ou não.
underline: torna a palavra underline (sob a linha).
overline: garante que a palavra seja sublinhada (sobre a linha).
line-through: faz com que seja sublinhado no meio da palavra.
piscar: faz a palavra piscar (para Netscape)
alinhamento vertical: determina como o texto é alinhado horizontalmente.
text-transform: permite que as palavras sejam maiúsculas ou minúsculas.
maiúscula: coloca as primeiras letras das palavras em maiúsculas.
maiúsculas: coloca todas as letras das palavras em maiúsculas.
minúsculas: torna todas as letras das palavras minúsculas.
nenhum: faz com que as palavras apareçam como no texto original.
alinhamento de texto: determina como o texto é alinhado verticalmente.
esquerda: Justifica o texto à esquerda.
direita: Justifica o texto à direita.
center: Centraliza o texto.
justificar: justificar o texto.
text-indent: Determina o quão longe a primeira linha do texto começa da esquerda.
line-height: Ajusta a altura da linha. (Quando um valor alto é fornecido, o espaçamento entre as linhas aumenta.)
primeira linha: permite que a primeira linha do texto seja formatada.
primeira letra: formata a primeira letra do texto.

PROPRIEDADES DO CURSOR
mira: faz com que o cursor se pareça com uma mira.
auto: faz com que o cursor pareça uma linha vertical no texto e uma seta regular em um espaço em branco.
padrão: faz com que o cursor pareça uma seta regular tanto no texto quanto no espaço em branco.
mão: faz com que o cursor tenha a forma de uma mão, como no link.
mover: faz com que o cursor tenha a forma de um sinal de movimento.
ne-resize: Torna o cursor uma seta normal apontando para a direita.
nw-resize: Torna o cursor uma seta normal apontando para a esquerda.
se-resize: Torna o cursor uma seta normal apontando para a direita e de cima para baixo.
sw-resize: Torna o cursor uma seta normal apontando para cima e para a esquerda.
n-redimensionar: faz com que o cursor pareça uma seta fina de baixo para cima.
s-resize: Faz com que o cursor pareça uma seta fina de cima para baixo.
w-resize: Faz com que o cursor pareça uma seta fina para a esquerda.
e-resize: Faz com que o cursor pareça uma seta fina para a direita.
texto: Faz com que o cursor apareça como está no texto, tanto no texto quanto no espaço em branco.
esperar: Faz com que o cursor mude para uma animação ocupada.
ajuda: faz com que o cursor mude para um ponto de interrogação de ajuda


PROPRIEDADES DO PISO
background-color: define a cor de fundo.
#color: o nome da cor.
transparente: torna o fundo transparente.
background-image: Permite colocar uma imagem no chão.
url: O endereço da imagem colocada no chão.
background-repeat: Determina como a imagem colocada no chão se espalhará.
repetir: Permite que a imagem se espalhe por todo o chão.
repeat-x: faz com que a imagem se espalhe da esquerda para a direita.
repeat-y: Faz com que a imagem se espalhe da parte superior esquerda para a parte inferior esquerda.
sem repetição: Faz com que a imagem apareça em seu tamanho original sem se espalhar.
anexo de fundo: determina o estado da imagem de fundo quando a página é movida com a barra de rolagem.
scroll: faz o chão rolar quando a página é movida.
corrigido: mantém o piso estável, mesmo se a página for rolada
posição de fundo: Permite que a imagem no chão seja posicionada conforme desejado.
topo: posiciona a imagem para cima.
centro: centraliza a imagem.
inferior: posiciona a imagem para baixo.
esquerda: posiciona a imagem à esquerda.
direita: posiciona a imagem à direita.
... px: Permite que a imagem seja inserida da esquerda na extensão desejada.

PROPRIEDADES DA MESA
margem: especifica o espaço a ser deixado entre a mesa e as bordas da janela.
margin-top: especifica o espaço a ser deixado entre a tabela e a parte superior da janela.
margin-right: especifica o espaço a ser deixado entre a tabela e a borda direita da janela.
margin-bottom: especifica o espaço a ser deixado entre a tabela e a borda inferior da janela.
margem esquerda: especifica o espaço a ser deixado entre a tabela e a borda esquerda da janela.

preenchimento: Determina o espaço a ser deixado entre as bordas da mesa e o conteúdo da mesa (Texto, etc.).
padding-top: Especifica o espaço a ser deixado entre o topo da tabela e o conteúdo da tabela.
padding-right: especifica o espaço a ser deixado entre a borda direita da tabela e o conteúdo da tabela.
padding-bottom: especifica o espaço a ser deixado entre a borda inferior da tabela e o conteúdo da tabela.
padding-left: Especifica o espaço a ser deixado entre a borda esquerda da tabela e o conteúdo da tabela.

borda: permite que as bordas da mesa sejam modeladas.

border-top: permite que a borda superior da mesa seja moldada.
borda esquerda: permite que a borda esquerda da mesa seja moldada.
border-bottom: permite que a borda inferior da mesa seja moldada.
border-right: permite que a borda direita da mesa seja moldada.

border-width: Determina a espessura das bordas da mesa.
border-top-width: especifica a espessura da borda superior da mesa.
border-right-width: Determina a espessura da borda direita da mesa.
border-bottom-width: Determina a espessura da borda inferior da mesa.
border-left-width: Determina a espessura da borda esquerda da mesa.

border-style: especifica o tipo de borda da tabela.
border-top-style: especifica o tipo de borda superior da tabela.
border-right-style: especifica o tipo de borda direita da tabela.
border-bottom-style: especifica o tipo de borda inferior da tabela.
border-left-style: especifica o tipo de borda esquerda da tabela.

border-color: especifica a cor das bordas da tabela.
border-top-color: especifica a cor da borda superior da mesa.
border-right-color: especifica a cor da borda direita da tabela.
border-bottom-color: especifica a cor da borda inferior da tabela.
border-left-color: especifica a cor da borda esquerda da tabela.

color: determina a cor do texto na tabela.

largura: determina a largura da mesa.

altura: determina a altura da mesa.


NOTA: O título foi dado como "TABELA". No entanto, esses atributos são principalmente TD, TR, TH etc. Ele pode ser usado para quase qualquer tag, incluindo. Isso é o que torna o CSS especial ...


RECURSOS DA BARRA DE ROLAGEM
scrollbar-face-color: A cor da superfície da barra de rolagem também afeta o chão.
scrollbar-base-color: cobre as bordas esquerda e superior da barra de rolagem como uma linha.
scrollbar-shadow-color: A cor da sombra das bordas direita e inferior.
scrollbar-highlight-color: A cor da sombra das bordas esquerda e superior também afeta o plano de fundo.
scrollbar-arrow-color: a cor das setas de direção

A barra de rolagem está disponível apenas no Internet Explorer.