HTML & CSS

2

NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 3
A srie............................................................................................................. 3
01 META TAGS ......................................................................................................................... 4
keywords ......................................................................................................... 4
description ...................................................................................................... 4
robots .............................................................................................................. 5
content-language ............................................................................................ 6
content-type .................................................................................................... 6
author ............................................................................................................. 6
reply-to ............................................................................................................ 6
generator ........................................................................................................ 6
refresh............................................................................................................. 7
02 - FAVICON ............................................................................................................................... 7
03 OPES DA TAG MAILTO ................................................................................................. 9
04 BULLETS COM IMAGEM ................................................................................................... 10
05 POSICIONAMENTO 3D ...................................................................................................... 11
06 CSS PARA MIDIAS DIFERENTES .................................................................................... 14
07 POSICIONANDO OBJETOS NO MEIO DA TELA............................................................. 16
08 TABLELESS ....................................................................................................................... 19
9 ESTILIZANDO ABREVIATURAS E ACRNIMOS .............................................................. 32
Tipos de abreviao ..................................................................................... 33
Abreviaes .................................................................................................. 33
Inicialismos ................................................................................................... 33
Contraes ................................................................................................... 34
10 CSS HACKS ....................................................................................................................... 37
CONCLUSO ............................................................................................................................. 38

3

INTRODUO
Atualmente muito comum encontrar material que ensine a utilizar um software
em seu computador, basta apenas dedicao e voc passa a conhecer sua
interface, seus botes e menus.
Alguns materiais como os do Apostilando.com casam a explicao com
exemplos reais. Mas para quem est comeando muitas vezes isso
insuficiente.
Ento ns do Apostilando.com, criamos uma srie chamada TRUQUES
MGICOS. A composio da srie ser de apostilas para voc que j baixou
nossas apostilas e precisa exercitar a criatividade.
Cada material da srie trar dentro de um determinado software dicas e
exemplos de uso do software, reforando assim seu aprendizado sobre ele e
despertando sua criatividade. Obrigado e tenha um bom curso.
A srie
A srie em sua primeira edio abordar exemplos para os seguintes
softwares:
Adobe Photoshop;
Adobe Flash
Adobe Dreamweaver
PHP
Microsoft Word
Microsoft Excel
Adobe Photoshop WEB
Corel Draw
HTML & CSS
Javascript
Fireworks
Excel Avanado

Para que voc possa aproveitar as explicaes desta apostila necessrio um
4
conhecimento bsico em HTML, caso ainda no o tenha, baixe uma das
apostilas disponveis em nosso site.
01 META TAGS
Praticamente todo editor de HTML as possui e os visuais j a incluem nos
cdigos, mas ainda comum, principalmente em sites que no se atualizam a
falta de META TAGS.
Meta tags so linhas de cdigo HTML ou "etiquetas" que, entre outras coisas,
descrevem o contedo do seu site para os buscadores. nelas que voc vai
inserir as palavras-chave que facilitaro a vida do usurio na hora de te
encontrar, por exemplo. Por meio delas, voc pode tambm "assinar" seu site,
declarando sua autoria sobre o cdigo fonte.
As meta tags devem ser includas no seu cdigo HTML, dentro da tag <head>,
como mostra o exemplo a seguir:

<html>
<head>
<title> Aprendendo sobre as meta tags </title>
<meta name="author" content="Marcos Paulo Furlan">
<meta name="description" content="Meta Tags descrio de seu site">
<meta name="keywords" content="palvras, chave,">
</head>
Vamos entender as principais.
keywords
Nesta tag voc deve incluir uma quantidade de palavras que se referem ao
contedo da pgina. Se no utilizar as mesmas palavras, tente utilizar
sinnimo. Nunca quebre uma linha de palavras-chave, porque seu trecho de
cdigo ser considerado um erro e ser ignorado. Sempre separe as palavras
com vrgula e declare todas elas em letras minsculas - alguns buscadores tm
problemas com letras maisculas e podem ignorar seu site.
description
Uma ou duas frases que o buscador apresentar como um resumo do
5
contedo do seu site.
robots
A funo desta informar aos buscadores se devem indexar sua pgina ou
no.
Quando voc utiliza pop-ups ou iframes para mostrar o contedo do seu site,
por exemplo, no interessante que o buscador indexe essas pginas.
Tambm pode ser interessante no indexar seu site quando o contedo
restrito a um grupo de pessoas.
Os valores possveis para esta tag so:

<meta name="robots" content="index,follow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="noarchive">

Aqui, os valores "index" e "noindex" se referem ao tratamento da pgina inicial:
se o buscador deve ou no inclu-la nos resultados, respectivamente.
J os valores "follow" e "nofollow" se referem aos links da pgina inicial, se eles
devem ser visitados e indexados ou no.
Se voc quiser que apenas o Google no encontre seu site ou se quiser
remover uma pgina dos seus resultados de busca a partir da prxima
varredura, pode utilizar a seguinte tag:

<meta name="googlebot" content="noindex,nofollow">

A maioria dos buscadores armazena uma cpia da sua pgina em cache, para
otimizar a busca. Para evitar isso, voc pode utilizar a tag a seguir:

<meta name="robots" content="noarchive">

Todavia, lembre-se que alm de acelerar a busca, armazenar uma cpia em
6
cache tem a finalidade de disponibilizar o resultado ao usurio caso seu site
esteja passando por algum problema tcnico. Use esta tag somente se o
contedo do seu site for muito especfico quanto a essa necessidade.
content-language
Especifica a lngua primria da pgina. til para ajudar o buscador a classificar
seu site no idioma apropriado, orientar os navegadores a exibir acentuao e
caracteres especiais corretamente, e para facilitar o uso de corretores
ortogrficos.
<meta http-equiv="content-language" content="pt-br">
content-type
Especifica o tipo de contedo da pgina e o conjunto de caracteres que ele
usa. recomendvel utilizar esta meta tag em todas as pginas do seu site,
porque ela garante que os navegadores iro tratar seu documento da maneira
mais apropriada, especialmente quando voc utiliza formulrios para enviar
informaes entre pginas. Para quem desenvolve pginas em idiomas
orientais, utilizar o conjunto de caracteres apropriados fundamental para que
eles sejam exibidos corretamente.
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
author
Por meio das meta tags, voc tambm pode declarar sua autoria sobre a
pgina, "assinando" seu cdigo fonte.
<META NAME="author" CONTENT="Marcos Paulo Furlan">
reply-to
Especifica um endereo de e-mail para entrar em contato com o responsvel
pelo site.
<meta name="reply-to" content="erikasarti@infowester.com">
generator
Alguma vez voc j reparou que quando edita uma pgina HTML feita no
Dreamweaver, muitas vezes o programa que a gerou que abre para edio, e
no o Bloco de Notas ou seu editor no-visual padro? Isso por causa da
7
meta tag generator, que especifica o programa que construiu a pgina:

<meta name="generator" content="Adobe Dreamweaver">
refresh
<meta http-equiv="refresh" content="5;url=http://www.apostilando.com/">
Ou seja, depois de 5 segundos, o navegador ser redirecionado para o
endereo www.apostilando.com.
Essa mesma tag utilizada para atualizar automaticamente uma pgina
dinmica, como a home page de um portal ou a sesso de notcias de um site,
por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem
maior e a URL deve ser o endereo do prprio site a ser atualizado.
<meta http-equiv="refresh" content="120;url=http://www.apostilando.com/">

02 - FAVICON
Favicon nada mais do que ter uma imagem personalizada de seu site na
barra de endereos.


Sua principal funo est relacionada usabilidade: elementos visuais so
sempre mais fceis de serem lembrados, e isso destaca um site no meio de
outros, facilitando a navegao do usurio. Por isso, ele sempre gerado a
partir da simplificao do logotipo ou da marca do site.
Mesmo tendo uma funo to importante, seu uso muito simples: depois de
criado, o favicon inserido no cdigo HTML da pgina atravs da seguinte tag:

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Note que favicon.ico o nome do arquivo com o cone. importante utilizar
sempre essa denominao, assim como recomendvel salvar o arquivo no
diretrio principal (raiz) de seu site. Vale frisar tambm que a instruo acima
8
deve ficar dentro das tags <head></head>.

Praticamente todos os navegadores que esto hoje em dia no mercado tm
suporte a esse recurso. Apesar de a maioria aceitar uma imagem PNG ou GIF
como favicon, o mais seguro mesmo converter essa imagem em um cone,
ou seja, em um arquivo com a extenso .ico e com at 16x16 pixels de
tamanho, que pode conservar a transparncia da imagem original, e ainda sim
ser compatvel como qualquer browser. Porm, se o navegador no tiver
suporte a favicons, ele ir simplesmente ignorar a tag e a imagem no ser
exibida.
Ferramentas para criar seu cone
(http://www.favicon.cc/)

(http://www.dagondesign.com/tools/favicon-generator-tool/)

Alm de programas que podem ser instalados em seu computador para a
criao de seus favicon.
9


03 OPES DA TAG MAILTO
Ao se criar um simples link de e-mail comum usar o
mailto:email@provedor.com.br, mas podemos acrescentar diversas outras
funcionalidades a TAG, vamos conhecer alguma delas.

<a href="mailto:email@provedor.com.br?subject=Assunto da
Mensagem">email@provedor.com.br</a>, permite adicionar contedo ao
campo assunto da mensagem.

<a href="mailto:email1@provedor.com.br,email2@provedor.com.br">, permite
adicionar o e-mail a mais de um endereo.

<a href="mailto:email1@provedor.com.br?cc=email2@provedor.com.br">,
permite enviar um e-mail com cpia a outro destinatrio.

<a href="mailto:email1@provedor.com.br?bcc=email2@provedor.com.br">,
permite enviar um e-mail com cpia oculta.

10
04 BULLETS COM IMAGEM
O uso de marcadores simples, basta digitar o texto e usar as TAGS UL e OL
para definir o tipo de lista e LI para cada elemento. Mas e quando a idia usar
imagens. Como proceder.
Vamos aprender como criar listas com imagens.
Monte a seguinte lista
<body>
<ul type='square'> <li>VW:
<ul type='circle'>
<li>Gol
<li>Jeta
<li>Kombi
</ul>
<li>GM:
<ul type='disc'>
<li>Corsa
<li>Vectra
<li>Malibu
</ul> </ul>
</body>
Visualmente ficar:

Vamos agora definir por CSS que as TAGS UL chamem uma imagem e que as
TAGS LI chamem outra imagem.
11
O cdigo:
<body>
<ul style='list-style:url(http://www.multimidiaearte.com/imagens/213.gif)'>
<li>VW:
<ul type='circle'>
<li style='list-style:url(http://www.multimidiaearte.com/imagens/215.gif)'>Gol
<li style='list-style:url(http://www.multimidiaearte.com/imagens/215.gif)'>Jeta
<li style='list-style:url(http://www.multimidiaearte.com/imagens/215.gif)'>Kombi
</ul>
<li>GM:
<ul type='disc'>
<li style='list-style:url(http://www.multimidiaearte.com/imagens/215.gif)'>Corsa
<li style='list-style:url(http://www.multimidiaearte.com/imagens/215.gif)'>Vectra
<li style='list-style:url(http://www.multimidiaearte.com/imagens/215.gif)'>Malibu
</ul> </ul>
</body>

Caso queira uma lista sem nenhum marcador use: <ul style="list-style:none;">.
05 POSICIONAMENTO 3D

Apesar da rea da tela ser bidimensional, os elementos que so posicionados
podem receber uma terceira dimenso: uma ordem de empilhamento na qual
um elemento se relaciona ao outro.
Os elementos posicionados recebem nmeros automticos de empilhamento, a
12
partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema
chamado de ndice Z. O nmero de ndice Z de um elemento um valor que
mostra sua relao 3D com os outros elementos da janela.
Para definir o ndice Z de um elemento, primeiro defina o posicionamento (ex:
absolute) depois z-index:n;.
Exemplo:
<title>Posicionamento3D</title>
<style type="text/css">
<!--
BODY{font-family:Arial;font-size:11pt;background-
color:yellow;color:black;}
.titulo1{position:absolute;top:20px;left:20px;z-index:1;font-family:Arial
Black;
color:navy;font-size:28pt;}
.titulo2{position:absolute;top:17px;left:17px;z-index:2;font-family:Arial
Black;
color:blue;font-size:28pt;}
.titulo3{position:absolute;top:14px;left:14px;z-index:3;font-family:Arial
Black;
color:cyan;font-size:28pt;}
.box2{
position:absolute;
top:185px;
left:60px;
z-index:2;
width:100px;
font-family:Times;
background-color:blue;
color:white;
font-size:10pt;
font-style:italic;
font-weight:bold;
13
padding:15;

}
.box3{
position:absolute;
top:90px;
left:150px;
z-index:3;
width:150px;
font-family:Courier New;
background-color:navy;
color:white;
font-size:13pt;
font-style:italic;
font-weight:bold;
padding:15;
text-align:center;

}
B{color:yellow;font-size:16pt;}
a{color:yellow;text-decoration:none;}
a:visited{color:white;background-color:black;}
-->
</style>
</head>
<body>
<Span class="titulo1">Posicionamento 3D</Span>
<Span class="titulo2">Posicionamento 3D</Span>
<Span class="titulo3">Posicionamento 3D</Span>
</span>
<div class="box2">Nesta folha de estilo forma utilizados posicionamento,
IDS e classes e utilizamos o Span que chama as IDS e as classes</div>
14
<div class="box3">Para saber mais sobre folhas de estilo acesse o site
da <a href="http://www.w3.org/TR/REC-CSS2">W3</a> onde voc poder
at mesmo conseguir alguns
exemplos.</div>
</body>
</html>


06 CSS PARA MIDIAS DIFERENTES
Quando a maioria das pessoas pensa em pginas WEB, pensa nessas pginas
exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das pessoas
podem precisar imprimir pelo menos algumas pginas da WEB. O que parece
bem na tela nem sempre bom quando impresso.
A CSS permite dizer ao browser para usar folhas de estilo diferentes
dependendo da pgina da WEB se destinar ao monitor do computador ou a
impressora.
Crie duas folhas de estilo (arquivos.css), uma otimizada para o uso em uma
tela de computador e outra adaptada para a impresso. Veja os cdigos
15
abaixo:
CSS para Tela:
body{
color:white;
font-family:Arial;
background:black url(images/backarvore.jpg) no-repeat;}
h1,h2{
font-weight:bold;}
.cassea{
color:#999999;}

CSS para Impresso:
body{
color:black;
font-family:Arial;
h1,h2{
font-weight:bold;}
.cassea{
color:#999999;}

Cdigo no HTML:
<html>
<head>
<title>Midias Diferentes</title>
<link rel="stylesheet" href="tela.css" media="screen">
<link rel="stylesheet" href="impressao.css" media="print">
</head>
<body>
<h1> Mdia de tela </h1>
<br>
<span class="classea">O que pode ser visto na tela ser diferente na
impresso</span>
16
<hr>
<h2>Teste</h2>
</body>
</html>

Um problema que voc encontrar ao tentar imprimir um site da WEB so as
quebras de pgina. Na verdade, uma pgina da WEB pode conter diversas
pginas impressas. Assim sendo, o cabealho de uma seo pode aparecer
na parte inferior de uma pgina e seu texto na parte superior da prxima
pgina.
Podemos forar uma quebra de pgina ao imprimir uma pgina da WEB, para
isso utilize: < TAG style=page-break-before:always;>....</TAG>
Onde Always: Fora a quebra de pgina antes do elemento. Auto: permite que
o browser coloque as quebras de pgina.
07 POSICIONANDO OBJETOS NO MEIO DA TELA
Vamos aprender a tcnica CSS para posicionar um objeto ou uma pgina no
meio da tela do monitor do usurio, ou seja, centrar na horizontal e na vertical,
independente da resoluo usada.
O cdigo para a minha imagem:

<body>
<img src="css.jpg" width="259" height="194" alt="posicionamento" />
</body>

Vamos a seguir atribuir uma id para a imagem e estilizar o posicionamento da
id. Escolhi o nome centralpos para a id da imagem
Adicione o ID ao cdigo de sua imagem.
<img src="css.jpg" width="259" height="194" alt="posicionamento"
id="centralpos" />
A propriedade CSS que possibilita posicionar um elemento a propriedade
position complementada pelas propriedades left e top e que ao assumir o valor
absolute, controla a posio do elemento tomando como origem do sistema de
17
coordenadas o canto superior esquerdo.
Observe as regras CSS para posicionar com left e top (superior e esquerdo):

position: absolute;/* posiciona em
relao um canto superior esquerdo da tela */
left: 100px; /* posiciona a 100px para a esquerda */
top: 80px; /* posiciona a 80px para baixo */

Qualquer unidade de medida CSS pode ser usada para posicionar, inclusive
medidas relativas como so aquelas expressas em porcentagens.
Assim vlido declarar:

position: absolute;
left: 50%;
top: 50%

Com a dica acima j possvel que o elemento que receber este atributo ficar
no meio da tela? No pois a imagem tambm mapeada pelos cantos superior
esquerdo. Precisamos ento definir nas propriedades da imagem esta
diferena.
Para que o CENTRO da figura ocupe o meio da tela basta arrastar a
figura para a esquerda e para cima de um valor igual a:
para a esquerda: metade da largura da figura;
para cima: metade da altura da figura.
A figura um retngulo de 259 x 97 e os valores para arrastar so:
para a esquerda: 259px/2 = 129,5px;
para cima: 194/2 = 97px.

A propriedade CSS que determina o afastamento em volta dos elementos
margin.
Como a figura deve ser arrastada para a esquerda basta declarar uma margin-
left negativa! E o arrastar para cima consegue-se com uma margin-top
18
negativa.
Nosso cdigo fica da seguinte forma:

<title>Posicionamento</title>
<style type="text/css">
#centralpos {
position:absolute;
left:50%;
top:50%;
margin-left:-129.5px;
margin-top:-97px;

}
</style>

</head>

<body>
<img src="css.jpg" width="259" height="194" alt="posicionamento"
id="centralpos" />
</body>
19

08 TABLELESS
Nos primrdios da Internet os sites eram montados em seqncia,depois
vieram os Frames, tabelas, e atualmente a melhor e mais correta de se montar
um site utilizando camadas ou como so chamadas Tableless.
Como apoio vou usar o Dreamweaver.
Em layouts tableless e no mundo dos padres da web, a escolha do Doctype
correto fundamental, uma vez que cada um deles tem sua finalidade e
diferenas no modo de renderizao do browser ao seu layout.
Clique em File New e escolha XHTML 1,1
20

Clique na ABA Layout e escolha Insert DIV Tag.

Preencha da seguinte forma.

No ponto de insero = a tag div ser criada onde o curso estiver localizado
no cdigo fonte da pgina. Quando criamos uma pgina, ele se posiciona logo
aps a abertura da tag body.
21

ID: tudo = O nome, ou o identificador da tag criada. Esse atributo ID muito
importante e com ele cada tag difere-se uma da outra, uma vez que no pode
haver dois elementos com o mesmo ID.

Vamos inserir mais algumas DIVS.
Sempre que inserir uma tag div por esse recurso, alterne para o mode
Code View para voc ver a posio do cursor e desta forma conscientizar seu
racioncnio.

22

Para nossa prxima DIV configure:

Depois a DIV lateral

E finalmente a DIV rodap
23

Visualize pelo cdigo e verifique se as DIVS esto dentro da DIV tudo.

Vamos agora ao CSS.
Inicie um arquivo de folha de estilo.
24


Volte ao seu arquivo tableless e pelo painel CSS, vamos anexar o arquivo
CSS.

25


Pelo painel CSS clique no boto de nova regra CSS.

Vamos inicialmente aplicar a regra a toda a pgina, por essa razo vamos
trabalhar na TAG Body.
26

Defina as suas configuraes e clique em OK.

Agora vamos definir as propriedades de nossa DIV topo. Clique sobre a DIV e
depois no boto Nova Regra CSS.
27

Defina.

Informamos que ela ter um padding - espaamento entre a borda e contedo -
de 5px em todos os lados - em cima, direita, em baixo, esquerda.
28
Agora, vamos definir como ser a estrutura do nosso menu presente no topo.


29

Informamos que as tags li ficaro dispostas de forma inline, com isso teremos o
efeito de uma menu na horizontal e excluremos os "bullets" - Type: none
Para o contedo.

30

Lateral.

31

E o rodap

32

Vamos agora acrescentar os elemento de nosso layout.
Acrescentei tambm cores para melhor visualizar o contedo.

9 ESTILIZANDO ABREVIATURAS E ACRNIMOS
Estes elementos so usados para dar significado adicional a um contedo web.
Marca-se o contedo com um destes dois elementos e acrescenta-se o atributo
title contendo a informao adicional sobre o contedo.
33
Por exemplo:
<abbr title="associao">assoc.</abbr>
Em tese dois grupos de usurios sero beneficiados com o uso de marcao
com os elementos <abbr> ou <acronym>:
Usurios com tecnologias assistivas tais como leitores de tela e dispositivos
Braille - embora tenha sido demonstrado que vrios usurios destas
tecnologias no tenham acesso ao atributo title.
Usurios com viso normal que no sabem qual o significado de uma
abreviao ou de um acrnimo.
Tipos de abreviao
A palavra "abreviao" (NT: ou seu sinnimo abreviatura) vem do latim
abbreviare (encurtar) que relacionado a brevi (pequeno). Embora algumas
pessoas discordem, todos os mtodos de encurtar palavras ou frases so
subconjuntos de abreviao.
Alguns destes subconjuntos:

Inicialismos
Contraes
Acrnimos


Abreviaes
Define-se assim: Uma forma encurtada de escrever uma palavra ou frase,
usada com o objetivo de abreviar um todo e que consiste no uso da primeira
letra ou de umas poucas letras iniciais seguida por um ponto.
Exemplos:
assoc. uma abreviao para associao
<abbr title="associao">assoc.</abbr>
Inicialismos
Define-se assim: Uma abreviao formada pelas letras iniciais das palavras
constituintes e lida pronunciando-se o nome das letras individualmente. Esta
34
definio consta de muitos dicionrios, mas no unnime. O primeiro registro
de definio para a palavra inicialismo encontrado no Oxford English
Dictionary (OED) datado de 1899.
EUA um inicialismo para Estados Unidos da Amrica
IE um inicialismo para Internet Explorer
CSS um inicialismo para Cascading Style Sheets
IRS um inicialismo para Internal Revenue Service

Uma vez que no existe um elemento (X)HTML "inicialismo", para estes casos
devemos usar o elemento abbr.
<abbr title="Cascading Style Sheets">CSS</abbr>

Contraes
Existem duas formas de contrao.
Forma encurtada de uma palavra terminando com a ltima letra da palavra.
Maneira encurtada de escrever duas palavras juntando-as em uma s
separadas por sinal de apstrofe (') e omitindo-se algumas letras das palavras
constituintes.
Ave uma contrao para Avenue (tipo 1)
can't uma contrao para cannot (tipo 2)
won't uma contrao para will not (tipo 2)

No existe um elemento (X)HTML "contrao". Contudo muito pouco
provvel que algum queira marcar uma contrao em um documento.

Acrnimos, uma vez que so palavras encurtadas constituem um subconjunto
de abreviao. Contudo eles so mais especficos que as abreviaes. Define-
se acrnimo como: Uma PALAVRA formada pelas letras iniciais das palavras
constituintes. O importante aqui destacar que um acrnimo deve ser uma
PALAVRA - isto significa que a juno das letras iniciais deve ser tal que se
possa pronunciar.

35
OTAN um acrnimo para Organizao do Tratado Atlntico Norte
PAM um acrnimo para Posto de Assistncia Mdica
Modem um acrnimo para Modulator-Demodulator
Exemplo de marcao:

<acronym title="Radio Detecting And Ranging">radar</acronym>

No confundir o elemento <abbr> com o atributo abbrPode haver confuso no
uso de ABBR uma vez que tanto um elemento HTML como um atributo. O
mais importante que eles tm finalidades completamente diferentes.

O elemento abbr usado juntamente com o atributo title para fornecer
informao adicional sobre abreviaes, inicialismos e contraes
Por exemplo:

<abbr title="associao">assoc.</abbr>

O atributo abbr usado para fornecer uma breve informao para tecnologias
assistivas tais como leitores de tela quando estiverem "lendo" contedos
tabulares.
Por exemplo:

<th abbr="caminho">Caminho para transporte pesado</th>

Estilizando os elementos <abbr> e <acronym>Os elementos <abbr> e
<acronym> em geral so estilizados por padro com um sublinhado pontilhado
ao contrrio do sublinhado slido usado para hiperlinks. Este sublinhado alerta
o usurio que ali h uma informao motivando-o a interagir com a marcao e
tambm que no se trata de um hiperlink.

O efeito de sublinhado pontilhado pode ser obtido com regras de estilo
conforme mostrado abaixo:
36

abbr, acronym
{
border-bottom: .1em dotted;
}

Por que usar ems no lugar de pixels para a espessura da borda? Especificar
um valor usando ems faz com que a espessura da borda acompanhe o
tamanho da fonte no importando quo grande ou pequena a fonte seja.

Por que no foi definida uma cor para a borda? A propriedade border-bottom
permite definir trs valores de uma s vez. Estes valores referem-se a:

border-width
border-style
border-color
Cada um dos trs tem um "valor inicial" - um valor que ser aplicado pelo
navegador caso no tenha sido definido pelo autor. Os valores iniciais so:

border-width tem um valor inicial igual a "medium"
border-style tem um valor inicial igual a "none"
border-color tem um valor inicial igual ao valor da propriedade 'color'
Se no for definida uma cor para a borda, o valor inicial ser usado. Para
border-color o valor inicial "o mesmo valor da propriedade 'color'". Isto
significa que se no for especificada a cor da borda ela ter a mesma cor do
texto.

Se a cor do texto mudar em algumas reas do site ou mesmo em toda uma
pgina, deixando a cor de border-bottom sem definio, far a cor de a borda
variar juntamente com a cor do texto evitando se ter que alterar as regras de
estilo sempre que a cor do contedo mude.

37
Alterando o cursor voc pode facilitar as coisas para os usurios, mudando o
estilo do cursor quando o ponteiro do mouse passar sobre uma abreviao ou
acrnimo usando a seguinte regra de estilo:

abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}

10 CSS HACKS
CSS hack quando o programador manipula os cdigos CSS, de maneira que
ele consiga adaptar o seu cdigo a diferentes tipos de navegadores, (Internet
Explorer, Firefox, Opera, Konqueror .) fazendo com que seu layout no tenha
problemas de visualizao do usurio final, como por exemplo, quebras de
linha ou de tabela etc.

Bom, mas o CSS hack no programado para ser interpretado pelos browsers
Netscape, Firefox, ou Internet Explorer para Mac, e sim para ser funcional ao
Internet Explorer para PCs (Personal computers).
Ento vamos a um exemplo:
* cdigo normal:
div {
width:500px;
}
No cdigo acima estamos setando que todos os <div> tero 500 pixels de
largura.
* cdigo alterado:
div {
width:500px;
_width:400px; */ a posio do hack SEMPRE ser aps a opo
CORRETA. */
38
}
J neste cdigo alterado, todos os navegadores vo interpretar o css da
mesma forma, ou seja, todos os <div> tero 500 pixels de largura, porm o
Internet Explorer para PCs interpretar a segunda opo, que no caso de
400 pixels. No se sabe qual o motivo pelo qual o IE interpreta o _ (underline)
na linha de cdigo e portanto seu layout ir funcionar perfeitamente em
qualquer browser.
CONCLUSO
Com isto finalizamos nossa apostila de Photoshop TRUQUES
MGICOS, se voc quer aprender mais sobre esta fantstica ferramenta e
quer aprender a us-la para projetos de criao de web sites conhea nosso
curso Webkit atravs do link: http://apostilando.com/pagina.php?cod=30.