Código CSS - Entendendo a folha de estilos

19:05Fresh Young´s

Introdução ao código CSS

Olá pessoal, neste artigo vamos falar um pouco sobre o código CSS(Cascating Style Sheet). Iremos ver como podemos aplicar esses códigos em seus sites.
Existem diversas maneiras de se incluir códigos css em seu site, são elas:
  • Inline
  • Declarando na mesma página
  • Utilizando um arquivo externo
Agora vamos ver como utilizar cada um deles. Vamos começar criando um documento HTML que será o nosso documento padrão para o tutorial, nele conterá apenas uma tag h1 e parágrafos.
Listagem 1: Documento html padrão
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <title>Código CSS - Entendendo a folha de estilos</title>
</head>
<body>
<h1>Sou a tag h1</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
</body>
</html>
Bom, agora que criamos um html padrão, vamos começar a aplicar o CSS nele mostrando as diferentes formas de se fazer isso, vamos começar com o css inline.

Código CSS Inline

O css inline é pouco utilizado em websites por deixar o código "poluído" com muita informação, mas é muito utilizado na criação de mailings e e-mail marketing.
Sua utilização é bem simples, para usá-lo, basta inserir o style dentro da própria tag html que ele receberá o efeito.
Como ele é aplicado diretamente naquela tag específica, é impossível reutilizar ele em outra tag, tendo que sempre copiar e colar ou criar um novo para cada tag que você queira estilizar.
Listagem 2: Aplicando css inline
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
    <title>Código CSS - Entendendo a folha de estilos</title>
</head>
<body>
<h1 style="font-style: italic;">Sou a tag h1</h1>
 
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
<p style="color:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
</body>
</html>
Como podemos ver no código acima, para cada tag que estilizamos tivemos que criar um novo efeito. No caso da tag p nós utilizamos o mesmo estilo, mas tivemos que re-escrever ele para que se aplicasse em todas as tag's.
CSS Inline exemplo
Figura 1: CSS Inline exemplo

Código CSS na mesma página

Esse tipo de declaração é um pouco diferente da declaração inline, ela é aplicada na mesma página onde estão as tag's a serem estilizadas, mas são declaradas de forma global, evitando assim que precisemos inserir o estilo em cada tag específica.
Listagem 3: Exemplo de declaração na mesma página
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
    <title>Código CSS - Entendendo a folha de estilos</title>
<style type="text/css">
h1{
    font-style: italic;
}
p{
    color: red;
}
</style>
</head>
<body>
<h1>Sou a tag h1</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
</body>
</html>
Se repararmos, o efeito obtido será o mesmo, mas viram que a declaração está diferente? Nesse exemplo nós declaramos de forma global, ou seja:
  • Toda tag h1 terá o efeito declarado
  • Toda tag p terá o efeito declarado
Mas e se nós quisermos aplicar diferentes efeitos para cada tag p, por exemplo, como faríamos?
É aí que começa a entrar os atributos de id e class, dessa forma podemos colocar efeitos apenas nos elementos em que possuem aquele id ou aquela class.
Obs.: Eu costumo dizer que o id é único para cada elemento e a class pode ser usada em outros elementos. Essa é uma opinião pessoal minha e é a forma que eu trabalho com elas.
Vamos criar um exemplo agora onde iremos ver na prática isso que eu acabei de dizer acima.
Listagem 4: Utilizando id e class
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
    <title>Código CSS - Entendendo a folha de estilos</title>
<style type="text/css">
h1{
    font-style: italic;
}
#fundo{
    background-color: #a3a9fa;
}
.paragrafo{
    color: red;
}
.paragrafo2{
    color: #0018ff;
}
</style>
</head>
<body>
<div id="fundo">
    <h1>Sou a tag h1</h1>
 
    <p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
 
    <p class="paragrafo2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices feugiat ullamcorper. Cras ut tristique velit. Fusce euismod turpis at lorem vestibulum malesuada. Mauris porttitor sem vitae leo tincidunt varius. Nunc vulputate interdum sem, eu semper metus suscipit ut. Sed eget ante metus. Fusce leo ante, aliquam in sagittis id, auctor quis turpis. Donec vitae magna quis mi dignissim auctor quis eget augue.</p>
</div>
 
</body>
</html>


Read more: http://www.linhadecodigo.com.br/artigo/3613/codigo-css-entendendo-a-folha-de-estilos.aspx#ixzz3WgBXaT6P

You Might Also Like

0 comentários

Popular Posts

Formulário de Contacto