Introdução ao CSS

sexta-feira, 12 de outubro de 2007

O CSS (Cascading Style Sheets), ou "Folhas de Estilo em Cascata", é uma ferramenta utilizada para definir estilos em documentos Web, como páginas HTML ou XHTML.

Para que serve o CSS?

O CSS permite definir estilos de forma centralizada, evitando a necessidade de aplicar atributos individualmente em cada elemento da página. Isso simplifica o código e facilita futuras alterações.

Por exemplo, se você deseja que todas as tags <p> tenham fonte Verdana, tamanho 12px e cor azul, pode definir isso no CSS:

p {
	font: 12px Verdana;
	color: blue;
}

Dessa forma, todas as tags <p> na página adotarão automaticamente essas características.

Caso deseje aplicar o estilo apenas a alguns elementos específicos, utilize classes:

.minhaclasse {
	font: 12px Verdana;
	color: blue;
}

Para usar a classe:

<p class="minhaclasse">Este é o meu parágrafo estilizado</p>

Como usar o CSS?

Existem duas formas principais de aplicar CSS em uma página:

Definir diretamente na página
- Ideal para estilos que serão usados em uma única página.
Usar um arquivo externo (.css)
- Recomendado para projetos maiores, pois permite alterar o estilo de várias páginas ao mesmo tempo, editando apenas um arquivo.

Definindo o estilo na própria página

O CSS é incluído dentro da tag <style> no cabeçalho da página (<head>), especificando o tipo como text/css:

<html>
	<head>
		<title>Título da Página</title>
		<style type="text/css">
			.minhaclasse {
				font: 12px Verdana;
				color: blue;
			}
		</style>
	</head>
	<body>
		<p class="minhaclasse">Meu parágrafo estilizado com CSS</p>
	</body>
</html>

Definindo o estilo com um arquivo externo

Arquivos CSS externos oferecem maior flexibilidade e manutenção. Eles podem ser incluídos de duas formas:

Método ultrapassado (não recomendado):

<style type="text/css">
	@import url('arquivo.css');
</style>

Método recomendado:

<link rel="stylesheet" href="style.css" type="text/css">

Detalhes dos atributos da tag `<link>`

href: Especifica o caminho para o arquivo CSS.
rel: Define o relacionamento com o documento, neste caso, "stylesheet".
type: Especifica o tipo de conteúdo (no caso, "text/css").

A tag <link> deve ser inserida dentro da tag <head>.

Sintaxe do CSS

A sintaxe do CSS é simples:

Selecionar o elemento (tag, classe ou ID).
Abrir chaves {.
Definir os atributos e valores.
Fechar as chaves }.

Exemplos:

/* Estilo para o corpo da página */
body {
	background: black;
}

/* Estilo para uma classe */
.minhaclasse {
	color: #FF0000;
}

/* Estilo para um ID */
#meuDiv {
	width: 100px;
	height: 200px;
}

Classes e IDs

Classes (iniciadas com .) podem ser aplicadas a múltiplos elementos.
IDs (iniciados com #) são exclusivos para um único elemento por página.

Diferença:

Classe:

.minhaclasse {
	color: blue;
}

<p class="minhaclasse">Texto</p>

ID:

#meuDiv {
	background: green;
}

<div id="meuDiv">Conteúdo</div>

Principais Atributos do CSS

background: Define a cor de fundo.

body {
	background: #000000; /* Preto */
}

color: Define a cor da fonte.
```
p {
	color: #FF0000; /* Vermelho */
}
```
font: Define a família, tamanho e estilo da fonte.
```
h1 {
	font: bold 16px Arial;
}
```
margin: Define a margem externa (top, right, bottom, left).
padding: Define o espaçamento interno (top, right, bottom, left).
width e height: Controlam a largura e altura.
text-align: Alinha o texto (center, left, right, justify).

border: Define bordas (largura, tipo e cor).

div {
	border: 2px solid #0000FF; /* Azul sólido */
}

Para mais detalhes, confira os links abaixo:

LIVRO DE VISITAS

ÑÎ©KÑÅ爪Ë 爪ÅKËЯ

Você está sendo observado!!!!

Estou de olho em você!!!

Vote na minha HomePage

NÃO CLIQUE AQUI