Relatório css
749 palavras
3 páginas
Relatório de CSSUsando como exemplo os layouts de outros sites e-commerce, observamos que suas estruturas principais são relativamente parecidas. Usando um banner na parte superior, barras de navegação na horizontal abaixo do banner ou esquerda em vertical. Em alguns casos encontramos as 2 barras de navegação.
No layout do site proposto foi montada a estrutura do HTML com o conteúdo da página e uma página de estilos (CSS) contendo a formatação de toda a página. Foi especificado dentro do CSS que o conteúdo para a TAG body deve usar as fontes Arial, Helvetic ou sans-serif, com tamanho de 12px, cor preta, fundo (background) estático usando a imagem background.gif dentro da pasta “imgs”, com texto alinhado ao centro (para que todo conteúdo dentro de <body> fique centrado) margem e espaçamento 0, recuo de primeira linha de 18px e com tamanho fico de 100% de altura usado para manter o rodapé sempre abaixo.
@charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: #000; background-attachment: fixed; background-image: url(imgs/background.gif); text-align:center; margin:0; padding:0; text-indent: 18px; height:100%;
}
Na tag “html” é aplicado a altura de 100% também usado para manter o rodapé abaixo. html { height:100%; }
Para as tags h1 serão utilizadas: cor vermelha (#900) e tamanho 16px. h1 { color:#900; font-size:16px;
}
Para as tags h2 serão utilizadas: cor vermelha (#900) e tamanho 13px. h2 { color:#900; font-size:13px;
}
Os links da página receberam a cor vermelha (#900) para o link visitado e para seu estado normal. Para o link ativo e ao passar o mouse sobre ele foi aplicado a cor laranja (#C60). E de todos eles foi retirada a decoração de texto para que não ficassem sublinhados. a:link { color:#900; text-decoration:none; } a:active { color:#C60; text-decoration:none; }
a:visited { color:#900; text-decoration:none; } a:hover {