06 Css

CSS
Sérgio Nunes
Comunicações Digitais e Internet

Ciências da Comunicação, U.Porto 2012/13
1
Objetivos
• Conhecer as origens e os objetivos da linguagem CSS.
• Conhecer a estrutura base de uma regra CSS.
• Compreender o funcionamento dos seletores CSS.
• Conhecer as principais propriedades e atributos da linguagem CSS.
• Compreender as regras de posicionamento com recurso a CSS.
• Ser capaz de formatar um documento HTML com recurso a regras CSS.
2
Cascading Style Sheets
• CSS é o acrónimo de Cascading Style Sheets.
• CSS é uma linguagem que permite definir o estilo visual de documentos web.
• A linguagem CSS permite definir como deve ser apresentado o conteúdo e

estrutura definidos em HTML.
• A primeira especificação foi publicada em 1994 mas só a partir de 2001 a

linguagem CSS começou realmente a ser utilizada devido ao suporte
introduzido nos principais navegadores web.
• As especificações da linguagem CSS são mantidas pelo consórcio W3C.

A versão mais recente é a CSS 2.1.
3
Motivação
• Porquê separar estrutura e conteúdo (HTML) da apresentação (CSS)?
• A escrita e estruturação de conteúdos requer competências diferentes

daquelas necessárias para desenhar a apresentação desses conteúdos. A
separação ao nível das tecnologias facilita a separação e organização do
trabalho nas equipas.
• A web é um meio de comunicação multi-plataforma. O conteúdo

disponibilizado nos sítios web pode ser consultado usando diferentes
dispositivos (ecrã, telemóvel, impresso, PDA, voz, etc). A separação entre
HTML e CSS permite definir o conteúdo e estrutura apenas uma vez e ter
diferentes folhas de estilos em função do dispositivo de destino.
• Com CSS é possível definir a apresentação em função do destino.
4
Visão Geral
+ css =
+ css =
www.csszengarden.com
+ css =
5
Diferenciação por Dispositivo
• O uso de diferentes instruções CSS para diferentes tipos de dispositivos

permite desenhar e adaptar as interfaces aos dispositivos.
• Página de entrada do Google consultada em diferentes dispositivos:
+ web.css + iphone.css + ipad.css
6
Uso de CSS
• Como aplicar CSS a um documento HTML?
1. Criar um novo documento de texto do tipo CSS (extenção .css).
2. Indicar no documento HTML a associação ao documento CSS.
3. Vários documentos HTML podem ser associados ao mesmo documento CSS.
CSS HTML
HTML
HTML
7
Ligação ao Documento CSS
• O uso de regras CSS externas é feito incluindo no cabeçalho de um

documento HTML uma ligação para o ficheiro com as regras CSS.
<!DOCTYPE html>
<html>
<head>
<title>Aplicação de CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
... Nome do ficheiro CSS.
</body>
</html>
8
Documento CSS
• Um documento CSS é composto por um conjunto de regras CSS.
h1 {
background-color: red;
color: black;
font-family: Arial, sans-serif;
}
p {
margin-top: 10px;
text-align: justify;
}
strong {
color: red;
}
9
Regra CSS
selector valores
h1 {
color: rgb(100,100,100);
margin-top: 10px;
font-family: Arial, sans-serif;
}
propriedades
10
Seletores
• Um seletor identifica elementos num documento HTML.
h1 {
identifica os elementos H1
}
p {
identifica os elementos P
}
strong {
identifica os elementos STRONG
}
11
Seletores de Ligações
• As ligações HTML têm um conjunto de seletores especiais que permitem

controlar o aspeto em função do estado da ligação e da interação com o
utilizador.
• a:link — seletor que se aplica às ligações que ainda não foram visitadas.
• a:visited — aplica-se às ligações que já foram visitadas.
• a:hover — aplica-se quando o rato está em cima da ligação.
• a:active — aplica-se quando a ligação é ativada ( clicada ).
12
Propriedades e Valores
• Cada elemento HTML tem um conjunto de propriedades.
• Cada propriedades aceita um conjunto de valores.
• As propriedades que não são alteradas, mantêm o valor original.
h1 {
color: red;
font-style: italic;
}
p {
letter-spacing: 5px;
font-size: 18px;
}
13
Propagação de Estilos
• Algumas propriedades CSS são propagadas para os elementos filhos de

um elemento HTML.
• No exemplo seguinte, os elementos h1 e p vão herdar as alterações que

foram definidas para o elemento body. Isto acontece porque todos os
elementos que estão encaixados dentro do body — também designados
como filhos — herdam as propriedades definidas.
<body> body {
<h1>Um título</h1> font-family: Verdana, Arial;
<p>Um parágrafo curto.</p> font-size: 14px;
</body> }
HTML CSS
14
Propriedades Básicas
15
Formatação de Texto
• font-family: Lista ordenada dos tipos de letra a usar.
• font-size: Tamanho das letras. Unidades possíveis: px, % ou em.
• font-style: Estilo das letras. Opções: normal ou italic.
• font-weight: Grossura das letras. Opções: lighter, normal, bold ou bolder.
• text-decoration: Efeitos a aplicar ao texto. Opções: none, underline, overline,

line-through.
16
Tipos de Letra
• Para usar um determinado tipo de letra num documento web, é necessário

que esse tipo esteja instalado no computador do utilizador que acede ao
documento.
• Os tipos de letra com maior penetração nos computadores são: Arial,

Courier New, Georgia, Times New Roman, Trebuchet, e Verdana.
• A propriedade font-family permite indicar uma lista de tipos de letra a usar

na formatação do elemento, ordenados por prioridades. O navegador web
tenta usar o primeiro tipo de letra indicado. Se o tipo não estiver instalado no
computador é tentado o tipo seguinte, e assim sucessivamente.
• No final da lista é importante indicar sempre um de dois tipos genéricos: serif

ou sans-serif. Por exemplo: font-family: Verdana, Arial, sans-serif.
17
Exemplo de Formatação de Texto
Um parágrafo
com alterações na
formatação.
p {
font-family: Verdana;
font-size: 18px;
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
18
Apresentação de Texto
• text-align: Alinhamento do texto. Opções: left, right, justify, center.
• text-indent: Alinhamento da primeira linha de um bloco de texto.
• line-height: Altura de cada linha num bloco de texto.
• letter-spacing: Espaçamento entre letras.
• word-spacing: Espaçamento entre palavras.
19
Exemplo de Apresentação de Texto
Um parágrafo com
alterações ao nível da
apresentação.
p {
text-align: justify;
text-indent: 3em;
line-height: 2em;
letter-spacing: -0.1em;
word-spacing: 0.5em;
}
20
Principais Unidades
• A definição dos valores associadas às propriedades dos elementos pode ser

indicada em CSS usando diferentes unidades.
• As principais unidades são as duas seguintes.
• px ( píxel ) — Os píxeis representam unidades absolutas, um pixel

corresponde a um pixel no ecrã do utilizador. Exemplos: 10px, 20px, 1px.
• % ( percentagem ) — As unidades percentuais representam unidades

relativas, e são calculadas em relação ao contexto do elemento. O
contexto varia em função do elemento e da propriedade. Exemplos: 1%,
100%, 5.5%.
21
Definição de Cores
• Existem várias alternativas para definir cores em CSS.
• Palavra-chave: black, yellow, red, blue, etc.
• Código RGB: rgb(vermelho, verde, azul)

Exemplos: rgb(100%, 40%, 0%); rgb(255, 102, 0).
• Código Hexadecimal: #código hexadecimal

Exemplos: #326432, #000000, #0088ﬀ.
22
Definição de Cores
• color: Cor do texto do elemento.
• background-color: Cor do fundo do elemento.
Um texto colorido.
p {
color: rgb(100%, 0%, 0%);
background-color: yellow;
}
23
Margens e Espaçamentos
24
Margens e Espaçamentos
• Cada elemento HTML é representado visualmente como uma caixa

retangular composta por três partes: a margem, o contorno e o
espaçamento interno.
Margem do elemento: espaço após o contorno.
Ciências da Comunicação
Espaçamento interno do
Contorno do elemento. elemento: espaço entre o
conteúdo e o contorno.
25
Contorno
• É possível definir o contorno de todo o elemento ou apenas de parte.
• border: alteração de todo o contorno.
• border-top: alteração apenas do contorno de topo.
• border-bottom: contorno inferior.
• border-left: contorno esquerdo.
• border-right: contorno direito.
26
Contorno
• O contorno define-se especificando três valores: a grossura, o estilo e a cor.
• Grossura: definida em píxeis.
• Estilo: none, dotted, dashed, solid, double, groove, ridge.
• Cor: valor da cor.
h1 {
border: 1px solid black;
}
h2 {
border-right: 2px dotted rgb(100%,0%,0%);
border-left: 2px dotter red;
}
27
Margem
• É possível definir a margem de todo o elemento ou apenas de parte. Na

definição da margem indica-se a distância em píxels.
• margin: alteração da margem de todo o elemento.
• margin-top: alteração apenas da margem de topo.
• margin-bottom: margem inferior.
• margin-left: margem esquerda.
• margin-right: margem direita.
28
Espaçamento Interno
• É possível definir o espaçamento interno de todo o elemento ou apenas de

parte. Na definição do espaçamento indica-se a distância em píxels.
• padding: alteração do espaçamento interno de todo o elemento.
• padding-top: alteração apenas do espaçamento interno de topo.
• padding-bottom: espaçamento interno inferior.
• padding-left: espaçamento interno esquerdo.
• padding-right: espaçamento interno direito.
29
Margem e Espaçamento Interno
img { h1 {
margin: 15px; padding: 10px;
} }
a { p {
margin-left: 5px; padding-top: 10px;
margin-right: 5px; padding-bottom: 15px;
} }
Modificações à margem. Modificações ao espaçamento interno.
30
Listas
• É possível definir a aparência do marcador de cada item com a

propriedade list-style-type.
• Marcadores não numéricos: none, disc, circle, square.
• Marcadores numéricos: none, decimal, decimal-leading-zero, lower-

roman, upper-roman, lower-latin, upper-latin.
ul { ul {
list-style-type: square; list-style-type: lower-roman;
} }
31
Seletores Avançados
32
Atributo class
• Os elementos de um mesmo tipo têm obrigatoriamente o mesmo aspeto?

Por exemplo, todos os elementos P (parágrafos) de uma página têm de ser
apresentados da mesma forma?
• Não. É possível distinguir os elementos usando classes. Todos os elementos

HTML têm um atributo optativo class.
• Os nomes das classes podem ser compostos por letras (não acentuadas) ou
algarismos, e devem começar com uma letra. Exemplos: principal, menu,
submenu, rodape, cabecalho, publicidade.
• Cada elemento pode pertencer a várias classes. Para atribuir um elemento a

várias classes, basta separar os nomes das diferentes classes com espaços.
33
Atributo class
• Para identificar uma determinada classe em CSS usa-se um ponto seguido

do nome da classe. Exemplos: .menu, .rodape, .destaque.
<p class="primeiro">Parágrafo da classe primeiro.</p>
<p class="segundo">Parágrafo da classe segundo</p>
<p class="terceiro">Parágrafo da classe terceiro</p>
p { regra aplica-se a todos os parágrafos }
p.primeiro { regra aplica-se aos parágrafos da classe primeiro }
p.terceiro { regra aplica-se aos parágrafos da classe terceiro }
34
Seleção Conjunta de Elementos
• É possível aplicar a mesma regra CSS a elementos diferentes, para tal basta
separar os vários elementos por vírgulas.
• A principal vantagem desta opção é evitar a duplicação de código idêntico.
h1, h2, h3 { regra comum aos elementos h1, h2 e h3 }
em, p { regra comum aos elementos em e p }
35
Seleção de Elementos Encaixados
• É possível selecionar elementos em CSS com base na estrutura do HTML.

Por exemplo, selecionar os elementos do tipo A que estão dentro de
elementos do tipo B.
• Para selecionar elementos encaixados noutro elemento, usa-se o espaço.
p em { seleção dos elementos em dentro de elementos p }
header h1 { elementos h1 dentro de elementos header }
footer h1 { elementos h1 dentro de elementos footer }
36
Sumário de Seletores
p { regra aplica-se a todos os elementos p }
p, strong { todos os elementos p ou strong }
h1 strong { elementos strong dentro de elementos h1 }
strong.destaque { elementos strong da classe destaque }
p strong.a { elementos strong da classe a dentro de elementos p }
p.a strong { elementos strong dentro de elementos p da classe a }
.destaque { todos os elementos da classe destaque }
37
Posicionamento
38
Posicionamento
• Com CSS é possível alterar o fluxo normal de uma página e definir a

posição de cada elemento.
Fluxo Normal Fluxo Modificado com CSS
39
Propriedade position
• Todos os elementos têm a propriedade position que estabelece a forma de cálculo

da posição de um elemento. Existem 4 alternativas para o posicionamento de um
elemento:
• static — O elemento é posicionado segundo o fluxo normal.

Este é o valor definido por omissão.
• relative — A posição do elemento é calculada em relação à posição original

segundo o modelo estático.
• absolute — A posição do elemento é especificada com as propriedades top,

right, bottom e left relativamente ao elemento que contém este.
• fixed — O cálculo da posição é igual ao método absoluto mas o elemento pai

é a "janela de visualização" (o navegador).
40
Propriedades de Posicionamento
• A propriedade position é usada juntamente com as propriedades:
• top — afastamento do lado superior do elemento.
• left — afastamento do lado esquerdo do elemento.
• bottom — afastamento do lado inferior do elemento.
• right — afastamento do lado direito do elemento.
• e também:
• width — largura do elemento.
• height — altura do elemento.
41
Propriedades de Posicionamento
top
width
height
ELEMENTO
left right
bottom
42
Posicionamento Estático
• O posicionamento estático corresponde ao posicionamento normal, definido

por omissão. Segue a sequência definida no documento HTML, de cima para
baixo e da esquerda para a direita
• As propriedades top, left, bottom, right não se aplicam.
p {
position: static;
width: 200px;
height: 5em;
border: 1px solid red;

}
43
Posicionamento Relativo
• Com o posicionamento relativo, a posição é calculada em relação à

localização natural do elemento. O elemento pode ser deslocado na vertical
ou na horizontal face à posição original.
p {
position: relative;
top: 50px;
left: 50px;
}
44
Exemplos de Posicionamento Relativo
p {
position: relative;
top: 10px;
right: 50px;
}
p {
position: relative;
top: 10px;
left: 50px;
}
45
Posicionamento Absoluto
• Com o posicionamento absoluto, a posição do elemento é calculada em

relação ao elemento 'pai' (o elemento que engloba este).
p {
position: absolute;
top: 50px;
left: 50px;
}
46
Posicionamento Fixo
• Esta forma de posicionamento é idêntica ao modelo absoluto mas a posição

é calculada em relação à janela do navegador web. Permite, por exemplo,
fixar um elemento independentemente do scroll vertical da janela.
47
Propriedade float
• A propriedade float permite desassociar o elemento do fluxo normal e

deslocá-lo para a esquerda ou direita da linha, permitindo que o restante
conteúdo circule paralelamente ao elemento.
• Valores possíveis:
• none — Valor por omissão.
• left — O elemento é deslocado para a esquerda com o conteúdo

envolvente a flutuar à direita.
• right — O elemento é deslocado para a direita com o conteúdo

envolvente a flutuar à esquerda.
48
Exemplo da Propriedade float
float: left float: right
49
Recursos
• W3C Cascading Style Sheets

http://w3.org/Style/CSS
• CSS 2.1 Specification & Properties

http://w3.org/TR/CSS21
http://w3.org/TR/CSS21/propidx.html
• CSS Beginner Tutorial — HTML Dog

http://htmldog.com/guides/cssbeginner
• The Web Standards Project — CSS

http://www.webstandards.org/learn/external/css/
50

06 Css

Enviado por

Direitos autorais:

Formatos disponíveis

06 Css

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

06 Css

Enviado por

Direitos autorais:

Formatos disponíveis

CSS

Comunicações Digitais e Internet

• Conhecer as origens e os objetivos da linguagem CSS.

• Conhecer a estrutura base de uma regra CSS.

• Compreender o funcionamento dos seletores CSS.

• Conhecer as principais propriedades e atributos da linguagem CSS.

• Compreender as regras de posicionamento com recurso a CSS.

• Ser capaz de formatar um documento HTML com recurso a regras CSS.

• CSS é o acrónimo de Cascading Style Sheets.

• A linguagem CSS permite definir como deve ser apresentado o conteúdo e

• A primeira especificação foi publicada em 1994 mas só a partir de 2001 a

• As especificações da linguagem CSS são mantidas pelo consórcio W3C.

• Porquê separar estrutura e conteúdo (HTML) da apresentação (CSS)?

• A escrita e estruturação de conteúdos requer competências diferentes

• A web é um meio de comunicação multi-plataforma. O conteúdo

• Com CSS é possível definir a apresentação em função do destino.

• O uso de diferentes instruções CSS para diferentes tipos de dispositivos

• Página de entrada do Google consultada em diferentes dispositivos:

+ web.css + iphone.css + ipad.css

• Como aplicar CSS a um documento HTML?

1. Criar um novo documento de texto do tipo CSS (extenção .css).

2. Indicar no documento HTML a associação ao documento CSS.

3. Vários documentos HTML podem ser associados ao mesmo documento CSS.

• O uso de regras CSS externas é feito incluindo no cabeçalho de um

• Um documento CSS é composto por um conjunto de regras CSS.

• Um seletor identifica elementos num documento HTML.

• As ligações HTML têm um conjunto de seletores especiais que permitem

• a:visited — aplica-se às ligações que já foram visitadas.

• a:hover — aplica-se quando o rato está em cima da ligação.

• a:active — aplica-se quando a ligação é ativada ( clicada ).

• Cada elemento HTML tem um conjunto de propriedades.

• Cada propriedades aceita um conjunto de valores.

• As propriedades que não são alteradas, mantêm o valor original.

• Algumas propriedades CSS são propagadas para os elementos filhos de

• No exemplo seguinte, os elementos h1 e p vão herdar as alterações que

• font-family: Lista ordenada dos tipos de letra a usar.

• font-size: Tamanho das letras. Unidades possíveis: px, % ou em.

• font-style: Estilo das letras. Opções: normal ou italic.

• font-weight: Grossura das letras. Opções: lighter, normal, bold ou bolder.

• text-decoration: Efeitos a aplicar ao texto. Opções: none, underline, overline,

• Para usar um determinado tipo de letra num documento web, é necessário

• Os tipos de letra com maior penetração nos computadores são: Arial,

• A propriedade font-family permite indicar uma lista de tipos de letra a usar

• No final da lista é importante indicar sempre um de dois tipos genéricos: serif

• text-align: Alinhamento do texto. Opções: left, right, justify, center.

• text-indent: Alinhamento da primeira linha de um bloco de texto.

• line-height: Altura de cada linha num bloco de texto.

• letter-spacing: Espaçamento entre letras.

• word-spacing: Espaçamento entre palavras.

• A definição dos valores associadas às propriedades dos elementos pode ser

• As principais unidades são as duas seguintes.

• px ( píxel ) — Os píxeis representam unidades absolutas, um pixel

• % ( percentagem ) — As unidades percentuais representam unidades

• Existem várias alternativas para definir cores em CSS.

• Palavra-chave: black, yellow, red, blue, etc.

• Código RGB: rgb(vermelho, verde, azul)

• Código Hexadecimal: #código hexadecimal

• color: Cor do texto do elemento.

• background-color: Cor do fundo do elemento.