Exemplos de CSS Completo

Texto CSS

• Definir a cor do texto

• Alinhar texto

• Recuar texto

• Decorar texto

• Definir o espaçamento entre caracteres

• Definir o espaçamento entre palavras

• Definir o espaçamento entre linhas de texto

• Manter espaços em branco e quebras de linha

• Quebra de linha de texto dentro do elemento

• Alinhamento vertical da imagem no texto

Fonte CSS

• Definir a fonte do texto

• Definir o tamanho da fonte

• Definir o estilo da fonte

• Definir a variação da fonte

• Definir a negrura da fonte

• Definir todas as propriedades de fonte em uma única declaração-Propriedades abreviadas de fonte

Link CSS

• Definir estilos de diferentes estados do link

• Remover sublinhado padrão do link

• Remover contorno tracejado do link

• Criar caixa de link

• Inverter imagem

Lista CSS

• Especificar ícones e números na lista

• Definir a posição do marcador de item da lista

• Definir a imagem como marcador de item da lista

• Criar um menu suspenso simples

• Definir todas as propriedades de lista em uma só declaração-Propriedade abreviada de estilo de lista

Tabela CSS

• Definir a borda da tabela

• Especificar o tamanho da tabela

• Criar uma melhor tabela através do dobramento das bordas da tabela

• Definir o alinhamento horizontal do texto dentro da célula da tabela

• Definir a alinhamento vertical do conteúdo

• Especificar como exibir células vazias

• Especificar o preenchimento da célula da tabela

• Especificar o algoritmo de layout da tabela-Automático ou fixo

• Definir a posição do título da tabela

Fundo CSS

• Definir a cor de fundo do elemento

• Definir a imagem como o fundo do elemento

• Repetir a imagem de fundo horizontalmente ou verticalmente

• Especificar a posição da imagem de fundo

• Imagem de fundo fixa, não rola com o conteúdo que a contém

• Definir todas as propriedades de fundo em uma só declaração-Atalho de propriedade de fundo

• Definir o tamanho da imagem de fundo

• Definir o recorte do fundo

• Definir o ponto de origem do fundo

• Adicionar múltiplos fundos ao elemento

Unidades CSS

• Usar unidades absolutas (por exemplo, px, pt, cm, etc.)

• Usar unidades relativas (por exemplo, em, ex, %, etc.)

Tamanho CSS

• Definir a largura e altura do elemento

• Definir a largura e altura máxima do elemento

• Definir a largura e altura mínima do elemento

• Controlar o transbordamento

Alinhamento CSS

• Alinhar texto e elementos embutidos dentro de elementos de bloco

• Centralizar elementos de bloco usando a propriedade de margem

• Alinhar elementos horizontalmente usando a propriedade float

• Alinhar elementos em direções horizontal e vertical usando a propriedade position

• Prevenir que o item pai colapse com a propriedade clear

• Criar um menu horizontal simples

Posicionamento CSS

• Posicionar o elemento em relação à janela do navegador

• Posicionar o elemento em relação ao seu pai

• Posicionar o elemento em relação à sua posição normal

• Usar z-Elementos sobrepostos usando a propriedade index

Exibição CSS

• Ocultar o elemento usando a propriedade de visibilidade

• Remover o elemento do DOM usando a propriedade display

• Exibir o elemento como um elemento embutido

• Exibir o elemento como um elemento de bloco

• Falar com elementos de tabela dobrados

Borda e contorno CSS

• Desenhar uma borda ao redor do elemento

• Desenhar uma borda em cada lado do elemento

• Definir diferentes estilos de borda

• Definir todas as propriedades de borda em uma só declaração-Atalho de propriedade de borda

• Criar cantos arredondados ao redor do elemento

• Criar uma borda usando uma imagem

• Desenhar uma contorno ao redor do elemento

• Desenhar uma borda ao redor do elemento sem afetar os elementos ao redor

Margem e preenchimento CSS

• Definir a margem de cada lado do elemento

• Definir todas as propriedades de margem em uma só declaração-Atalho de propriedade de margem

• Definir o preenchimento de cada lado do elemento

• Definir todas as propriedades de preenchimento em uma só declaração-Atalho de propriedade de preenchimento

Opacidade CSS

• Definir a opacidade do elemento

• Efeito de rolagem de imagem e opacidade

• Texto dentro de uma caixa transparente

Conteúdo gerado pelo CSS

• Especificar aspas

• Partes e categorias de numeracao automatica

• Use CSS para inserir conteúdo gerado

Pseudo-Classe CSS

• Definir estilos para diferentes estados de hiperligação

• Use o pseudo-Classe ':focus' para definir estilo para elementos de formulário em foco

• Usar :first-O pseudo-Classe 'child' define estilo para o primeiro filho do elemento

• Usar :first-Definir estilo para o último filho do elemento usando pseudo-classe child

• Usar :nth-Pseudo-classe child para nth do elemento-Definir estilo child

• Definir estilo para linguagem específica usando pseudo-classe :lang()

• Usar pseudo-classes com seletores

Pseudo-elemento do CSS

• Usar:: first-Pseudo-elemento letter para criar efeito de submersão da primeira letra

• Usar:: first-Pseudo-elemento line para definir a primeira linha do texto de diferentes maneiras

• Inserir algum conteúdo antes ou depois do elemento usando pseudo-elemento:: before ou:: after

• Usar pseudo-elemento em classe

CSS3Gradiente

• Criar gradiente linear do topo para o fundo

• Criar gradiente linear da esquerda para a direita

• Criar gradiente linear ao longo da diagonal

• Definir a direção do gradiente usando ângulo

• Criar gradiente linear usando várias cores

• Definir a posição de parada da cor no gradiente ao criar gradiente

• Repetir gradiente linear

• Criar gradiente radial

• Definir a forma do gradiente radial

• Definir o tamanho do gradiente radial

• Repetir gradiente radial

• Usar transparência para gradientes

CSS3Sombra

• Criar efeito de sombra de caixa

• Adicionar várias sombras de caixa ao caixa do elemento

• Criar efeito de sombra de texto

CSS3 2Transformação D

• Mover o elemento usando método translate()

• Girar o elemento usando método Rotate()

• Aumentar ou diminuir o tamanho do elemento usando método scale()

• Aplicar método matrix()2Transformação D

• Aplicar múltiplas transformações ao elemento

CSS3 3Transformação D

• Usar translate3Método d() para mover elementos no espaço tridimensional

• Usar rotate3Método d() para girar elementos no espaço tridimensional

• Usar scale3Método d() para escalar elementos no espaço tridimensional

• Usar matrix3Aplicação do método d()3Transformação D

• Aplicar múltiplas3Transformação D Aplicada ao Elemento

CSS3Transição

• Aplicar efeito de transição à cor de fundo

• Aplicar efeito de transição a várias propriedades

• Definir todas as propriedades de transição de uma vez-Anotação de Propriedades de Transição

CSS3Animação

• Elementos Animados na Página da Web

• Definir quadros-chave ao criar animações

• Definir todas as propriedades de animação de uma vez-Anotação de Propriedades de Animação

CSS3Layout de Múltiplas Colunas

• Criar layout de múltiplas colunas

• Definir o número de colunas ou largura

• Definir o espaçamento entre colunas

• Adicionar regras ou linhas verticais entre colunas