11/03/2015

1

Programao WebProf. MSc. Alan Souza

alan.souza@unama.br

2014

Estrutura de um arquivo HTML

sem CSS com CSS

11/03/2015

2

CSS Sintaxe

1. Como mostrado na Figura abaixo, uma regra CSS possui duas

partes principais: um seletor e uma ou mais declaraes;

2. O seletor normalmente um elemento HTML que se deseja

mudar o estilo;

3. Cada declarao consiste de uma propriedade e de um valor;

4. Cada propriedade tem um valor ou mais valores.

CSS Exemplo

Cdigo-fonte:

body {background-color: yellow;}

h1 {font-size: 30pt;}

h2 {color: blue;}

p {margin-left: 50px;}

O tamanho deste cabealho de 30 pt

Esta cor azul

A margem esquerda deste pargrafo de 50

pixels

Resultado:

11/03/2015

3

CSS Declarao de Comentrios

Cdigo-fonte:

/* Esta regra muda a cor e o tamanho dos pargrafos do site */

p{

color: red;

font-size: 16pt;

}

CSS Maneiras de Integrar o CSS ao HTML

1. Externamente (atravs de arquivos CSS separado);

2. Internamente (atravs de cdigo-fonte CSS escrito diretamente no

arquivo HTML);

3. Na prpria linha HTML (atravs do atributo HTML style).

11/03/2015

4

CSS Integrar o CSS ao HTML

1. Externamente (atravs de arquivos CSS separado);

Cdigo-fonte:

11/03/2015

5

CSS Integrar o CSS ao HTML

3. Na prpria linha HTML (atravs do atributo HTML style).

Cdigo-fonte:

Pargrafo inicial.

CSS Diferena entre class e id

1. possvel associar uma regra CSS em um elemento HTML.

Pode ser em um valor de class ou em um valor de id do

elemento.

2. Elemento HTML: , , ...

3. class (podem ser utilizados mais de uma vez):

Exemplo de primeiro texto

Exemplo de segundo texto

4. id (no podem ser utilizados vrias vezes nico):

Exemplo de terceiro texto

11/03/2015

6

CSS Diferena entre class e id

No CSS:

O class representado pelo operador PONTO:

. { ... }

O id representado pelo operador CERQUILHA:

# { ... }

CSS Diferena entre class e id

No HTML:

O class representado pelo atributo class:

Exemplo de primeiro texto

Exemplo de segundo texto

O id representado pelo atributo id:

Exemplo de terceiro texto

11/03/2015

7

CSS Principais propriedades

Exemplo de Tag Descrio

color Especifica a cor do texto.

background-color Especifica a cor do plano de fundo.

text-align Alinhamento do texto (center, left, right, justify).

font-size Tamanho do texto (pt).

font-family Fonte do texto (Arial).

width Comprimento do elemento (px, %).

height Altura do elemento (px, %).

CSS Principais propriedades

Exemplo de Tag Descrio

borderManeira abreviada para as quatro bordas (superior, inferior, esquerda, direita).

font-weight Escurecer a fonte (bold).

paddingEspaamentos entre o contedo e as bordas dos elementos.

Consulte o site a seguir para saber mais propriedades CSShttp://www.w3schools.com/cssref/

11/03/2015

8

CSS Exerccio1. Cite na coluna da direita o efeito dos comandos CSS mostrados na

coluna da esquerda

Comando CSS Efeito

p { color: red; }

.textoInterno { font-size: 12pt; color: blue; }

#textoExterno {

font-family: Arial,

font-weight: bold; }

#divTopo { width: 90%;}

.divLogoEmpresa { background-image:

url("images/logo.png");}

CSS Exerccio Respostas1. Cite na coluna da direita o efeito dos comandos CSS mostrados na

coluna da esquerda RESPOSTAS

Comando CSS Efeito

p { color: red; } O contedo de todos os pargrafos HTML (tag ) sero de cor vermelha.

.textoInterno {

font-size: 12pt; color: blue; }

O contedo do elemento HTML de classe textoInterno ter tamanho 12 e cor azul.

#textoExterno {

font-family: Arial,

font-weight: bold; }

O contedo do elemento HTML com ID textoExterno ter fonte do tipo Arial e estar em negrito.

#divTopo { width: 90%;} O elemento HTML com ID divTopo ter comprimento de 90% da tela.

.divLogoEmpresa { background-

image: url("images/logo.png");}

O plano de fundo do elemento HTML de classedivLogoEmpresa ser preenchido pela figura logo.png, localizada na pasta images.

11/03/2015

9

CSS Exerccio2. Construa o site a seguir. Inclusive com as cores.

; vermelho

: tamanho da letra 16pt; tipografia Tahoma; azul; mdia

itlico; valor da mdia negrito

Cor do fundo: #f1f1f1