Buscar

CSS - Estilos de Texto e Layout

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

CSS - ESTILOS
font-family <- ermite que se faça uma lista de prioridades de familias de fontes e/ou nomes genéricos de famílias a serem especificados para um elemento selecionado. (font-family: string;) - ex: font-family: sans-serif; / font-family: serif;
-----------------------
font-size <- tamanho da fonte [pt]
-----------------------
color: <- cor da fonte
-----------------------
text-shadow: <- acrescenta sombras ao texto. EXEMPLOS: Sintaxe= text-shadow: 1px 1px 2px black; (deslocamento x, deslocamento y, raio de desfoque, cor), text-shadow: #CCC 1px 0 10px; (cor, deslocamento x, deslocamento y, raio de desfoque), text-shadow: 5px 5px #558ABB; (deslocamento x, deslocamento y, cor), text-shadow: white 2px 2px; (cor, deslocamento x, deslocamento y), text-shadow: 5px 10px; (deslocamento x, deslocamento y) / Deslocamento x - Horizontal | Deslocamento y - Vertical | Raio de desfoque = espalhamento
-----------------------
<span style="text-decoration: underline;"> </span> <- antigo <u></u> underline - sublinhado (agora feito com folhas de estilo [css3]) - outros: overline, line-through(riscado), none.
-----------------------
<span style="font-weight:normal;" <- qual a quantidade de negrito do texto. Outros: bold, bolder(mais negrito que o negrito), pode ser utilizado valores entre 100 e 900.
-----------------------
text-align: center; <- alinhamento de texto. Outros: left, right, justify.
-----------------------
text-indent: 50px; <- indentação do texto. (Gera uma marca de parágrafo)
-----------------------
background-color; <- descreve uma cor uniforme do plano de fundo. 
-----------------------
RGB <- (red), (green), (blue) / HSL <- hue, saturation and lightness
-----------------------
RGBA <- (red), (green), (blue), (alfa) (transparência) - números entre 0 e 1, onde 0 é totalmente transparente e 1 totalmente visível. / HSLA
-----------------------
background-image: url("") <- descreve uma imagem como plano de fundo
-----------------------
color: <- cor da fonte
-----------------------
border: <- borda (largura da borda, tipo de borda e a cor)
-----------------------
width: <- largura (%)
-----------------------
height: <- altura (%)
-----------------------
box-shadow <- sombra da borda (deslocamento horizontal [px], deslocamento vertical, espalhamento, cor)
-----------------------
position: <- posicionamento do elemento (static: valor default de todo elemento HTML), (relative: o elemento passa a aceitar as propriedades top, bottom, left e right, podendo ser alterado o seu posicionamento), (absolute: pode ser posicionado qualquer elemento de acordo com o elemento pai que tenha um position diferente de static)
-----------------------
top: <- topo da janela
-----------------------
padding: <- define uma distância entre o conteúdo de um elemento e suas bordas. (px) (Espaço interno do elemento)
-----------------------
box-sizing: <- é utilizada para alterar a propriedade padrão da box model, usada para calcular larguras(widhts) e alturas(heights) dos elementos. - border-box : cria um box dentro da borda.
-----------------------
opacity: <- especifica a transparência de um elemento. 0 ou 1.
-----------------------
:hover <- quando o usuário designa um elemento com um dispositivo apontador.
-----------------------
transition: <- efeito de transição - informar para o que (ex. opacity) e o tempo em seg
-----------------------
Quando é classe é (.), quando é id é (#)
-----------------------
list-style: <- formatação da lista (estilo da lista)
-----------------------
text-transform: <- Pode ser utilizado para que o texto apareça com todas as letras maiúsculas ou todas minúsculas. (capitalize, uppercase, lowercase, none, full-weidth)
-----------------------
display: <- especifica o tipo de caixa de renderização usada por um elemento. 
-----------------------
margin: <- define a área de margem nos quatro lados dos elementos (margin-top, margin-right, margin-bottom, margin-left - SEMPRE NESSA ORDEM) [px]
-----------------------
left: <- lado esquerdo da janela
-----------------------
transition: <- permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando pseudo-classes tais como: :hover ou :active;
-----------------------
text-decoration: <- é usada para definir a formatação de underline, overline, line-through ou blink. (underline e overline são posicionadas abaixo e acima do texto[respectivamente], e line-through cortanto-o.)
-----------------------
float <- determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos e elementos em linha irão se posicionar ao seu redor. ELEMENTOS FLUTUANTES. 
-----------------------
clear <- especifica se um elemento pode ter elementos flutuantes ao seu lado ou se devem ser movidos abaixo dele. Essa propriedades se aplica à elementos flutuantes ou não flutuantes.
-----------------------
border-spacing <- define o espaçamento entre as células de uma tabela.
-----------------------

Teste o Premium para desbloquear

Aproveite todos os benefícios por 3 dias sem pagar! 😉
Já tem cadastro?

Continue navegando