PROGRAMAO I

Prof.: Marcelo Ferreira Ortega mfortega@gmail.com

Mdulo 1.3 CSS Style Sheets

O que CSS
CSS - Style Sheets Folhas de Estilos.
CSS mais uma forma de aperfeioar, formatar,

padronizar suas pginas web.

O CSS tem muitos tipos de definio aqui veremos

algumas delas.

O que CSS
No que o CSS pode nos ajudar?
Economizar tempo na programao. Diminuir o tamanho do cdigo de sua pgina.

Sua pgina ir carregar mais rapidamente.

Mais facilidade de manter e fazer alteraes na pgina. Mais controle no layout da pgina.

Como criar estilos

Cada estilo que voc cria definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

elemento {atributo1: valor; atributo2: valor ...}

Explicao desta sintaxe: Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A

mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra s vezes chamada de seletor.
Atributo - o aspecto especfico do elemento que voc quer usar como estilo.

Deve ser um nome de atributo CSS vlido, como o atributo font-size.

Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida

para o atributo em questo, como 20pt (20 pontos) para font-size.

Atributo: valor - parte declarao da regra. Voc pode atribuir mltiplas

declaraes se desejar separ-los com ponto-e-vrgula (;). No coloque um pontoe vrgula depois da ltima declarao.

Exemplos
Eis uma regra CSS que especifica que todos os ttulos de

nvel 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:

H1 {font-size: 36pt} Aqui est um exemplo de regra que diz que todos os

ttulos de nvel 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul;
H2 {font-size: 24pt; color: blue}

Exemplos
Voc pode inserir quebras de linha e espaos em branco dentro da

regra como quiser. Assim, possvel ver mais facilmente todas as declaraes e certificar-se de que colocou todos os sinais de ponto-e-vrgula e colchetes nos lugares corretos. Por exemplo, aqui est uma regra que diz que os pargrafos aparecero em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da pgina:

Tipos de CSS
Voc pode definir regras de CSS em trs lugares. E, por

definio, pode utilizar uma combinao dos trs mtodos nos seus web sites.
Os 3 lugares so: 1. em um documento separado fora de todos os

documentos HTML; 2. no cabealho de um documento HTML e, 3. dentro de uma tag de HTML.

Cada um destes mtodos tem um nome e afetam as

pginas HTML em seu site de um modo diferente.

Externo, Incorporado e Inline

Tipos de CSS
Externo
Externo significa que voc coloca as regras de CSS em

um arquivo separado, e ento sua pgina HTML pode fazer um link para esse arquivo.
Essa abordagem lhe permite definir regras em um ou

mais arquivos que podem ser aplicadas em alguma pgina do seu web site.

Tipos de CSS
Incorporado
Incorporado significa que voc especifica as regras de

CSS no cabealho do documento.

As regras incorporadas afetam somente a pgina atual.

Tipos de CSS
Inline
Inline significa que voc especifica as regras de CSS

dentro da tag de HTML.

Essas regras afetam somente a tag atual.

Tipos de CSS
Inline Inline significa que voc especifica as regras de CSS

dentro da tag de HTML.

Essas regras afetam somente a tag atual.

Estilos Externos
Para definir um conjunto de regras de estilo que voc pode

facilmente aplicar em alguma pgina do seu site, preciso colocar as regras em um arquivo de texto.
Voc pode criar este arquivo com um editor de textos

simples, como o Notepad do Windows, e dar ao nome desse arquivo a extenso .css.
Sempre que quiser utilizar esses estilos em uma nova

pgina, basta colocar uma tag <LINK> no cabealho da pgina que referencie esse arquivo .css.

Estilos Externos - Exemplo

Crie o arquivo estilo.css

Agora, para utilizar os estilos definidos neste arquivo .css

voc precisa adicionar a tag a seguir ao cabealho da pgina a ser usada.

<LINK REL=STYLESHEET HREF=estilo.css TYPE=text/css>

Estilos Incorporados
Se quiser criar um conjunto de estilos que se aplicam a uma

nica pgina, voc pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE>, e as regras em um arquivo separado, coloque estas tags na prpria pgina HTML.
A estrutura bsica de uma pgina da web que utiliza estilos

incorporados semelhante ao seguinte cdigo:

Estilos Incorporados
<HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"> P{ background-color: blue; font-family:'Comic Sans MS'; font-size: 24pt } </STYLE> </HEAD> <BODY> <p>Pargrado usando CSS </BODY> </HTML>

Estilos Inline
Os estilos inline so os que tm menos efeitos.
Eles afetam somente a tag atual - no outras tags na pgina e tampouco

outros documentos.
A sintaxe para definir um estilo inline a seguinte:

Exemplo:
<A STYLE="color:green;" HREF="http://www.unesp.br"> UNESP

TAGs personalizadas
Com as classes de estilo, possvel definir diversas

variaes de uma nica tag.

Por exemplo, voc poderia fazer um estilo de pargrafo

"texto alinhado direita", um estilo de pargrafo "texto centralizado" e assim por diante, criando mltiplos temas em torno da tag de pargrafo. (<P>) <STYLE TYPE="text/css">
elemento.nomedaClasse {atributo:valor; ... }

</STYLE>

TAGs personalizadas
<STYLE TYPE="text/css"> A.meuslinksAzul { color: blue; } A.meuslinksVerde { color: green; } </STYLE>

TAGs personalizadas

<HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"> A.meuslinksAzul { color: blue; } A.meuslinksVerde { color: green; } </STYLE> </HEAD> <BODY> <A class="meuslinksAzul" HREF="http://www.unesp.br">UNESP <br> <A class="meuslinksVerde" HREF="http://www.ueg.br">UEG

</BODY> </HTML>

Atalhos e atributos de CSS

Alguns atributos de CSS lhe permitem fazer diversas

configuraes em uma declarao. Por exemplo, suponha que voc queira definir diversos aspectos da fonte utilizada para tags H1, como segue:

Atalhos e atributos de CSS

Como alternativa a especificar todas essas formataes

de fonte individualmente, voc pode utilizar o atributo font: para defini-las todas de uma s vez, assim:

CSS - Links

CSS - Links

CSS - Links

CSS - Links

CSS - Links

CSS - Links

CSS - Links

CSS - Links

CSS - Links
Layout CSS de 2 colunas
http://maujor.com/tutorial/lay2col.php