Introdução á costrução de layouts via CSS
Olá! Sejam bem-vindos á meu portal, onde, na medida do possível, busco dividir um pouco do que sei deste magnífico mundo WEB. Agora vou mostrar algumas linhas gerais de como começar a aprender CSS. Mas, o que é CSS? Para que isso?
CSS (Cascading Style Sheet), que, traduzindo do inglês; é "Modelo de Folhas em Cascata", é uma síntaxe que permite estilizar (Aplicar estilos), á elementos WEB. Em outras palavras, é uma maneira de definir características (Fonte, cor, plano de fundo, espaçamento), de cada elemento HTML. O CSS define como o navegador renderiza os elementos dispostos na página.
Para designers e desenvolvedores WEB, é bastante útil o seu domínio, nem que seja apenas o básico. É usado quando, na criação do site, o layout deve se transformar em página de um site. Aí, a imagem inteira deve ser cortada em blocos, que serão reutilizados na construção de uma pagina em HTML. Depois, deve-se empregar o CSS para posicionar os elementos HTML de acordo com o layout.
Um site bom de CSS que pode ser usado como consulta rápida ou para aprendizado em um nível um pouco mais avançado é o Site do Maujor
Eu mesmo estava treinando um pouco de CSS, e consegui elaborar um template simples e um outro, com 2 colunas. Mas, antes de começar a analisar os layouts, vamos observar alguns pontos:
Em um documento HTML, para carregar os estilos CSS de um arquivo externo, deve-se incluir o seguinte trecho de código dentro das tags
.Como este artigo não pretende ser uma manual ou um tutorial explicando passo-á-passo, segue abaixo o código da minha página de testes (teste.html), e de dois arquivos CSS: teste.css(Layout simples) e teste2.css
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>TESTE </head> <body></body> </html>Seja bemvindo!!
Site de testes de mesa, onde estou tentando aprender CSS
Conteúdo"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
Agora a estilização simples da página
/*
Layout simples
*/
#tudo{
width: 1000px; /*Largura máxima desta div*/
margin: 0 auto; /*Margin no topo é 0, e lateral direita é de acordo com o navegador*/
background-color: #666600; /*Cor de fundo em hexadecimal*/
}
#header{
padding: 5px; /*Espaçamento entre o elemento e as bordas*/
text-align: center; /*Texto em alinhamento centralizado*/
background-image: url(images/img04.jpg);
text-shadow: -4px 2px 2px #2F4F4F ; /*Sombreamento de textos*/
}
#navegacao{
color: #FFFFFF;
position: relative; /*Posicionamento de acordo com o elemento anterior ou com o container */
display: block; /*Será disposto em forma de bloco, ocupando, se possível a largura inteira*/
}
#content{
display: block;
position: relative; /*Relativo á DIV tudo, não ás dimensões da página*/
margin-top: 4em;
clear: both; /*Com esta linha, o container não ficará lado a lado dos elementos anteriores, mas, será feita uma quebra de linha, ficando embaixo dos elementos anteriores*/
padding: 1em;
line-height: 2em; /*Determina a altura da linha*/
}
#content p{
-webkit-hyphens: auto;
}
#content b{
margin: 10px;
text-align: center;
}
#footer{
position: relative;
}
#footer p{
text-align: center;
margin-left: 10px;
margin-bottom: 2em;
padding: 2em;
}
#nav li{
text-align: center;
float: left; /*Com este atributo, elemento tende a flutuar pro lado, o que indica que vai tentar ficar o máximo na esquerda dentro do container-pai*/
display: inline; /*O elemento será renderizado dentro do bloco que o contém*/
text-transform: uppercase; /*Transforma a letra em maiúscula*/
list-style: none;
}
#nav {
margin-left: 0px;
-webkit-margin-before: 0em;
-webkit-padding-start: 0px;
-moz-margin-before: 0em;
-moz-padding-start: 0px;
}
.container_images{
position: relative;
display: block;
}
.container_images img{
display: inline-block;
margin: 2em;
border: 1px solid #000;
/*-webkit-transform: rotate(50deg); */ /*Rotação*/
/*-webkit-transform: translate(500px, 100px); */ /*Setando posicionamento de forma direta*/
-webkit-transform: scale(2,2); /*Redimensiona as imagens de acordo com os parâmetros x e y*/
/*-webkit-transform: skew(66deg, -11deg);*/ /*Deita a imagem em forma inclinada*/
}
.container_images img:hover{
border: 1px solid #FFF;
}
#nav li a{
border-radius: 1em; /**/
border: 1px solid #999900;
text-decoration: none; /*Com esta opção, o link deixa de ser sublinhado*/
padding: 1em;
}
/*Quando o mouse pousa sobre alguns dos links do menu */
#nav li a:hover{
background-color: #000; /*Cor de fundo*/
color: #FFF; /*Cor do texto*/
border: 1px solid #333366; /*Especificações de borda: tamanho estilo cor*/
/*
Configurações de transição de propriedades aplicadas no elemento.
Pode-se ver que é aplicada á cada navegador (Chrome, mozilla, ópera)
MODELO: transition: propriedade tempo tipo, propriedade2 tempo tipo...
*/
-webkit-transition: background 2s linear,color 2s linear, border 3s linear;
-moz-transition: background 2s linear,color 2s linear, border 3s linear;
-o-transition: background 2s linear,color 2s linear, border 3s linear;
transition: background 2s linear,color 2s linear, border 3s linear;
}
Agora a estilização CSS para um template de duas colunas
/*
Layout com 2 colunas
*/
#tudo{
width: 1000px;
margin: 0 auto;
background-color: #666600;
}
#header{
padding: 5px;
text-align: center;
}
#navegacao{
position: relative;
color: #FFFFFF;
position: relative;
display: block;
float: left;
width: 150px;
}
#content{
float: left;
display: block;
position: relative;
padding: 1em;
line-height: 2em;
width: 800px;
}
#content b{
margin: 10px;
text-align: center;
}
#footer{
position: relative;
clear: both;
}
#footer p{
text-align: center;
margin-left: 10px;
margin-bottom: 2em;
padding: 2em;
}
ul#nav {
display: inline;
list-style: none;
}
ul#nav li{
padding: 1em;
text-transform: uppercase;
position: relative;
}
ul#nav li a{
text-align: center;
border-radius: 1em;
border: 1px solid #999900;
text-decoration: none;
padding: 1em;
}
ul#nav li a:hover{
background-color: #000;
color: #FFF;
border: 1px solid #333366;
-webkit-transition: background 2s linear,color 2s linear, border 3s linear;
-moz-transition: background 2s linear,color 2s linear, border 3s linear;
-o-transition: background 2s linear,color 2s linear, border 3s linear;
transition: background 2s linear,color 2s linear, border 3s linear;
}
Segue abaixo os links para as páginas de teste
Layout simples Layout com 2 colunasEspero que tenha gostado do post, e, caso tenha alguma dúvida ou queira postar um comentário, sinta-se á vontade!
