Apostila - Webdesign - CSS

Prévia do material em texto

Linguagem 
CSS 
 
 
 
 
Material de apoio ao curso de 
linguagem CSS 
 
 
 
 
 
Criação: 
Instrutor Nicolas Alexandre Enzo 
nicolasaenzo@hotmail.com 
Revisão: 
Isabel Mariane de Oliveira 
Instrutor Kleber Rocha 
 
Prezado (a) Aluno (a) 
O objetivo ao desenvolver essa apostila é que ela seja utilizada como material de apoio ao curso 
ministrado na Upgrade Informática, não recomendamos que esta apostila seja utilizada 
isoladamente no estudo. 
Aproveitem o curso e obrigado! 
O autor. 
 
 Nome: ________________________________ 
Tel. Contato: ___________________________ 
 
 
Sumário: 
CSS .................................................................................................................................. 1 
Introdução.................................................................................................................... 1 
Utilizando o CSS ........................................................................................................ 1 
Criando um arquivo com CSS.................................................................................. 2 
Método 1 .................................................................................................................. 2 
Método 2 .................................................................................................................. 3 
Exercício 01: ............................................................................................................ 5 
ID, Class e <Div>: ...................................................................................................... 7 
ID e Class:................................................................................................................ 7 
Exercício 02: ............................................................................................................ 8 
Exercício 04: .......................................................................................................... 18 
Hierarquia de propriedades e modificadores:...................................................... 19 
Seletor Contextual: ............................................................................................... 19 
O valor inherit ........................................................................................................ 20 
Pseudo-Classes do Elemento A......................................................................... 20 
Exercício 05: .......................................................................................................... 21 
Exercício 06: .......................................................................................................... 23 
Transform: .............................................................................................................. 30 
KeyFrame: ................................................................................................................. 33 
Definindo ciclos......................................................................................................... 36 
Exercício 09: .......................................................................................................... 36 
Sites Responsivos:................................................................................................... 42 
Exercício 10: .......................................................................................................... 43 
Exercício 11: .......................................................................................................... 47 
Exercício 12: .......................................................................................................... 61 
Extras: ........................................................................................................................ 61 
Criando Ancoras: .................................................................................................. 61 
Exercício 13 ........................................................................................................... 62 
Dicas:.......................................................................................................................... 64 
Unidades.................................................................................................................... 66 
Modelo de caixa ....................................................................................................... 67 
Bordas ........................................................................................................................ 67 
Margens ..................................................................................................................... 70 
Espaçamento ............................................................................................................ 71 
 
 
Modelo de formatação visual ................................................................................. 71 
Detalhes do modelo de formatação visual ........................................................... 75 
Efeitos visuais ........................................................................................................... 76 
Cores e Fundo .......................................................................................................... 77 
Paginação para impressão ..................................................................................... 79 
Fontes tipográficas ................................................................................................... 80 
Texto........................................................................................................................... 82 
Tabelas ...................................................................................................................... 84 
Interface de usuário ................................................................................................. 85 
 
 
 
Upgrade Informática - 1 
 
CSS 
 
Introdução 
 Quando não definimos uma formatação específica para os elementos 
HTML de uma página web, eles são exibidos com o estilo determinado pelo 
navegador utilizado. Há dois problemas principais em deixar os navegadores 
decidirem qual formatação deve ser adotada. O primeiro é que cada navegador 
pode adotar uma formatação diferente. Consequentemente, uma mesma página 
web não será exibida exatamente da mesma forma em todos os navegadores. 
O segundo problema é que as formatações adotadas pelos principais 
navegadores não são “bonitas”. 
 Podemos padronizar a forma que as páginas web são exibidas nos 
diferentes navegadores e obter um visual agradável definindo a nossa própria 
formatação. O estilo das páginas deve ser definido com a linguagem CSS 
(Cascading Style Sheets). 
 
Utilizando o CSS 
 
 A Linguagem de CSS é utilizada a partir de regras para cada item utilizado 
no html e deve ter a seguinte estrutura: 
 
 
 O seletor determina para quais elementos a regra de formatação deve ser 
aplicada. No corpo de uma regra CSS, podemos definir diversas propriedades, 
que por sua vez definem uma característica visual. Por exemplo, a propriedade 
color é utilizada para definir a cor da fonte utilizada nos textos. 
 
 
 
 
 
Seletor 
Propriedade 
 
Upgrade Informática - 2 
 
Criando um arquivo com CSS 
Basicamente, existe duas formas de se trabalhar com o CSS a primeira delas 
é inserir a linguagem de programação dentro do arquivo HTML ou, a mais 
utilizada, criar um novo arquivo apenas para o CSS. 
Agora iremos trabalhar com as duas formas depois você usara qual acha 
mais fácil. 
Método 1 
1) Abra um novo Arquivo de HTML no Dreamweaver e digite os códigos 
abaixo: 
 
 
2) Visualize no navegador o resultado. 
 
 Repare que foi inserido dentro de head a tag <style> onde foi criado as 
regras para os parágrafos (p) e para o (h1). Esse método de utilizar a tag style 
dentro do html é pouco usadaporque quando se tem um volume muito grande 
de linhas é difícil organizar as regras. 
 
 
Upgrade Informática - 3 
 
 
 
Foram utilizadas as propriedades: 
Font-family: utilizada para escolher a fonte do texto que vai estar dentro do 
seletor. 
Font-size: é utilizado para definir o tamanho do texto. 
Color: é utilizado para definir a cor do texto. 
 Obs: as cores são definidas pelo código Hexadecimal (HEX) 
correspondente a cor. E é sempre antecedido de # 
 Método 2 
1) Abra um novo Arquivo em html e digite o seguinte código: 
 
2) Salve seu arquivo. 
 
3) Clique no menu Arquivo em seguida em Novo (Ctrl + N). 
 
4) Na janela que apareceu abra um arquivo em CSS. 
 
 
Upgrade Informática - 4 
 
 
5) Salve na mesma pasta que criou o arquivo em HTML com o nome de 
estilo.css 
6) Em seguida digite os códigos abaixo: 
 
7) Volte para o arquivo em HTML. 
 
8) Repare que agora que já foi feito o link sempre irá aparecer o nome da página 
em css que foi criada facilitando assim o acesso a ela. 
 
9) Visualize seu arquivo no navegador. 
 
 
 
Upgrade Informática - 5 
 
Exercício 01: 
10) Faça o download de uma logo e uma imagem para colocar no fundo. Em 
seguida escreva as linhas de código a seguir: 
Na página “Código-fonte” em HTML: 
 
Na página “Estilo.css” em CSS: 
 
 
Upgrade Informática - 6 
 
 
11)O Resultado deve ser algo parecido com a imagem abaixo: 
 
12)Agora clique em Arquivo > Salvar como... e salve com o nome de 
Contato.html. 
 
13)Faça a mesma coisa para Empresa e Portfólio. 
 
14)Em seguida faça algumas alterações no texto que aparece em cada página 
e mostre ao seu instrutor. 
 
Obs: Repare que a página de estilo.css vai ser a mesma para 
todas as páginas do seu site, facilitando a padronização do mesmo. 
Foi utilizado as propriedades: 
Width: Largura. 
Background-image: Imagem de fundo do elemento. 
Text-Align: Alinhamento do texto. 
Text-Decoration: Efeitos decorativos no texto como sublinhado, tachado, linha 
acima e piscante. É utilizado também para tirar a underline que ficam no texto quando 
se utiliza uma href. 
Font-family: utilizada para escolher a fonte do texto que vai estar dentro do seletor. 
Text-shadow: Cria uma sombra embaixo do texto, necessita de deslocamento, 
desfoque e em seguida a cor da sombra. 
Font-size: é utilizado para definir o tamanho do texto. 
Color: é utilizado para definir a cor do texto. 
 
Upgrade Informática - 7 
 
ID, Class e <Div>: 
 ID e Class: 
 A diferença é que os seletores por identificador (ID) estão pensados para 
que o elemento que se seleciona seja único (só se pode colocar um 
identificador dado a um elemento da página, ou seja, os identificadores devem 
ser únicos). 
 
 No entanto, as classes (class) estão pensadas para poder definir o 
mesmo estilo a vários elementos da página. Ou seja, você pode atribuir uma 
mesma classe a vários elementos da página sem problemas. Na verdade, as 
classes estão pensadas justamente para serem utilizadas em diversos 
elementos diferentes na página. 
 
 Por exemplo, se você tem uma página com um menu de navegação que 
aparece uma única vez, você pode atribuir um id à camada onde está a barra 
de navegação. Esse ID será único, porque não há outra barra de navegação 
igual a essa na página. 
 Agora, se dentro da barra de navegação você tiver vários links e quiser 
atribuir estilos a todos ao mesmo tempo, você terá que criar uma classe (class 
de CSS) e atribuí-la a cada um desses links. Os x links que você tiver, terão 
todos a mesma classe e você atribuirá o estilo de uma vez para todos através 
da class. 
 
Para utilizar o atributo ID devemos colocar dentro de uma tag, por exemplo: 
 
 
 Para colocar as regras em CSS devemos colocar #nome_id, como por 
exemplo: 
 
 Obs: lembre-se que só pode haver uma tag com essa ID na página. 
 
Upgrade Informática - 8 
 
 Para utilizar o Atributo Class também devemos colocar dentro da tag que 
você deseja que seja alterada. 
 
 
 Já na página de CSS devemos colocar .nome_class para editar as regras 
da classe (exemplo: .menu). 
 
Exercício 02: 
1) Digite as linhas de código a seguir: 
HTML: 
 
 
 
Upgrade Informática - 9 
 
CSS: 
 
2) Agora dentro da div de cabeçalho insira o seguinte código: 
 
 
 
 
 
 
Upgrade Informática - 10 
 
3) Na página de CSS digite o seguinte código: 
 
4) Salve e visualize no navegador o resultado, se você achar que é 
necessário faça alguma alteração. 
 
5) Agora insira dentro da div de Menu os seguintes Códigos: 
 
 
6) Na página do CSS insira as seguintes linhas: 
 
Upgrade Informática - 11 
 
 
7) Salve e visualize no navegador o resultado, se você achar que é 
necessário faça alguma alteração. 
 
8) Salve 5 imagens da internet de produtos de informática e em seguida 
dentro da div de corpo digite as linhas a seguir: 
 
9) Agora digite na folha de CSS os seguintes Códigos: 
 
Upgrade Informática - 12 
 
 
10) Salve e visualize no navegador o resultado, se você achar que é 
necessário faça alguma alteração 
 
11) Agora, como desafio, faça as alterações necessárias no seu site para criar 
um rodapé como mostra a figura abaixo: 
 
 
 
Upgrade Informática - 13 
 
Propriedades de CSS utilizadas neste Exercício: 
 Margin: Atalho para definir de uma só vez o tamanho da margem para 
todos os lados 
 Min-height: Altura mínima. 
 Height: Altura. 
 Width: Largura. 
 Background: Fundo da Caixa podendo ser, imagem ou cor. 
 Border-Radius: Arredonda os lados da caixa em questão. 
 Float: Posicionamento adjacente à esquerda ou à direita do elemento. 
 Font-Family: Tipo de fonte utilizada no texto. 
 Font-Size: Tamanho da fonte Utilizada no texto 
 Text-Shadow: Sombra do texto. 
 Color: Cor do texto. 
 Text-Decoration: Efeitos decorativos no texto como sublinhado, 
tachado, linha acima e piscante. É utilizado também para tirar a 
underline que ficam no texto quando se utiliza uma href. 
 List-Style: Define o estilo do Marcador da lista. 
 
 
Anotações: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 14 
 
 
Exercício 03: 
 
1) Peça auxílio para seu instrutor para colocar em sua pasta as imagens de 
fundo que iremos utilizar agora. 
 
2) Na folha de html digite as seguintes linhas de código: 
 
3) Na folha de CSS digite os códigos abaixo: 
 
 
Upgrade Informática - 15 
 
 
 
4) Salve em sua pasta e visualize no navegador 
 
5) Agora insira o código para dentro da div de id menu: 
 
6) No CSS: 
 
7) Salve e visualize no navegador sua página. 
 
 
Upgrade Informática - 16 
 
8) Agora digite dentro da div de id corpo as seguintes linhas: 
 
 
9) Na página de CSS digite as seguintes regras: 
 
 
12) Salve seu arquivo visualize no navegador. 
 
13) Se você achar necessário faça algumas alterações. 
 
 
 
 
 
 
Upgrade Informática - 17 
 
Propriedades de CSS utilizadas neste Exercício: 
 
 Margin: Atalho para definir de uma só vez o tamanho da margem para 
todos os lados 
 Min-height: Altura mínima. 
 Max-height- Altura Máxima. 
 Height: Altura. 
 Width: Largura. 
 Background: Fundo da Caixa podendo ser, imagem ou cor. 
o Linear-gradiente: Cria um gradiente no background da caixa 
 Border-Radius: Arredonda os lados da caixa em questão. 
 Float: Posicionamento adjacente à esquerda ou à direita do elemento. 
 Font-Family: Tipo de fonte utilizada no texto. 
 Font-Size: Tamanho da fonte Utilizada no texto 
 Box-Shadow: Sombra da Caixa. 
 Color: Cor do texto. 
 Text-Decoration: Efeitos decorativos no texto como sublinhado, tachado, 
linha acima e piscante. É utilizado também para tirar a underline que ficam 
no texto quando se utiliza uma href. 
 Position: é definido por: 
o static é o valor padrão de todos os elementos HTML. Um elemento 
com position:static; não se posiciona de maneira especial,seria o 
mesmo que dizer que o elemento não tem posição definida ou 
então que um elemento com o atributo position definido seria 
posicionado. 
o relative se comporta igualmente ao static, a menos que se adicione 
propriedades extras no estilo do elemento. Definindo as 
propriedades top, right, bottom, e left em um elemento 
position:relative o ajustamos em relação à posição atual dele. 
Outros conteúdos não vão se ajustar para se encaixarem em 
qualquer espaço deixado por esse elemento. 
o fixed é posicionado relativamente ao "viewport", isso significa que 
ele sempre ficará no mesmo lugar mesmo que haja rolagem na 
página. Assim como o relative, as propriedades top, right, bottom e 
left também são utilizadas. 
o absolute é o mais complicado. Este valor se comporta como o 
fixed, porém tendo como referência a posição do elemento relativo 
mais próximo de onde está contido, ao invés do viewport. Se um 
elemento position:absolute não possuir elementos ancestrais 
posicionados relativamente, ele utilizará o body como referência. 
 
 
 
 
Upgrade Informática - 18 
 
Exercício 04: 
14) Agora com os conhecimentos adquiridos até esta aula, desenvolva um 
site simples de uma loja de roupa do seu gosto. 
 
 
Anotações: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 19 
 
Hierarquia de propriedades e modificadores: 
 Existem algumas propriedades do CSS que quando aplicadas aos 
“elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. 
Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color 
em um elemento div, o texto dos elementos contidos no div são coloridos de 
acordo com a propriedade. 
 O texto que há dentro deste div irá ter a cor verde, independente se este 
texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por 
exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. A mesma 
coisa acontece para, por exemplo, a propriedade font-size. 
 Há também as propriedades não herdadas pelos “filhos”. Estas 
propriedades geralmente são propriedades referentes a formatação da caixa, 
como por exemplo a propriedade width, height, margin,padding e assim por 
diante. 
 Essa herança é responsável por uma parte da cascata. É aí que está uma 
das primeiras vantagens de se utilizar o CSS no desenvolvimento com padrões. 
A vantagem é que podemos modificar poucas linhas do CSS para fazer 
alterações no site inteiro, sem ter que “caçar” elemento por elemento para 
modificar suas propriedades. 
Seletor Contextual: 
 Imagine que você deseja que apenas o parágrafo <p> que se encontra 
dentro de uma div seja alterado sem alterar os outros textos. Quando se tem 
situações parecidas com esta, onde desejamos alterar algo que está dentro de 
algo podemos utilizar o seletor contextual que é usado como mostra abaixo: 
 
 Neste exemplo nós temos uma regra para alterar a cor de qualquer 
parágrafo e outra para quando um p estiver dentro de uma div ele será 
formatado com outra cor. 
 Pode-se utilizar essa propriedade para quantos “elementos filhos” for 
necessário. Por exemplo: 
 
 
 
 
Upgrade Informática - 20 
 
O valor inherit 
O valor inherit é utilizada em propriedades destinadas aos elementos filhos. 
Suponha que você tem um elemento div. Este elemento div tem uma borda e 
você quer que seus filhos tenham a mesma borda. Veja o código: 
No CSS, o normal seria fazer isso: 
 
Se você quisesse modificar a borda do pai e mesmo assim manter a borda do 
filho, teria que fazer alterações no código. O valor inherit serve para que o filho 
sempre herde um determinado valor de uma determinada propriedade do pai. 
Quando o valor do pai muda, o valor do filho também. Veja o código e o exemplo. 
 
Pseudo-Classes do Elemento A 
 Usando a Tag <a> e suas pseudo-classes podemos criar alguns efeitos 
interessantes, como por exemplo do link mudar o estilo quando se passa o 
mouse em sobre ele. As pseudo-classes são: 
Pseudo-Classe Descrição 
:link 
É aplicada para links que ainda não foram 
visitados 
:visited 
É aplicada para links que já foram visitados pelo 
usuário 
:hover 
É aplicada quando o cursor do mouse está sobre o 
link. 
:active 
É aplicada quando um elemento está sendo 
ativado pelo usuário. Por exemplo, entre o tempo 
em que o usuário pressiona o botão do mouse e 
depois solta-o. 
 
Upgrade Informática - 21 
 
Exercício 05: 
1) Abra uma nova página em html e escreva as linhas abaixo: 
 
 
2) Agora digite as seguintes linhas em CSS: 
 
 
Upgrade Informática - 22 
 
 
 
 
 
Upgrade Informática - 23 
 
Exercício 06: 
3) Neste exercício vamos aprender como fazer um menu Dropdown 
 
4) A princípio iremos fazer o exercício e em seguida será explicado cada 
aspecto. 
 
5) Na Página de HTML digite o seguinte texto: 
 
 Obs: repare que utilizamos a tag <nav>, ela marca define um conjunto de 
links de navegação. 
 Observe que nem todas as ligações de um documento devem estar dentro 
de um elemento <nav>. O elemento <nav> destina-se apenas para os grandes 
blocos de links de navegação. 
 
 
 
Upgrade Informática - 24 
 
6) Agora crie a folha de css e digite o seguinte código: 
 
 Obs: A propriedade z-index especifica a ordem de pilha de um elemento. 
Um elemento com maior ordem da pilha está sempre na frente de um elemento com 
uma ordem de pilha inferior. 
 
 
 
 
Upgrade Informática - 25 
 
 
 O display é a propriedade mais importante do CSS para controlar o 
layout. Cada elemento tem um valor padrão para o display dependendo de seu 
tipo. O valor padrão na maioria dos elementos é normalmente block ou inline. 
Um elemento com valor block é chamado de elemento de nível de bloco ou 
apenas elemento de bloco. Um elemento com valor inline é sempre chamado 
de elemento de linha. 
 Block: div é o exemplo de bloco mais comum. O elemento de bloco 
sempre começa em uma nova linha e se expande para a esquerda e 
direita o tanto quanto for possível. Outros elementos de bloco comuns 
são p e form. 
 Inline: span é o elemento de linha padrão. Um elemento de linha pode 
preencher algum texto dentro de um parágrafo sem quebrar o fluxo 
daquele parágrafo. O elemento a é o elemento de linha mais comum, já 
que ele é utilizado para links. 
 None: Outro valor comum do display é o none. Alguns elementos 
específicos como o script utilizam este valor por padrão. Ele é 
normalmente utilizado através do JavaScript para esconder e exibir 
elementos sem realmente os remover nem recriar. 
 
Upgrade Informática - 26 
 
 
 
7) Salve seu arquivo e visualize no navegador. 
 
Anotações 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 27 
 
Exercício 07: 
10) Neste exercício iremos ver alguns efeitos que podemos utilizar usando 
apenas o hover. 
Obs: peça para o seu instrutor te passar as imagens que vão ser utilizadas. 
 
11) Abra um arquivo em html e digite o seguinte código dentro da tag Body 
 
12) Agora faça o link com uma nova página em css e digite o seguinte código: 
 
 
Upgrade Informática - 28 
 
 
13) Até aqui fizemos apenas o corpo da imagem que iremos utilizar. Agora 
vamos fazer a animação. 
 
 
 
 
Upgrade Informática - 29 
 
14) Aqui nós colocamos o estilo e utilizando a propriedade Transform 
mudamos a posição inicial dos itens para fora do quadro. Uma vez que o 
quadro tem a propriedade overflow em hidden, os objetos não irão 
aparecer, mas com a propriedade transition pedimos que ele faça uma 
animação quando mudar a posição ou efeito de qualquer item fazendo 
com que os objetos apareçam. 
 
15) Agora para fazer a animação acontecer coloque o seguinte código: 
 
16) Com a propriedade transition-delay fazemos com que cada item entre 
separadamente em um intervalo de 0,1 segundo e novamente com a 
propriedade transform colocamos as tags no lugar correto. 
 
17) Agora na Páginade HTML digite o seguinte código: 
 
18) Agora vá para a página de CSS, como nossas tags possuem o mesmo 
nome nós precisamos apenas criar a animação deste exemplo. Desta 
maneira digite o seguinte código: 
 
Upgrade Informática - 30 
 
 
19) Salve seu arquivo e visualize o resultado no navegador. 
Transform: 
A Propriedade CSS transform permite modificar o espaço coordenado do 
modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, 
rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores 
definidos. 
O módulo Transform se baseia em diferentes propriedades para indicar 
quais serão aos efeitos a serem aplicados: 
- Rotate: Rotaciona o elemento levando em consideração o ângulo indicado; 
- Scale: Modifica as dimensões do objeto proporcionalmente, levando em 
consideração seu tamanho original; 
- Translation: Move os elementos no eixo X e Y, independente de 
características como float, position, margin, etc. 
- Skew: Modifica os ângulos do objeto, inclinando e destorcendo. 
 
20) Agora vamos fazer mais um exemplo de efeito com o :hover. 
 
21) Na página em HTML digite o código a seguir: 
 
Upgrade Informática - 31 
 
 
22) Agora na página de CSS iremos fazer a formatação da animação: 
 
 
 
 
 
Upgrade Informática - 32 
 
23) Agora só falta colocar a animação na máscara e no texto: 
 
 
 
24) Salve seu arquivo e visualize no navegador 
 
25) Faça algumas alterações no código que foi criado neste exercício. 
 
Anotações: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 33 
 
KeyFrame: 
A propriedade trasition trabalha de forma muito simples e flexível. Você 
praticamente diz para o browser qual o valor inicial e o valor final para que ele 
aplique a transição automaticamente, controlamos praticamente apenas o tempo 
de execução. Para termos mais controle sobre a animação temos a propriedade 
animation que trabalha juntamente com a rule keyframe. 
Basicamente você consegue controlar as características do objeto e suas 
diversas transformações definindo fases da animação. Observe o código abaixo 
e veja seu funcionamento: 
 
O código acima define um valor inicial e um valor final. Agora vamos aplicar 
esse código a um elemento. Primeiro criamos o item no HTML 
 
Agora na página de CSS digite o seguinte código: 
 
 
 
 
Upgrade Informática - 34 
 
A propriedade animation tem uma série de propriedades que podem ser 
resumidas em um shortcode bem simples. Veja a tabela logo a seguir para 
entender o que cada propriedade significa: 
Código Descrição 
Animation-name 
Especifica o nome da função de 
animação 
Animation-duration 
Define a duração da animação. O 
valor é declarado em segundos 
(ex:1s) 
Animation-timing-function 
Descreve qual será a progressão da 
animação a cada ciclo de duração. 
Existem uma série de valores 
possíveis e que pode ser que o seu 
navegador ainda não suporte, mas 
são eles: ease, linear, ease-in, ease-
out, ease-in-out, cubic-bezier(, , , ) . O 
valor padrão é ease. 
Animation-interation-count 
Define o número de vezes que o ciclo 
deve acontecer. O padrão é um, ou 
seja, a animação acontece uma vez e 
pára. Pode ser também infinito 
definindo o valor infinite no valor. 
Animation-direction 
Define se a animação irá acontecer ou 
não no sentido inverso em ciclos 
alternados. Ou seja, se a animação está 
acontecendo no sentido horário, ao 
acabar a animação, o browser faz a 
mesma animação no elemento, mas no 
sentido antihorário. Os valores são 
alternate ou normal. 
animation-play-state 
Define se a animação está acontecendo 
ou se está pausada. Você poderá por 
exemplo, via script, pausar a animação se 
ela estiver acontecendo. Os valores são 
running ou paused. 
animation-delay 
Define quando a animação irá começar. 
Ou seja, você define um tempo para que 
a animação inicie. O valor 0, significa que 
a animação começará imediatamente. 
 
 
 
 
Upgrade Informática - 35 
 
Veja que em nossa programação utilizamos a propriedade animation-name e 
chamamos o mesmo nome que demos na nossa função de keyframe logo no 
começo da explicação. Depois definimos uma duração de ciclo de meio segundo 
e que ele girará infinitamente. E por último definimos pelo animation-direction 
que a animação deverá ser normal, ou seja, o DIV girará sempre para a mesma 
direção. 
Podemos melhorar esse código utilizando a versão shortcode, que é mais 
recomendado. Veja a ordem que devemos escrever as propriedades animation 
em forma de shortcode: 
 
animation: animation-name, animation-duration, animation-timing-function, 
animation-delay, animation-iteration-count, animation-direction] , animation-
name, animation-duration, animation-timing-function, animation-delay, 
animation-iteration-count, animation-direction 
Desta maneira nosso código CSS ficará com a seguinte formatação: 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 36 
 
Definindo ciclos 
Nós definimos no keyframe do nosso último exemplo apenas um início e um 
fim. Mas e se quiséssemos que ao chegar na metade da animação o nosso 
elemento ficasse com o background vermelho? Ou que ele mudasse de 
tamanho, posição e etc? É aí onde podemos flexibilizar melhor nosso keyframe 
definindo as fases da animação. Por exemplo, podemos dizer para o elemento 
ter uma cor de background diferente quando a animação chegar aos 10% do 
ciclo, e assim por diante. 
Faça o exemplo: 
 
 
Exercício 09: 
Estilo de animação: Neste exercício iremos ver vários tipos de animação 
utilizando as keyframes. 
1) Coloque o seguinte código dentro do body do HTML: 
 
Agora dentro da página de CSS digite: 
 
 
Upgrade Informática - 37 
 
 
2) Execute no navegador e veja o resultado. 
 
3) Agora acrescente o seguinte código dentro do body: 
 
 
 
4) Na página de CSS digite o seguinte código: 
 
 
5) Agora acrescente o seguinte código dentro do body: 
 
 
 
 
 
 
Upgrade Informática - 38 
 
6) Na página de CSS digite o seguinte código: 
 
 
7) Agora acrescente o seguinte código dentro do body: 
 
 
 
8) Na página de CSS digite o seguinte código: 
 
 
Upgrade Informática - 39 
 
9) Agora acrescente o seguinte código dentro do body: 
 
10) Na página de CSS digite o seguinte código: 
 
11) Agora acrescente o seguinte código dentro do body: 
 
 
 
12) Na página de CSS digite o seguinte código: 
 
 
13) Agora acrescente o seguinte código dentro do body: 
 
 
 
 
 
 
Upgrade Informática - 40 
 
14) Na página de CSS digite o seguinte código: 
 
 
15) Agora acrescente o seguinte código dentro do body: 
 
 
 
16) Na página de CSS digite o seguinte código: 
 
17) Agora acrescente o seguinte código dentro do body: 
 
 
 
 
 
Upgrade Informática - 41 
 
18) Na página de CSS digite o seguinte código: 
 
Anotações: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 42 
 
 Sites Responsivos: 
Site ou layout responsivo, ou também conhecido como site flexível é 
quando o site automaticamente se encaixa no dispositivo do usuário (PC, celular, 
tablet, etc). 
Um site responsivo muda a sua aparência e disposição com base no 
tamanho da tela em que o site é exibido. Então, se o usuário tem uma tela 
pequena, os elementos se reorganizam para lhe mostrar as coisas principais em 
primeiro lugar. 
Em smartphones a navegação e experiência do usuário fica difícil e 
limitada tendo que usar recursos de zoom in e out para ler a página na integra. 
Outros detalhes como botões e menus ficam desconfigurados pois não foram 
feitos para esse dispositivo ou resolução. 
Existem dezenas de resoluções diferentes e, embora este seja o objetivo 
final, é bem difícil (difícil, não impossível) ter um layout que vai ficar perfeito a 
cada ponto de quebra. O ideal, portanto, é ter em mente quais são os formatos 
mais comuns e trabalhar para que aomenos nestes estágios o design esteja 
funcionando perfeitamente. Considere, portanto, estas resoluções básicas: 
 1200 pixels – Desktops com monitores widescreen. 
 960 pixels – Tablets em formato paisagem e monitores antigos. 
 768 pixels – Tablets em formato retrato. 
 480 pixels – Smartphones em formato paisagem. 
 320 pixels – Smartphones em formato retrato. 
Para o navegador saber qual formatação deve ser feita a cada tamanho 
de tela são utilizadas as Media queries. As media queries são uma forma de 
enviar condições ao navegador para informá-lo como renderizar a página, 
dependendo do tamanho do viewport. 
O conjunto de regras abaixo, irá funcionar quando a largura do viewport 
for 980px ou inferior. Basicamente vamos passar a largura da <div> “conteudo” 
de pixels para porcentagem, transformando a largura do elemento em fluída. 
 
Quando se está fazendo um site responsivo é importante criar a meta 
viewport dentro do <head> para definir a escala inicial do site. 
 
 
 
Upgrade Informática - 43 
 
Exercício 10: 
1) Neste exercício iremos criar um site simples para entender como funciona 
a lógica utilizada nas media queries. 
 
2) Primeiramente vamos criar o corpo do site no html: 
 
 
3) Não se esqueça de utilizar a tag <meta name= “viewport”...> 
 
4) Agora vamos criar o corpo padrão do site na página de CSS. 
 
 
Upgrade Informática - 44 
 
 
 
 
Clear: A propriedade clear especifica que os lados de um elemento 
flutuante não estão autorizados a flutuar. 
 
 
 
 
 
 
 
 
Upgrade Informática - 45 
 
5) Agora iremos criar a formatação utilizando a @media queries para cada 
tamanho de tela padrão: 
 
6) Salve o arquivo e visualize no navegador aumente e diminua o tamanho da 
tela para ver a diferença entre as resoluções. 
 
7) Agora digite o seguinte código: 
 
8) Visualize no navegador e faça os mesmos testes para perceber a diferença 
entre as resoluções. 
 
 
 
 
 
 
 
Upgrade Informática - 46 
 
9) Agora digite o código abaixo: 
 
 
10) Então com isso foi criado uma determinada formatação para cada tamanho 
de tela. Com essa mesma lógica você consegue fazer qualquer tipo de site 
responsivo. Como visto agora esse tipo de programação não é difícil, porém 
necessita de bastante trabalho para criar uma formatação adequada para 
cada resolução. 
 
 
 
Upgrade Informática - 47 
 
Exercício 11: 
11) Neste exercício iremos criar um site responsivo um pouco mais elaborado 
para conseguir revisar a maioria dos comandos vistos até agora. 
 
12) Inicialmente insira na tag head as seguintes Metas: 
 
Obs: repare que estamos usando uma nova tag de link, essa tag de link irá 
colocar o ícone na visualização da guia no navegador. 
 
13) Agora continue digitando o seguinte código: 
 
 
 
Upgrade Informática - 48 
 
 
 
 
 
Obs: note que foi utilizado a tag <figure> que é utilizada para imagens ou grupo 
de imagens, a utilização é parecida com a tag <nav> 
 
14) Agora abra a folha em css e vamos primeiramente criar a formatação padrão 
para o site e em seguida faremos os ajustes para as outras telas: 
 
15) A cada nova propriedade utilizada execute a página no navegador para ver 
as mudanças: 
 
Upgrade Informática - 49 
 
 
 
 
 
 
Upgrade Informática - 50 
 
 
 
 
 
 
 
Upgrade Informática - 51 
 
 
 
 
 
 
Upgrade Informática - 52 
 
 
 
 
 
16) Até agora foi feita a formatação para PCs com tela widescreen de 1200px 
ou mais, se você diminuir o tamanho da tela do navegador logo vai reparar 
que vários elementos do site ficam sobrepostos ou com uma formatação 
estranha. 
 
 
 
 
 
 
 
Upgrade Informática - 53 
 
17) Agora iremos criar a formatação de 5 media queries: 
 
a. De até 1200px – Telas Widescreen de computadores. 
b. De até 960px – Telas de Tablets em modo paisagem ou 
monitores antigos. 
c. De até 768px – Telas de Tablets em modo Retrato. 
d. De até 480px – Telas de smartphone em modo paisagem. 
e. De até 320px – Telas de smartphone em modo retrato. 
 
18) Para deixar seu site mais compatível com mais resoluções você deve criar 
mais media queries para adaptar seu site a qualquer resolução sem que 
aconteça algum problema. 
 
Criando as Media queries: 
 
19) Normalmente fazemos a programação das media queries da maior 
resolução para a menor: 
 
 
 
Upgrade Informática - 54 
 
 
 
 
20) Lembre-se de atualizar o navegador para ver as alterações que estão sendo 
feitas. 
 
21) Para conseguir ver como fica na exata resolução de tela, no dreamweaver, 
na página de HTML clique em várias telas. 
 
22) Selecione a opção visualização em várias telas. 
 
 
Upgrade Informática - 55 
 
23) Para alterar o tamanho das telas que estão sendo mostradas clique em 
tamanhos da janela de visão. 
 
24) Agora voltando para o restante da formatação das outras resoluções 
 
 
 
Upgrade Informática - 56 
 
 
 
 
25) No CSS quando queremos que todas as propriedades tenham as mesmas 
configurações nós utilizamos o * como nome do seletor com vai ser 
utilizado em seguida. 
 
Upgrade Informática - 57 
 
 
 
 
 
Upgrade Informática - 58 
 
 
 
 
 
 
Upgrade Informática - 59 
 
 
26) Agora só falta mais uma resolução que seria para resolução de até 320x que 
seria para celulares em retrato. 
 
 
 
Upgrade Informática - 60 
 
 
 
 
 
27) Com isso nós temos um site responsivo adaptável as principais resoluções 
de tela. A programação necessária para a criação de um site responsivo não 
é difícil, porém é muito trabalhosa como podemos ver neste site que 
acabamos de criar. 
 
 
 
 
Upgrade Informática - 61 
 
Exercício 12: 
28) Crie um novo site responsivo para as 3 resoluções padrões (1200px, 768px 
e 480px), também utilize animações com transition ou media queries. 
Procure alguns sites para se inspirar e caso tenha qualquer dúvida pergunte 
ao seu instrutor. 
 
Anotações 
 
 
 
 
 
 
 
Extras: 
Criando ancoras: 
Imagine a situação: Tenho vários links no topo da página (uma espécie de 
Índice), e na mesma página todo o conteúdo. Utilizo âncoras para irem a estes 
conteúdos mais rapidamente, sem a necessidade de ler toda a página e localizar 
o assunto que desejo. 
As âncoras são mais usadas para subir a página, ou seja, caso esteja lendo 
uma notícia, e deseja ir ao topo da página rapidamente, sem necessitar rolar 
toda a página, e clicando em apenas um link. 
O código é simples: 
- Para a localização (destino da âncora) utilizamos a mesma TAG de link, 
sendo com uma subtag diferente: 
 
- E para o link utilizamos: 
 
 
 
 
Upgrade Informática - 62 
 
Exercício 13 
1) Abra um novo arquivo em Html e digite o seguinte código dentro do body: 
 
 
2) Agora crie o vínculo com a página de CSS e escreva o seguinte código na 
página de CSS: 
 
 
Upgrade Informática - 63 
 
 
 
3) Salve seu arquivo e execute ele no navegador e veja o resultado. 
 
Anotações: 
 
 
 
 
 
 
 
 
 
 
 
Upgrade Informática - 64 
 
Dicas: 
 Dica 01 - div1 é diferente de menu: 
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam 
nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma 
maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira 
nomes explicativos, como menu ou barra_links. 
 Dica 02 - Maiúsculas e minúsculas 
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: 
BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu 
elemento no HTML. 
 Dica 03 - id x class 
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, 
cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como 
#menu). Para elementos que vão aparecer várias vezes, utilize a declaração 
class, precedida por um ponto (como .noticia). 
 Dica 04 - Compartilhe declarações entrevários elementos comuns 
Se vários elementos terão características em comum, declare-os todos de 
uma vez, separados por vírgula: 
 
 Dica 05 - Lembre-se da hierarquia e organize-se 
Por ser uma folha de estilo em cascata, a última declaração é a que 
prevalece. Preste atenção para não declarar um elemento duas vezes: na hora 
da manutenção, você pode fazer a alteração na primeira e se perguntar porque 
ela não funciona, quando na verdade uma segunda declaração está perdida no 
meio do seu código (por isso organização é fundamental!). 
 Dica 06 - Comente os códigos avançados: 
Quando você utilizar o CSS para efeitos mais avançados, como um menu 
em abas, comente seu código para não esquecer o que cada parte dele faz: 
 
 
Upgrade Informática - 65 
 
 Dica 07 - Anote suas cores 
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer 
cálculos RGB de cabeça para saber a tonalidade da cor sem uma tabela de cores 
hexadecimal, economize tempo anotando a cor correspondente de cada código 
no seu arquivo: 
 
 
 Dica 08 - Declare as unidades 
Quando trabalhar com valores diferentes de zero, declare as unidades (px, 
pt, etc). Cada navegador assume uma unidade padrão quando ela não é 
especificada, gerando resultados diferentes em cada navegador. 
 Dica 09 - Não confie na sua memória 
Com o tempo, é natural que decoremos os principais elementos e seus 
atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu 
alcance, para tirar dúvidas sobre o funcionamento deles. Um ótimo livro que eu 
uso e recomendo é o CSS - Cascading Style Sheets - Guia de Consulta Rápida, 
de Luis Gustavo Amaral. 
 Dica 10 - Inspire-se 
Sites como o css Zen Garden e o Maujor são ótimos para ter uma ideia das 
novas tendências. Visitar esses e outros endereços regularmente é 
recomendável. 
 
 
 
 
 
 
 
 
Upgrade Informática - 66 
 
Unidades 
UNIDADES DE TAMANHO RELATIVAS 
Unidade Descrição 
px Tamanho em pixels (relativo ao dispositivo) 
em 
Tamanho relativo à fonte utilizada no elemento ao 
qual está inserido 
ex Correspondente à altura da fonte 'x’ 
UNIDADES DE TAMANHO ABSOLUTAS 
Unidade Descrição 
in Polegadas (1polegada = 2.54 cm) 
cm Centímetros 
m/ Milímetros 
pt Pontos (1pt = 1/72 polegadas) 
pc Picas (1pica = 12 pontos) 
PORCENTAGEM 
Unidade Descrição 
% Porcentagem 
0 Valor '0' não requer atribuição de unidade 
REPRESENTAÇÃO DE CORES 
Unidade Descrição 
#RRGGBB Cor RGB (6 valores hexadecimais) 
#RGB Notação simplificada (#RGB = #RRGGBB) 
rgb(R,G,B) Cor RGB (3 valores de 0 a 255) 
rgb(R%,G%,B%) Cor RGB (3 valores percentuais) 
 
 
 
Upgrade Informática - 67 
 
Modelo de caixa 
 
Bordas 
Propriedade Descrição Valores Descrição 
border-top-
width 
Largura das bordas em 
cada um dos quatro 
lados: superior, direito, 
inferior e esquerdo 
[ thin | medium | thick | 
<tamanho> ] 
thin: espessura fina 
border-right-
width 
medium: espessura média 
border-bottom-
width 
thick: espessura grossa 
border-left-
width 
 
 Exemplo: 
 e {border-bottom-width: medium; } 
border-width 
Atalho para definir de 
uma só vez larguras de 
bordas para todos os 
lados 
[ thin | medium | thick | 
<tamanho> ] {1,4} 
Exemplos: 
Todas as bordas com espessura 'thin': 
e {border-width: thin;} 
 
Bordas superior e inferior com espessura 
'thin', bordas direita e esquerda com 
espessura 'thick': 
e {border-width: thin thick;} 
 
Borda superior com espessura 'thin', bordas 
direita e esquerda com espessura 'thick', 
borda inferior com espessura 'medium': 
 
Upgrade Informática - 68 
 
e {border-width: thin thick 
medium;} 
 
Borda superior com espessura 'thin', borda 
direita com espessura 'thick', borda inferior 
com espessura 'medium', borda esquerda 
com espessura 'thin': 
e {border-width: thin thick 
medium thin;} 
border-top-
color 
Cor das bordas em cada 
um dos quatro lados: 
superior, direito, inferior e 
esquerdo 
[ <color> | transparent ] 
Exemplo: 
border-right-
color 
e {border-top-color: black; } 
border-bottom-
color 
 
 
 
 
border-left-
color 
 
border-color 
Atalho para definir de 
uma só vez cores de 
bordas para todos os 
lados 
[ <color> | transparent ] 
{1,4} 
Exemplos: 
Todas as bordas com a cor 'black': 
e {border-color: black;} 
 
Bordas superior e inferior com a cor 'black', 
bordas direita e esquerda com a cor 'silver': 
e {border-color: black silver;} 
 
Borda superior com a cor 'black', bordas 
direita e esquerda com a cor 'silver', borda 
inferior com a cor 'gray': 
e {border-color: black silver 
gray; } 
 
Borda superior com a cor 'black', borda 
direita com a cor 'silver', borda inferior com a 
cor 'gray', borda esquerda com a cor 'white': 
e {border-color: black silver 
gray white; } 
border-top-
style 
Estilo de bordas em cada 
um dos quatro lados: 
[ none | hidden | dotted 
| dashed | solid | double 
none: nenhuma borda (largura computada 
como zero) 
 
Upgrade Informática - 69 
 
border-right-
style 
superior, direito, inferior e 
esquerdo 
| groove | ridge | inset | 
outset ] hidden: idêntico à 'none', exceto na 
resolução de conflito de bordas nos 
elementos de uma tabela 
border-bottom-
style 
dotted: série de pontos 
border-left-
style 
dashed: série de segmentos de pequenas 
linhas 
 solid: segmento de linha simples e contínua 
 
double: Duas linhas 'solid'. A soma das 
duas linhas e o espaço entre elas é igual ao 
valor definido em 'border-width' 
 groove: Efeito 3D, entalhada 
 
ridge: Efeito 3D, oposto de 'groove': 
ressaltada 
 inset: Efeito 3D, baixo relevo 
 outset: Efeito 3D, alto relevo 
 
 Exemplo: 
 e {border-left-style: 
 dotted; } 
border-style 
Atalho para definir de 
uma só vez estilos de 
bordas para todos os 
lados 
[ none | hidden | dotted 
| dashed | solid | double 
| groove | ridge | inset | 
outset ] {1,4} 
Exemplos: Todas as bordas com estilo 
'solid': 
e {border-style: solid;} 
 
Bordas superior e inferior com estilo 'solid', 
bordas direita e esquerda com estilo 'dotted': 
e {border-style: solid dotted;} 
 
Borda superior com estilo 'solid', bordas 
direita e esquerda com estilo 'dotted', borda 
inferior com o estilo 'dashed': 
e {border-color: solid dotted 
dashed; } 
 
Borda superior com estilo 'solid', borda 
direita com estilo 'dotted', borda inferior com 
estilo 'dashed', borda esquerda com o estilo 
'double': 
 
Upgrade Informática - 70 
 
e {border-color: solid dotted 
dashed double; } 
border-top 
Atalho para definir 
largura, estilo e cor das 
bordas superior, direita, 
inferior ou esquerda 
[ <border-top-width> || 
<border-top-style> || 
<border-top-color> ] 
Exemplo: 
border-right 
e {border-bottom: thick solid 
red;} 
border-bottom 
border-left 
border 
Atalho para largura, estilo 
e cor das quatro bordas 
[ <border-top-width> || 
<border-top-style> || 
<border-top-color> ] 
Exemplo: 
e {border: thick solid red;} 
 
Obs.: Valores em 
negrito são os 
adotados como 
padrão 
 
Margens 
Propriedade Descrição Valores Descrição 
margin-top Tamaho da margem para 
cada um dos lados: 
superior, direito, inferior e 
esquerdo 
[ <tamanho> | 
<porcentagem> | auto ] 
Exemplo: 
margin-right body {margin-top: 2em } 
margin-bottom 
margin-left 
margin 
Atalho para definir de 
uma só vez o tamanho 
da margem para todos os 
lados 
[ <tamanho> | 
<porcentagem> | auto 
]{1,4} 
Exemplos: 
Todas as margens com 2em: 
body {margin: 2em } 
 
Margem superior e inferior com 1em, 
esquerda e direita com 2em: 
body {margin: 1em 2em } 
 
Margem superior com 1em; direita com 
2em; inferior com 3em; e esquerda com 
2em: 
body {margin: 1em 2em 3em } 
 
Margem superior com 1em; direita com 
2em; inferior com 3em; e esquerda com 
4em: 
body {margin: 1em 2em 3em 4em } 
 
 
 
Upgrade Informática- 71 
 
Espaçamento 
Propriedade Descrição Valores Descrição 
padding-top Distância utilizada para 
espaçamento em cada 
um dos quatro lados: 
superior, direito, inferior e 
esquerdo 
[ <tamanho> | 
<porcentagem> ] 
Exemplo: 
padding-right body {padding-top: 2em } 
padding-bottom 
padding-left 
padding 
Atalho para definir de 
uma só vez a distância 
de espaçamento para 
todos os lados 
[ <tamanho> | 
<porcentagem> ]{1,4} 
Exemplos: 
Todas as margens com 2em: 
body {padding: 2em } 
 
Margem superior e inferior com 1em, 
esquerda e direita com 2em: 
body {padding: 1em 2em } 
 
Margem superior com 1em; direita com 
2em; inferior com 3em; e esquerda com 
2em: 
body {padding: 1em 2em 3em } 
 
Margem superior com 1em; direita com 
2em; inferior com 3em; e esquerda com 
4em: 
body {padding: 1em 2em 3em 4em } 
 
Modelo de formatação visual 
 
Propriedade Descrição Valores Descrição / Exemplos 
display 
Modos de exibição do 
conteúdo 
[ inline | block | list-item 
| run-in | inline-block | 
table | inline-table | 
table-row-group | table-
header-group | table-
footer-group | table-row 
| table-column-group | 
table-column | table-cell 
| table-caption | none ] 
inline: O elemento renderizado em uma ou 
mais linhas 
block: renderizado como um bloco 
list-item: renderizado como um item de lista 
e em linha(s) 
run-in: renderizado como bloco ou linha(s), 
dependendo do contexto 
inline-block: renderizado em uma linha 
simples, mas comporta-se como um bloco 
 
Upgrade Informática - 72 
 
table, inline-table, table-row-group, table-
column, table-column-group, table-
header-group, table-footer-group, table-
row, table-cell, table-caption: esses 
valores farão com que o elemento se 
comporte como uma tabela (sujeito a 
restrições descritas no capítulo sobre 
tabelas) 
none: o elemento não será mostrado no 
modo visual 
 
Exemplo: e {display: none;} 
position 
Esquema de 
posicionamento 
[ static | relative | 
absolute | fixed ] 
static: Posicionamento normal de acordo 
com o fluxo normal dos elementos na 
página. As proprieades 'top', 'right', 'bottom', 
e 'left' não se aplicam 
relative: posicionamento é calculado de 
acordo com o fluxo normal. O efeito de 
'position:relative' é indefinido nos elementos 
'table-row-group', 'table-header-group', 
'table-footer-group', 'table-row', 'table-
column-group', 'table-column', 'table-cell', e 
'table-caption' 
absolute: Posicionamento (e possivelmente 
o tamanho) é especificado com as 
propriedades 'top', 'right', 'bottom', e 'left'. 
Essas propriedade são especificadas em 
relação ao conteúdo do bloco 
fixed: Posicionamento é calculado tal como 
o modelo 'absolute', mas adicionalmente se 
manterá fixo, mesmo que se utilize a barra 
de rolagem 
Exemplo: 
@media screen { 
 
Upgrade Informática - 73 
 
e#exemplo {position: fixed; }} 
@media print { 
e#exemplo {position: static;}} 
top 
Distância do elemento 
com relação à 
extremidade de seu 
elemento-pai 
[ <tamanho> | 
<porcentagem> | auto ] 
top: Distância vertical em relação à margem 
superior 
right 
right: Distância horizontal em relação à 
margem direita 
bottom 
bottom: Distância vertical em relação à 
margem inferior 
left 
left: Distância horizontal em relação à 
margem esquerda 
 
 Exemplo: 
 e { top: 20px; left: 40px;} 
float 
Posicionamento 
adjacente à esquerda ou 
à direita do elemento 
{ left | right | none ] 
left: o elemento será posicionado flutuando 
à esquerda. O fluxo do conteúdo não 
integrante do elemento será posicionado à 
direita a partir do 'top' do elemento que 
recebe a propriedade 'float' 
right: similar à 'left', mas com o elemento 
flutuando à direita 
none: o elemento não flutua 
 
Exemplo: 
e {float: right;} 
clear 
Controle para os 
posicionamentos float 
[ none | left | right | both 
] 
none: nenhum controle de limpeza de 
flutuação será executado 
left: limpeza de flutuação à esquerda: o 
elemento será posicionado abaixo da borda 
inferior do elemento flutuante à esquerda 
right: limpeza de flutuação à direita: o 
elemento será posicionado abaixo da borda 
inferior do elemento flutuante à direita 
both: o elemento será posicionado abaixo 
da borda inferior de qualquer elemento 
flutuante, seja à direita ou à esquerda 
 
Upgrade Informática - 74 
 
 
Exemplo: e { clear: both;} 
z-index 
Níveis de profundidade 
de sobreposição de 
elementos 
[ auto | <número 
inteiro> ] 
Os números serão considerados para 
ordenar os elementos que ficarão 
sobrepostos, do mais baixo para o mais alto: 
'z-index: 1'; 'z-index:2'; 'z-index: 3'; … 
 
Exemplo: e {z-index: 1;} 
 
 
 
 
 
 
direction 
Define a direção de um 
texto: esquerda para 
direita; direita para 
esquerda 
[ ltr | rtl ] 
Utilizado em clientes que têm suporte a 
idiomas e escrita bidirecional. 
ltr - direção da esquerda para a direita 
rtl - direção da direita para a esquerda 
 
Exemplo: 
e {direction: rtl;} 
 
Para que a direção tenha o efeito atribuído, 
a propriedade 'unicode-bidi' deve conter os 
valores 'embed' ou 
'bidi-override' 
unicode-bidi 
Interação entre textos 
bidirecionais 
[ normal | embed | bidi-
override ] 
Utilizado em clientes que têm suporta a 
idiomas e escrita bidirecional 
normal – o elemento não embutirá o 
algoritmo com suporte bidirecional 
embed – embutirá algoritmo bidirecional 
bidi-override – permite a sobreposição 
 
Obs.: Valores em 
negrito são os 
adotados como 
padrão 
 
 
Upgrade Informática - 75 
 
Detalhes do modelo de formatação visual 
 
Propriedade Descrição Valores Descrição / Exemplos 
width Largura 
[ <tamanho> | 
<porcentagem> | auto ] 
Exemplo: 
e {width: 25%;} 
min-width Largura mínima 
[ <tamanho> | 
<porcentagem>] 
Exemplo: 
e {min-width: 200px;} 
max-width Largura máxima 
[ <tamanho> | 
<porcentagem> | none] 
Exemplo: 
e {max-width: 600px;} 
height Altura 
[ <tamanho> | 
<porcentagem> | auto ] 
Exemplo: 
e {height: 250px;} 
min-height Altura mínima 
[ <tamanho> | 
<porcentagem>] 
Exemplo: 
e {min-height: 30%;} 
max-height Altura máxima 
[ <tamanho> | 
<porcentagem> | none] 
Exemplo: 
e {max-height: 70%;} 
line-height 
Distância entre as linhas 
de um texto 
[ normal | <número> | 
<tamanho> | 
<porcentagem> ] 
Exemplo: 
e {line-height: 1.2em;} 
vertical-align 
Alinhamento vertical do 
texto 
[ baseline | sub | super 
| top | text-top | middle | 
bottom | text-bottom | 
<porcentagem> | 
<tamanho> ] 
baseline - A linha de base do elemento e do 
elemento superior (elemento-pai) serão 
consideradas para alinhamento. Se não 
houver linha de base no elemento, será 
considerado sua margem inferior 
sub - A linha de base do elemento será 
alinhada com a linha de base de conteúdo 
subscrito do elemento superior 
super - A linha de base do elemento será 
alinhada com a linha de base de conteúdo 
superescrito do elemento superior 
top - Alinha o topo do elemento com a linha 
de topo do elemento superior 
text-top - A base superior do elemento será 
alinhada com a linha superior do conteúdo 
de textos do elemento-pai 
 
Upgrade Informática - 76 
 
middle - A linha central do elemento e de 
seu elemento superior serão consideradas 
para alinhamento. (linha central do elemento 
superior = ponto central da altura da letra 'x') 
bottom - Alinha o rodapé do elemento com 
o rodapé do elemento superior 
text-bottom - A base inferior do elemento 
será alinhada com a linha inferior do 
conteúdo de textos do elemento-pai 
 
Exemplo: 
e {vertical-align: sub;} 
 
 
 
 
Efeitos visuais 
Propriedade Descrição Valores Descrição / Exemplos 
overflow 
Comportamento do 
browser quando o 
conteúdo do elemento for 
maior que sua área 
[ visible | hidden | scroll 
| auto ] 
visible - Todo o conteúdo do elemento 
estará visível (não cortado) e talvez 
conforme a área seja renderizadopara fora 
do elemento 
hidden - O conteúdo será cortado (se maior 
que a área disponível) e não haverá barra 
de rolagens no elemento 
scroll - O conteúdo será cortado (se maior 
que a área disponível) mas haverá barra de 
rolagens no elemento. Quando a mídia for 
especificada como 'print', o conteúdo do 
elemento poderá ser impresso. 
auto - O método será atribuído pelo browser 
cliente 
 
Exemplo: 
e {overflow: scroll;} 
 
Upgrade Informática - 77 
 
clip 
Especifica região de um 
elemento a ser exibida 
[ rect (<tamanho topo>, 
<tamanho direito>, 
<tamanho rodapé>, 
<tamanho esquerdo>) 
| auto ] 
rect – Delimita área retangular do elemento 
(topo, direita, rodapé, esquerda) na qual o 
conteúdo ficará visível 
auto - O elemento não terá clip e sua 
própria área será idêntica à de visualização 
 
Exemplo: 
e {clip: rect(5px, 40px, 45px, 
5px); } 
visibility 
Define se um elemento 
estará ou não visível 
[ visible | hidden | 
collapse ] 
visible - O elemento será exibido 
hidden - O elemento não será exibido, 
ficando totalmente transparente. Mas o 
leiaute da página continuará sendo afetado 
collapse - Mesmo efeito que hidden, mas 
aplicável a elementos de tabela 
 
 
Cores e Fundo 
Propriedade Descrição Valores Descrição / Exemplos 
color 
Cor do texto presente no 
elemento 
<color> 
Exemplo: 
e {color: red; } 
e {color: rgb(255,0,0); } 
background-
color 
Cor de fundo do 
elemento 
[ <color> 
| transparent ] 
Para 'transparent' será adotada a cor de 
fundo do elemento superior e na ausência 
deste, a cor de fundo padrão do browser 
 
Exemplo: 
e {background-color: #f00; } 
e {background-color: transparent; 
} 
background-
image 
Imagem de fundo do 
elemento 
[ url(...) | none ] 
Exemplo: 
e {background-image: 
url(http://caminho/imagem.jpg); } 
background-
repeat 
Define se e como a 
imagem de fundo 
utilizada se repetirá 
[ repeat | repeat-x | 
repeat-y | no-repeat ] 
repeat: a imagem é repetida em ambas as 
direções: horizontal e vertical 
 
Upgrade Informática - 78 
 
repeat-x: a imagem é repetida somente 
horizontalmente 
repeat-y: a imagem é repetida somente 
verticalmente. 
no-repeat: a imagem não será repetida e 
somente uma cópia da mesma será 
renderizada 
 
Exemplo: 
e {background-repeat: no-repeat;} 
background-
attachment 
Define se a imagem de 
fundo utilizada será fixa 
ou com rolagem 
[ scroll | fixed ] 
scroll: a imagem acompanha a rolagem da 
página na janela do browser, mantendo-se 
como imagem de fundo 
fixed: a imagem é fixada na página e não 
acompanhará a rolagem da página 
 
 
 
 
 
background-
position 
Posição da imagem de 
fundo utilizada. 
[ [ <porcentagem> | 
<tamanho> | left | 
center | right ] [ 
<porcentagem> | 
<tamanho> | top | 
center | bottom]? ] | [ [ 
left | center | right ] || [ 
top | center | bottom ] ] 
top: Equivalente a '0%' do posicionamento 
vertical 
right: Equivalente a '100%' do 
posicionamento horizontal 
bottom: Equivalente a '100%' do 
posicionamento vertical 
left: Equivalente a '0%' do posicionamento 
horizontal. 
center: Equivalente a '50%' do 
posicionamento horizontal ou '50%' do 
posicionamento vertical 
 
Exemplo: 
body {background-position: right 
top; } 
body {background-position: 100% 
0; } 
background 
Atalho para definir de 
uma só vez todas as 
propriedades de imagem 
de fundo 
[ <background-color> || 
<background-image> || 
<background-repeat> || 
<background-
attachment> || 
<background-position> 
] 
Exemplo: 
e {background: red 
url("chess.png") 
repeat-x fixed 50% right; } 
 
Upgrade Informática - 79 
 
Paginação para impressão 
Propriedade Descrição Valores Descrição / Exemplos 
page-break-
before 
Define quebra de página 
antes do elemento 
[ auto | always | avoid | 
left | right ] 
auto: insere quebra de página somente se 
necessário 
always: sempre insere quebra de página 
antes do elemento 
avoid: evita inserir quebra de página antes 
do elemento 
left: insere uma ou duas quebras de 
páginas antes do elemento, de modo que a 
página gerada seja uma página par 
right: insere uma ou duas quebras de 
páginas antes do elemento, de modo que a 
página gerada seja uma página ímpar 
 
Exemplo: e {page-break-before: 
always; } 
page-break-
after 
Define quebra de página 
após o elemento 
[ auto | always | avoid | 
left | right ] 
auto: insere quebra de página somente se 
necessário 
always: sempre insere quebra de página 
após o elemento 
avoid: evita inserir quebra de página após o 
elemento 
left: insere uma ou duas quebras de 
páginas após o elemento, de modo que a 
página gerada seja uma página par 
right: insere uma ou duas quebras de 
páginas após o elemento, de modo que a 
página gerada seja uma página ímpar 
 
Exemplo: e {page-break-after: 
always; } 
page-break-
inside 
Define ou evita quebra 
de páginas dentro de um 
elemento 
[ avoid | auto ] 
auto: insere quebra de página somente se 
necessário avoid: evita inserir quebra de 
página dentro do elemento Exemplo: 
 
Upgrade Informática - 80 
 
e {page-break-inside: avoid; } 
orphans 
Número mínimo de linhas 
antes da quebra de um 
parágrafo que pode 
aparecer no final de uma 
página 
<número inteiro> 
Somente valores positivos são permitidos 
 
Exemplo: 
e {orphans: 2; } 
widows 
Número mínimo de linhas 
após a quebra de um 
parágrafo que pode 
aparecer no início de 
uma página 
<número inteiro> 
Somente valores positivos são permitidos 
 
Exemplo: 
e {widows: 2; } 
 
Fontes tipográficas 
Propriedade Descrição Valores Descrição / Exemplos 
font-family Família(s) de fontes 
[ [ <nome-fonte> | 
<família-genérica> ] [, 
<nome-fonte> | 
<família-genérica> ]* ] 
As seguintes famílias-genéricas de fontes 
são definidas em CSS2.1: 
 
'serif' 
'sans-serif' 
'cursive' 
'fantasy' 
'monospace' 
 
Exemplo: e {font-family: "New 
Century Schoolbook", serif; } 
font-style Estilo utilizado na fonte 
[ normal | italic | 
oblique ] 
normal: fonte do elemento sem efeito itálico 
ou oblíquo 
italic: fonte do elemento com efeito itálico 
oblique: fonte do elemento com efeito 
oblíquo 
 
Exemplo: 
e {font-style: italic; } 
font-variant 
Exibe o texto em 
pequena caixa-alta 
(versalete) ou fonte 
normal 
[ normal | small-caps ] 
normal: fonte do elemento sem efeito de 
capitalização small-caps:fonte do elemento 
com efeito de pequena caixa alta (versalete) 
 
Exemplo: 
e {font-variant: small-caps; } 
 
Upgrade Informática - 81 
 
font-weight Peso da fonte 
[ normal | bold | bolder 
| lighter | 100 | 200 | 
300 | 400 | 500 | 600 | 
700 | 800 | 900 ] 
normal: fonte do elemento com efeito 
padrão de peso (corresponde ao valor 400) 
bold: fonte do elemento com efeito de 
negrito (corresponde ao valor 700) 
bolder: fonte do elemento com o valor de 
peso imediatamente superior ao do valor 
herdado (p.ex: de 400 para 500) 
lighter: fonte do elemento com o valor de 
peso imediatamente inferior ao do valor 
herdado (p.ex: de 400 para 300) 
 
Exemplo: 
e {font-weight: bold; } 
font-size Tamanho da fonte 
[ [ xx-small | x-small | 
small | medium | large | 
x-large | xx-large] | 
[larger | smaller] | 
<tamanho> | 
<porcentagem> ] 
medium: fonte do elemento com valor 
padrão de tamanho e equivalente ao padrão 
do browser. Os demais valores ( xx-small | 
x-small | small | large | x-large | xx-large) são 
calculados pelo browser considerando esse 
valor 'medium'. 
larger | smaller: aumenta ou diminui o 
tamanho em relação ao valor herdado. 
tamanho: valor absoluto. Não são 
permitidos valores negativos. 
porcentagem: porcentagem do tamanho do 
valor herdado. 
 
Exemplo: 
e {font-size: 90%; } 
font 
Atalho para definir de 
uma só vez todas as 
propriedades de fonte 
[ [ [ <font-style> || <font-
variant> || <font-
weight> ]? <font-size> [ 
/ <line-height> ]? <font-family> ] | caption | icon 
| menu | message-box | 
small-caption | status-
bar ] 
Além dos valores para as propriedades de 
estilo, variação, peso, tamanho, altura da 
linha e família, pode-se utilizar os seguintes, 
de acordo com o ambiente do usuário: 
 
 
Upgrade Informática - 82 
 
caption: fonte utilizada por controles com 
legenda (ex.: botões, drop-downs, etc.) 
icon: fonte utilizada em ícones 
menu: fonte utilizada em menus do sistema 
(ex.: dropdown menus e menus suspensos) 
message-box: fonte utilizada em caixas de 
diálogo. 
small-caption: fonte utilizada em controles 
com legenda reduzida 
status-bar: fonte utiliza em barra de status 
das janelas 
 
Exemplo: 
e {font: 300 italic 1.3em/1.7em 
"Helvetica", sans-serif; } 
 
 
Texto 
Propriedade Descrição Valores Descrição / Exemplos 
text-indent 
Recuo à esquerda da 
primeira linha em um 
bloco de texto 
[ <tamanho> | 
<porcentagem> ] 
Exemplo: 
e {text-indent: 3em; } 
text-align Alinhamento do texto 
[ left | right | center | 
justify ] 
left: alinhamento do texto à esquerda 
right: alinhamento do texto à direita 
center: alinhamento do texto centralizado 
justify: alinhamento do texto justificado 
 
Exemplo: 
e {text-align: center; } 
text-decoration 
Efeitos decorativos no 
texto como sublinhado, 
tachado, linha acima e 
piscante 
[ none | [ underline || 
overline || line-through 
|| blink ] ] 
none: não produz decoração no texto do 
elemento 
underline: cada linha de texto do elemento 
terá uma linha abaixo (sublinhado) 
overline: cada linha de texto do elemento 
terá uma linha acima 
 
Upgrade Informática - 83 
 
line-through: cada linha de texto do 
elemento terá uma linha cortando-o ao meio 
(tachado) 
blink: textos piscantes alternadamente 
entre visíveis e não visíveis 
 
Exemplo: 
e {text-decoration: underline; } 
letter-spacing 
Espaçamento entre 
caracteres 
[ normal | <tamanho> ] 
Exemplo: 
e {letter-spacing: 0.1em; } 
word-spacing 
Espaçamento entre 
palavras 
[ normal | <tamanho> ] 
Exemplo: 
e {word-spacing: 1em; } 
text-transform 
Transforma o texto em 
maiúsculas/minúsculas 
[ capitalize | uppercase 
| lowercase |none ] 
capitalize: coloca o primeiro caracter de 
cada palavra do elemento em maiúsculas 
(caixa alta) 
uppercase: coloca todos os caracteres de 
cada palavra do elemento em maiúsculas 
(caixa alta) 
lowercase: coloca todos os caracteres de 
cada palavra do elemento em minúsculas 
(caixa baixa) 
none: não aplica efeitos de capitalização 
 
Exemplo: 
e {text-transform: capitalize; } 
white-space 
Definições sobre 
espaços em branco num 
determinado elemento 
[ normal | pre | nowrap 
| pre-wrap | pre-line ] 
normal: utiliza a configuração padrão do 
browser para espaçamentos em branco 
pre: todos os espaços em branco presentes 
no código fonte serão exibidos no elemento 
nowrap: os espaços em branco serão 
tratados como 'normal', mas as quebras de 
linha serão suprimidas 
 
Upgrade Informática - 84 
 
pre-wrap: todos os espaços em branco 
contantes no código-fonte serão exibidos no 
elemento 
pre-line: os espaços em branco serão 
tratados como normal. 
 
Exemplo: 
e {white-space: pre; } 
 
 
 
Tabelas 
Propriedade Descrição Valores Descrição / Exemplos 
caption-side 
Posicionamento do título 
em relação à tabela 
[ top | bottom ] 
top: Posicionamento do título antes da área 
da tabela 
bottom: Posicionamento do título abaixo da 
área da tabela 
 
Exemplo: 
e {caption-side: bottom; } 
table-layout 
Define o algoritmo usado 
para a renderização da 
tabela 
[ auto | fixed ] 
auto: utiliza algum algoritmo de leiaute 
automático. 
fixed: utiliza algoritmo de leiaute fixo. 
 
Exemplo: 
table {table-layout: fixed; } 
border-collapse 
Seleciona o modelo de 
bordas a ser utilizado 
[ collapse |separate ] 
separate: as bordas serão renderizadas 
para cada célula, dado a impressão de linha 
duplacollapse: as bordas das células serão 
mescladas, dando a impressão de uma 
única linha 
 
Exemplo: 
table {border-collapse: collapse; 
} 
border-spacing 
Distância entre as bordas 
de células adjacentes 
(quando 'border-
collapse=separated') 
<tamanho> 
<tamanho>? 
Exemplo: 
table {border-spacing: 15pt; } 
table {border-spacing: 10pt 5pt; 
} 
 
Upgrade Informática - 85 
 
empty-cells 
Visibilidade das bordas 
de células sem conteúdo 
[ show | hide ] 
show: exibe as células vazias da tabela 
hide: não exibe as células vazias da tabela 
 
Exemplo: 
table {empty-cells: hide; } 
 
Obs.: Valores em 
negrito são os 
adotados como 
padrão 
 
Interface de usuário 
Propriedade Descrição Valores Descrição / Exemplos 
cursor Especifica o cursor 
[ [http://.../cursor.ico,]* [ 
auto | crosshair | default 
| pointer | move | e-
resize | ne-resize | nw-
resize | n-resize | se-
resize | sw-resize | s-
resize | w-resize | text | 
wait | help | progress ] 
Exemplo: 
e {cursor:help; } 
outline-width 
Largura da linha de 
contorno 
<border-width> 
Aceita os mesmos valores de 'border-width' 
 
Exemplo: 
e {outline-width: thin; } 
outline-style 
Estilo da linha de 
contorno 
<border-style> 
Aceita os mesmos valores de 'border-style' 
 
Exemplo: 
e {outline-style: dotted; } 
outline-color Cor da linha de contorno [ <color> | invert ] 
color: valor correspondente a uma cor 
invert: cor inversa à área do elemento 
(prática comum para tornar o 'focus' visível) 
 
Exemplo: 
e {outline-color: #f00; } 
outline 
Atalho para definir de 
uma só vez todas as 
propriedades de outline 
[ <outline-color> || 
<outline-style> || 
<outline-width> ] 
Exemplo: 
active {outline: black dotted 
thick; } 
 
Upgrade Informática - 86 
 
speak-header 
(Aural) Freqüência em 
que os 'headers' da 
tabela serão 
pronunciados. Utilizado 
quando 'media=speech' 
[ once | always ] 
once: Os títulos de tabelas serão 'falados' 
uma vez, antes da série de células 
always: Os títulos de tabelas serão 'falados' 
sempre que ocorrer uma célula pertinente 
 
Exemplo: 
e {speak-header: always; } 
 
Obs.: Valores em 
negrito são os 
adotados como 
padrão