Olá a todos! Bem vindos a mais um artigo da coluna de
Desenvolvimento Web do Cat Geek. No artigo da semana passada,
'Entendendo o 'HTLM5', prometi explicar neste artigo um pouco sobre CSS. Pois bem, ai vai.
O CSS é usado para estilizar documentos HTML. Com ele, temos controle sobre os elementos do HTML, podendo alterar seus valores e proporcionar um layout bonito e agradjável às nossas páginas.
O CSS é uma declaração que fazemos e define como o estilo será aplicado a um elemento HTML. Por exemplo, se quero declarar no documento HTML, que o conteúdo contido nas TAG’S <H1></H1> será da cor vermelha, tamanho 12, e fonte tipo arial, adiciono o seguinte código:
<H1 color:”red” size:”12″ font:”arial”>Titulo</H1>
Porém, toda vez que eu quiser estas declarações em um titulo na TAG <H1>, terei que repetir este código. Com o CSS é muito mais fácil. Insiro no HTML a seguinte TAG:
<style type=”text/css”>
H1 {
color: red;
size: 12px;
font: arial;
}
</style>
Esta TAG diz ao documento HTML que o que for declarado dentro dela é estilização CSS. Da mesma maneira que no HTML, declaramos a cor vermelha, o tamanho 12 e a fonte arial. Agora, toda vez que eu precisar usar a tag <H1>, estas declarações aparecerão.
É interessante manter as declarações CSS contidas nas TAG’S <style> dentro do HEAD do documento HTML, ou em um arquivo externo.css, mas isso veremos em um próximo artigo.
Vamos criar uma pagina para testar nossos exemplos? Vá em iniciar, acessórios, bloco de notas, ou use seu editor html. crie um documento html, e introduza o código acima dentro do HEAD, seguindo o exemplo:
<HTML>
<HEAD>
<TITLE>Cat Geek - Conteúdo Tecnológico</TITLE>
<style type=”text/css”>
H1 {
color: red;
size: 12px;
font: arial;
}
</style>
</HEAD>
<BODY>
</BODY>
</HTML>
Crie uma pasta com o nome projetos_css, e salve o documento como primeiros_passos_em_css.html, não esquecendo de optar pela extensão todos os arquivos, em vez de documento de texto.
Pronto, agora sempre que eu quiser que um titulo tenha as declarções da TAG <H1>, é sós adiconar o conteúdo dentro das TAG’S <H1></H1>, seguindo o exemplo abaixo:
<HTML>
<HEAD>
<TITLE>Cat Geek - Conteúdo Tecnológico</TITLE>
<style type=”text/css”>
H1 {
color: red;
size: 12px;
font: arial;
}
</style>
</HEAD>
<BODY>
<H1>Bem vindo ao mundo das folhas de estilo em cascata.</H1>
<p>
Esta e nossa primeira pagina com estilização CSS.
</p>
</BODY>
</HTML>
Com o CSS também é possivel fazer declarações que serão usadas para qualquer elemento HTML. Essas declarações são chamadas de classes. Para criar uma classe, basta acrescentar um ponto a um nome que ira representar as declarações. Por exemplo, quero que todo conteúdo dentro das tags <h3></h3> de minha pagina, tenham declarações especificas para apenas um cabeçalho: cor cinza, fonte cambria, tamanho 14 e tenha uma margem de 5px à esquerda. Vou nomear a classe para diferenciar as tags <h3></h3> de substitutos.VouVeja como fica:
<style type=”text/css”>
h3.subtitulos {
color: gray;
size: 14px;
font: cambria;
margin-left: 5px;
}
Pronto, agora sempre que eu quiser que uma palavra ou frase tenha as declarações da classe subtitulos, basta adiconar a frase entre as tag <h3></h3> com a classe substitutos.
<h3 class="substitutos">Lorem spum, lorem spum, lorem spum<h3/>
Vamos adiconar a classe subtitulos ao nosso documento, e declarar os mesmos estilos para todos os cabeçalhos:
<HTML>
<HEAD>
<TITLE>Cat Geek - Conteúdo Tecnológico</TITLE>
<style type=”text/css”>
h1, h2, h3, h4, h5, h6 {
color: red;
size: 12px;
font: arial;
}
.subtitulos {
color: gray;
size: 14px;
font: cambria;
margin-left: 5px;
}
</style>
</HEAD>
<BODY>
<H1>Bem vindo ao mundo das folhas de estilo em cascata.</H1>
<p>
Esta e nossa primeira pagina com estilização CSS.
</p>
Lorem spum, lorem spum, lorem spum
<h3 class="substitutos">Lorem spum, lorem spum, lorem spum<h3/>
</BODY>
</HTML>
Salve e veja como ficou no documento HTML. Se ele ja estiver aberto no navegador é só
apertar F5.
O Css tambem proporciona declarações para um único elemento HTML. Essas declarações são chamadas de ID. As ID’s são usadas para criar layout’s, entre outras coisas.
Vamos criar um layout básico, com declarações diferentes para cada parte da página. Crie um novo documento HTML, com o nome de meu_primeiro_layout_css.html. Nossa página terá um topo, um menu lateral esquerdo, o conteudo e um rodapé.
OBS: Sempre que você quiser inserir um comentário em um documento CSS, coloque-o entre /* e */. Os comentários são muito uteis para você lembrar o que é o que depois de algum tempo. Nossa página ficará assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cat Geek - Conteúdo Tecnológico</title>
<style type="text/css">
body { /* as declarações feitas no body aplicam-se a todo documento HTML */
text=align: center; /*declara que o texto deve ficar centralizado*/
padding:0;
}
.container {width: 770px; margin:0 auto; padding:0;}
.header {/* as declarações feitas no body aplicam-se ao topo */
width: 770px;/*declara o comprimento do topo em 770px*/
heigth: 30px; /*altura do topo*/
background-color: yellow; /*declara que o fundo do topo é amarelo*/
font-family: "trebuchet ms"; /*declara que a fonte usada no topo será trebuchet ms*/
font-size: 35px;/*declara o tamanho da fonte em 35 pixels*/
color: blue;/* declara que no topo a cor da fonte é azul*/
}
.sidebar {/* as declarações feitas no body aplicam-se ao menu lateral */
width: 270px;/*comprimento do menu lateral*/
heigth: auto; /*declara a altura do menu lateral como auto – aumenta de acordo com o as informações do documento*/
background-color: green; /*declara que o fundo do menu lateral é verde*/
font-family: "arial";/*declara que a fonte usada no menu lateral será arial*/
font-size: 14px;/*declara o tamanho da fonte em 14 pixels*/
color: white;/* declara que no topo a cor da fonte é branca*/
float:right;/*faz com que o menu lateral fique do lado esquerdo da pagina*/
}
.content {/* as declarações feitas no body aplicam-se ao conteúdo */
width: 500px;/*comprimento do menu lateral*/
heigth: 500px; /*declara a altura do conteudo como auto – aumenta de acordo com o as informações do documento*/
background-color:gray; /*declara que o fundo do menu lateral é vermelho*/
font-family: "calibri";/*declara que a fonte usada no menu lateral será calibri*/
font-size: 16px;/*declara o tamanho da fonte em 16 pixels*/
color: blue;/* declara que no topo a cor da fonte é azul*/
float:right;/*faz com que o conteudo fique do lado direito da pagina*/
}
.footer {/* as declarações feitas no body aplicam-se ao rodapé */
width: 770px;/*comprimento do menu lateral*/
heigth: 15px; /*altura do rodapé*/
background-color:red; /*declara que o fundo do menu lateral é vermelha*/
font-family: "cambria";/*declara que a fonte usada no menu lateral será cambria*/
font-size: 12px;/*declara o tamanho da fonte em 12 pixels*/
color: black;/* declara que no rodapé a cor da fonte é black*/
clear:both;/*declara que o rodapé tem que ficar abaixo dos outros elementos */
}
h1, h2, h3, h4, h5, h6 {
color: white;
size: 12px;
font: arial;
}
h3.subtitulos {
color: green;
size: 14px;
font: cambria;
margin-left: 5px;
}
</style>
</head>
<!-- o documento HTML fica assim: -->
<body>
<div class="container">
<div class="header">Cat Geek - Conteúdo Tecnologico</div><!-- fecha a div header-->
<div class="sidebar">
<ul>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
<li>link </li>
</ul>
</div><!-- fecha a div sidegar -->
<div class="content">
<h1>Bem vindo ao mundo das folhas de estilo em cascata.</h1>
<h2>Você está lendo um artigo do Cat Geek.</h2>
<h3 class="subtitulos">Lorem spum, lorem spum, lorem spum<h3/>
<h4>Coluna de Desenvolvimento Web</h4>
<h5>Por Rodrigo Zandonadi</h5>
<h6>Cat Geek - Conteúdo Tecnologico</h6>
</div><!-- fecha a div content -->
<div class="footer">Volte sempre</div><!-- fecha a div content -->
</div><!-- fecha a div container -->
</body><!-- fecha o body -->
</html><!-- fecha o html -->
Salvem e vejam no navegador como fica. Para mais referências em CSS, indico o
site do Major, grande autoridade do assunto.
Até semana que vêm.
