CSS - BÁSICO

Na actualidade, a quantidade de páginas web que utilizam CSS é massiva, sendo que atualmente milhares e milhares de pessoas utilizam o CSS para estilizar suas páginas e blogs. Desde desenvolvedores a blogueiros, passando por meros curiosos, o CSS é hoje uma linguagem de programação amplamente conhecida e utilizada na internet. Nos dias de hoje já não há desculpa para não utilizar CSS nas suas produções básicas!

O CSS surgiu durante a década de 90, por parte de Hakon Wium Lie, que convidou Bert Bos para participar no desenvolvimento do CSS. Bert Bos estava na altura a desenvolver um navegador chamado Argo. Em 1995 Hakon e Bert apresentaram a sua proposta e o W3C que tinha sido criado recentemente interessou-se pelo projecto e criou uma equipa liderada por Hakon Lie e Bert Bos. O primeiro lançamento foi em 1996, o chamado CSS1, seguido pelo CSS2 em 1998, e neste momento estamos a par com o CSS3.

Posto isto, e depois de lançados os artigos sobre HTML, Java Script  e jQuery, lançamos um artigo sobre CSS. Este conjunto de artigos certamente lhe serão muito úteis se estiver aprendendo alguma dessas linguagens, pois acabam por estar ligados uns aos outros.

1. ANTES DE COMEÇAR

Antes de começar deve ter conhecimentos sobre HTML

O que é CSS?

CSS significa Cascade Styling Sheet, Folha de Estilo em Cascata, e tem como objectivo definir como posicionar e mostrar elementos HTML, de uma forma visualmente trabalhada.

2. SINTAXE CSS

A sintaxe CSS é bastante simples, sendo composto por um selector e uma ou mais declarações

1	h1 {color:red;font-size:14px;}

O selector será o elemento HTML ao qual quer adicionar estilo. Cada declaração consiste em uma propriedade e um valor. A propriedade é um atributo de estilo que quer alterar, e o valor é o valor dessa propriedade.

Também é possível adicionar comentários ao código CSS através de /* e *\:

1 2 3

/* Isto é um comentário *\ h1 {color:red;font-size:14px;} /* Isto é outro comentário *\

3. ONDE E COMO INSERIR

Existem 3 formas de inserir CSS:

1.   Através de uma folha de estilos externa.

2.   Através da folha de estilos interna.

3.   Através do estilo em linha.

Folha de Estilos Externa

Uma folha de estilos externa é o ideal quando o estilo é aplicado a múltiplas páginas. Com uma folha externa, pode alterar o estilo de um website inteiro apenas alterando um ficheiro. Uma folha de estilos pode ser escrita em qualquer editor de texto, ser guardada com a extensão .css e não pode conter nenhuma tag HTML.

No entanto isto não acontece por osmose, é necessário fazer a ligação à folha de estilos em cada página, da seguinte forma:

1 2 3

type="text/css" href="a_minha_folha_de_estilo.css" />

Folha de Estilos Interna

Uma folha de estilos interna pode ser usada quando um documento único tem um estilo único. A folha de estilos interna é feita na secção head da página HTML, como no exemplo que se segue:

1 2 3 4 5 6 7 8

Estilo em linha

O estilo em linha perde as vantagens das folhas de estilo, pois mistura o conteúdo com a estilização. Este método deve ser usado quando qualquer das alternativas apresentadas antes não for viável. Para utilizar este estilo, vejamos o exemplo:

1	Isto é um parágrafo.

Várias folhas de estilo

Hierarquia de estilos (onde o 1 é o de maior prioridade):

1.   Estilo em linha

2.   Folha de estilo interna

3.   Folha de estilo externa

Sim, é possível fazer uma mistura de várias folhas de estilo, e estamos a falar de uma externa e uma interna ao mesmo tempo, já que o estilo em linha pode ser aplicado a qualquer altura pois é hierarquicamente superior a ambos. No caso de uma página HTML estar ligada a uma folha de estilo externa e tiver uma interna, nos valores que forem comuns, irão ser utilizados os da folha de estilo interna. Os valores que não forem comuns irão ser utilizados normalmente.

4. ID E CLASSE CSS

Além de estilizar elementos HTML, CSS permite-lhe definir os seus próprios selectores chamados de ID e CLASS.

O selector ID é usado para definir estilo para um elemento único. Usa o ID do atributo do elemento HTML e é definido com um “#”.

1 2 3 4 5

#titulo2 { text-align:center; color:red; }

No caso, o estilo foi aplicado ao elemento com o ID=”titulo2″.

O selector CLASS é utilizado para estilizar um grupo de elementos. Ao invés do selector ID, o selector CLASS é frequentemente utilizado em vários elementos. Isto permite-lhe definir um estilo particular para qualquer elemento HTML que tenha a mesma classe. Como o selector ID, o CLASSusa o atributo de classe de HTML e é definido com um “.”.

1	.center {text-align:center;}

5. FUNDO CSS (BACKGROUND)

As propriedades utilizadas para definir efeitos no fundo são:

§  background-color

§  background-image

§  background-repeat

§  background-attachement

§  background-position

Uma cor de fundo pode ser definida por um nome de cor (red,green,black, etc), um valor RGB (por ex. 255,0,0) ou um valor hexadecimal (por ex. #006600)

Uma imagem de fundo pode ser definida por “body {background-image:url(‘paper.gif’);}” e por defeito é repetida, de forma a cobrir todo o elemento.

A repetição de uma imagem pode ser feita verticalmente ou horizontalmente, atravéz de repeat-xou repeat-z:

1 2 3 4 5	{ /*Repetiçao horizontal *\ background-image:url('fundo.png'); background-repeat:repeat-x; }
1 2 3 4 5	{ /*Repetiçao vertical*\ background-image:url('gradient2.png'); background-repeat:repeat-x; }

Para definir a posição de uma imagem, vejamos o exemplo:

1 2 3 4 5

{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }

Para uma lista completa dos valores para as propriedades do background, aqui fica uma tabela:

6. TEXTO CSS

O texto pode ser estilizado em cor, tamanho, alinhamento e decoração.

A cor pode ser definida por nome (red,green,blue etc), valor RGB (por ex. 255,0,0) ou um valor hexadecimal (#006600)

1 2 3

body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}

O alinhamento pode ser definido com “center”,”left”,”right”,”justify”

1 2 3 4

h1 {text-align:center;} p.date {text-align:right;} p.hour {text-align:left;} p.main {text-align:justify;}

A decoração pode ser definida por:

1 2 3 4

h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}

e pode ser removida por:

1	a {text-decoration:none;}

Aqui fica uma tabela completa:

7. TIPO DE LETRA CSS

Em CSS há dois tipos de famílias de tipos de letras,a família genérica (um grupo de tipos de letra com look similar) e a família tipo de letra (uma família de tipos de letra específico).

O tamanho da letra pode ser definido em percentagem, pixeis ou em, sendo que 1em = 16 pixeis.

Familia

Uma família de tipos de letra é definida por uma propriedade, a qual é interpretada pelo navegador, e no caso de não suportar o primeiro tipo de letra da família, passa para o próximo.

1	p{font-family:"Times New Roman", Times, serif;}

Estilo

A propriedade de estilo de tipo de letra é muito usada para especificar texto em itálico. A propriedade pode ter 3 valores:

§  normal – texto normal

§  italic – texto em itálico

§  oblique – o texto está inclinado, muito similar ao itálico mas menos suportado

1 2 3

p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}

Tamanho

A propriedade de tamanho é aquela que define qual o tamanho do texto. É aconselhável não utilizar ajustes de tamanho para fazer com que parágrafos se pareçam com títulos e vice-versa. Deve sempre usar as tags adequadas a cada situação, como

a

para títulos e para parágrafos. Este pode der definido por absoluto ou relativo.

Absoluto:

§  Define o texto para o tamanho especificado.

§  Não permite que o utilizador altere o tamanho de texto no navegador.

§  É útil quando o tamanho físico do documento é desconhecido.

Relativo:

§  Define o tamanho relativamente aos elementos que o rodeiam.

§  Permite ao utilizador alterar o tamanho da letra no navegador.

Deixamos aqui uma tabela completa com as propriedades e valores:

8. LINKS CSS

Os links também podem ser estilizados com qualquer propriedade CSS, color, font-family,background, etc.

Existem também 4 estados de links como é sabido, e estes podem ser estilizados de forma independente.

§  a:link

§  a:visited

§  a:hover

§  a:active

1 2 3 4

a:link {color:#FF0000;}      /* link nao visitado */ a:visited {color:#00FF00;}  /* link visitado */ a:hover {color:#FF00FF;}  /* rato sobre o link */ a:active {color:#0000FF;}  /* link seleccionado */

Também é possível adicionar decoração:

1 2 3 4

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

Ou cor de fundo:

1 2 3 4

a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

9. TABELAS CSS

Uma simples tabela pode ser muito melhorada e tornada mais atractiva através de CSS. É possível alterar os limites, tamanho, alinhamento do texto, espaçamento, cor e outros.

Limites

Estes limites são inseridos em toda a tabela, sendo que neste caso irá ter 1px de largura e a cor preta:

1 2 3 4

table, th, td { border: 1px solid black; }

Tamanho

Este tamanho é relativo à tabela, em que estamos a definir a largura e altura da mesma:

1 2 3 4 5 6 7 8

table { width:100%; } th { height:50px; }

Alinhamento

Este alinhamento é relativo ao texto, sendo que pode ser alinhado de forma geral com o text-align ou mais especificamente com o vertical-align e horizontal-align:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

td { text-align:right; } /* ou *\ td { height:50px; vertical-align:bottom; horizontal-align:center; }

Espaçamento

Este espaçamento é entre o limite da tabela e o conteúdo. Pode ser utilizado com td e th.

1 2 3 4

td { padding:15px; }

Cor

A cor pode ser adicionada a qualquer elemento da tabela:

1 2 3 4 5 6 7 8 9

table, td, th { border:1px solid orange; } th { background-color:red; color:white; }

:EN-U&�[of0�x��nguage: PT-BR'>

color:white;

}
Postado por: Matheus Dias