Programacao Web Parte2

11/03/2015
Programao Web
Prof. MSc. Alan Souza
alan.souza@unama.br
2014
Estrutura de um arquivo HTML

<HTML> sem CSS
<HTML> com CSS
<head>
<body>
11/03/2015
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:
Resultado:
<html>
<head>
<style>
body {background-color: yellow;}
h1 {font-size: 30pt;}
h2 {color: blue;}
p {margin-left: 50px;}
</style>
</head>
<body>
<h1>O tamanho deste cabealho de 30 pt</h1>
<h2>Esta cor azul </h2>
<p>A margem esquerda deste pargrafo de 50
pixels</p>
</body>
</html>
11/03/2015
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
CSS Integrar o CSS ao HTML

1. Externamente (atravs de arquivos CSS separado);
Cdigo-fonte:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=css/meuEstilo.css">
</head>
</html>

2. Internamente (atravs de cdigo-fonte CSS escrito diretamente
no arquivo HTML);
Cdigo-fonte:
<!DOCTYPE html>
<html>
<head>
<style>
hr {color: navy;}
p {margin-left: 20px;}
body {background-image: url("images/back40.png");}
</style>
</head>
</html>
11/03/2015

3. Na prpria linha HTML (atravs do atributo HTML style).
Cdigo-fonte:
<!DOCTYPE html>
<html>
<body>
<p style="color: navy; margin-left: 20px">Pargrafo inicial.</p>
<body>
</html>
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: <h1>, <p>, <body>...
3. class (podem ser utilizados mais de uma vez):
<p class=paragrafoTexto>Exemplo de primeiro texto</p>
<p class=paragrafoTexto>Exemplo de segundo texto</p>
4. id (no podem ser utilizados vrias vezes nico):
<p id=parag1>Exemplo de terceiro texto</p>
11/03/2015

No CSS:
O class representado pelo operador PONTO:
.<nome_da_regra> { ... }
O id representado pelo operador CERQUILHA:
#<nome_da_regra> { ... }

No HTML:
O class representado pelo atributo class:
<p class=paragrafoTexto>Exemplo de primeiro texto</p>
<p class=paragrafoTexto>Exemplo de segundo texto</p>
O id representado pelo atributo id:

<p id=parag1>Exemplo de terceiro texto</p>
11/03/2015
CSS Principais propriedades

Exemplo de Tag
color
background-color
text-align
font-size
font-family
width
Descrio
Especifica a cor do texto.
Especifica a cor do plano de fundo.
Alinhamento do texto (center, left, right, justify).
Tamanho do texto (pt).
Fonte do texto (Arial).
Comprimento do elemento (px, %).
height
Altura do elemento (px, %).
CSS Principais propriedades

Exemplo de Tag
border
font-weight
padding
Descrio
Maneira abreviada para as quatro bordas (superior,
inferior, esquerda, direita).
Escurecer a fonte (bold).
Espaamentos entre o contedo e as bordas dos
elementos.
Consulte o site a seguir para saber mais propriedades CSS

http://www.w3schools.com/cssref/
11/03/2015
CSS Exerccio
1. 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
{
url("images/logo.png");}
background-image:
CSS Exerccio Respostas

1. Cite na coluna da direita o efeito dos comandos CSS mostrados na
coluna da esquerda RESPOSTAS
Comando CSS
p { color: red; }
Efeito
O contedo de todos os pargrafos HTML (tag <p>) sero de cor
vermelha.
O contedo do elemento HTML de classe textoInterno ter
.textoInterno {
font-size: 12pt; color: blue; } tamanho 12 e cor azul.
O contedo do elemento HTML com ID textoExterno ter
#textoExterno {
fonte do tipo Arial e estar em negrito.
font-family: Arial,
font-weight: bold; }
O elemento HTML com ID divTopo ter comprimento de 90%
#divTopo { width: 90%;}
da tela.
.divLogoEmpresa { background- O plano de fundo do elemento HTML de classe
divLogoEmpresa ser preenchido pela figura logo.png,
image: url("images/logo.png");}
localizada na pasta images.
11/03/2015
CSS Exerccio
2. Construa o site a seguir. Inclusive com as cores.
<h2>
<h3>; vermelho
<table>: tamanho da letra 16pt;
tipografia Tahoma; <th> azul; mdia
itlico; valor da mdia negrito
Cor do fundo: #f1f1f1

Programacao Web Parte2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Programacao Web Parte2

Uploaded by

Copyright:

Available Formats

11/03/2015

Estrutura de um arquivo HTML

<HTML> com CSS

CSS Declarao de Comentrios

CSS Maneiras de Integrar o CSS ao HTML

CSS Integrar o CSS ao HTML

CSS Integrar o CSS ao HTML

CSS Integrar o CSS ao HTML

CSS Diferena entre class e id

CSS Diferena entre class e id

CSS Diferena entre class e id

O id representado pelo atributo id:

CSS Principais propriedades

Altura do elemento (px, %).

CSS Principais propriedades

Consulte o site a seguir para saber mais propriedades CSS

CSS Exerccio Respostas

Cor do fundo: #f1f1f1

You might also like