Existem 3 formas de utilizarmos o css em uma página web, veremos a seguir cada uma delas.
1 - Podemos declarar o css dentro da própria página em que o utilizaremos, para tal devemos adicionar à página as tags <style> e </style> declarando entre as mesmas todas as propriedades css a serem utilizadas. As tags <style> .. </style> devem preferencialmente ser inseridas entre as tags <head> e </head>, conforme o exemplo abaixo:
<html> <head> <style type="text/css"> body{ color:#006699; } .MinhaClasse{ font-weight:bold; } </style> </head> <body></body> </html> |
No exemplo acima:
- Utilizando o atributo css "color" estamos definindo que todo texto contido entre as tags <body> e </body> terá a cor "#006699";
- Utilizando o atributo css "font-weight" definimos que todo texto em elementos HTML cuja classe css seja ".MinhaClasse" estarão em negrito.
- Utilizando o atributo css "color" estamos definindo que todo texto contido entre as tags <body> e </body> terá a cor "#006699";
- Utilizando o atributo css "font-weight" definimos que todo texto em elementos HTML cuja classe css seja ".MinhaClasse" estarão em negrito.
Quando declaramos estilos css devemos primeiramente informar o local onde o estilo sera aplicado (body e .MinhaClasse no exemplo anterior), após informarmos o local onde o estilo será aplicado abrimos e fechamos chaves colocando entre elas todos os estilos css a serem aplicados no local previamente definido. Ao definirmos os estilos css informamos primeiro o estilo, depois o sinal de ":" seguido do valor do estilo e para finalizar o sinal de ";". O exemplo abaixo define 2 estilos para a tag body de um documento:
<html>
<head>
<style type="text/css">
body{ color:#006699; font-weight:bold; }
</style>
</head>
<body></body>
</html>
<head>
<style type="text/css">
body{ color:#006699; font-weight:bold; }
</style>
</head>
<body></body>
</html>
Podemos definir estilos css para todas ocorrências de uma determinada tag html no documento, para elementos em específico através de seu Id e podemos criar classes css que terão suas propriedades aplicadas a todos elementos html que a usem.
Para cada uma destas 3 situações no local onde definimos o elemento em que o css será aplicado teriamos:
- Para definirmos estilos css a todas ocorrencias de uma tag html na página basta informarmos o nome da tag html
- Para definirmos uma classe css basta adicionar um sinal de "." antes do nome da classe na hora de defini-la. Posteriormente nos elementos html onde você deseja que tais estilos sejam aplicados informe no atributo class da tag o nome da classe css que você desejar
- Para definirmos estilos css para uma tag html baseando-se em seu atributo Id basta adicionarmos o sinal de "#" seguido do id do elemento
- Para definirmos estilos css a todas ocorrencias de uma tag html na página basta informarmos o nome da tag html
- Para definirmos uma classe css basta adicionar um sinal de "." antes do nome da classe na hora de defini-la. Posteriormente nos elementos html onde você deseja que tais estilos sejam aplicados informe no atributo class da tag o nome da classe css que você desejar
- Para definirmos estilos css para uma tag html baseando-se em seu atributo Id basta adicionarmos o sinal de "#" seguido do id do elemento
Exemplo contendo cada uma das situações vistas:
<html>
<head>
<style type="text/css">
p{ color:#006699; font-weight:bold; }
.MinhaClasse{ font-size:14px; }
#MinhaDiv{ background-color:#330033; }
</style>
</head>
<body>
<p>Texto em negrito e com a cor #006699</p>
<p class="MinhaClasse">Texto em negrito, com a cor #006699 e com a fonte de tamanho 14px</p>
<div class="MinhaClasse">Texto com a fonte de tamanho 14px</div>
<div id="MinhaDiv">Elemento com o fundo de cor #330033</div>
</body>
</html>
<head>
<style type="text/css">
p{ color:#006699; font-weight:bold; }
.MinhaClasse{ font-size:14px; }
#MinhaDiv{ background-color:#330033; }
</style>
</head>
<body>
<p>Texto em negrito e com a cor #006699</p>
<p class="MinhaClasse">Texto em negrito, com a cor #006699 e com a fonte de tamanho 14px</p>
<div class="MinhaClasse">Texto com a fonte de tamanho 14px</div>
<div id="MinhaDiv">Elemento com o fundo de cor #330033</div>
</body>
</html>
No exemplo acima definimos que:
- Todo paragrafo estara em negrito e com a cor #006699
- Toda tag html cujo atributo class tiver o valor "MinhaClasse" tera seu texto com tamanho de 14px
- A tag html cujo id seja "MinhaDiv" tera o fundo com a cor #330033
- Todo paragrafo estara em negrito e com a cor #006699
- Toda tag html cujo atributo class tiver o valor "MinhaClasse" tera seu texto com tamanho de 14px
- A tag html cujo id seja "MinhaDiv" tera o fundo com a cor #330033
Podemos também definir o mesmo estilo para vários elementos ao mesmo tempo, basta separarmos os elementos onde aplicaremos os estilos por uma ",". No exemplo abaixo definimos o mesmo estilo para a tag body e para a classe css .MinhaClasse:
<html>
<head>
<style type="text/css">
body, .MinhaClasse{ color:#006699; font-weight:bold; }
</style>
</head>
<body></body>
</html>
<head>
<style type="text/css">
body, .MinhaClasse{ color:#006699; font-weight:bold; }
</style>
</head>
<body></body>
</html>
Ainda ao definirmos o elemento onde o estilo será aplicado podemos definir estilos a elementos filhos de um elemento pai, basta irmos colocando os elementos do pai para o filho separando-os por um espaço. Veja os exemplos:
<html>
<head>
<style type="text/css">
body p i { color:#006699; font-weight:bold; }
</style>
</head>
<body>
<i>Este texto não estara formatado com o estilo css acima definido</i>
<i><p>Este texto não estara formatado com o estilo css acima definido</p></i>
<p><i>Este tesxto estará</i></p>
</body>
</html>
<head>
<style type="text/css">
body p i { color:#006699; font-weight:bold; }
</style>
</head>
<body>
<i>Este texto não estara formatado com o estilo css acima definido</i>
<i><p>Este texto não estara formatado com o estilo css acima definido</p></i>
<p><i>Este tesxto estará</i></p>
</body>
</html>
O exemplo acima definie estilos css a todo conteúdo da pagina que estiver entre as tags <i> ... </i>, que por sua vez devem estar dentro de tags <p> ... </p> que também devem estar dentro das tags <body> ... </body>
Outro exemplo:
<html>
<head>
<style type="text/css">
.MinhaClasse p i { color:#006699; font-weight:bold; }
</style>
</head>
<body>
<div class="MinhaClasse">
<i>Este texto não estara formatado com o estilo css acima definido</i>
<i><p>Este texto não estara formatado com o estilo css acima definido</p></i>
<p><i>Este tesxto estará</i></p>
</div>
</body>
</html>
<head>
<style type="text/css">
.MinhaClasse p i { color:#006699; font-weight:bold; }
</style>
</head>
<body>
<div class="MinhaClasse">
<i>Este texto não estara formatado com o estilo css acima definido</i>
<i><p>Este texto não estara formatado com o estilo css acima definido</p></i>
<p><i>Este tesxto estará</i></p>
</div>
</body>
</html>
No exemplo acima o elemento de nivel mais superior agora é uma classe css e não mais a tag html body.
A segunda forma de utilizarmos o css é criarmos um arquivo .css onde iremos definir todas as propriedades css e depois incluí-lo a uma ou várias paginas.
Esta forma é utilizada para que você possa manter uma melhor organização do código de seu site e para que você reutilize em diversas páginas os mesmos estilos css definidos no arquivo. Ou seja, ao inves de definir o css em cada página do site, você pode fazê-lo em um arquivo .css separado, posteriormente linkando cada uma das paginas do site a este arquivo .cs.
Para criar um novo arquivo css no dreanweaver basta acessar as opções conforme mostrado abaixo:

A forma de declararmos as propriedades css neste arquivo .css é identica à que vimos ate aqui. Veja abaixo um exemplo de arquivo .css:

- A linha "@charset "utf-8";" serve para definir o charset utilizado no arquivo .css
- No css você pode criar blocos de comentários utilizando-se das tags /* */, é o caso no arquivo ao lado do trecho "/* TAGS */"
Quando utilizamos as definições css em um arquivo .css em separado é necessário que em cada página do site façamos uma referencia a este arquivo.css afim de poder utilizar as formatações nele definidas, para tal basta adicionarmos a tag <link></link> dentro das tags <head></head> nas páginas de nosso site conforme no exemplo abaixo:
<head>
<link href="site.css" rel="stylesheet" type="text/css" />
<link href="site2.css" rel="stylesheet" type="text/css" />
</head>
<link href="site.css" rel="stylesheet" type="text/css" />
<link href="site2.css" rel="stylesheet" type="text/css" />
</head>
No exemplo relacionamos a página em questão a dois arquivos .css, os arquivos "site.css" e "site2.css"
A terceira forma de uso do css é colocando as propriedades de formatação css dentro da tag html. Para tal basta utilizarmos o atributo style (este atributo está disponível em TODAS tags html). Exemplo:
<div style="background-color:#003333; color:#FFFFFF;">teste</div>
0 comentários:
Postar um comentário