Beruflich Dokumente
Kultur Dokumente
CSS
30 de Setembro de 2011
Slide 1 / 18
O que e CSS?
CSS
CSS quer dizer Cascading Style Sheets.
Referencias e
Material Extra
Estilos definem como mostrar elementos HTML.
Estilos foram adicionados no HTML 4.0.
Estilos reduzem significativamente o trabalho.
Exemplo: Clique Aqui.
Slide 2 / 18
CSS resolve um grande problema
CSS
HTML nunca teve a intencao de conter tags de formatacao.
Referencias e
Material Extra
HTML tem a intencao de definir o conteudo de um
documento. Ex.
<h1>T h i s i s a h e a d i n g</ h1>
<p>T h i s i s a p a r a g r a p h .</p>
Slide 3 / 18
CSS resolve um grande problema
CSS
O desenvolvimento de web sites grandes, onde cada pagina
Referencias e
Material Extra tinha que ter informacoes sobre cores e fontes se tornou um
processo altamente custoso.
Para solucionar esse problema o W3C criou o CSS.
Em HTML 4.0 (e posteriores), toda a formatacao pode ser
removida do codigo HTML e colocada em um arquivo CSS.
Hoje em dia todos os browsers suportam CSS.
Slide 4 / 18
Como usar Estilos (CSS)
CSS
Quando o browser le o estilo, formata o documento de
Referencias e
Material Extra acordo ele.
Existem tres formas de inserir um estilo a um documento:
Inline Styles
Internal Style Sheet
External Style Sheet
Slide 5 / 18
Inline Styles
CSS
Esse metodo e usado quando se quer aplicar um estilo a
Referencias e
Material Extra apenas um elemento de um arquivo HTML.
Esse metodo e definido usando o atributo style dentro de
uma determinada tag (table, body, td, tr, h1, p, ...).
<p s t y l e= c o l o r : b l u e ; marg i n l e f t : 2 0 px >T h i s i s a
p a r a g r a p h .</p>
Slide 6 / 18
Internal Style Sheet
CSS
Quando esse metodo e usado, um unico documento e
Referencias e
Material Extra tratado.
Esse metodo e definido usando a tag style dentro da tag
head.
<head>
< s t y l e t y p e= t e x t / c s s >
body { b a c k g r o u n dc o l o r : y e l l o w }
p { color : blue }
</ s t y l e>
</ head>
Slide 7 / 18
External Style Sheet
CSS
Esse metodo e usado quando um mesmo estilo deve ser
Referencias e
Material Extra aplicado a varias paginas.
Com esse metodo, toda a aparencia de um site web pode ser
mudada, alterando-se apenas um arquivo.
Cada pagina deve ser linkada ao arquivo css usando a tag
link que deve ser inserida dentro da tag head.
<head>
< l i n k r e l= s t y l e s h e e t t y p e= t e x t / c s s h r e f=
m y s t y l e . c s s />
</ head>
Slide 8 / 18
Ordem dos Estilos
CSS
Qual estilo sera usado se mais de um estiver especificado
Referencias e
Material Extra para um elemento HTML?
Dizemos que os estilos cascatam (cascade) de acordo com as
regras abaixo, sendo o 4 de maior prioridade.
1. Browser Default
2. External Style Sheet
3. Internal Style Sheet
4. Inline Style
Obs.: Se o link para o external style sheet estiver colocado depois das definicoes do internal style sheet
Slide 9 / 18
Exemplos
CSS
Codigo HTML
Referencias e
Material Extra
<html>
<head>
< l i n k r e l= s t y l e s h e e t t y p e= t e x t / c s s h r e f= e x 1 .
c s s />
</ head>
<body>
<h1>T h i s h e a d e r i s 36 p t</ h1>
<h2>T h i s h e a d e r i s b l u e</ h2>
<p>T h i s p a r a g r a p h h a s a l e f t m a r g i n o f 50 p i x e l s</
p>
</ body>
</ html>
Slide 10 / 18
Exemplos
CSS
Codigo CSS: ex1.css
Referencias e
Material Extra
body {
b a c k g r o u n dc o l o r : y e l l o w ;
}
h1 {
f o n t s i z e : 3 6 p t ;
}
h2 {
color : blue ;
}
p {
marg i n l e f t : 5 0 px ;
}
Slide 11 / 18
Exemplo 01
CSS
Resultado no Browser
Referencias e
Material Extra
Exemplos na Web:
Exemplo 01: Clique Aqui
Exemplo 02: Clique Aqui
Slide 12 / 18
Sintaxe CSS
CSS
Um CSS tem duas partes principais: o seletor e uma ou mais
Referencias e
Material Extra declaracoes.
Slide 13 / 18
Sintaxe CSS
CSS
Seletores: h1, h2, p, a, ul, ol, table, tr, td, ...
Referencias e
Material Extra
Declaracoes: uma propriedade e um valor.
Propriedades: color, background-color, font-size,
text-align, ...
Valores: blue, gray, 12px, center, ...
Ex.:
body { b a c k g r o u n dc o l o r : y e l l o w ; }
h1 { f o n t s i z e : 3 6 p t ; c o l o r : b l u e ; b a c k g r o u n d c o l o r : w h i t e }
p{ marg i n l e f t : 5 0 px ; c o l o r : g r e e n ; }
Slide 14 / 18
Comentarios CSS
CSS
Em CSS um comentario comeca com /*, e termina com
Referencias e
Material Extra */.
Exemplo:
/ T h i s i s a comment /
p {
t e x t a l i g n : c e n t e r ;
/ T h i s i s a n o t h e r comment /
color : black ;
f o n t f a m i l y : a r i a l ;
}
Slide 15 / 18
Exerccio
CSS
1. Crie um conjunto de paginas Web para conter as disciplinas
Referencias e
Material Extra que voces esta fazendo nesse semestre.
(a) Cada disciplina deve ter sua propria pagina.
(b) Faca uma pagina inicial com um link para cada pagina
de disciplina.
(c) Adicione estilos as paginas. As paginas de disciplina
devem seguir o mesmo padrao (cor de fundo, cor e
tamanho de ttulo, etc).
Guia de referencia das propriedades CSS: Clique Aqui
Slide 16 / 18
Exerccio
CSS
2. Resolva a lista de exerccios disponvel no moodle.
Referencias e
Material Extra
Slide 17 / 18
Referencias e Material Extra
CSS
Tutoriais:
Referencias e
Material Extra
HTML: http://www.w3schools.com/html/
CSS: http://www.w3schools.com/css
CSS: http://maujor.com/tutorial/intrtut.php
Slide 18 / 18