Horário de aula

Tutorial básico CSS

• Tutorial de CSS
• Introdução ao CSS
• Sintaxe do CSS
• Seletor do CSS
• Uso do CSS
• Comentário do CSS
• Cor do CSS
• Cor RGB do CSS
• Cor HEX do CSS
• Cor HSL do CSS
• Fundo do CSS
• Imagem de Fundo do CSS
• Repetição do Fundo do CSS
• Atributo de Fixação do Fundo do CSS
• Atributo de Fundo Abreviado do CSS
• Borda do CSS
• Largura da Borda do CSS
• Cor da Borda do CSS
• Borda de Todos os Lados do CSS
• Atributo de Borda Abreviado do CSS
• Borda Arredondada do CSS
• Margem do CSS
• Mergulho da Margem do CSS
• Margem Interna do CSS
• Altura / largura CSS
• Modelo de Caixa do CSS
• Contorno do CSS
• Largura do Contorno do CSS
• Cor do Contorno do CSS
• Atributo de Contorno Abreviado do CSS
• Deslocamento do Contorno do CSS
• Texto do CSS
• Alinhamento do Texto do CSS
• Decoração do Texto do CSS
• Transformação do Texto do CSS
• Espaçamento do Texto do CSS
• Sombra do Texto do CSS
• Fonte do CSS
• Estilo da Fonte do CSS
• Tamanho da Fonte do CSS
• Fonte do Google do CSS
• Atributo de Fonte Abreviado do CSS
• Ícone do CSS
• Link do CSS
• Lista do CSS
• Tabela do CSS

Tutorial intermediário CSS

• Display CSS
• max-width CSS
• Posicionamento CSS
• z-index CSS
• Transbordamento CSS
• Flutuante CSS
• Remoção de flutuantes CSS
• Exemplo de Flutuante do CSS
• inline-block CSS
• Alinhamento CSS
• Combinador CSS
• Pseudo-Classe do CSS
• Pseudo-Elemento do CSS
• Opacidade do CSS
• Barra de Navegação do CSS
• Barra de Navegação Vertical do CSS
• Barra de Navegação Horizontal do CSS
• Menu Suspensível do CSS
• Biblioteca de Imagens do CSS
• Sprite de Imagem do CSS
• Seletor de Atributo do CSS
• Formulário do CSS
• Contador do CSS
• Layout do Site do CSS
• Unidade do CSS
• Especifidade do CSS
• CSS !important
• Função Matemática do CSS

Tutorial avançado CSS3

• Arredondamento do CSS
• Imagem da Borda do CSS
• Fundo do CSS
• Cor do CSS
• Palavra-Chave da Cor do CSS
• Gradiente do CSS
• Gradiente Radial do CSS
• Sombra do CSS
• box-shadow do CSS
• Efeitos de texto CSS
• Fontes de rede CSS
• Transformações 2D CSS
• Transformações 3D CSS
• Transições CSS
• Animações CSS
• Dicas de ferramenta CSS
• Estilos de imagem CSS
• Propriedade object-fit CSS
• object-position CSS
• Máscaras CSS
• Botões CSS
• Paginação CSS
• Colunas CSS
• Interface do usuário CSS
• Variáveis CSS
• Variáveis cobertas CSS
• Variáveis CSS - JavaScript
• Variáveis CSS - consultas de mídia
• CSS @property
• Box Sizing CSS
• Flexbox CSS
• Consultas de mídia CSS
• Exemplos de consultas de mídia CSS

Design responsivo CSS

• Introdução RWD
• Visão RWD
• Visão de grade RWD
• Consultas de mídia RWD
• Imagens RWD
• Vídeos RWD

Tutorial de grade CSS

• Módulo de layout de grade CSS
• Container de grade CSS
• Item de grade CSS

Exemplo CSS

• Exemplo CSS

Teste CSS

• Teste CSS

Manual de referência CSS

• Manual de referência CSS
• Suporte do navegador CSS
• Seletor do CSS
• Funções CSS
• Unidade do CSS
• Audível CSS
• Fontes de segurança de rede CSS
• Produção animável CSS
• Unidade do CSS
• Cor do CSS
• Valores de cor CSS
• Valores padrão CSS
• Entidades CSS

Cursos optativos

Recomendação de curso:

• Bauhaus CodeW3C.com

Alinhamento do CSS - Flutuante e Limpar

CSS float A propriedade determina como o elemento flutua.

CSS clear A propriedade determina quais elementos podem flutuar ao lado de um elemento de limpeza e em qual lado.

Propriedade float

float A propriedade é usada para localizar e formatar conteúdo, por exemplo, para que a imagem flutue para a esquerda até o texto no contêiner.

float A propriedade pode definir um dos seguintes valores:

• left - O elemento flutua para o lado esquerdo do contêiner
• right - O elemento flutua no lado direito do contêiner
• none - O elemento não flutua (será exibido na posição onde o texto foi apresentado). Valor padrão.
• inherit - O elemento herda o valor float de seu pai

O uso mais simples é:float A propriedade pode realizar o efeito de envolvimento de texto ao redor da imagem (nos jornais).

Exemplo - float: right;

Neste exemplo, a imagem deve flutuar para a direita no texto:

Tutoriais de tecnologia da Web líder - todos gratuitos. No CodeW3C.com, você pode encontrar todos os tutoriais de construção de site que você precisa. Desde HTML básico até CSS, até XML avançado, SQL, JS, PHP.

Nosso manual de referência cobre todos os aspectos da tecnologia de site. Isso inclui padrões técnicos do W3C: HTML, CSS, XML. E outras tecnologias, como JavaScript, PHP, SQL.

No CodeW3C.com, oferecemos milhares de exemplos. Ao usar nosso editor online, você pode editar esses exemplos e experimentar o código.

Exemplo

img {
  float: right;
}

Experimente você mesmo

Exemplo - float: left;

Neste exemplo, a imagem deve estar no texto:Para a esquerdaFlutuação:

Tutoriais de tecnologia da Web líder - todos gratuitos. No CodeW3C.com, você pode encontrar todos os tutoriais de construção de site que você precisa. Desde HTML básico até CSS, até XML avançado, SQL, JS, PHP.

Nosso manual de referência cobre todos os aspectos da tecnologia de site. Isso inclui padrões técnicos do W3C: HTML, CSS, XML. E outras tecnologias, como JavaScript, PHP, SQL.

No CodeW3C.com, oferecemos milhares de exemplos. Ao usar nosso editor online, você pode editar esses exemplos e experimentar o código.

Exemplo

img {
  float: left;
}

Experimente você mesmo

Exemplo - No float

Neste exemplo, a imagem será exibida na posição onde o texto foi apresentado (float: none;):

Exemplo

img {
  float: none;
}

Experimente você mesmo

Leitura adicional

Livros complementares:Flutuante CSS

Caixa de ferramentas

Manual de referência CSS

Exemplo CSS

Teste CSS

Livros complementares CSS

Links de patrocinadores