pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Introdução as CSS

Não satisfeito com a maneira que as páginas da Internet eram formatadas o Norueguês Håkon Wium Lie cria em 1994 as CSS.

CSS é a abreviação para o termo em inglês Cascading Style Shet, traduzido para o português como folha de estilo em cascata. A definição para CSS que está no site do W3C é:

“Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos Web”


As CSS tem por finalidade criar a apresentação das informações marcadas com (X)HTML. A (X)HTML foi criada para ser uma linguagem de marcação e estruturação de conteúdos na Web. Não cabe à (X)HTML fazer apresentação dos elementos, como por exemplo: cores, tamanhos de fontes, alinhamentos. Para a (X)HTML fica apenas a marcação, por exemplo: definir qual é o título principal da página, estruturar os parágrafos, citações, etc. Resumidamente podemos dizer:
(X)HTML para estruturar e CSS para apresentar
Assim em nosso projeto não temos um acoplamento, temos em uma camada a estrutura do documento e em outra camada a apresentação do mesmo. Não se misturam.

Sintaxe CSS

sintaxe css

sintaxe css

Uma regra CSS pode ter mais de uma declaração que devem ser separadas por “ ; ”.

Por exemplo:

P{
  color:#000000;
  text-align:right;
  background:#cccccc;
  font-family:”times new roman”, verdana, arial;
}

A regra CSS acima estiliza os parágrafos da seguinte forma: Cor do texto preto, alinhamento à direita e uma cor de fundo cinza, definimos também uma família de fontes. O navegador do usuário procura primeiro a fonte Times New roman, caso esta fonte não esteja instalada no computador do usuário a próxima a ser procurada será verdana e assim por diante. Repare que no primeiro nome de fonte tivemos que usar “ “ (aspas) porque o nome da fonte é uma palavra composta.
A regra acima também pode ser escrita assim:

p{color:#000000;text-align:right;background:#cccccc;  font-family:”times new roman”, verdana, arial;}

O ponto e virgula é facultativo no caso de uma declaração ou após a última declaração.
As regras CSS não são case sensitive (você pode usar letras maiúsculas e minúsculas)
Você pode também dar múltiplos espaços, que serão tratados como espaços simples.

Exemplo:

p{   color: #000000; }

Vinculando folha de estilos aos seus documentos.

Temos três formas de utilizar CSS nos documentos.

Estilo inline: Escrever a regra CSS diretamente dentro da tag de abertura do documento.

<p style=”color:#ffffff;font-size:16px;”>

Estilo incorporado: Outra forma de escrever estilos diretamente no documento. Nesse método você escreve as regras dentro das tags

...
<head>
...

<style type=”text/css”>
h2{color:#000000;}
... mais regras...
</style>

Estilo externo: Nesse método não escrevemos as regras dentro dos documentos (X)HTML e sim em um arquivo externo, salvo com a extensão .css.

...
<head>
<link rel=”stylesheet” type=”text/css” href=”estilos.css”>
</head>

O atributo href aponta para o endereço do seu arquivo css externo.
Esse artigo teve por finalidade mostrar os fundamentos básicos das poderosas CSS.

Categorias: CSS | Tags: |

Comentários desativados.

Topo