|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1º Parte - Entendendo o CSS
Quem já viu aquelas barras de rolagem coloridas em algumas páginas de internet? Eu vi e achei muito bacana e foi quando descobri que isto era controlado com CSS (Cascate Style Sheet - Folha de Estilo). O CSS nada mais é do que definições de formatação que são carregados no HTML.
Vou dar um exemplo simples; vamos supor que eu queira que o botão seja amarelo. Eu teria que colocar um nome para ele (onde eu chamo de classe) e nesta classe eu poria as definições que dariam a ele a cor amarela.
Ex:
Parece simples, né? E é simples mesmo. Preste atenção no código abaixo:
<html>
<head>
<title>Tutorial MundoTec</title>
</head>
<style type="text/css">
FONT.cornova{
font-family:arial;
font-size:12px;
color:green;
}
</style>
<body>
<font class="cornova">Meu texto está verde</font>
</body>
</html>
Agora vamos as explicações:
"<style type="text/css">" é o início do código onde está contido o CSS. Ele é encerrado com a tag </style>.
"FONT.cornova" temos que dividir em duas partes. Onde está "FONT" estamos especificando com qual tag iremos trabalhar e ".cornova" é o nome da classe que tem as definições de formatação. Se você não quiser definir com que tag quer trabalhar a forma ".cornova{parametros}" também funciona.
"font-family" é o tipo de fonte que usaremos. Aí podemos usar verdana, courier, times new roman e etc.
"font-size" diz o tamanho em pixels (px) ou pontos (pt) da fonte a ser formatada.
"color" define a cor da fonte. Pode ser escrita em hexadecimal também exemplo "#ff00ff".
Teriamos algo semelhando ao texto abaixo:
Meu texto está verde
Agora observem uma mudança no código HTML. Onde temos a tag <font> aparece um parâmetro "class". Este parâmetro é a referencia para o CSS que construi acima. Não há segredos.
Podemos aplicar CSS em quase todos os elementos de um HTML, mas há uma ressalva, o CSS não funciona perfeitamente em todos os browser, então não desespere se funcionar no seu micro e não funcionar no do seu amigo pois ele talvez esteja usando uma configuração diferente da sua.
Agora experimente o seguinte código:
<html>
<head>
<title>Tutorial MundoTec</title>
</head>
<style type="text/css">
FONT.cornova{
font-family:arial;
font-size:12px;
color:green;
}
TD.fundo{
background-color:black;
}
</style>
<body>
<table>
<tr>
<td class="fundo"><font class="cornova">Meu texto está verde</font></td>
</tr>
</table>
</body>
</html>
Observe agora que adicionei o seguinte código
TD.fundo{
background-color:black;
}
e observe também que ao construir a tabela também inseri em sua célula uma instrução <td class="fundo">. Execute o código e observe.
Tutoriais
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
 |
 |
|
|
|
|
| |
