HTML e CSS guia completo

PAG. 1
HTML - HiperText Markup Language e
CSS
Formador Marco Soares

PAG. 2
LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO........................................................................................6
O SEU PRIMEIRO HTML..........................................................................................................................7
ATRIBUTOS DAS TAGS............................................................................................................................7
O CONTEÚDO.........................................................................................................................................8
ELEMENTOS NORMAIS....................................................................................................................................8
CRUZAMENTO DE ATRIBUTOS ..........................................................................................................................8
ELEMENTOS SIMPLES .....................................................................................................................................8
O TEXTO.................................................................................................................................................9
MARCAÇÕES BÁSICAS..........................................................................................................................10
TABELAS....................................................................................................................................................10
IMAGENS...................................................................................................................................................13
OS META TAGS.....................................................................................................................................16
OS FRAMES..........................................................................................................................................17
LISTA DE TAGS HTML ...........................................................................................................................18
O QUE É CSS? .......................................................................................................................................22
ESTILOS RESOLVIDO UM GRANDE PROBLEMA.....................................................................................................22
CSS POUPA MUITO TRABALHO!......................................................................................................................22
SINTAXE CSS..............................................................................................................................................22
CSS COMENTÁRIOS..............................................................................................................................23
O ID E CLASSE SELETORES ....................................................................................................................23
O ID SELECTOR ...........................................................................................................................................23
O SELETOR DE CLASSE ..................................................................................................................................24
TRÊS MANEIRAS DE INSERIR CSS..........................................................................................................24
FOLHA DE ESTILO EXTERNA............................................................................................................................24
FOLHA DE ESTILO INTERNA ............................................................................................................................25
ESTILOS INLINE ...........................................................................................................................................25
VÁRIOS STYLE SHEETS ..................................................................................................................................25
VÁRIOS ESTILOS EM CASCATA.........................................................................................................................26
Ordem em cascata.............................................................................................................................26
CSS BACKGROUND...............................................................................................................................27
COR DE FUNDO...........................................................................................................................................27
IMAGEM DE FUNDO.....................................................................................................................................28
Imagem de Fundo - Repetir horizontalmente ou verticalmente........................................................28
Imagem de Fundo - Define a posição e no-repeat.............................................................................28
BACKGROUND – ABREVIAR PROPRIEDADES .......................................................................................................29
PROPRIEDADES CSS BACKGROUND.................................................................................................................29
CSS TEXTO............................................................................................................................................30
COR DO TEXTO ...........................................................................................................................................30
ALINHAMENTO DE TEXTO..............................................................................................................................30
DECORAÇÃO TEXTO .....................................................................................................................................31
TRANSFORMAÇÃO DE TEXTO..........................................................................................................................31
RECUO DE TEXTO.........................................................................................................................................31
PROPRIEDADES CSS TEXTO ...........................................................................................................................31

PAG. 3
CSS FONT .............................................................................................................................................32
FONT FAMÍLIA............................................................................................................................................32
ESTILO DA FONTE........................................................................................................................................33
TAMANHO DA FONTE...................................................................................................................................33
DEFINIR TAMANHO DA FONTE COM PIXELS......................................................................................................33
DEFINA O TAMANHO DA FONTE COM O EM......................................................................................................34
USE UMA COMBINAÇÃO DE CENTO E EM..........................................................................................................34
PROPRIEDADES CSS FONT ............................................................................................................................34
CSS LINKS.............................................................................................................................................35
DECORAÇÃO TEXTO .....................................................................................................................................35
COR DE FUNDO...........................................................................................................................................35
CSS LISTS..............................................................................................................................................36
LISTA ........................................................................................................................................................36
DIFERENTES ITEM MARCADORES LISTA............................................................................................................36
UMA IMAGEM COMO MARCADOR DE ITEM LISTA...............................................................................................36
Crossbrowser Solution .......................................................................................................................37
LIST - PROPRIEDADE ABREVIADA.....................................................................................................................37
PROPRIEDADES CSS LISTAS ...........................................................................................................................38
CSS BOX MODEL...................................................................................................................................38
O MODELO DE CAIXA CSS.............................................................................................................................38
CSS BOX-MODELO ......................................................................................................................................39
LARGURA E ALTURA DE UM ELEMENTO ............................................................................................................39
COMPATIBILIDADE COM NAVEGADORES EDIÇÃO................................................................................................40
CSS BORDER.........................................................................................................................................40
BORDER ESTILO ..........................................................................................................................................40
LARGURA DA BORDA....................................................................................................................................41
COR DA BORDER .........................................................................................................................................41
BORDER - OS LADOS INDIVIDUAIS....................................................................................................................42
BORDER - PROPRIEDADE ABREVIADA...............................................................................................................43
PROPRIEDADES CSS BORDER.........................................................................................................................43
CSS OUTLINES ......................................................................................................................................45
PROPRIEDADES CSS OUTLINE........................................................................................................................45
CSS MARGIN ........................................................................................................................................46
VALORES ...................................................................................................................................................46
MARGEM - OS LADOS INDIVIDUAIS..................................................................................................................46
MARGEM - PROPRIEDADE ABREVIADA.............................................................................................................47
CSS PADDING.......................................................................................................................................47
VALORES ...................................................................................................................................................47
PADDING - OS LADOS INDIVIDUAIS ..................................................................................................................48
PADDING – PROPRIEDADE ABREVIADA.............................................................................................................48
AGRUPAMENTO CSS E SELETORES .......................................................................................................49
SELETORES DE AGRUPAMENTO.......................................................................................................................49
SELETORES DE NIDIFICAÇÃO...........................................................................................................................49
CSS DIMENSION...................................................................................................................................50

PAG. 4
CSS DISPLAY AND VISIBILITY ................................................................................................................51
CSS DISPLAY - BLOQUEAR E ELEMENTOS INLINE ................................................................................................51
ALTERANDO COMO UM ELEMENTO É EXIBIDO....................................................................................................51
CSS POSITIONING.................................................................................................................................52
POSICIONAMENTO.......................................................................................................................................52
POSICIONAMENTO ESTÁTICO .........................................................................................................................52
POSICIONAMENTO FIXO................................................................................................................................52
POSICIONAMENTO RELATIVO.........................................................................................................................53
POSICIONAMENTO ABSOLUTO........................................................................................................................54
ELEMENTOS SOBREPOSTOS............................................................................................................................54
PROPRIEDADES CSS POSITIONING ..................................................................................................................54
CSS FLOAT............................................................................................................................................56
COMO ELEMENTS FLOAT ..............................................................................................................................56
ELEMENTOS FLUTUANTES PRÓXIMOS UM DO OUTRO ..........................................................................................56
DESLIGAR FLOAT - USANDO LIMPAR ...............................................................................................................57
PROPRIEDADE CSS FLOAT.............................................................................................................................57
CSS HORIZONTAL ALIGN ......................................................................................................................57
ALINHAR ELEMENTOS DE BLOCO ....................................................................................................................57
CENTRO ALINHANDO UTILIZANDO A MARGEM DE PROPRIEDADE ..........................................................................58
ESQUERDA E DIREITA ALINHAMENTO USANDO A POSIÇÃO DE PROPRIEDADE ...........................................................58
PROBLEMAS DE COMPATIBILIDADE CROSSBROWSER ...........................................................................................59
ESQUERDA E DIREITA ALINHAMENTO USO DA PROPRIEDADE FLOAT.......................................................................59
PROBLEMAS DE COMPATIBILIDADE CROSSBROWSER ...........................................................................................60
CSS PSEUDO-CLASSES ..........................................................................................................................60
SINTAXE ....................................................................................................................................................60
PSEUDO-CLASSES ANCHOR............................................................................................................................60
PSEUDO-CLASSES E CLASSES CSS....................................................................................................................61
CSS - A: PSEUDO-CLASSE FIRST-CHILD.............................................................................................................61
COMBINAR O PRIMEIRO ELEMENTO <P> ..........................................................................................................61
COMBINAR O PRIMEIRO ELEMENTO <I> EM TODOS OS ELEMENTOS <P>.................................................................62
COMBINAR TODOS OS ELEMENTOS <I> EM TODOS OS ELEMENTOS <P> PRIMEIRA CRIANÇA ........................................62
PROPRIEDADES CSS PSEUDO CLASSES/ELEMENTS .............................................................................................63
CSS PSEUDO-ELEMENTS.......................................................................................................................63
SINTAXE ....................................................................................................................................................63
A: FIRST-LINE PSEUDO-ELEMENTO..................................................................................................................64
A: FIRST-LETTER PSEUDO-ELEMENTO ..............................................................................................................64
PSEUDO-ELEMENTOS E CLASSES CSS...............................................................................................................65
MULTIPLE PSEUDO-ELEMENTOS.....................................................................................................................65
CSS - A: BEFORE DE PSEUDO-ELEMENTO .........................................................................................................65
CSS - O: AFTER PSEUDO-ELEMENTO...............................................................................................................66
CSS NAVIGATION BAR..........................................................................................................................66
BARRA DE NAVEGAÇÃO = LISTA DE LINKS..........................................................................................................66
VERTICAL BARRA DE NAVEGAÇÃO ..................................................................................................................67
HORIZONTAL BARRA DE NAVEGAÇÃO..............................................................................................................67
INLINE LISTA DE ITENS ..................................................................................................................................68
LISTA DE ITENS FLUTUANTES..........................................................................................................................68

PAG. 5
CSS IMAGE OPACITY / TRANSPARENCY................................................................................................69
EXEMPLO 1 - CRIANDO UMA IMAGEM TRANSPARENTE........................................................................................69
EXEMPLO 2 - TRANSPARÊNCIA IMAGEM - HOVER EFFECT....................................................................................69
EXEMPLO 3 - TEXTO EM CAIXA TRANSPARENTE..................................................................................................70
CSS MEDIA TYPES.................................................................................................................................71
TIPOS DE MEDIA..........................................................................................................................................71
A MÍDIA REGRA @ ......................................................................................................................................71
CSS ATTRIBUTE SELECTORS..................................................................................................................72
CSS PROPERTIES...................................................................................................................................73
BIBLIOGRAFIA - SITES...........................................................................................................................76

PAG. 6
Linguagem de Marcação de Hipertexto.
O HTML é uma especificação derivada da SGML, criada com o fim específico de formatar textos para a
World Wide Web. Neste artigo são apresentados os fundamentos do HTML tal como é usado e
padronizado pelo W3C (World Wide Web Consortium). Atualmente, o nome correto para a linguagem é
XHTML, mas a continuação do uso de “HTML” não constitui um erro grave.
O principal a saber, antes de iniciar o estudo da HTML, é que se trata de um padrão desrespeitado por
companhias de software, que frequentemente incluem “extensões” da linguagem em seus aplicativos.
Entretanto, é preciso tomar cuidado para não usar essas extensões, que limitam a correcta exibição das
páginas em determinados navegadores. Neste curso, portanto, é apresentado o HTML padrão.
Material necessário
 Um editor de textos:
Pode ser o Notepad (bloco de notas) no Windows ou o TextEdit no Mac, mas é recomendável algum que
suporte a sintaxe HTML, como o Dreamweaver, ou qualquer um de sua preferência.
 Um navegador
Recomendamos que use um browser que suporte, de forma mais integral, as regras do HTML definidas
pelo W3C como, por exemplo, Chrome, o Mozilla Firefox, Safari ou Opera. O Internet Explorer, apesar de
ainda ser o browser mais usado, não é totalmente compatível com as normas W3C.
INTRODUÇÃO
O que é o HTML?
O HTML (HiperText Markup Language) é uma linguagem de marcação de texto bastante utilizada actualmente, para
confecção de documentos e exibição principalmente na Web. A HTML é uma meta-linguagem (ou seja, uma linguagem
para criação de linguagens) com todos os elementos para marcar dados ou textos com atributos. Atualmente, a HTML,
ou XHTML, é uma derivada da XML. A marcação, referida no nome da HTML, é nada mais do que indicar partes
especiais num texto simples. Por exemplo: partes em negrito, partes em itálico, inserção de imagens, etc.
Já o hipertexto é o meio no qual vários documentos estão ligados entre si por link ou ligações, áreas de texto
especiais que ativam outros documentos com um clique. A ligação pode se estabelecer estruturalmente, também - no
cabeçalho do documento pode haver indicação de documento -pai, documento seguinte, etc -, mas é mais comum
definir-se a ligação dentro do próprio texto.
O HTML, como linguagem de marcação de hipertextos, permite fazer muitas coisas desde inserir e formatar texto, a
inserir imagens, passando por organizar os conteúdos por tabelas, inserir objetos em formatos de terceiros (tal como
Flash, Java, ActiveX, etc). Outras coisas são também possíveis em linguagens comerciais derivadas da HTML; nesse
caso, as características adicionais limitam-se a alguns navegadores ou renderizadores de página. (Um navegador ou
renderizador é um programa que transforma o código HTML, escrito pelo autor, em uma página de exibição coerente).
A HTML é uma linguagem com uma sintaxe em certos aspectos rígida, principalmente se houver interesse em
respeitar toda sua norma - alguns programas conseguem contornar pequenas violações.
Como o próprio nome diz, o HTML é uma linguagem de marcação, isso significa que, quando programamos em HTML,
devemos marcar os pontos de início e fim de alterações/formatações.
Essa marcação é feita através de comandos denominados tag’s e seus respetivos atributos e ocorre da seguinte
forma:
<tag atributo1=”valor1″ atributo2=’valor2′>Texto a ser formatado</tag>
Existem algumas exceções à essa regra, como as tag’s usadas para inserir objetos como imagens e quebras de linha.
Como vocês podem ter observado, é possível colocar o valor dos atributos entre apóstrofes (’) ou entre aspas (”). O

PAG. 7
HTML é uma linguagem padronizada, apesar de haver várias extensões. As versões oficiais e padronizadas são
publicadas pelo World Wide Web Consortium (ou W3C).
O seu primeiro HTML
O que é uma tag?
Um documento HTML não é nada mais do que um arquivo de texto plano, quero dizer, somente letras e nada mais,
escritas num arquivo. Então, como fazer para aumentar o tamanho da letra, colocá -la em negrito, itálico, mudar-lhe a
cor, etc.? A resposta é: devem-se usar sequências de caracteres numa linguagem própria, para indicar ao navegador
que alguma parte do seu texto, não deve ser mostrada como o resto, ou seja, que aquela secção deve ser mostrada
com uma cor ou tipo de letra diferente.
Em inglês, estes comandos especiais são chamados de tags (etiqueta). Um tag sempre começa com um sinal de
menor e termina com um sinal de maior - que definem o início e o fim do mesmo Por exemplo: <p> (que corresponde
ao tag indicador de início de parágrafo).
Existem dois tipos de tags: aqueles que são isolados, como o <br>, por exemplo, que indica uma quebra forçada de
linha e outros como o <p> que, por indicarem o início de uma secção como, no caso, de um parágrafo, exigem a
inclusão de um segundo tag complementar, para indicar o final daquela secção - </p>, no caso, para definir o fim do
parágrafo.
Segundo a W3C, todas as tags devem ser escritas em letras minúsculas.
Estrutura básica de um documento HTML
<html>
<head>
<title> Título </title>
</head>
<body>
<p> Este é um parágrafo </p>
</body>
</html>
Veja que todas as tags abertas, foram fechadas, o documento começa com a tag <html> e termina com a tag </html>.
O fechamento de uma tag é representada pela /.
<html> - marca do início do documento HTML
<head> - início do cabeçalho
<title> - título
<body> - corpo do documento
<p> - parágrafo
<br /> - salto de linha
<a> - link
<i> - itálico
<font> - fonte
<h1> - cabeçalho do texto de maior nível
Atributos das Tags
Quando uma tag possui um atributo, este é inserido antes do > na abertura da tag, ou antes do espaço.
<tag atributo=”valor”>texto</tag> ou <tag attributo=”valor” />
Exemplo: para colorir uma letra é usado o tag font em combinação com o atributo color. Este atributo define, como é
óbvio pelo nome, a cor da letra, cor esta que pode ser especificada pelo código RGB definido em números

PAG. 8
hexadecimais a seguir ao sinal cardina (ex.: #ff3233) ou pelo nome predefinido da cor (como as que mostramos na
figura seguinte).
Black
#000000
Green
#008000
Silver
#C0C0C0
Lime
#00FF00
Gray
#808080
Olive
#808000
White
#FFFFFF
Yellow
#FFFF00
Navy
#000080
Maroon
#800000
Red
#FF0000
Blue
#0000FF
Purple
#800080
Teal
#008080
Fuchsia
#FF00FF
Aqua
#00FFFF
O Conteúdo
A especificação HTML tem elementos definidos pelo seu criador (W3C). Estes elementos são diferenciados do texto
comum por uma marca de início - o “<” e uma marca de final - o “>“. Tecnicamente, de acordo com a XML, tudo que
está dentro de um “< >” é uma Markup, e tudo o que não está, é um CharData.
Podemos, vulgarmente, classificar os elementos Markup em dois tipos: os normais e os simples.
Elementos normais
Chamamos de elementos normais ou abertos aos elementos que, obrigatoriamente, aparecem aos pares, envolvendo
um trecho de texto. Sua função é a de atribuir uma propriedade ao texto envolvido e, somente, ao texto envolvido.
Sendo assim, nos elementos normais há sempre uma indicação de início e outra de fim.
Exemplo de texto em itálico:
inclinado
… produzido pela inclusão dos seguintes tags: <i>inclinado</i>
É possível aplicar estilos de forma hierárquica, ou seja, aplicar estilos a secções dentro de secções que tenham outro
estilo como, por exemplo, colocar uma palavra em itálico numa frase toda em negrito: frase em negrito e itálico.
… produzido pela inclusão dos seguintes tags: <b>frase em negrito e <i>itálico</i></b>
Cruzamento de Atributos
Não cruze atributos distintos. Embora o HTML possa ser permissívo quanto a isso, o XHTML já não o é:
Exemplo de cruzamento de atributos distintos (Não faça isto nos seus projetos):
<b>Cruzamentos entre atributos distintos <i>dá sempre para</b> o torto</i>.
Elementos simples
Os elementos simples ou fechados são aqueles que se encontram sempre sozinhos, pois a sua função é a de
produzir, no texto ou na página, alguma exibição especial - ou indicar alguma coisa que não precisa,
necessariamente, ser exibida.
Como não possuem marca de encerramento, os elementos simples são caracterizados por uma barra inclinada / no
final, antes do “>”.
Linha Horizontal
 Exemplo - linha horizontal:
Nome: Alberto<hr />Idade: 46 anos
 Resultado:

PAG. 9
Nome: Alberto
Idade: 46 anos
Mudança de Linha
 Exemplo - Mudança de uma linha:
E eu disse que poderia mudar de linha<br />mas ninguém acreditou!
 Resultado:
E eu disse que poderia mudar de linha
mas ninguém acreditou!
Mudança de Parágrafo
 Exemplo da mudança de parágrafo:
É recomendável antes de qualquer texto escrever-se <p>, para possibilitar a mudança de parágrafo:
<p>Era uma vez um parágrafo</p><p>Era uma vez outro parágrafo</p>
<p>...tantos parágrafos que poderiam existir aqui</p>
 Saída:
Era uma vez um parágrafo
Era uma vez outro parágrafo
…tantos parágrafos que poderiam existir aqui
O Texto
Editores de HTML
Como já tivemos oportunidade de observar, o código de um documento HTML é apenas um texto. Logo, qualquer
editor de texto é um editor de HTML em potencial. Seguem -se alguns exemplos:
 TextEdit, vi ou pico (Mac);
 Notepad ou Wordpad (Windows);
 Vim (Unix)
 Emacs (Unix)
 Xemacs (Unix e Windows)
Obviamente, para trabalhos mais complexos o melhor é usar -se um editor HTML especializado. Existem muitos
gratuitos na Internet como, por exemplo:
 PHP Editor - Editor de PHP compacto e completo. Também serve para HTML;
 AceHTML Free - Versão gratuita do aclamado AceHTML. Possuí muitas funções. É a melhor opção
para edição de HTML;
 Sothink HTML - Para quem tem um computador lento, este editor de HTML é a melhor opção;
 OpenOffice.org - Para quem tem o OpenOffice ou queira instalá-lo, também poderá usar a ferramenta
de edição de HTML existente no aplicativo.

PAG. 10
Marcações Básicas
O primeiro passo é criar um ficheiro vazio e dar-lhe a extensão .html. Para detalhes sobre como fazer isto consulte a
documentação do seu Interface com o Utilizador (User Interface). Seguidamente é necessário abrir o ficheiro vazio
com o editor de texto escolhido.
Começa-se por inserir a estrutura básica dos documentos HTML que, como já vimos, é composta por um mínimo de 3
TAGs normais (<html>, <head> e <body>):
<html>
<head>
<title>Título da Página</title>
</head>
<body>
DOCUMENTO HTML<hr />Este documento tem o propósito de mostrar
somente o que existe
em <body> saí no corpo do browser.
</body>
</html>
Este código HTML produzirá, no browser, o resultado seguinte:
Tabelas
Para se iniciar uma tabela dentro do documento html usa -se a tag table. Porém, são necessárias as tags td e tr para
construir as suas células, divididas em colunas e linhas, respectivamente. Exemplo:
<table>
<tr>

PAG. 11
<td>Uma célula</td>
<td>Outra célula</td>
</tr>
<tr>
<td>Uma célula na segunda linha</td>
<td>Uma última célula</td>
</tr>
</table>
O resultado do código anterior é:
Uma célula Outra célula
Uma célula na segunda linha Uma última célula
5.1.2) Parâmentros das tabelas
Para manipular o aspecto gráfico e a disposição de uma tabela, podem ser usados várioss parâmetros:
5.1.2.1) Width
width especifica a largura de uma tabela ou célula. Este valor pode ser expresso em pixels ou em percentagem de
espaço. Uma tabela ajustada em 100% de largura, ocupará toda a largura disponível no contexto onde está inserida.

<table width="250">
<tr>
<td>Tabela de uma célula</td>
</tr>
</table>

<table width="70%">
<tr>
<td>Tabela de apenas uma célula</td>
</tr>
</table>
O resultado do último exmplo, será o seguinte:
Tabela de apenas uma célula
5.1.2.2) Height
O parâmetro height permite especificar a altura de uma tabela ou coluna.
<table>
<tr>
<td height="150">Uma célula</td>
</tr>
</table>
… e o resultado é:

PAG. 12
Uma célula
5.1.2.3) Border, Bgcolor e bdcolor
Border define a espessura da borda da tabela; Bgcolor define a cor de fundo da tabela e Bdcolor define a cor da
borda da tabela;
<table border="4" bdcolor="green" bgcolor="grey">
<tr>
<td>Uma mistura de cores berrante!</td>
</tr>
</table>
A saída seria:
Uma mistura de cores berrante!
5.1.2.4) Cellpadding
Cellpadding aumenta ou diminui a borda interior em cada célula.
<table cellpadding="5">
<tr>
<td>Padding 5</td>
</tr>
</table>
… equivale a:
Padding 5 Outra célula
5.1.2.5) Cellspacing
Aumenta o espaço entre células.
<table cellspaccing="5">
<tr>
<td>CellSpacing é 5</td>
</tr>
</table>
CellSpacing é 5 Outra célula
Repare no espaço que elas têm ente si
5.1.2.6) <td>
No corpo da tabela, existem várias tags que representam o início e o fim de cada célula ou linha da tabela. O tag
<td> representa o início de uma célula.

PAG. 13
<table>
<tr>
<td>Conteúdo</td>
</tr>
</table>
5.1.2.7) <tr>
<tr> controla e incrementa uma nova linha na tabela. tr quer dizer table row.
<table>
<tr> 
<td>
</tr>
<tr> 
</tr>
</table>
5.1.2.8) <th>
<th> equivale ao cabeçalho da tabela, ou seja, correspondente à primeira linha de uma tabela. O T H é um tag
opcional que, aliás, é muito pouco usado, actualmente.
<table>
<th>
<td></td>
</th>
<tr>
<td></td>
</tr>
</table>
Imagens
Podemos criar imagens pelo uso da tag img.
Exemplo:
<img src="imagem.jpg" alt="A minha imagem">
Neste caso, estamos a requisitar a imagem denominada imagem.jpg, à qual foi anexada uma observação definida pelo
campo alt. Estes dois são os parâmetros obrigatórios exigidos pela W3C.
NOTA: O comentário que utilizar no campo alt será aproveitado por progr amas utilizados por deficientes visuais que,
por acaso, venham a visitar o seu site. Para além disso, os motores de busca, como o Google, utilizam este
comentário para deduzir o conteúdo da imagem.
Existem outras opções que poder ser usadas para alterar o aspecto da imagem:
5.2.1) Width
Para se alterar a largura da imagem recorre-se ao parâmetro width

<img src="imagem.jpg" alt="A minha imagem" width="200">

PAG. 14

<img src="imagem.jpg" alt="A minha imagem" width="75%">
5.2.1) Height
Pode-se alterar a altura da imagem com o parâmetro height através da referência por percentagem % assim como por
pixelagem px

<img src="imagem.jpg alt="A minha imagem" width="200" height="100">

<img src="imagem.jpg" alt="A minha imagem"
height="150">
É necessário ter sempre em atenção o uso do parâmetro alt numa imagem para assegurar a compatibilidade com as
normas da W3C.
5.2.2) Align
Permite alinhar uma imagem à direita (align=”right”), à esquerda (align=”left”) ou ao centro (align=”center”), de forma
a tornar o aspecto da página mais apelativo.

<img src="imagem.jpg"
alt="Uma imagem linhada à direita" align="right">
5.2.3) Border
Por definição, uma imagem inserida no documento HTML apresenta uma borda de 2 pixels de espessura. Com o
parâmetro border é possível diminuir, retirar ou aumentar essa borda. Na prática, raramente o comando border é
utilizado, pois não permitir a mudança na linha desenhada. Normalmente, usa -se uma técnica muito mais atraente:
contornar a imagem com uma tabela.

<img src="imagem.jpg" alt="Uma imagem!" border="4">

<img src="imagem.jpg" alt="Uma imagem sem borda" border="0">

<table border="4" bdcolor="green" cellpadding="0" cellspacing="0">
<tr>
<td><img src="imagem.jpg" alt="Uma imagem bem contornada" border="0"></td>
</tr>
</table>
5.2.4) Links
Para fazer uma imagem com uma hiperligação basta usar a tag a como se usa no texto.
<a href="http://www.efeitosvisuais.com/pagina">
<img src="imagem.jpg" alt="Imagem com ligação" border="0">

PAG. 15
</a>
Curiosidade
Podemos criar uma galeria de imagens clicáveis usando todos os parâmetros de cima. Encolhemos as imagens e
criamos um link à imagem original, organizando-as dentro de uma tabela.
<table width="300" border="1" bdcolor="grey" cellpadding="1" cellspacing="1">
<tr>
<td width="100" height="100">
<a href="pagina1.html">
<img src="imagem1.jpg" alt="Imagem 1" width="200" height="200" border="0"></a></td>
<a href="pagina2.html" >
<img src="image3.jpg" alt="Image 3" width="200" height="200" border="0"></a></td>
</tr>
<tr>
<img src="image6.jpg" alt="Image 3" width="200" height="200" border="0"></a></td>
</tr>
</table>
… e o resultado seria algo como o que mostramos na figura seguinte, onde cada imagem seria um link para uma
página diferente.

PAG. 16
Os Meta Tags
Assim como fazemos as páginas para serem lidas por pessoas, devemos também fazê -las de modo a que as
máquinas, especialmente aquelas que pretendam arquivar os nossos sites (como os motores de busca, por exemplo),
possam recolher informações e melhor classificá-las.
Para fazer isso, usamos a tag <meta>, que deve estar inserida dentro do corpo da tag <head>.
A tag <meta> é composta pelos parâmetros name e content, na forma <meta name="xxx" content="zzz">,
onde xxx é o nome do parâmetro e zzz é o valor deste.
Indexação
Como já foi referido, as meta tags podem ser usadas para informar aos crawlers dos motores de busca o tipo de
dados, as páginas, etc que podem ou não ser indexadas. Essas instruções são passadas usando o parâmetro
name="robots" seguido da instrução que queremos passar ao crawler com content="<informação a passar
ao crawler>". Exemplos destas metatags para bots:
 <meta name="robots" content="INDEX" />: Este parâmetro informa ao motor de busca que a
página pode ser arquivada.
 <meta name="robots" content="FOLLOW" />: Este parâmetro informa ao motor de busca que
este deve seguir (FOLLOW) todas as hiperligações existentes na página. NOFOLLOW indicaria para
as hiperligações não serem seguidas.
 <meta name="robots" content="NOINDEX" />: Este parâmetro informa ao motor de busca
para não arquivar a página.
Também é possível combinar vários parâmetros:
 <meta name="robots" content="INDEX,NOFOLLOW" />: Lendo isto, o crawler indexará a
página referida mas não seguirá as hiperligações sugeridas n o resto do documento.
Descrição

PAG. 17
Com estas tags descritivas, podemos oferecer ao serviço de indexação ou motor de busca um texto personalizado e
descritivo da página, em vez de deixar a cargo do motor de busca esta tarefa.
 <meta name="description" content="Esta é a página pessoal do Vitor!" />
Palavras chave
Para que crawlers indexem por categorias, precisamos de fazer passar uma metatag com palavras chave acerca do
site:
 <meta name="keywords" content="palavra chave nº1, palavra chave nº2, ..." />
Autor
É possível passar informações sobre a autoria de uma página, através do uso da tag “author”, conforme o exemplo
seguinte:
 <meta name="author" content="Magno Urbano" />
Cache
Podemos, através das metatags, optar por não deixar o navegador do visitante, fazer cache à página e aos seus
conteúdos.
 <meta http-equiv="cache-control" content="no-cache" />
ou
 <meta http-equiv="Pragma" content="no-cache" />
Refresh e redirecionamentos
Com o mesmo http-equiv, é possível instruir o browser a fazer, automaticamente, o car regamento de uma página (que
pode ser a mesma), depois de transcorridos um certo tempo em segundos.
 <meta http-equiv="Refresh" content="60" />: o browser carregará a mesma página a
cada 60 segundos
Analogamente, uma outra página poderá ser carregada…
 <meta http-equiv="Refresh" content="3;URL:página de destino" />: Ao entrar nesta
página, o cliente é redirecionando dentro de 3 segundos para o url especificado.
Os Frames
Frames, do inglês quadro. Servem para dividir uma pagina HTML em varias secções, que permitirão o carregamento
de diferentes páginas.
O tag para a criação de frames numa página é o <frameset> que deve ser digitado logo a seguir ao tag </head>.
Exemplo de página com frame
<html>
<head>
<title>Exemplo Frame</title>
</head>
<frameset rows="30%,*">
<frame src="pagina1.html" >
<frameset cols="30%,*" >
</frameset>

PAG. 18
</html>
Neste exemplo, a área do browser vai ser dividida, verticalmente, em duas regiões, sendo a superior, a região A, que
ocupará 30% da altura disponível. De seguida, a área inferior é dividida em duas colunas: a primeira com 30% da
largura disponível. Em cada uma das regiões, A, B e C, serão carregadas os ficheiros HTML “pagina1.html”,
“pagina2.html” e “pagina3.html”.
Atributos do tag FRAMESET
 cols: define as colunas do frame em pixels ou porcentagem. <frameset cols=”X.X”>
 rows: define as linhas do frame em pixels ou porcentagem. <frameset rows=”X.X”>
 border: define a espessura da borda frameset border=”X”
Já o tag <frame> é inserido entre as tags <frameset></frameset>, ela especifica as páginas que irão abrir nos
frames correspondentes.
Atributos do FRAME
 src: especifica o endereço que será carregado. <frame src=”pagina” >
 name: dá um nome ao frame <frame name=”nome_frame”>
 norezise: determina que o frame não poderá ser redimensionando. <frame noresize>
Lista de tags HTML
 Especifica um comentário
DOCTYPE> Especifica o tipo de documento
<a> Especifica um hiperlink
<abbr> Especifica uma abreviação
<adress> Especifica um elemento de endereço

PAG. 19
<area> Especifica uma área dentro de um <map> de imagem
<article> Especifica um artigo
<aside> Especifica o conteúdo, além do conteúdo da página
<audio> Especifica o conteúdo de som
<b> Especifica o texto em negrito
<base> Especifica uma URL base para todos os links em uma página
<bdo> Especifica a direção do texto de exibição
<blockquote> Especifica uma longa citação
<body> Especifica o elemento do corpo
<br> Insere uma quebra de linha única
<button> Especifica um botão
<canvas> Definir gráficos
<caption> Especifica uma legenda da tabela
<cite> Especifica uma citação
<code> Especifica o texto código de computador
<col> Especifica atributos para colunas de tabela
<colgroup> Especifica grupos de colunas da tabela
<command>Especifica um comando (Ex: save)
<datalist> Especifica uma "lista suspensa autocomplete"
<dd> Especifica uma descrição da definição
<del> Especifica texto excluído
<details> Especifica detalhes de um elemento
<dialog> Especifica um diálogo (conversa)
<dfn> Define um termo de definição
<div> Especifica uma seção em um documento
<dl> Especifica uma lista de definição
<dt> Especifica a uma definição
<em> Especifica texto enfatizado
<embed> Especifica aplicação externa ou de conteúdo interativo
<fieldset> Especifica um fieldset
<figure> Especifica um grupo de conteúdo de mídia, e sua legenda
<figcaption> Especifica um grupo de conteúdo de mídia, e sua legenda
<footer>Especifica um rodapé de uma seção ou página
<form> Especifica um formulário
<h1> Especifica um título de nível 1

PAG. 20
<h6> Especifica uma posição de nível 6
<head> Especifica as informações sobre o documento
<header> Especifica um cabeçalho para uma seção ou página
<hr> Especifica uma regra horizontal
<html> Especifica um documento HTML
<i> Especifica o texto em itálico
<iframe> Especifica uma janela sub inline (frame)
<img> Especifica uma imagem
<input> Especifica um campo de entrada
<ins> Especifica o texto inserido
<kbd> Especifica o texto teclado
<label> Especifica um rótulo para um controle de formulário
<legend> Especifica um título em um fieldset
<li> Especifica um item da lista
<link> Especifica uma referência de recurso
<mark> Especifica texto marcado
<map> Especifica um mapa de imagem
<menu> Especifica uma lista de menu
<meta> Especifica informações meta
<meter> Especifica medição dentro de um intervalo pré-definido
<nav> Especifica links de navegação
<noscript> Especifica uma seção noscript
<object> Especifica um objeto incorporado
<ol> Especifica uma lista ordenada
<optgroup> Especifica um grupo de opção
<option> Especifica uma opção em uma lista suspensa
<output> Especifica alguns tipos de saída
<p> Especifica um ponto
<param> Especifica um parâmetro para um objeto
<pre> Especifica texto pré-formatado
<progress> Especifica o progresso de uma tarefa de qualquer tipo

PAG. 21
<q> Especifica uma breve citação
<samp> Especifica o código de computador amostra
<script> Especifica um script
<section> Especifica uma seção
<select> Especifica uma lista selecionável
<small> Especifica texto pequeno
<source> Especifica origem de mídia
<span> Especifica uma seção em um documento
<strong> Especifica o texto forte
<style> Especifica uma definição de estilo
<sub> Especifica o texto subscrito
<sup> Especifica o texto sobrescrito
<table> Especifica uma tabela
<tbody> Especifica o corpo de uma tabela
<td> Especifica uma célula de tabela
<textarea> Especifica uma área de texto
<tfoot> Especifica rodapé de uma tabela
<th> Especifica um cabeçalho da tabela
<thead> Especifica um cabeçalho da tabela
<time> Especifica uma data / hora
<title> Especifica o título do documento
<tr> Especifica uma linha da tabela
<ul> Especifica uma lista ordenada
<video> Especifica um vídeo
<wbr> Especifica a quebra de linha em palavras compridas para quando necessita mudar de linha

PAG. 22
O que é CSS?
CSS significa Cascading Style Sheets
Os estilos definem como exibir elementos HTML
Estilos foram adicionados ao HTML 4.0 para resolver um problema
Folhas de estilo externas pode salvar uma grande quantidade de trabalho
Folhas de estilo externas são armazenados em arquivos CSS
Estilos resolvido um grande problema
HTML nunca foi destinado a conter tags para a formatação de um documento.
HTML foi destinado para definir o conteúdo de um documento, como:
<h1> Esta é uma </ h1> título
<p> Este é um parágrafo. </ p>
Quando as tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou
um pesadelo para os desenvolvedores web. Desenvolvimento de grandes sites, onde as fontes e
informações de cor foram adicionados para cada página, tornou-se um processo longo e caro.
Para resolver este problema, o World Wide Web Consortium (W3C) criou CSS.
Em HTML 4.0, toda a formatação pode ser removida no documento HTML, e/ou armazenada num arquivo
CSS separado.
Nos dias de hoje todos os browsers suportam CSS.
CSS poupa muito trabalho!
CSS define como os elementos HTML devem ser exibidos.
Os estilos são, normalmente, salvos em arquivos CSS externos.. Folhas de estilo externas permitem que
altere a aparência e o layout de todas as páginas num site, editando apenas um único arquivo!
Sintaxe CSS
A regra CSS tem duas partes principais: um seletor, e uma ou mais declarações:
O seletor é normalmente o elemento HTML que deseja aplicar o estilo.
Cada declaração consiste de uma propriedade e um valor.

PAG. 23
A propriedade é o atributo de estilo que pretendemos alterar. Cada propriedade tnum valor.
Exemplo CSS
A declaração CSS termina sempre com um ponto e vírgula, e os grupos de declaração são cercados por
chavetas:
p {color: red; text-align: center;}
CSS Comentários
Comentários são usados para explicar seu código e pode ajudar quando editar o código-fonte numa data
posterior. Os comentários são ignorados pelos navegadores.
Um comentário CSS começa com "/ *" e termina com "* /", assim:
/ * Este é um comentário * /
p
{
text-align: center;
/ * Este é outro comentário * /
color: black;
font-family: arial;
}
O id e classe Seletores
Além de definir um estilo para um elemento HTML, o CSS permite que especifique os seus próprios
selecionadores chamados de "id" e "classe".
O id Selector
O seletor id é usado para especificar um estilo para uma tag única, normalmente.
O seletor id usa o atributo id da tag HTML, e é definido com um "#".
A regra de estilo abaixo será aplicada à tag com id = "para1":
Exemplo
# para1
{
text-align: center;
color: red;

PAG. 24
}
O seletor de classe
O selector de classe é usado para especificar um modelo para um grupo de elementos. Ao contrário do
seletor id, o seletor de classe é mais frequentemente usado em vários elementos.
Isso permite que defina um estilo particular de muitos elementos HTML com a mesma classe.
O seletor de classe usa o atributo da classe HTML, e é definido com um "."
No exemplo a seguir, todos os elementos HTML com class = "center" será alinhado ao centro:
Exemplo
. centro {text-align: center;}
Quando um navegador lê uma folha de estilo, ele irá formatar o documento de acordo com ela.
Três maneiras de inserir CSS
Há três maneiras de inserir uma folha de estilo:
Folha de estilo externa
Folha de estilo interna
Estilo inline
Folha de estilo externa
Uma folha de estilo externa é ideal quando o estilo é aplicado a muitas páginas. Com uma folha de estilo
externa, pode mudar o visual de um site inteiro mudando um arquivo. Cada página tem link para a folha
de estilo usando a tag <link>. A tag <link> é inserida dentro da seção head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</ head>
Uma folha de estilo externa pode ser escrita em qualquer editor de texto. O arquivo não deve conter
quaisquer tags HTML. Sua folha de estilo deve ser salvo com a extensão css. Um exemplo de um arquivo
de folha de estilo é mostrado em baixo:
hr {color: sienna;}

PAG. 25
p {margin-left: 20px;}
body {background-image: url ("images/back40.gif");}
Atenção: Não adicione um espaço entre o valor da propriedade e da unidade (como margin-left: 20 px). A
forma correta é: margin-left: 20px
Folha de estilo interna
Uma folha de estilo interna deve ser utilizado quando um único documento tnum estilo único. define
estilos internos na seção head de uma página HTML, usando a tag <style>, como este:
<head>
<style type=”text/css”>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url ("images/back40.gif");}
</ style>
</ head>
Estilos inline
Um estilo inline perde muitas das vantagens de folhas de estilo, misturando conteúdo com a
apresentação. Utilize este método com moderação!
Para usar estilos inline usa o atributo style na tag. O atributo de estilo pode conter qualquer propriedade
CSS. O exemplo mostra como alterar a cor ea margem esquerda de um parágrafo:
<p style="color:sienna;margin-left:20px"> Este é um parágrafo. </ p>
Vários Style Sheets
Se algumas propriedades foram definidas para o mesmo seletor em diferentes folhas de estilo, os valores
serão herdados da folha de estilo mais específico.
Por exemplo, uma folha de estilo externa tem estas propriedades para o seletor h3:
h3
{
color: red;
text-align: left;

PAG. 26
font-size: 8pt;
}
E uma folha de estilo interna tem estas propriedades para o seletor h3:
h3
{
text-align: right;
font-size: 20pt;
}
Se a página com a folha de estilo interna também links para a folha de estilo externa as propriedades
para h3 serão:
color: red;
text-align: right;
font-size: 20pt;
A cor é herdada da folha de estilo externa, o texto-alinhamento e o tamanho da fonte é substituída pela
folha de estilo interna.
Vários estilos em cascata
Os estilos podem ser especificados:
Dentro de um elemento HTML
Dentro da seção head de uma página HTML
Num arquivo CSS externo
Dica: Mesmo várias folhas de estilo externas podem ser referenciadas dentro de um único documento
HTML.
Ordem em cascata
O estilo será usado quando houver mais de um estilo especificado para um elemento HTML?
De um modo geral, podemos dizer que todos os estilos vontade "cascata" numa nova folha de estilo
"virtual" pelas seguintes regras, onde o número quatro tem a mais alta prioridade:
1. Padrão do navegador
2. Folha de estilo externa
3. Folha de estilo interna (na seção head)
4. Estilo inline (dentro de um elemento HTML)

PAG. 27
Assim, um estilo inline (dentro de um elemento HTML) tem a prioridade mais alta, o que significa que ele
irá substituir um estilo definido dentro da tag <head>, numa folha de estilo externa ou num navegador (um
valor padrão).
Nota: Se o link para a folha de estilo externa é colocado após a folha de estilo interna <head> HTML, a
folha de estilo externa irá substituir a folha de estilo interna!
CSS Background
Em CSS as propriedades do fundo são usados para definir os efeitos de um elemento de fundo.
Propriedades CSS utilizados para efeitos de fundo:
background-color
background-image
background-repeat
background-attachment
background-position
Cor de fundo
A propriedade background-color especifica a cor de fundo de um elemento.
A cor de uma página de fundo é definida no corpo selector:
Exemplo
body {background-color: # b0c4de;}
Com CSS, a cor é mais frequentemente especificada por:
um valor HEX - como "# ff0000"
um valor de RGB - como "rgb (255,0,0)"
nome de uma cor - como "vermelho"
No exemplo abaixo, o h1, p e div têm diferentes cores de fundo:
Exemplo

PAG. 28
h1 {background-color: # 6495ed;}
p {background-color: # e0ffff;}
div {background-color: # b0c4de;}
Imagem de Fundo
A propriedade background-image especifica uma imagem para usar como plano de fundo de um
elemento.
Por padrão, a imagem é repetida de forma a cobrir todo o elemento.
A imagem de fundo de uma página pode ser definido assim:
Exemplo
body {background-image: url ('Paper.gif');}
Imagem de Fundo - Repetir horizontalmente ou verticalmente
Por padrão, a propriedade background-image repete uma imagem horizontalmente e verticalmente.
Algumas imagens podem ser repetidas apenas horizontalmente ou verticalmente.
Exemplo
corpo {
background-image: url ('gradient2.png');
}
Se a imagem é repetida somente na horizontal (repeat-x), o fundo vai parecer melhor:
Exemplo
corpo {
background-image: url ('gradient2.png');
background-repeat: repeat-x;
}
Imagem de Fundo - Define a posição e no-repeat
Nota: Ao usar uma imagem de fundo, use uma imagem que não perturbe o texto.
Mostrando a imagem de uma só vez é especificado pela propriedade background-repeat:
Exemplo
corpo {

PAG. 29
background-image: url ('img_tree.png');
background-repeat: no-repeat;
}
No exemplo acima, a imagem de fundo é mostrado no mesmo lugar que o texto. Queremos mudar a
posição da imagem, de modo que ela não perturba o texto demais.
A posição da imagem é especificada pela propriedade background-position:
Exemplo
corpo {
background-image: url ('img_tree.png');
background-position: right top;
}
Background – abreviar propriedades
Como pode ver nos exemplos acima, existem muitas propriedades a serem consideradas quando se
trata de fundos.
Para encurtar o código, também é possível especificar todas as propriedades de uma única propriedade.
Isso é chamado de propriedade abreviada.
Exemplo
body {background: # ffffff url ('img_tree.png') no-repeat superior direito;}
Ao utilizar a propriedade abreviada a ordem dos valores de propriedade é:
background-color
background-image
background-repeat
background-attachment
background-position
Não importa se um dos valores das propriedades está ausente, enquanto os que estão presentes são,
por esta ordem.
Propriedades CSS Background
Propriedade Descrição
background Define todas as propriedades do fundo numa declaração

PAG. 30
background-attachment Define se uma imagem de fundo é fixa ou scroll com o resto da página
background-color Define a cor de fundo de um elemento
background-image Define a imagem de fundo de um elemento
background-position Define a posição inicial de uma imagem de fundo
background-repeat Define como uma imagem de fundo será repetida
CSS Texto
Cor do Texto
A propriedade cor é usada para definir a cor do texto.
Com CSS, a cor é mais frequentemente especificada por:
um valor HEX - como "# ff0000"
um valor de RGB - como "rgb (255,0,0)"
nome de uma cor - como "vermelho"
A cor padrão para uma página é definida no seletor de corpo.
Exemplo
body {color: blue;}
h1 {color: # 00ff00;}
h2 {color: rgb (255,0,0);}
Nota: Se definir a propriedade de cor, também deve definir a propriedade background-color.
Alinhamento de texto
A propriedade text-align é usado para definir o alinhamento horizontal de um texto.
O texto pode ser centralizado, alinhado à esquerda, à direita ou justificado.
Quando text-align é definido como "justificar", cada linha é esticada de modo que cada linha tem largura
igual, e as margens esquerda e direita são retas (como em revistas e jornais).
Exemplo

PAG. 31
h1 {text-align: center;}
p.date {text-align: right;}
p.main {text-align: justify;}
Decoração texto
A propriedade text-decoration é usado para definir ou remover decorações de texto.
A propriedade text-decoration é usado principalmente para remover o sublinhado a partir de links:
Exemplo
a {text-decoration: none;}
Também pode ser utilizado para decorar texto:
Exemplo
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
Transformação de texto
A propriedade text-transform é usado para especificar letras maiúsculas e minúsculas de um texto.
Pode ser usado para transformar tudo em letras maiúsculas ou minúsculas, ou capitalizar a primeira letra
de cada palavra.
Exemplo
puppercase {text-transform: uppercase;}
plowercase {text-transform: lowercase;}
pcapitalize {text-transform: capitalize;}
Recuo de texto
A propriedade text-indent é usado para especificar o recuo da primeira linha de um texto.
Exemplo
p {text-indent: 50px;}
Propriedades CSS Texto
color Define a cor do texto

PAG. 32
direction Especifica a direção / escrita a direção do texto
letter-spacing Aumenta ou diminui o espaço entre os caracteres de um texto
line-height Define a altura da linha
text-align Especifica o alinhamento horizontal do texto
text-decoration Especifica a decoração adicionado ao texto
text-indent Especifica o recuo da primeira linha num bloco de texto
text-shadow Especifica o efeito de sombra adicionado ao texto
text-transform Controla a capitalização de texto
vertical-align Define o alinhamento vertical de um elemento
white-space Especifica como espaço em branco dentro de um elemento é tratado
word-spacing Aumenta ou diminui o espaço entre as palavras de um texto
CSS Font
Diferença entre Serif e Sans-serif
Nota: As fontes sans-serif são considerados mais fáceis de ler do que fontes com serifa.
Font Família
A família da fonte de um texto é definida com a propriedade font-family.

PAG. 33
A propriedade font-family deve manter vários nomes de fontes como um sistema de "retorno". Se o
navegador não suporta a primeira fonte, tenta a próxima fonte.
Comece com a fonte que quer, e terminam com uma família genérica, para deixar o navegador escolher
um tipo de letra semelhante na família genérica, se não houver outras fontes estão disponíveis.
Nota: Se o nome de uma família de fontes tem mais do que uma palavra, deve estar entre aspas, como
font-family: "Times New Roman".
Mais do que uma família de fonte deve ser especificado numa lista separada por vírgulas:
Exemplo
p {font-family: "Times New Roman", Times, serif;}
Estilo da Fonte
A propriedade font-style é usado principalmente para especificar o texto em itálico.
Esta propriedade tem três valores:
normal - O texto é exibido normalmente
itálico - O texto está em itálico
oblíque - O texto está "inclinado" (oblíqua é muito semelhante ao itálico, mas menos suportado)
Exemplo
p.normal {font-style: normal;}
p.italic {font-style: italic;}
p.oblique {font-style: oblíqua;}
Tamanho da Fonte
A propriedade font-size define o tamanho do texto.
Ser capaz de gerenciar o tamanho do texto é importante em web design. No entanto, não deve usar
ajustes de tamanho de fonte para fazer parágrafos parecem títulos, ou títulos parecem parágrafos.
Use sempre as tags HTML apropriadas, como <h1> - <h6> para títulos e <p> para parágrafos.
Definir Tamanho da Fonte Com Pixels
Definir o tamanho do texto com pixels dá-lhe controle total sobre o tamanho do texto:
Exemplo
h1 {font-size: 40px;}
h2 {font-size: 30px;}
p {font-size: 14px;}

PAG. 34
O exemplo acima permite que o Internet Explorer 9, Firefox, Chrome, Opera e Safari para redimensionar
o texto.
O texto pode ser redimensionado em todos os navegadores usando a ferramenta de zoom (no entanto,
esta redimensiona a página inteira, não apenas o texto).
Defina o tamanho da fonte com o EM
Para evitar o problema de redimensionamento com versões mais antigas do Internet Explorer, muitos
desenvolvedores usam “em” em vez de pixels.
1em é igual ao tamanho da fonte de corrente. O tamanho do texto padrão em navegadores é 16px.
Assim, o tamanho padrão é de 1em = 16px.
O tamanho pode ser calculado a partir de pixels para “em” usando esta fórmula: = pixels/16 em
Exemplo
h1 {font-size: 2.5em;} / * 40px/16 = 2.5em * /
h2 {font-size: 1.875em;} / * 30px/16 = 1.875em * /
p {font-size: 0.875em;} / * 14px/16 = 0.875em * /
Use uma combinação de cento e Em
A solução que funciona em todos os navegadores, é definir uma fonte de tamanho padrão em
percentagem do elemento <body>:
Exemplo
body {font-size: 100%;}
h1 {font-size: 2.5em;}
h2 {font-size: 1.875em;}
p {font-size: 0.875em;}
Propriedades CSS Font
font Define todas as propriedades de fonte numa declaração
font-family Especifica a família da fonte do texto
font-size Especifica o tamanho da fonte do texto
font-style Especifica o estilo da fonte do texto

PAG. 35
font-variant Especifica se ou não um texto deve ser exibido numa fonte small-caps
font-weight Especifica a largura de uma fonte
CSS Links
Os links podem ser decorados de formas diferentes.
Os links podem ser decorados com qualquer propriedade CSS (por exemplo, cor, font-family, fundo, etc.)
Além disso, as ligações podem ser decorados de forma diferente, dependendo do estado que estão.
Os quatro estados ligações são:
a: link - uma ligação normal, unvisited
a: visited - um link que o usuário visitou
a: hover - um link quando o usuário passa o rato sobre ele
a: active - um link no momento em que é clicado
Exemplo
a: link {color: # FF0000;} / * link não visitado * /
a: visited {color: # 00FF00;} / * link visitado * /
a: hover {color: # FF00FF;} / * mouse sobre o link * /
a: active {color: # 0000FF;} / * link selecionado * /
Nota: Ao definir o estilo para vários links estados, existem algumas regras de ordem:
a: hover deve vir depois de a: link e a: visited
a: active deve vir depois de a: hover
Decoração texto
A propriedade text-decoration é usado principalmente para remover o sublinhado dos links:
Exemplo
a: link {text-decoration: none;}
a: visited {text-decoration: none;}
a: hover {text-decoration: underline;}
a: active {text-decoration: underline;}
Cor de fundo
A propriedade background-color especifica a cor de fundo para links:

PAG. 36
Exemplo
a: link {background-color: # B2FF99;}
a: visited {background-color: # FFFF85;}
a: hover {background-color: # FF704D;}
a: active {background-color: # FF704D;}
CSS Lists
As propriedades da lista de CSS permitem:
Definir diferentes marcadores de item de lista de listas ordenadas
Definir diferentes marcadores de item de lista para listas não ordenadas
Definir uma imagem como marcador de item da lista
Lista
Em HTML, existem dois tipos de listas:
listas não ordenadas - os itens da lista são marcados com ícones
listas ordenadas - os itens da lista são marcados com números ou letras
Com CSS, as listas podem ser denominadas mais adiante, e as imagens podem ser utilizadas como o
marcador item da lista.
Diferentes item Marcadores Lista
O tipo de marcador de item da lista é especificado com a propriedade list-style-type:
Exemplo
ul.a {tipo list-style: círcle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
Alguns dos valores são para listas não ordenadas, e alguns para listas ordenadas.
Uma imagem como marcador de item Lista
Para especificar uma imagem como marcador de item da lista, use a propriedade list-style-image:
Exemplo
ul {
list-style-image: url ('sqpurple.gif');

PAG. 37
}
O exemplo acima não se apresenta em todos os navegadores. IE e Opera irá exibir a imagem no
marcador um pouco maior do que o Firefox, Chrome e Safari.
Se quiser que a imagem do marcador a ser colocado igualmente em todos os navegadores, uma solução
crossbrowser é explicado abaixo.
Crossbrowser Solution
O exemplo a seguir exibe a imagem do marcador igual em todos os navegadores:
Exemplo
ul {
do tipo list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
background-image: url (sqpurple.gif);
background-position: 0px 5px;
padding-left: 14px;
}
Explicação do exemplo:
Para ul:
Defina o tipo de estilo de lista para não remover o marcador de item da lista
Definir tanto preenchimento e margem para 0px (para compatibilidade cross-browser)
Para todos os li em ul:
Defina o URL da imagem, e mostrá-lo apenas uma vez (no-repeat)
Posicione a imagem onde quiser (esquerda e para baixo 0px 5px)
Posicione o texto na lista com padding-left
List - propriedade abreviada
Também é possível especificar todas as propriedades da lista numa, única propriedade. Isso é chamado
de propriedade abreviada.
A propriedade abreviação usada para listas, é a propriedade list-style:

PAG. 38
Exemplo
ul {
list-style: url quadrado ("sqpurple.gif");
}
Ao utilizar a propriedade abreviada, a fim de que os valores são do tipo list-style, list-style-position (para
uma descrição, consulte a tabela de propriedades CSS abaixo), list-style-image.
Não importa se um dos valores acima não aparece, enquanto o resto está na ordem especificada.
Propriedades CSS Listas
list-style Define todas as propriedades de uma lista numa declaração
list-style-image Especifica uma imagem como marcador de item de lista
list-style-position Especifica se os marcadores de item de lista devem aparecer dentro ou fora do
fluxo de conteúdo
list-style-type Especifica o tipo de marcador de item de lista
CSS Box Model
O modelo de caixa CSS
Todos os elementos de HTML podem ser considerados como caixas. Em CSS, o termo "modelo de caixa"
é usado quando se fala sobre o design e layout.
O modelo de caixa de CSS é essencialmente uma caixa que envolve elementos HTML, e é composto por:
margens, bordas, padding e o conteúdo real.
O modelo de caixa permite-nos colocar uma borda em torno de elementos e elementos espaciais em
relação aos outros elementos.
A imagem abaixo ilustra o modelo de caixa:

PAG. 39
CSS box-modelo
A explicação das diferentes partes:
margin - Limpa uma área ao redor da borda. A margem não muda cor de fundo, que é completamente
transparente
border - A fronteira que gira em torno do preenchimento e conteúdo. A fronteira é afetada pela cor da
caixa de fundo
padding - Limpa uma área em torno do conteúdo. O preenchimento é afetada pela cor da caixa de fundo
conteúdo - O conteúdo da caixa, onde o texto e as imagens aparecem
A fim de definir a largura e altura de um elemento corretamente em todos os navegadores, precisa saber
como funciona o modelo de caixa.
Largura e altura de um elemento
OBSERVAÇÃO IMPORTANTE: Quando definir a largura e altura de um elemento com CSS, apenas
definir a largura e altura da área de conteúdo. Para calcular o tamanho total de um elemento, também
deve adicionar o preenchimento, bordas e margens.
A largura total do elemento no exemplo abaixo é 300px:
width: 250px;
padding: 10px;
border: grey solid 5px;
margin: 10px;
Vamos fazer as contas:
250px (largura)

PAG. 40
+ 20px (esquerda + preenchimento à direita)
+ 10px (esquerdo + borda direita)
+ 20px (margem esquerda + direita)
= 300px
Suponha que tinha apenas 250px de espaço. Vamos fazer um elemento com uma largura total de 250px:
Exemplo
width: 220px;
padding: 10px;
border: grey solid 5px;
margin: 0px;
Compatibilidade com navegadores Edição
Versões IE8 e anteriores do IE, incluído o preenchimento e borda na propriedade width.
Para corrigir esse problema, adicione um <! DOCTYPE html> para a página de HTML.
CSS Border
Border Estilo
A propriedade border-style especifica que tipo de fronteira para exibir.
Nota: Nenhuma das propriedades de fronteira terá qualquer efeito a menos que a propriedade border-
style esteja definida!
Valores border-style:
none: Define nenhuma fronteira
dotted: Define uma borda pontilhada
dashed: Define uma borda tracejada
solid: Define uma linha contínua
double: Defines duas linhas. A largura das duas linhas é o mesmo que o valor de largura da margem
groove: Define uma borda sulcada 3D. O efeito depende do valor border-color

PAG. 41
ridge: Define uma borda estriada 3D. O efeito depende do valor border-color
inset: Define uma borda de inserção 3D. O efeito depende do valor border-color
outset: Define uma borda 3D início. O efeito depende do valor border-color
Largura da borda
A propriedade border-width é utilizada para definir a largura da borda.
A largura é definida em pixels, ou usando um dos três valores pré-definidos: thin, medium ou thick.
Nota: A propriedade "border-width" não funciona se for usada sozinha. Use a propriedade "border-style"
para definir as fronteiras em primeiro lugar.
Exemplo
p.one{
border-style: solid;
border-width: 5px;
}
p.two{
border-width: medium;
}
Cor da border
A propriedade border-color é usada para definir a cor da borda. A cor pode ser definida por:
nome - especificar um nome de cor, como "vermelho"
RGB - especificar um valor RGB, como "rgb (255,0,0)"
Hex - especifique um valor hexadecimal, como "# ff0000"
Nota: A propriedade "border-color" não funciona se for usado sozinho. Use a propriedade "border-style"
para definir as fronteiras em primeiro lugar.
Exemplo
p.one {

PAG. 42
border-color: red;
}
p.two {
border-color: # 98bf21;
}
Border - os lados individuais
No CSS é possível especificar diferentes fronteiras para lados diferentes:
Exemplo
p {
border-top-style: dotted;
border-style-right: solid;
border-bottom-style: dotted;
border-style-left: solid;
}
O exemplo acima também pode ser definido com uma única propriedade:
Exemplo
border-style: solid dotted;
A propriedade border-style pode ter de um a quatro valores.
border-style: double solid dotted dotted;
borda superior é pontilhada
borda direita é sólido
limite inferior é o dobro
borda esquerda é pontilhada
border-style: double solid dottea;
borda superior é pontilhada
bordas direita e esquerda são sólidos
limite inferior é o dobro

PAG. 43
border-style: solid dotted;
bordas superior e inferior são pontilhadas
bordas direita e esquerda são sólidos
border-style: dotted;
todas as quatro bordas são pontilhadas
A propriedade border-style é usado no exemplo acima. No entanto, ele também trabalha com border-
width e border-color.
Border - Propriedade abreviada
Como pode ver nos exemplos acima, existem muitas propriedades a serem consideradas quando se
tratar de fronteiras.
Para encurtar o código, também é possível especificar as propriedades da borda individuais numa
propriedade. Isso é chamado de propriedade abreviada.
A propriedade border é um atalho para as seguintes propriedades das fronteiras individuais:
border-width
border-style (obrigatório)
border-color
Exemplo
border: red solid 5px;
Propriedades CSS Border
border Define todas as propriedades de fronteira numa declaração
border-bottom Define todas as propriedades da borda inferior numa declaração
border-bottom-color Define a cor da borda inferior
border-bottom-style Define o estilo da borda inferior

PAG. 44
border-bottom-width Define a largura da borda inferior
border-color Define a cor das quatro bordas
border-left Define todas as propriedades da borda esquerda numa declaração
border-left-color Define a cor da borda esquerda
border-left-style Define o estilo da borda esquerda
border-left-width Define a largura da borda esquerda
border-right Define todas as propriedades da borda direita numa declaração
border-right-color Define a cor da borda direita
border-right-style Define o estilo da borda direita
border-right-width Define a largura da borda direita
border-style Define o estilo das quatro bordas
border-top Define todas as propriedades da borda superior numa declaração
border-top-color Define a cor da borda superior
border-top-style Define o estilo da borda superior
border-top-width Define a largura da borda superior
border-width Define a largura das quatro fronteiras

PAG. 45
CSS Outlines
Um esboço é uma linha que é desenhada em torno de elementos (fora dos limites) para fazer o elemento
"destacar-se".
No entanto, a propriedade de contorno é diferente a partir da propriedade de fronteira.
O esquema não é uma peça de dimensões de um elemento; total de largura e altura do elemento não é
afetado pela largura do contorno.
Propriedades CSS Outline
Propriedade Descrição Valores CSS
outline Define todas as propriedades de contorno numa
declaração
outline-color
outline-style
outline-width
inherit
2
outline-color Define a cor de um esboço color_name
hex_number
rgb_number
invert
inherit
2
outline-style Define o estilo de um esboço none
dotted
dashed
solid
double
groove
2

PAG. 46
ridge
inset
outset
inherit
outline-width Define a largura de um esboço thin
medium
thick
length
inherit
2
CSS Margin
A margem limpa uma área em torno de um elemento (fora da fronteira). A margem não tnuma cor de
fundo, e é completamente transparente.
A parte superior, direita, inferior e esquerda margem pode ser alterada de forma independente usando
propriedades separadas. Uma propriedade margem abreviada também podem ser usadas, para modificar
todas as margens de uma vez.
Valores
Valores Descrição
auto O navegador calcula uma margem
length Especifica uma margem em px, pt, cm, etc valor padrão é 0px
% Especifica uma margem em por cento da largura do elemento de contenção
Margem - os lados individuais
Em CSS, é possível especificar as margens diferentes para diferentes lados:
Exemplo
margin-top: 100px;
margin-bottom: 100px;
margin-right: 50px;
margin-left: 50px;

PAG. 47
Margem - Propriedade abreviada
Para encurtar o código, é possível especificar as propriedades de margem em uma propriedade. Isso é
chamado de propriedade abreviada.
A propriedade abreviada para todas as propriedades de margem é "margem":
Exemplo
margin: 50px 100px;
A propriedade de margem pode ter de um a quatro valores.
 margin:25px 50px 75px 100px;
o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px
 margin:25px 50px 75px;
o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px
 margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px
 margin:25px;
o all four margins are 25px
CSS Padding
As propriedades de preenchimento CSS definem o espaço entre a margem do elemento e o conteúdo do
elemento.
O preenchimento limpa uma área em torno do conteúdo (dentro do limite) de um elemento. O
preenchimento é afetada pela cor do elemento de fundo.
A parte superior, direita, inferior e esquerda preenchimento pode ser alterado independentemente usando
propriedades separadas. Uma propriedade de preenchimento abreviada também podem ser usadas, para
modificar os preenchimentos de uma vez.
Valores
Valores Descrição

PAG. 48
length Define um preenchimento fixo (em pixels, pt, em, etc)
% Define um acolchoamento em% do elemento que contém
Padding - os lados individuais
Em CSS, é possível especificar o preenchimento diferente para diferentes lados;
Exemplo
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
Padding – Propriedade abreviada
Para encurtar o código, é possível especificar as propriedades de preenchimento de uma propriedade.
Isso é chamado de propriedade abreviada.
A propriedade abreviada para todas as propriedades de preenchimento é "preenchimento":
Exemplo
padding: 25px 50px;
A propriedade de preenchimento pode ter de um a quatro valores.
 padding:25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
 padding:25px 50px 75px;
o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px
 padding:25px 50px;
o top and bottom paddings are 25px
o right and left paddings are 50px
 padding:25px;
o all four paddings are 25px

PAG. 49
Agrupamento CSS e Seletores
Seletores de agrupamento
Em folhas de estilo muitas vezes há elementos com o mesmo estilo.
h1 {
cor: verde;
}
h2 {
cor: verde;
}
p {
cor: verde;
}
Para minimizar o código, pode agrupar seletores.
Separe cada seletor com uma vírgula.
No exemplo abaixo temos agrupados os seletores do código acima:
Exemplo
h1, h2, p {
cor: verde;
}
Seletores de nidificação
É possível aplicar um estilo para um seletor dentro de um seletor.
No exemplo abaixo, um estilo é especificado para todos os elementos p, um estilo especificado para
todos os elementos com class = "marcado", e um terceiro estilo é indicado apenas para os elementos p
dentro de elementos com class = "marcado":
Exemplo
p {
color: blue;
text-align: center;
}

PAG. 50
.marcado {
background-color: red;
}
.marcado p {
color: white;
}
CSS Dimension
As propriedades de dimensão CSS permitem controlar a altura e largura de um elemento.
height Define a altura de um elemento auto
length
%
inherit
1
max-height Define a altura máxima de um elemento none
length
%
inherit
2
max-width Define a largura máxima de um elemento none
length
%
inherit
2
min-height Define a altura mínima de um elemento length
%
inherit
2
min-width Define a largura mínima de um elemento length
%
inherit
2
width Define a largura de um elemento auto
length
%
inherit
1

PAG. 51
CSS Display and Visibility
A propriedade display especifica como um elemento é exibido, e a propriedade de visibilidade especifica
se um elemento deve ser visível ou oculto.
Esconder um elemento - display: none ou visibility: hidden
Esconder um elemento pode ser feito definindo a propriedade display para "none" ou a propriedade de
visibilidade para "hidden". No entanto, notar que estes dois métodos produzem resultados diferentes:
Visibilidade: Hidden oculta um elemento, mas ele ainda vai ocupar o mesmo espaço de antes. O
elemento será escondido, mas ainda afetam o layout.
Exemplo
h1.hidden {visibility: hidden;}
display: none esconde um elemento, e não vai ocupar todo o espaço. O elemento será escondido e, a
página será exibida como se o elemento não está lá:
Exemplo
h1.hidden {display: none;}
CSS Display - Bloquear e elementos inline
Um elemento é um elemento de bloco, que ocupa toda a largura disponível e num intervalo de linha antes
e depois.
Exemplos de elementos de bloco:
<h1>
<p>
<div>
Um elemento inline só ocupa tanto de largura, se necessário, e não forçar quebras de linha.
Exemplos de elementos em linha:
<span>
<a>
Alterando como um elemento é exibido
Alterar um elemento inline para um elemento de bloco, ou vice-versa, pode ser útil para tornar a página
procurar uma maneira específica, e ainda seguem os padrões web.

PAG. 52
O exemplo a seguir exibe os itens da lista como elementos inline:
Exemplo
li {display: inline;}
O exemplo a seguir exibe span elementos como elementos de bloco:
Exemplo
span {display: block;}
Nota: Alterar o tipo de um elemento de exibição altera apenas a forma como o elemento é exibido, não o
tipo de elemento que é. Por exemplo: Um elemento inline definido para display: block não é permitido ter
um elemento de bloco aninhado dentro dele.
CSS Positioning
Posicionamento
As propriedades de posicionamento CSS permitem que posicione um elemento. Também pode colocar
um elemento atrás de outro, e especificar o que deve acontecer quando o conteúdo de um elemento é
muito grande.
Os elementos podem ser posicionados usando a parte superior, inferior, esquerdo e direito propriedades.
No entanto, essas propriedades não funcionarão a menos que a propriedade position seja definida em
primeiro lugar. Eles também funcionam de forma diferente, dependendo do método de posicionamento.
Existem quatro métodos de posicionamento diferentes.
Posicionamento estático
Elementos HTML estão posicionados estática por padrão. Um elemento posicionado estático está sempre
posicionado de acordo com o fluxo normal da página.
Elementos posicionados estáticos não são afetados por cima, em baixo, à esquerda, e as propriedades
certas.
Posicionamento fixo
Um elemento com posição fixa está posicionada em relação à janela do browser.
Isso não vai mudar, mesmo que a janela é rolada:
Exemplo
p.pos_fixed {
position: fixed;

PAG. 53
top: 30px;
direita: 5px;
}
Nota: IE7 e IE8 funciona se o valor fixo somente se especificar um DOCTYPE.
Elementos posicionados fixos são removidos do fluxo normal. O documento e outros elementos
comportam-se como o elemento posicionado fixo não existe.
Elementos posicionados fixos podem se sobrepor outros elementos.
Posicionamento Relativo
Um elemento em relação posicionado é posicionado em relação à sua posição normal.
Exemplo
h2.pos_left {
position: relative;
deixou:-20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
O teor de elementos relativamente posicionado pode ser movido e sobrepor outros elementos, mas o
espaço reservado para o elemento é ainda preservada no fluxo normal.
Exemplo
h2.pos_top {
position: relative;
top:-50px;
}
Elementos relativamente posicionados são frequentemente usados como blocos de recipiente para
elementos posicionados absolutamente.

PAG. 54
Posicionamento absoluto
Um elemento de posição absoluta é posicionado em relação ao primeiro elemento pai, que numa posição
diferente estática. Se nenhum elemento tal for encontrado, o bloco de conteúdo é <html>:
Exemplo
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Absolutamente posicionado elementos são removidos do fluxo normal. O documento e outros elementos
comportam-se como o elemento posicionado absolutamente não existe.
Elementos posicionados absolutamente podem se sobrepor outros elementos.
Elementos sobrepostos
Quando os elementos são colocados fora do fluxo normal, podem sobrepor-se outros elementos.
A propriedade z-índex especifica a ordem da pilha de um elemento (elemento que deve ser colocado na
frente de ou para trás, os outros).
Um elemento pode ter uma ordem de pilha positivo ou negativo:
Exemplo
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Um elemento com uma maior ordem da pilha está sempre em frente de um elemento de pilha com uma
ordem mais baixa.
Nota: Se dois elementos posicionados sobrepõem, num z-index especificado, o último elemento
posicionado no código HTML será mostrado no topo.
Propriedades CSS Positioning

PAG. 55
bottom Define a borda da margem inferior de uma
caixa posicionada
auto
length
%
inherit
2
clip Clipes um elemento absolutamente
posicionado
shape
auto
inherit
2
cursor Especifica o tipo de cursor para ser exibida url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left Define a borda da margem esquerda de
uma caixa posicionada
auto
length
%
inherit
2
overflow Especifica o que acontece se transborda
de conteúdo caixa de um elemento
auto
hidden
scroll
visible
inherit
2
position Especifica o tipo de posicionamento para
um elemento
absolute
fixed
relative
static
inherit
2

PAG. 56
right Define a borda margem direita de uma
caixa posicionada
auto
length
%
inherit
2
top Define a borda da margem superior de
uma caixa posicionada
auto
length
%
inherit
2
z-index Define a ordem de empilhamento de um
elemento
number
auto
inherit
2
CSS Float
Com CSS float, um elemento pode ser empurrado para a esquerda ou para a direita, permitindo que
outros elementos consigam se envolver em torno dele.
Float é muitas vezes usado para as imagens, mas também é útil quando se trabalha com layouts.
Como Elements Float
Elementos são flutuados na horizontal, isto significa que um elemento só pode ser lançado para a
esquerda ou para a direita, não para cima ou para baixo.
Um elemento flutuado vai passar tão longe para a esquerda ou direita, quanto ele poder. Normalmente,
isso significa que todo o caminho à esquerda ou à direita do elemento que contém.
Os elementos após o elemento flutuante irão fluir em torno dele.
Os elementos antes do elemento flutuante não será afetado.
Se uma imagem é lançada para a direita, a seguinte texto flui em torno dele, para a esquerda:
Exemplo
img {
float: right;
}
Elementos flutuantes próximos um do outro
Se colocar vários elementos flutuantes após o outro, eles irão flutuar próximas umas das outras, se
houver espaço.
Aqui fizemos uma galeria de imagens usando a propriedade float:

PAG. 57
Exemplo
.miniaturas {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
Desligar Float - Usando Limpar
Elementos após o elemento flutuante irão fluir em torno dele. Para evitar isso, use a propriedade clara.
A propriedade clear especifica que os lados de um elemento de outros elementos flutuantes não são
permitidos.
Adicionar uma linha de texto na galeria de imagens, utilizando a propriedade clear:
Exemplo
.text_line {
clear: both;
}
Propriedade CSS Float
Propriedades Descrição Valores CSS
clear Especifica que os lados de um elemento
onde outros elementos flutuantes não são
permitidos
left
right
both
none
inherit
1
float Especifica se ou não uma caixa deve
flutuar
left
right
none
inherit
1
CSS Horizontal Align
Alinhar Elementos de Bloco
Um elemento é um elemento de bloco, que ocupa toda a largura disponível e num intervalo de linha antes
e depois.

PAG. 58
Exemplos de elementos de bloco:
<h1>
<p>
<div>
Neste capítulo vamos mostrar-lhe como alinhar horizontalmente elementos de bloco para fins de layout.
Centro Alinhando Utilizando a margem de Propriedade
Elementos de bloco podem ser alinhados por definir as margens esquerda e direita para "auto".
Nota: A utilização margin: auto não funciona no IE8 e anteriores, a menos que um DOCTYPE seja
declarada!
Definir as margens esquerda e direita para auto especifica que eles devem dividir a margem disponível de
forma igual. O resultado é um elemento centrado:
Exemplo
.centro {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: # B0E0E6;
}
Dica: Alinhamento não tem efeito se a largura é de 100%.
Esquerda e Direita Alinhamento Usando a posição de propriedade
Um método de elementos de alinhamento é o de utilizar o posicionamento absoluto:
Exemplo
.direito {
position: absolute;
direita: 0px;
width: 300px;
}
Nota: elementos posicionados absolutos são removidos do fluxo normal, e pode sobrepor elementos.

PAG. 59
Problemas de compatibilidade crossbrowser
Ao alinhar elementos como este, é sempre uma boa ideia para predefinir margin e padding para o
elemento <body>. Isso é para evitar diferenças visuais em diferentes browsers.
Quando a declaração DOCTYPE está a faltar, nas versões IE8 e anteriores irá adicionar uma margem de
17px no lado direito. Este parece ser o espaço reservado para a barra de rolagem. Sempre defina a
declaração DOCTYPE ao usar a propriedade position:
Exemplo
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
}
.direito {
position: absolute;
direita: 0px;
width: 300px;
}
Esquerda e Direita Alinhamento Uso da propriedade float
Um método de elementos de alinhamento é o de utilizar a propriedade float:
Exemplo
.direito {
float: right;
width: 300px;
}

PAG. 60
Problemas de compatibilidade crossbrowser
Ao alinhar elementos como este, é sempre uma boa idéia para predefinir margin e padding para o
elemento <body>. Isso é para evitar diferenças visuais em diferentes browsers.
Quando a declaração DOCTYPE está a faltar, nas versões IE8 e anteriores irá adicionar uma margem de
17px no lado direito. Este parece ser o espaço reservado para a barra de rolagem. Sempre defina a
declaração DOCTYPE ao usar a propriedade float:
Exemplo
body {
margin: 0;
padding: 0;
}
.direito {
float: right;
width: 300px;
}
CSS Pseudo-classes
CSS pseudo-classes são usados para adicionar efeitos especiais a alguns seletores.
Sintaxe
A sintaxe de pseudo-classes:
seletor: pseudo-classe {propriedade: valor;}
CSS classes podem também ser usadas com pseudo-classes:
selector.class: pseudo-classe {propriedade: valor;}
Pseudo-classes Anchor
Os links podem ser exibidos de diferentes maneiras num navegador CSS-sustentável:
Exemplo
a: link {color: # FF0000;} / * link não visitado * /
a: visited {color: # 00FF00;} / * link visitado * /
a: hover {color: # FF00FF;} / * mouse sobre o link * /
a: active {color: # 0000FF;} / * link selecionado * /

PAG. 61
Nota: a: hover deve vir depois de a: link e a: visited na definição CSS, para ser eficaz!
Nota: a: active deve vir depois de a: hover na definição CSS, para ser eficaz!
Nota: Os nomes de pseudo-classe não são case-sensitive.
Pseudo-classes e classes CSS
Pseudo-classes podem ser combinadas com classes CSS:
a.red: visited {color: # FF0000;}
<a class="red" href="css_syntax.asp"> Sintaxe CSS </ a>
Se o link no exemplo acima foi visto, ele será exibido em vermelho.
CSS - A: pseudo-classe first-child
A: primeira criança pseudo-classe corresponde a um elemento específico que é o primeiro filho de outro
elemento.
Nota: Para: primeira criança a trabalhar no IE8 e anteriores, deve ser declarada <DOCTYPE>.
Combinar o primeiro elemento <p>
No exemplo a seguir, o selector corresponde a qualquer elemento <p> que é o primeiro filho de qualquer
elemento:
Exemplo
<html>
<head>
<style>
p: first-child {
color: blue;
}
</style>
</head>
<body>
<p> Eu sou um homem forte. </ p>
<p> Eu sou um homem forte. </ p>
</body>
</html>

PAG. 62
Combinar o primeiro elemento <i> em todos os elementos <p>
No exemplo a seguir, o selector coincide com o primeiro elemento <i> em todos os elementos <p>:
Exemplo
<html>
<head>
<style>
p> i: first-child {
color: blue;
}
</style>
</head>
<body>
<p> Eu sou um <i> forte </ i> homem. Eu sou um forte <i> </ i> homem. </ P>
</body>
</html>
Combinar todos os elementos <i> em todos os elementos <p> primeira criança
No exemplo a seguir, o selector corresponde a todos os elementos <i> elementos <p> que são o primeiro
filho de outro elemento:
Exemplo
<html>
<head>
<style>
p: first-child I {
color: blue;
}
</style>
</head>
<body>

PAG. 63
</body>
</html>
Propriedades CSS Pseudo Classes/Elements
Selector Exemplo Descrição exemplo
:link a:link Seleciona todos os links não visitados
:visited a:visited Seleciona todos os links visitados
:active a:active Seleciona o link ativo
:hover a:hover Seleciona links do mouse sobre
:focus input:focus Seleciona o elemento de entrada que tem o foco
:first-letter p:first-letter Seleciona a primeira letra de cada elemento <p>
:first-line p:first-line Seleciona a primeira linha de cada elemento <p>
:first-child p:first-child Seleciona a cada <p> elementos que é o primeiro filho de seu
pai
:before p:before Inserir o conteúdo antes de cada elemento <p>
:after p:after Inserir conteúdo depois de cada elemento <p>
CSS Pseudo-elements
CSS pseudo-elementos são usados para adicionar efeitos especiais a alguns seletores.
Sintaxe
A sintaxe de pseudo-elementos:
seletor: pseudo-elemento {propriedade: valor;}
CSS classes pode também ser usado com pseudo-elementos:

PAG. 64
selector.class: pseudo-elemento {propriedade: valor;}
A: first-line Pseudo-elemento
A "first-line" pseudo-elemento é usado para adicionar um estilo especial para a primeira linha de um texto.
No exemplo a seguir formata o navegador a primeira linha de texto num elemento p de acordo com o
estilo do "first-line" pseudo-elemento (onde o navegador quebra a linha, depende do tamanho da janela
do navegador):
Exemplo
p: first-line {
color: # ff0000;
font-variant: small-caps;
}
Nota: A "first-line" pseudo-elemento só pode ser usado com elementos de bloco.
Nota: As propriedades a seguir se aplicam à "first-line" pseudo-elemento:
 font properties
 color properties
 background properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
A: first-letter Pseudo-elemento
A “ first-letter “ pseudo-elemento é usada para adicionar um estilo especial para a primeira letra de um
texto:
Exemplo
p: first-letter {
color: # ff0000;
font-size: xx-large;
}
Nota: A “ first-letter “ pseudo-elemento só pode ser usada com elementos de bloco.
Nota: As seguintes propriedades se aplicam ao "first-letter" pseudo-elemento:

HTML e CSS guia completo

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (12)

Semelhante a HTML e CSS guia completo

Semelhante a HTML e CSS guia completo (20)

HTML e CSS guia completo