Olá povo!!!
Seguimos hoje falando de desenvolvimento web, mais especificadamente sobre as follhas de estilo cascata - CSS.
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 na próxima aula.
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>Rodrigo Zandonadi Web Design</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>Rodrigo Zandonadi Web Design</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 todos os sub titulos de minha pagina tenham as seguintes declarações: cor cinza, fonte cambria, tamanho 14 e tenha uma margem de 5px à esquerda. Veja como fica:
<style type="text/css">
.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 à TAG <span class="subtitulos>. Veja como fica no documento HTML:
<span class="subtitulo>Sub titulo 1</span>
Lorem spum, lorem spum, lorem spum<br/>
<span class="subtitulo>Sub titulo 2</span>
Lorem spum, lorem spum, lorem spum<br/>
Vamos adiconar a classe subtitulos ao nosso documento:
<HTML>
<HEAD>
<TITLE>Rodrigo Zandonadi Web Design</TITLE>
<style type="text/css">
H1 {
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>
<span class="subtitulo>Sub titulo 1</span>
Lorem spum, lorem spum, lorem spum<br/>
<span class="subtitulo>Sub titulo 2</span>
Lorem spum, lorem spum, lorem spum<br/>
</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é. As declarações ficariam assim:
Body: comprimento 770px, texto centralizado
Topo: fundo amarelo, altura 30px, fonte Trebuchet MS de tamanho 35px e cor azul.
Menu lateral: fundo verde, comprimento 270px, fonte Cambria de tamanho 14px e cor branca.
Conteudo: fundo vermelho, comprimento 500px, fonte Calibri de tamanho 12px e cor azul.
Rodapé: fundo azul, altura 15px, fonte calibri de tamanho 9px e cor vemelha.
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.
Nossas declarações CSS ficarão assim:
<HTML>
<HEAD>
<TITLE>Rodrigo Zandonadi Web Design</TITLE>
<style type="text/css">
body { /* as declarações feitas no body aplicam-se a todo documento HTML */
width: 770px; /*declara o comprimento da pagina em 770px*/
heigth: 30px; /*declara a altura da pagina como auto - aumenta de acordo com o as informações do documento*/
text=align: center; /*declara que o texto deve ficar centralizado*/
}
topo {/* as declarações feitas no body aplicam-se ao topo */
width: 770px;/*declara o comprimento do topo em 770px*/
heigth: 30px; /*altura do topo*/
backgrond-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*/
}
menu_lateral {/* 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*/
backgrond-color: green; /*declara que o fundo do menu lateral é verde*/
font-family: "cambria";/*declara que a fonte usada no menu lateral será cambria*/
font-size: 14px;/*declara o tamanho da fonte em 14 pixels*/
color: white;/* declara que no topo a cor da fonte é branca*/
float:left;/*faz com que o menu lateral fique do lado esquerdo da pagina*/
}
conteudo {/* as declarações feitas no body aplicam-se ao conteúdo */
width: 500px;/*comprimento do menu lateral*/
heigth: auto; /*declara a altura do conteudo como auto - aumenta de acordo com o as informações do documento*/
backgrond-color: red; /*declara que o fundo do menu lateral é vermelho*/
font-family: "calibri";/*declara que a fonte usada no menu lateral será calibri*/
font-size: 12px;/*declara o tamanho da fonte em 12 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*/
}
rodape {/* as declarações feitas no body aplicam-se ao rodapé */
width: 770px;/*comprimento do menu lateral*/
heigth: 15px; /*altura do rodapé*/
backgrond-color: blue; /*declara que o fundo do menu lateral é azul*/
font-family: "calibri";/*declara que a fonte usada no menu lateral será calibri*/
font-size: 9px;/*declara o tamanho da fonte em 9 pixels*/
color: red;/* declara que no topo a cor da fonte é vermelha*/
}
</style>
<!-- o documento HTML fica assim: -->
<body>
<topo>Topo</topo>
<menu_lateral>Menu</menu>
<conteudo>Conteudo</conteudo>
<rodape>Rodape</rodape>
</body>
</HTML>
Salvem e vejam no navegador como fica.
Nas próximas aulas explicarei mais detalhadamente cada declaração. Valeu pessoal.
Blog destinado a tutoriais, artigos e matérias sobre web design, design gráfico, logotipo, logosimbol, programação, internet, marketing e publicidade e propaganda
Nenhum comentário:
Postar um comentário