Fórum | tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS Exemplos


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

Sintaxe CSS explicou


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

Modelo de caixa explicou


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

Alinhar propriedades explicou


CSS Combinadores

seletor descendente
seletor filho
Selector Irmãos adjacente
Selector Geral Irmãos

Seletores Combinator explicou


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

Pseudo-classes explicou


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

Pseudo-elementos explicou


Bares CSS navegação

Totalmente estilo barra de navegação vertical,
Totalmente estilo barra de navegação horizontal

Barras de navegação explicou


CSS Dropdowns

texto suspensa
Menu suspenso
Alinhado à direita menu dropdown
imagem suspensa
Barra de navegação suspensa

dropdowns explicou


CSS Tooltips

dica direita
dica esquerda
Top dica
dica de fundo
Dica com seta
dica de animação

tooltips explicou


Galeria CSS Imagem

Galeria de imagens
Galeria de imagens Responsive

Galeria de imagens explicou


CSS opacidade Imagem

Criando imagens transparentes - efeito mouseover
Criando uma caixa transparente com texto em uma imagem de fundo

Opacidade imagem explicou


Sprites CSS Imagem

Um sprite de imagem
Um sprite de imagem - uma lista de navegação
Um sprite de imagem com efeito hover

Sprites imagem explicou


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

formas explicou


Contadores CSS

Criar um contador
Contadores aninhados 1
Contadores aninhados 2

contadores explicou


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 fundos explicou


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

Gradientes CSS3 explicou


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

Texto CSS3 explicou


CSS3 fontes

Use suas "próprias" fontes no @font-face regra
Use suas "próprias" fontes no @font-face regra (negrito)

Fontes CSS3 explicou


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 2D transforma explicou


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 3D transforma explicou


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

Transições CSS3 explicou


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

Animações CSS3 explicou


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 Imagens explicou


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 botões explicados


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 Paginação explicou


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 várias colunas explicou


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 flexbox explicou


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