Ir para o conteúdo
ou

Software livre Brasil

Minha rede

 Voltar a Planeta do A...
Tela cheia Sugerir um artigo

Luís Henrique : CSS pra quem nunca viu

18 de Março de 2010, 0:00 , por Software Livre Brasil - 0sem comentários ainda | Ninguém está seguindo este artigo ainda.
Visualizado 211 vezes

Claro que existem pessoas que estudam (ou trabalham com) computação e não conhecem CSS[bb]. Talvez o foco é outro (bem) distante de web ou há algum motivo para continuar a estilização via HTML. Vou tentar ser o mais direto possível, pois meu objetivo aqui é mostrar o básico através de exemplos.

Neste tutorial vamos construir uma área de artigos na qual cada uma da lista contém um título, uma imagem e o texto. O exemplo final será parecido com isso:

Exemplo final

Clique para ampliar

Obs.: O texto foi gerado com o famoso Lorem Lipsum.

Definição

CSS – Cascading Style Sheet (folhas de estilo) – é uma linguagem para atribuir forma visual – estilo, formas, cores e tamanhos – a elementos usados na linguagem de marcação (HTML[bb], XHTML e XML[bb] são exemplos).

Sintaxe básica

1
2
3
seletor {
	propriedade: valor;
}
O ” ; ” (ponto-vírgula) é opcional na última propriedade.

CSS em ação

Veja como atua o CSS aplicado ao HTML na página descrita abaixo.

Primeiro o HTML

O HTML é da seguinte estrutura:

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
quot;-//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"  dir="ltr" lang="pt-BR">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Título da minha lista de artigos</title>
</head>
 
<body>
 
<div id="geral">
 
	<div id="topo">
		<h1><a href="#" title="Ir para a página inicial">Minha página</a></h1>
		<h2>Uma descrição do site.</h2>
	</div>
 
	<div id="conteudo">
 
		<div class="noticia">
			<h3 class="chamada">Título do primeiro artigo</h3>
			<img src="img1.jpg" alt="img1" title="Primeira imagem" />
			<p>Texto da notícia aqui.</p>
			<a href="#" title="Continuar lendo esta notícia">Leia na íntegra</a>
		</div>
 
		<div class="noticia">
			<h3 class="chamada">Título do segundo artigo</h3>
			<img src="img2.jpg" alt="img2" title="Segunda imagem" />
			<p>Texto da outra notícia.</p>
			<a href="#" title="Continuar lendo esta notícia">Leia na íntegra</a>
		</div>
 
	</div>
 
</div>
 
<div id="rodape">
	<p>Todos os direitos reservados.</p>
</div>
 
</body>
</html>

No HTML, usa-se os atributos ID e CLASS. Observe isso em div id e em h3 class.

Explicação do HTML

Dentro do head chamamos o arquivo estilo.css, que contém toda a estilização. Essa forma de aplicar o CSS é denominada “externa“, que pode ser lido no próximo item deste post.

A div #geral foi criada para englobar toda a página e definir uma largura geral.
A div #topo somente para conter o título da página.
A div #conteudo é onde ficam os artigos. Cada artigo é colocado dentro de uma div .noticia (com a CLASS noticia).
Dentro de cada div .noticia temos: o título do artigo dentro de um H3, o subtítulo em um H4, uma imagem e o texto em parágrafos. No final de cada artigo há um link permanente para a leitura completa.
Depois há uma div #rodape para conter informações de copyright e etc.

Maneiras de aplicar CSS ao HTML

1) Externo: todo o CSS fica em um arquivo (com extensão .css) separado do HTML. É chamado entre as tags head da seguinte maneira:

1
2
3
<head>
	<link rel=”stylesheet” type=text/css” href=”estilo.css” />
</head>

2) Interno: tag style dentro do head.

1
2
3
4
5
<head>
	<style type=text/css”>
		Seletor { propriedade: atributo }
	</style>
</head>

3) Inline: aplica a(s) propriedade(s) somente a um determinado elemento, usando o atributo style do HTML.

1
2
<p style=color:blue”>Parágrafo com fonte azul.</p>
<p>Esse outro parágrafo não é azul, a não ser que exista <span style="color: #FF0">CSS em outro lugar</span>.</p>

Diferença entre ID e CLASS

É tão trivial que muita gente erra nisso.

ID # (tralha) = deve ser único, usado em apenas um elemento
CLASS . (ponto) = número ilimitado de elementos

Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
body {
	background: white;
}
#conteudo {
	background: #000;
	color: #000000;
}
.chamada {
	text-transform: uppercase;
	color: #FF6600;
}

O que fizemos:

1) O primeiro seletor (body) vai definir o fundo branco para toda a página. Como ele não tem atributo no HTML, o CSS referencia apenas com o nome da tag.
2) #conteudo para estilizar a div cujo ID é conteudo. Poderiamos usar tambem div#conteudo.
3) O terceiro elemento pode aparecer várias vezes na página. Portanto, usamos class.

Explicação do CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@import url("reset.css");
 
body { background: #fde7d1 url(bg.png) repeat-y top center; font-family: Arial, Helvetica, sans-serif }
 
a { color: #8B6914; padding: 2px 4px; }
a:hover { background: #8B6914; color: #fff; text-decoration: none }
 
p { margin-bottom: 15px; }
 
#geral { width: 580px; margin: 0 auto }
 
#topo { padding-top: 10px }
#topo h1 a { padding: 5px 0; font-size: 220%; text-decoration: none }
 
#conteudo .noticia { border-bottom: 1px solid #ddd; padding-bottom: 10px; }
#conteudo .noticia .chamada { font-size: 200%; margin-top: 20px }
#conteudo .noticia .subtitulo { color: #666; font-style: italic; margin: 10px 0 }
#conteudo .noticia img { float: left; margin: 5px 15px 15px 0 }
#conteudo .noticia p { text-align: justify }
#conteudo .noticia p.direita { text-align: right }
 
#rodape { margin-top: 30px; text-align: right }

A primeira linha importa o arquivo reset.css pelo Erick Meyer. Leia mais sobre @import no site do Maujor.

Depois definimos o fundo da página e a família de fontes a ser usada. O fundo da página (bg.png) é uma imagem de apenas 2px de altura para economizar banda, pois a imagem se repete verticalmente (repeat-y). Para estilizar os links em estado normal e ao posicionar o mouse sobre eles usamos a e a:hover, respectivamente.

A div #geral tem a largura da área branca da imagem de fundo menos um tamanho lateral para espaçar um pouco das bordas. Para centralizar, basta definir margin-left: auto e margin-right: auto ou margin: X auto (x é a distância do topo e da base; é zero no nosso exemplo).

Um ponto importante é quanto ao uso do float. Como nosso exemplo é de apenas uma coluna, não usamos float em 2 divs de modo que fiquem lado a lado. Mas o float: left foi usado (na linha 18) nas imagens dos artigos. Com ele, a imagem flutua (óbvio) para esquerda, fazendo com que o texto se “esparrame” pelos lados da imagem. O margin é interessante para fazer com que o texto não fique grudado na imagem.

Este post é apenas uma introdução bem superficial de desenvolvimento web. O intuito é despertar o interesse de quem ainda não usa/conhece o CSS. Deixe seu comentário! Até a próxima.

Compartilhe: Print del.icio.us Facebook Google Bookmarks email PDF Twitter Add to favorites RSS


Fonte: http://luishenrique.org/blog/posts/css-pra-quem-nunca-viu

0sem comentários ainda

Enviar um comentário

Os campos são obrigatórios.

Se você é um usuário registrado, pode se identificar e ser reconhecido automaticamente.