Um elemento de nível de bloco em um documento HTML (por exemplo, uma página da Web) aparece em ordem seqüencial. Para modificar a ordem para tornar a página mais atraente ou melhorar sua utilidade, você precisará agrupar blocos, incluindo imagens, para que o texto dessa página flua em torno dela.
Em termos da Web, esse efeito é conhecido como "flutuante" na imagem. Esse estilo é obtido com a propriedade CSS para "float". Esta propriedade permite que o texto flua em torno da imagem alinhada à esquerda para o lado direito. Ou em torno de uma imagem alinhada à direita para o lado esquerdo.
Comece com HTML
A primeira coisa que você precisa fazer é ter algum HTML para trabalhar. Para o nosso exemplo, vamos escrever um parágrafo de texto e adicionar uma imagem no início do parágrafo (antes do texto, mas depois da abertura
tag). Aqui está o que essa marcação HTML se parece com:
O texto do parágrafo vai aqui. Neste exemplo, temos uma imagem de uma foto na cabeça, então esse texto provavelmente seria sobre a pessoa para quem o tiro na cabeça é.
Por padrão, nossa página da Web seria exibida com a imagem acima do texto, porque as imagens são elementos em nível de bloco em HTML. Isso significa que o navegador exibe as quebras de linha antes e depois do elemento de imagem por padrão. Vamos mudar esse visual padrão, transformando em CSS. Primeiro, no entanto, adicionaremos um valor de classe ao nosso elemento de imagem. Essa classe funcionará como um "gancho" que usaremos em nosso CSS mais tarde.
O texto do parágrafo vai aqui. Neste exemplo, temos uma imagem de uma foto na cabeça, então esse texto provavelmente seria sobre a pessoa para quem o tiro na cabeça é.
Note que esta classe de "esquerda" não faz nada sozinha. Para que possamos alcançar nosso estilo desejado, precisamos usar o CSS a seguir.
Estilos CSS
Com o nosso HTML no lugar (incluindo o nosso atributo de classe de "esquerda"), podemos agora voltar para o CSS. Nós adicionaríamos uma regra à nossa folha de estilo que flutuaria essa imagem e também adicionaria um pequeno preenchimento próximo a ela, de modo que o texto que será finalmente contornado pela imagem não se aproxime muito dela. Aqui está o CSS que você pode escrever:
.esquerda { float: esquerda; preenchimento: 0 20px 20px 0;}
Esse estilo exibe essa imagem à esquerda e adiciona um pequeno preenchimento (usando algumas abreviações de CSS) à direita e à parte inferior da imagem. Se você revisou a página que contém esse HTML em um navegador, a imagem agora seria alinhada à esquerda e o texto do parágrafo apareceria à direita com uma quantidade apropriada de espaçamento entre os dois. Observe que o valor da classe "left" que usamos é arbitrário. Nós poderíamos ter chamado qualquer coisa porque o termo "esquerda" não faz nada por conta própria. Qualquer termo que você usar deve ter um atributo de classe no HTML que funcione com um estilo CSS real que dita as alterações visuais que você deseja fazer. Essa abordagem de dar ao elemento image um atributo de classe e, em seguida, usar um estilo CSS geral que flutua o elemento, é apenas uma maneira de realizar essa aparência de "imagem alinhada à esquerda". Você também pode retirar o valor da classe da imagem e estilizá-la com CSS, escrevendo um seletor mais específico. Por exemplo, vamos ver um exemplo onde essa imagem está dentro de uma divisão com um valor de classe "main-content". Para estilizar esta imagem, você poderia escrever este CSS: .main-content img { float: esquerda; preenchimento: 0 20px 20px 0;}
Nesse cenário, nossa imagem seria alinhada à esquerda, com o texto flutuando como antes, mas não precisamos adicionar um valor de classe extra à nossa marcação. Fazer isso em escala pode ajudar a criar um arquivo HTML menor, que será mais fácil de gerenciar e também pode ajudar a melhorar o desempenho. Finalmente, você pode adicionar os estilos diretamente na sua marcação HTML, assim:
Esse método é chamado de "estilos in-line". Não é aconselhável porque combina o estilo de um elemento com sua marcação estrutural. As práticas recomendadas da Web determinam que o estilo e a estrutura de uma página permaneçam separados. Essa segregação é especialmente útil quando sua página precisa alterar seu layout e procurar diferentes tamanhos de tela e dispositivos com um website responsivo. Ter o estilo da página entrelaçado no HTML tornará muito mais difícil criar consultas de mídia que ajustem a aparência do site conforme necessário para essas telas diferentes. Maneiras alternativas para alcançar esses estilos
O texto do parágrafo vai aqui. Neste exemplo, temos uma imagem de uma foto na cabeça, então esse texto provavelmente seria sobre a pessoa para quem o tiro na cabeça é. Evite estilos inline
O texto do parágrafo vai aqui. Neste exemplo, temos uma imagem de uma foto na cabeça, então esse texto provavelmente seria sobre a pessoa para quem o tiro na cabeça é.
