Como estilizar uma imagem com CSS. Use CSS para apresentar as imagens do seu site da melhor maneira possível. Neste artigo, você aprenderá onde colocar uma imagem e se deve ou não incluir decorações como bordas.
Flutuante e centralizado
Etapa 1
Insira sua imagem na página com seu método usual. Não se esqueça de incluir um texto alternativo adequado para a imagem.
Etapa 2
Para fazer com que seu texto contorne a imagem à direita, semelhante à forma como está na foto que apresenta este artigo, use uma regra CSS como esta:
img { float:esquerda; padding-right:1em; }
A regra float:left faz com que a imagem se mova para a margem esquerda. A regra de preenchimento à direita evita que o texto bata no lado direito da imagem. Se uma borda fosse adicionada a esta imagem, o preenchimento viria entre a imagem e a borda. Consulte a Seção 2 para trabalhar com uma imagem com borda.
Etapa 3
Para fazer a quebra de texto à esquerda, flutue a imagem na margem direita. Use uma regra como esta:
img { float:certo; padding-esquerda:1em; }
Etapa 4
Para centralizar uma imagem, você deve primeiro transformar o elemento de imagem normalmente embutido em um elemento de nível de bloco.
img { display:bloco; }
Etapa 5
Em seguida, adicione margens à esquerda e à direita da imagem para centralizá-la. O valor adequado para as margens esquerda e direita para centralizar qualquer coisa é auto.
img { display:bloco; margem direita:auto; margem esquerda:auto; }
Bordas e margens
Etapa 1
As bordas podem ser usadas para criar um efeito de sombra ou a aparência de um quadro.
Para criar uma borda grossa, semelhante a um quadro, usando o estilo de borda de ranhura, uma regra como esta pode ser usada:
img { float:esquerda; largura da borda:1em; estilo de borda:sulco; cor da borda:#000000; }
Outros estilos de borda são sólidos, pontilhados, tracejados, duplos, cumeados, inseridos e iniciais. A largura pode ser expressa em pixels, ems ou porcentagens.
Etapa 2
As bordas podem ser aplicadas seletivamente na parte superior, direita, inferior e esquerda da imagem. Você pode usar esse conhecimento para criar um efeito como uma sombra projetada.
Etapa 3
Usando uma borda sólida em 2 tons de cinza apenas na borda direita e inferior, você obtém um efeito de sombra.
img { float:esquerda; estilo de borda direita:sólido; borda-direita-cor:#CCCCCC; estilo de fundo de borda:sólido; cor do fundo da borda:#999999; }
Etapa 4
A margem está fora da fronteira. Adicionar alguma margem à direita e à parte inferior da imagem impedirá que o texto bata nela.
img { float:esquerda; estilo de borda direita:sólido; largura da borda direita:8px; borda-direita-cor:#CCCCCC; estilo de fundo de borda:sólido; largura da borda inferior:8px; cor do fundo da borda:#999999; margem direita:1em; margem inferior:1em; }
Dica
Se você tiver imagens em mais de uma divisão (div) de uma página, use seletores descendentes para estilizá-las individualmente. Seletores possíveis:#content img, #sidebar img, #feature img.
