Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS

Agrupamento de Escolas da Batalha
Miguela Fernandes
Novembro 2010

Considerações iniciais
Vamos aprender como funcionam as CSS e
conhecer os seus princípios.
Iremos abordar:
HTML vs CSS
O que é um estilo
O que são CSS
Aparecimento
Onde colocar
Tipos de regras
MF. 2

HTML vs CSS (1)
O HTML não foi concebido para lidar com altas
definições gráficas ou com multimédia. Foi criada
para definir a estrutura de um documento na
Internet, para mostrar como uma página deve estar
organizada, invés de se preocupar com a aparência.
Ao longo dos anos houve uma evolução na
linguagem (tags) e também os web designers
queixaram-se ao W3C, para que este consórcio
preenchesse o vazio do HTML.
MF. 3

HTML vs CSS (2)
A introdução de novas TAGS HTML vieram
facilitar a vida do programador, dado que as CSS
usam TAGS HTML.
Exemplo simples:
<bold> - o HTML coloca a negrito o texto
Mas nas CSS posso dizer que <bold> pode
colocar a NEGRITO mas mudar para
maiúsculas.
MF. 4

O que é um estilo?
Vamos pensar no Word que tem estilo já pré-
definidos ou que podemos criar novos.
Os estilos coleccionam atributos, tais como:
tipos de letra, tamanho, cor, negrito, itálico,
entre outros.
Podemos aplicá-los a títulos, sub-títulos,
cabeçalhos, etc..
MF. 5

O que é um estilo? Exemplo
MF. 6
arial
azul
bold
sublinhado
14 pt
Título 1
Hoje, temos uma valorização das
empresas do programador Front
End, procurando especialistas
para solucionar problemas, e
principalmente saber o que
estão a fazer.
Título 2
Hoje, temos uma valorização das
empresas do programador Front
End, procurando……..
formatatitulo
Nome do estilo criado
Estilo aplicado

CSS: o que são?
São um conjunto de estilos guardados
estrategicamente para afectar a aparência de
uma página HTML. Para usá-las temos de fazer
referência da seguinte forma:
SELECTOR { propriedade: valor; }
" propriedade " é o elemento que pretendemos
manipular e o “valor" representa o valor
específico da propriedade.
MF. 7

CSS: Aparecimento
Com a evolução dos recursos de programação as
páginas web estavam a usar cada vez mais
estilos e variações para deixá-las mais elegantes
e atractivas aos utilizadores. Com isto, o HTML,
que era destinado para apresentar os conteúdos
também precisou ser aprimorado.
Foram criadas novas tags e atributos de estilo
para o HTML e em 1996, a W3C apareceu a 1ª
versão das CSS: CSS 1.
MF. 8

Onde colocar as CSS
CSS dentro do corpo do documento (inline rule)
<p style="font:16px;color:blue;">No próprio
texto</p>
CSS no cabeçalho do documento (embedded rule) - Head
<style type="text/css"> h1 {color::red;} p {font-
size:14px;} </style>
CSS num ficheiro externo (external rule) - Head
<link rel=stylesheet href=ficheiro.css
type=”text/css”> //afecta todo a página web
CSS impordado para o documento (import rule) - Head
<style type=”text/css”>
@import URL
</style> MF. 9

Os 3 tipos de regras (cont.)
HTML selector
H1{font: bold, 12pt, times; }
Class
exemplo{font:bold,12pt,times;
}
ID
#objecto1{position:absolute;
top: 10px;}
MF. 10

Os 3 tipos de regras (1)
HTML selector
Exemplo do HTML
h1| h2 | h3 | h4 | h5 | h6 | p | table | tr | td|…
O HTML selector nas CSS é usado para redefinir
como são as tags mostradas. Ex:
<style type=”text/css”>
H1 {font-size:16pt; color:blue;}
</style>
MF. 11
Exemplo

Tipo de regra: HTML Selector
<html>
<head>
<style type="text/css">
p {color: white; font-family:"Arial", Times, serif;
text-align: justify; text-decoration: underline;
font-size: 14px; text-indent: 20px;
margin-top: 200px; line-height: 18px;}
body {background-color: black; }
</style>
</head>
<body>
<p>A Batalha de Aljubarrota decorreu no final da tarde de 14 de Agosto de
1385.</p>
</body>
</html>
MF. 12

Class
É atribuir um nome a um conjunto de tags HTML.
É o mais versátil selector que podemos usar. Ex:
•minhaclass{font:bold,12pt,times;
}
Referência na página:
<p class=“minhaclass">Este será o
meu 1º texto com classe ;-)</p>
MF. 13
Exemplo

Tipo de regra: class
<html>
<head>
<style type=”text/css” >
p.um { background-color: red; }
p.dois { background-color: yellow; }
p.tres{ background-color: blue; color: yellow; }
</style>
</head>
<body>
<h2>Classes em CSS</h2>
<p class="um">Este é o resultado da p.um classe</p>
<p class="dois">Este é o resultado da p.dois classe</p>
<p class="tres">Este é o resultado da p.tres classe</p>……
MF. 14

ID
Muito parecido com a class. Pode ser aplicado a
qualquer tag HTML. No entanto, é usado apenas
uma vez numa determinada página (usado para criar
um objecto com javascript). Ex:
#objecto1{position:absolute;
top: 10px;}
Referência na página:
<p class=“minhaclass">Este será o
meu 1º texto com classe ;-)</p>
MF. 15
Exemplo

Tipo de regra: ID
<html>
<head>
<style>
p#exemplo1 { background-color: blue; }
p#exemplo2{ text-transform: uppercase; }
</style>
</head>
<body>
<p id="exemplo1">Adivinhe o que acontece aqui??</p>
<p id="exemplo2">E agora o que vai mudar?</p>
</body>
</html>
MF. 16

Webgrafia e Bibliografia
http://www.ufpa.br/dicas/htm/htm-fra.htm
http://www.sevenseek.com/tutorials/learning-css-
important-css-concepts/
http://webstyleguide.com/wsg3/5-site-structure/3-
site-file-structure.html
http://www.tizag.com/cssT/inline.php
Teagu, J. C. (2004). DHTML and CSS for the World Wide
Web (2ª Ed.). USA:Peachpit Press.
MF. 17

Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS

Semelhante a Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS (20)

Mais de Agrupamento de Escolas da Batalha

Mais de Agrupamento de Escolas da Batalha (20)

Último

Último (20)

Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS

Notas do Editor