CSS Syntax
O seletor de elemento
O seletor id
O seletor de classe (para todos os elementos)
O seletor de classe (somente para <p> elementos)
agrupamento seletores
CSS Fundos
Definir a cor de uma página de fundo
Defina a cor de diferentes elementos fundo
Definir uma imagem como plano de fundo de uma página
Como repetir uma imagem de fundo apenas horizontalmente
Como posicionar uma imagem de fundo
Uma imagem de fundo fixa (esta imagem não vai rolar com o resto da página)
Todas as propriedades do fundo em uma declaração
Avançada exemplo fundo
Propriedades do fundo explicou
CSS Fronteiras
Definir a largura das quatro bordas
Definir a largura da borda superior
Definir a largura da borda inferior
Definir a largura da borda esquerda
Definir a largura da borda direita
Definir o estilo das quatro bordas
Defina o estilo da borda superior
Defina o estilo da borda inferior
Defina o estilo da borda esquerda
Defina o estilo da borda direita
Defina a cor das quatro bordas
Defina a cor da borda superior
Defina a cor da borda inferior
Defina a cor da borda esquerda
Defina a cor da borda direita
Todas as propriedades da borda em uma declaração
Definir diferentes fronteiras de cada lado
Todas as propriedades da borda superior em uma declaração
Todas as propriedades da borda inferior em uma declaração
Todas as propriedades da borda esquerda em uma declaração
Todas as propriedades da borda direita em uma declaração
Propriedades da borda explicou
Margens CSS
Especificar margens diferentes para cada lado de um elemento
Deixe a margem esquerda ser herdado do elemento pai
A propriedade margem de taquigrafia
Definir margem para auto para o centro do elemento em seu contêiner
Propriedades de margem explicou
Padding CSS
Defina o preenchimento à esquerda de um elemento
Defina o preenchimento direito de um elemento
Defina o preenchimento superior de um elemento
Defina o preenchimento de fundo de um elemento
Todas as propriedades de preenchimento em uma declaração
Propriedades de preenchimento explicou
CSS Texto
Defina a cor do texto de diferentes elementos
Alinhar o texto
Remova a linha sob ligações
Decore o texto
Controlar as letras em um texto
Recuar texto
Especifique o espaço entre os caracteres
Especifique o espaço entre as linhas
Definir a direção do texto de um elemento
Aumentar o espaço em branco entre as palavras
Desativar a quebra de texto dentro de um elemento
Alinhamento vertical de uma imagem dentro do texto
Propriedades de texto explicou
CSS Fontes
Definir a fonte de um texto
Defina o tamanho da fonte
Defina o tamanho da fonte em px
Defina o tamanho da fonte em em
Defina o tamanho da fonte em percentagem e em
Defina o estilo da fonte
Definir a variante do tipo de letra
Definir a ousadia da fonte
Todas as propriedades de fonte em uma declaração
Propriedades de fonte explicou
Ligações CSS
Adicionar cores diferentes para links visitados / não visitados
Uso de text-decoration em links
Especifique uma cor de fundo para as ligações
Adicionar outros estilos para hiperlinks
Avançado - Criar caixas de links
Avançado - Criar caixas de ligação com bordas
Propriedades de ligação explicou
Listas CSS
Todos os diferentes marcadores de item de lista em listas
Definir uma imagem como marcador de item de lista
Posicionar o marcador de lista
Todas as propriedades de lista em uma declaração
Listas de estilo com cores
De largura total lista delimitada
Propriedades da lista explicou
Tabelas CSS
Especifique uma borda preta de mesa, elementos th e td
Uso de border-collapse
Borda simples ao redor da mesa
Especifique a largura ea altura de uma mesa
Definir o alinhamento horizontal do conteúdo (text-align)
Definir o alinhamento vertical do conteúdo (vertical-align)
Especifique o preenchimento para th e td elementos
divisores horizontais
mesa Hoverable
mesas listradas
Especifique a cor das bordas da tabela
Definir a posição da legenda da tabela
Tabela Responsive
Criar uma tabela de fantasia
Propriedades da tabela explicou
CSS Box Model
Especifique um elemento com uma largura total de 250px
CSS Contorno
Desenhar uma linha em torno de um elemento (esboço)
Defina o estilo de um esboço
Defina a cor de um esboço
Definir a largura de um esboço
Propriedades de contorno explicou
CSS Dimensão
Definir a altura e largura de um elemento
Definir max-width de um elemento
Definir a altura e largura de diferentes elementos
Definir a altura e largura de uma imagem usando cento
Definir min-width e max-width de um elemento
Set min-height e max-altura de um elemento
Propriedades de dimensão explicou
CSS de exibição
Como esconder um elemento (visibility:hidden)
Como não exibir um elemento (display:none)
Como exibir um elemento de nível de bloco como um elemento inline
Como exibir um elemento inline como um elemento em nível de bloco
Como usar o CSS em conjunto com o JavaScript para mostrar conteúdo oculto
Propriedades de exibição explicou
Posicionamento CSS
Posicionar um elemento em relação à janela de navegador
Posicionar um elemento em relação à sua posição normal
Posicionar um elemento com um valor absoluto
elementos sobrepostos
Definir a forma de um elemento
Como criar uma barra de rolagem quando o conteúdo de um elemento é grande demais para caber
Como configurar o navegador para tratar automaticamente estouro
Definir a borda superior de uma imagem utilizando um valor de pixel
Defina a borda inferior de uma imagem usando um valor de pixel
Defina a borda esquerda de uma imagem usando um valor de pixel
Defina a margem direita de uma imagem usando um valor de pixel
Alterar o cursor texto da imagem Posição (canto superior esquerdo)
Texto da imagem posição (canto superior direito)
Texto da imagem posição (canto inferior esquerdo)
Texto da imagem posição (canto inferior direito)
Texto da imagem posição (centralizado)
Propriedades de posicionamento explicou
CSS Floating
Um simples uso da propriedade float
Uma imagem com fronteiras e margens que flutua para a direita em um parágrafo
Uma imagem com uma legenda que flutua à direita
Deixe a primeira letra de um parágrafo flutuador à esquerda
Criar uma galeria de imagens com a propriedade float
Desligar float (usando a propriedade de forma clara)
Criando um menu horizontal
Criando uma página sem tabelas
Propriedades flutuador explicou
CSS Elements Alinhando
Centro de alinhamento com margem
Esquerda / Direita alinhamento com a posição
Esquerda / Direita alinhar com a posição - solução crossbrowser
Esquerda / Direita alinhamento com flutuador
Esquerda / Direita alinhando com float - solução crossbrowser
CSS Combinadores
seletor descendente
seletor filho
Selector Irmãos adjacente
Selector Geral Irmãos
CSS Conteúdo Gerado
Insira o URL entre parênteses após cada ligação com a propriedade de conteúdo
Numeração seções e sub-seções com "Section 1", "1.1", "1.2" , etc.
Especificar as aspas com a propriedade cotações
CSS Pseudo-classes
Adicionar cores diferentes para um hiperlink
Adicionar outros estilos para hiperlinks
Uso de: foco
:first-child - coincidir com o primeiro elemento p
:first-child - coincidir com o primeiro elemento i em todos os elementos p
:first-child - Combine tudo o que eu elementos em todos os elementos p primeiro filho
Use de :lang
CSS Pseudo-elementos
Faça a primeira carta especial em um texto
Faça a primeira linha especial em um texto
Faça a primeira letra e primeiro especial de linha
USO: Antes de inserir algum conteúdo antes de um elemento
Use: depois de inserir algum conteúdo depois de um elemento
Bares CSS navegação
Totalmente estilo barra de navegação vertical,
Totalmente estilo barra de navegação horizontal
CSS Dropdowns
texto suspensa
Menu suspenso
Alinhado à direita menu dropdown
imagem suspensa
Barra de navegação suspensa
CSS Tooltips
dica direita
dica esquerda
Top dica
dica de fundo
Dica com seta
dica de animação
Galeria CSS Imagem
Galeria de imagens
Galeria de imagens Responsive
CSS opacidade Imagem
Criando imagens transparentes - efeito mouseover
Criando uma caixa transparente com texto em uma imagem de fundo
Sprites CSS Imagem
Um sprite de imagem
Um sprite de imagem - uma lista de navegação
Um sprite de imagem com efeito hover
CSS seletores de atributo
Seleciona todos os <a> elementos com um atributo de destino
Seleciona todos os <a> elementos com um target = "_ blank" atributo
Seleciona todos os elementos com um atributo title que contém uma lista separada por espaços de palavras, um dos quais é "flor"
Seleciona todos os elementos com um valor de atributo de classe que começa com "top" (deve ser palavra inteira)
Seleciona todos os elementos com um valor de atributo de classe que começa com "top" (não deve ser palavra inteira)
Seleciona todos os elementos com um valor de atributo de classe que termina com "test"
Seleciona todos os elementos com um valor de atributo de classe que contém "te"
Seletores de atributo explicou
Formas CSS
Campo de entrada de largura completa
Campo de entrada acolchoado
Campo de entrada delimitada
Campo de entrada com borda inferior
Campos de entrada coloridos
Campos de entrada focalizados
Campos de entrada focados 2
Entrada ícone / imagem com
Entrada da pesquisa Animated
textareas styling
Styling selecionar menus
Styling botões de entrada
Contadores CSS
Criar um contador
Contadores aninhados 1
Contadores aninhados 2
CSS3 cantos arredondados
Adicionar cantos arredondados aos elementos
Rodada cada canto separadamente
Criar cantos elípticas
Cantos arredondados CSS3 explicou
Imagens CSS3 Fronteira
Criar uma borda da imagem em torno de um elemento, usando a palavra-chave rodada
Criar uma borda da imagem em torno de um elemento, usando a palavra-chave do estiramento
Borda da imagem - valores fatia diferente
Imagens de fronteira CSS3 explicou
CSS3 Fundos
Adicione várias imagens de fundo para um elemento
Especificar o tamanho da imagem de fundo
Dimensionar uma imagem de fundo usando e "cover" "conter"
Definir tamanhos de múltiplas imagens de fundo
Imagem de fundo de tamanho normal (preencher completamente a área de conteúdo)
Use background-origem para especificar onde a imagem de fundo está posicionado
Use background-clipe para especificar a área de pintura de fundo
CSS3 gradientes
Gradiente Linear - de cima para baixo
Gradiente Linear - esquerda para a direita
Gradiente Linear - diagonal
Gradiente Linear - com um ângulo especificado
Gradiente Linear - com múltiplas paragens de cor
Gradiente Linear - cor de um arco-íris + texto
Gradiente Linear - com transparência
Gradiente Linear - um gradiente linear de repetição
Radial Gradient - limites de cor uniformemente espaçados
Gradiente Radial - limites de cor diferente espaçados
Radial Gradient - forma set
Radial Gradient - palavras-chave diferentes de tamanho
Radial Gradient - um gradiente radial de repetição
Efeitos de Sombra CSS3
Efeito de sombra simples
Adicionar uma cor para a sombra
Adicionar um efeito de borrão da sombra
O texto branco com sombra preta
Uma sombra brilho de néon vermelho
Uma sombra brilho de néon vermelho e azul
O texto branco com sombra preta, azul e azul escuro
Adicione uma caixa-sombra simples de um elemento
Adicionar cor à caixa-sombra
Adicionar cor e efeito do borrão para a caixa-sombra
Criar cartões de papel-like (texto)
Criar cartões de papel-like (imagens polaroid)
Efeitos de sombra CSS3 explicou
CSS3 Texto
Especificar como oculto, o conteúdo transbordou deve ser assinalada ao utilizador
Como exibir o conteúdo transbordada quando pairar sobre o elemento
Permitir palavras compridas para ser capaz de ser quebrado e embrulhar para a próxima linha
Especificar regras de linha de quebra
CSS3 fontes
Use suas "próprias" fontes no @font-face regra
Use suas "próprias" fontes no @font-face regra (negrito)
CSS3 Transformações 2D
translate() - mover um elemento de sua posição atual
rotate() - gira um elemento no sentido horário
rotate() - gira um elemento anti-horário
scale() - aumentar um elemento
scale() - diminuir um elemento
skewX() - inclina um elemento ao longo do eixo-X
skewY() - inclina um elemento ao longo do eixo Y
skew() - distorce um elemento ao longo do X e Y
matrix() - girar, redimensionar, mover e inclinar um elemento
CSS3 Transformações 3D
rotateX() - rodar um elemento em torno do seu eixo X num dado grau
rotateY() - gira um elemento em torno do seu eixo Y em um determinado grau
rotateZ() - gira um elemento em torno do seu eixo Z em um determinado grau
CSS3 Transitions
Width mudança de um elemento - Transição
Transição - largura de mudança e altura de um elemento
Especificar diferentes curvas de velocidade para uma transição
Especificar um atraso para um efeito de transição
Adicionar uma transformação de um efeito transição
Especificar todas as propriedades de transição em uma propriedade estenográfica
CSS3 animações
Vincular uma animação a um elemento
Animação - mudança de cor de fundo de um elemento
Animação - mudança de cor de fundo ea posição de um elemento
Retardar uma animação
Execute animação 3 vezes antes de parar
Execute animação para sempre
Animação correr em sentido inverso
Animação executado em ciclos alternados
As curvas de velocidade para animações
Animação propriedade estenográfica
CSS3 Imagens
imagem arredondada
imagem circulou
Imagem em miniatura
Imagem em miniatura como um link
imagem Responsive
Texto da imagem (canto superior esquerdo)
Texto da imagem (canto superior direito)
Texto da imagem (canto inferior esquerdo)
Texto da imagem (canto inferior direito)
Texto da imagem (centralizada)
imagens Polaroid
Filtro de imagem em tons de cinza
Avançado - Imagem Modal com CSS e JavaScript
CSS3 Botões
Botões básicos CSS
cores dos botões
tamanhos do botão
botões arredondados
Fronteiras botão colorido
botões Hoverable
botões de sombra
botões com deficiência
largura do botão
grupos de botões
Grupo de botões delimitada
Botão animado (Hover Effect)
Botão animado (Ripple Effect)
Botão animado (Pressionado Effect)
CSS3 Paginação
pagination simples
Pagination ativa e hoverable
Arredondada paginação ativo e hoverable
Efeito de transição Hoverable
pagination delimitada
Pagination com borda arredondada
Paginação com espaço entre os links
tamanho de paginação
Paginação com espaço entre os links
pagination centrado
Migalhas de pão
CSS3 várias colunas
Criar várias colunas
Especifique o intervalo entre colunas
Especificar o estilo da regra entre as colunas
Especifique a largura da regra entre as colunas
Especificar a cor da regra entre as colunas
Especifique a largura, estilo e cor da regra entre as colunas
Especificar quantas colunas um elemento deve abranger entre
Especificar, uma largura ideal sugerido para as colunas
CSS3 User Interface
Deixe um usuário redimensionar a largura de um elemento
Deixe um usuário redimensionar a altura de um elemento
Deixe um usuário redimensionar a largura e altura de um elemento
Adicionar espaço entre um esboço e a fronteira de um elemento
Interface de usuário CSS3 explicou
CSS3 Box Dimensionamento
Largura de elementos sem a caixa-sizing
Largura de elementos com box-sizing
Elementos de formulário + box-sizing
Caixa de CSS3 dimensionamento explicou
CSS3 Flexbox
Flexbox com três itens de flex
Flexbox com três itens Flex - direção rtl
flex-direção - row-reverse
flex-direção - coluna
flex-direção - column-reverse
justificar-content - flex-end
justificar-content - Centro
justificar-content - espaço-entre
justificar-content - espaço-around
alinhar-itens - stretch
alinhar-itens - flex-start
alinhar-itens - flex-end
alinhar-itens - Centro
alinhar-itens - baseline
flex-wrap - nowrap
flex-wrap - envoltório
flex-wrap - envolvê-reverse
alinhar-content - Centro
Encomendar os itens de flex
Margin-right: auto;
Margin: auto; = Perfeita centralização
alinhar-self em itens de flex
Especificar o comprimento do elemento flexível, em relação ao resto dos elementos de flex
Criar um site responsivo com flexbox
CSS3 consultas de mídia
Alterar a cor de fundo para Lightgreen se o visor é 480px de largura ou mais larga
Mostra um menu que irá flutuar à esquerda da página, se a janela de exibição é 480px de largura ou mais larga
Consultas de mídia CSS3 explicou
CSS3 consultas de mídia - Mais Exemplos
A página HTML
Largura de 520 para 699px - Aplicar um ícone e-mail para cada link
Largura de 700 a 1000 px - Prefácio as ligações com um texto
Largura acima 1001PX - Aplicar e-mail e ligações
Largura acima 1151px - Adicionar ícone como que usamos antes
Use a lista de links de e-mail em uma barra lateral em uma página da web
Mídia CSS3 consultas exemplos explicou