Exercícios: seletores CSS e flutuação de elementos
- Temos uma
<figure>com a imagem do centro de distribuição que queremos centralizar na página (margin auto) e acertar o tamanho (width).Para aplicar essas regras apenas a essefiguree não a todos da página, vamos usar o ID. Coloque umidna<figure>para podermos estilizá-la especificamente via CSS:<figure id="centro-distribuicao"> ....
Adicionando o CSS:#centro-distribuicao { margin-left: auto; margin-right: auto; width: 550px; }
Teste no navegador. Compare o resultado com a outra figura que não recebeu o mesmo estilo.
- Crie um rodapé para a página utilizando uma
<div>, que deve ser inserida como último elemento dentro da tag<body>:<div id="rodape"> <img src="img/logo.png"> © Copyright Mirror Fashion </div>
Teste o resultado. - Assim como fizemos para os títulos e subtítulos, estilize o nosso rodapé. Repare no uso do
idvia CSS para selecionarmos apenas o elemento específico que será estilizado. Repare também no uso do seletor de descendentes para indicar um elemento que está dentro de outro.#rodape { color: #777; margin: 30px 0; padding: 30px 0; } #rodape img { margin-right: 30px; vertical-align: middle; width: 94px; }
Teste o resultado final no navegador.
- Queremos que a imagem da Família Pelho esteja flutuando a direita no texto na seção sobre a História da empresa. Para isso, use a propriedade
floatno CSS.Como a<figure>com a imagem da família Pelho ainda não possuiid, adicione um:<figure id="familia-pelho"> ....
Agora podemos referenciar o elemento através de seuidem nosso CSS, indicando a flutuação e uma margem para espaçamento:#familia-pelho { float: right; margin: 0 0 10px 10px; }
Teste o resultado. Repare como o texto é renderizado ao redor da imagem, bem diferente de antes.
Nenhum comentário:
Postar um comentário