HTML & CSS

ÍNDICE
ÍNDICE .......................................................................................................................................... 2
INTRODUÇÃO .............................................................................................................................. 3
A série............................................................................................................. 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 – OPÇÕES 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 ACRÔNIMOS .............................................................. 32
Tipos de abreviação ..................................................................................... 33
Abreviações .................................................................................................. 33
Inicialismos ................................................................................................... 33
Contrações ................................................................................................... 34
10 – CSS HACKS ....................................................................................................................... 37
CONCLUSÃO ............................................................................................................................. 38

2
INTRODUÇÃO
Atualmente é muito comum encontrar material que ensine a utilizar um software
em seu computador, basta apenas dedicação e você passa a conhecer sua
interface, seus botões e menus.
Alguns materiais como os do Apostilando.com “casam” a explicação com
exemplos reais. Mas para quem está começando muitas vezes isso é
insuficiente.
Então nós do Apostilando.com, criamos uma série chamada TRUQUES
MÁGICOS. A composição da série será de apostilas para você que já baixou
nossas apostilas e precisa exercitar a criatividade.
Cada material da série trará dentro de um determinado software dicas e
exemplos de uso do software, reforçando assim seu aprendizado sobre ele e
despertando sua criatividade. Obrigado e tenha um bom curso.

A série
A série em sua primeira edição 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 Avançado

Para que você possa aproveitar as explicações desta apostila é necessário um

3
conhecimento básico em HTML, caso ainda não o tenha, baixe uma das
apostilas disponíveis em nosso site.

01 – META TAGS
Praticamente todo editor de HTML as possui e os visuais já a incluem nos
códigos, mas ainda é comum, principalmente em sites que não se atualizam a
falta de META TAGS.
Meta tags são linhas de código HTML ou "etiquetas" que, entre outras coisas,
descrevem o conteúdo do seu site para os buscadores. É nelas que você vai
inserir as palavras-chave que facilitarão a vida do usuário na hora de te
encontrar, por exemplo. Por meio delas, você pode também "assinar" seu site,
declarando sua autoria sobre o código fonte.
As meta tags devem ser incluídas no seu código 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 – descrição 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
conteúdo da página. Se não utilizar as mesmas palavras, tente utilizar
sinônimo. Nunca quebre uma linha de palavras-chave, porque seu trecho de
código será considerado um erro e será ignorado. Sempre separe as palavras
com vírgula e declare todas elas em letras minúsculas - alguns buscadores têm
problemas com letras maiúsculas e podem ignorar seu site.

description
Uma ou duas frases que o buscador apresentará como um resumo do

4
conteúdo do seu site.

robots
A função desta é informar aos buscadores se devem indexar sua página ou
não.
Quando você utiliza pop-ups ou iframes para mostrar o conteúdo do seu site,
por exemplo, não é interessante que o buscador indexe essas páginas.
Também pode ser interessante não indexar seu site quando o conteúdo é
restrito a um grupo de pessoas.
Os valores possíveis para esta tag são:

<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 página inicial:

se o buscador deve ou não incluí-la nos resultados, respectivamente.
Já os valores "follow" e "nofollow" se referem aos links da página inicial, se eles
devem ser visitados e indexados ou não.
Se você quiser que apenas o Google não encontre seu site ou se quiser
remover uma página dos seus resultados de busca a partir da próxima
varredura, pode utilizar a seguinte tag:

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

A maioria dos buscadores armazena uma cópia da sua página 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 além de acelerar a busca, armazenar uma cópia em

5
cache tem a finalidade de disponibilizar o resultado ao usuário caso seu site
esteja passando por algum problema técnico. Use esta tag somente se o
conteúdo do seu site for muito específico quanto a essa necessidade.

content-language
Especifica a língua primária da página. Útil para ajudar o buscador a classificar
seu site no idioma apropriado, orientar os navegadores a exibir acentuação e
caracteres especiais corretamente, e para facilitar o uso de corretores
ortográficos.
<meta http-equiv="content-language" content="pt-br">

content-type
Especifica o tipo de conteúdo da página e o conjunto de caracteres que ele
usa. É recomendável utilizar esta meta tag em todas as páginas do seu site,
porque ela garante que os navegadores irão tratar seu documento da maneira
mais apropriada, especialmente quando você utiliza formulários para enviar
informações entre páginas. Para quem desenvolve páginas 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ê também pode declarar sua autoria sobre a
página, "assinando" seu código fonte.
<META NAME="author" CONTENT="Marcos Paulo Furlan">

reply-to
Especifica um endereço de e-mail para entrar em contato com o responsável
pelo site.
<meta name="reply-to" content="erikasarti@infowester.com">

generator
Alguma vez você já reparou que quando edita uma página HTML feita no
Dreamweaver, muitas vezes é o programa que a gerou que abre para edição, e
não o Bloco de Notas ou seu editor não-visual padrão? Isso é por causa da

6
meta tag generator, que especifica o programa que construiu a página:

<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
endereço www.apostilando.com.
Essa mesma tag é utilizada para atualizar automaticamente uma página
dinâmica, como a home page de um portal ou a sessão de notícias de um site,
por exemplo. Neste caso, o intervalo de tempo em segundos deve ser bem
maior e a URL deve ser o endereço do próprio 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 endereços.

Sua principal função está relacionada à usabilidade: elementos visuais são

sempre mais fáceis de serem lembrados, e isso destaca um site no meio de
outros, facilitando a navegação do usuário. Por isso, ele é sempre gerado a
partir da simplificação do logotipo ou da marca do site.
Mesmo tendo uma função tão importante, seu uso é muito simples: depois de
criado, o favicon é inserido no código HTML da página através 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 denominação, assim como é recomendável salvar o arquivo no
diretório principal (raiz) de seu site. Vale frisar também que a instrução acima

7
deve ficar dentro das tags <head></head>.

Praticamente todos os navegadores que estão hoje em dia no mercado têm

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 extensão .ico e com até 16x16 pixels de
tamanho, que pode conservar a transparência da imagem original, e ainda sim
ser compatível como qualquer browser. Porém, se o navegador não tiver
suporte a favicons, ele irá simplesmente ignorar a tag e a imagem não será
exibida.
Ferramentas para criar seu ícone

(http://www.favicon.cc/)

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

Além de programas que podem ser instalados em seu computador para a

criação de seus favicon.

8
03 – OPÇÕES 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 conteúdo 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 endereço.

<a href="mailto:email1@provedor.com.br?cc=email2@provedor.com.br">,
permite enviar um e-mail com cópia a outro destinatário.

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

9
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 idéia é 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.

10
O código:
<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 são posicionados

podem receber uma terceira dimensão: uma ordem de empilhamento na qual
um elemento se relaciona ao outro.
Os elementos posicionados recebem números automáticos de empilhamento, a

11
partir do 0 (zero)incrementalmente com 1,2,3 e assim por diante. Esse sistema
é chamado de índice Z. O número de índice Z de um elemento é um valor que
mostra sua relação 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;

12
 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>

13
<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 páginas WEB, pensa nessas páginas
exibidas na tela. Entretanto, mais cedo ou mais tarde, a maioria das pessoas
podem precisar imprimir pelo menos algumas páginas 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 página 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 impressão. Veja os códigos

14
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 Impressão:

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

Código 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> Mídia de tela </h1>
<br>
<span class="classea">O que pode ser visto na tela será diferente na
impressão</span>

15
<hr>
<h2>Teste</h2>
</body>
</html>

Um problema que você encontrará ao tentar imprimir um site da WEB são as

quebras de página. Na verdade, uma página da WEB pode conter diversas
páginas impressas. Assim sendo, o cabeçalho de uma seção pode aparecer
na parte inferior de uma página e seu texto na parte superior da próxima
página.
Podemos forçar uma quebra de página ao imprimir uma página da WEB, para
isso utilize: < TAG style=”page-break-before:always;”>....</TAG>
Onde Always: Força a quebra de página antes do elemento. Auto: permite que
o browser coloque as quebras de página.

07 – POSICIONANDO OBJETOS NO MEIO DA TELA

Vamos aprender a técnica CSS para posicionar um objeto ou uma página no
meio da tela do monitor do usuário, ou seja, centrar na horizontal e na vertical,
independente da resolução usada.
O código 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 código 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 posição do elemento tomando como origem do sistema de

16
coordenadas o canto superior esquerdo.
Observe as regras CSS para posicionar com left e top (superior e esquerdo):

position: absolute;/* posiciona em

relação 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 são aquelas expressas em porcentagens.
Assim é válido declarar:

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

Com a dica acima já é possível que o elemento que receber este atributo ficará
no meio da tela? Não pois a imagem também é mapeada pelos cantos superior
esquerdo. Precisamos então definir nas propriedades da imagem esta
diferença.
 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 retângulo de 259 x 97 e os valores para arrastar são:
 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

17
negativa.
Nosso código 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>

18
08 – TABLELESS
Nos primórdios da Internet os sites eram montados em seqüência,depois
vieram os Frames, tabelas, e atualmente a melhor e mais correta de se montar
um site é utilizando camadas ou como são chamadas Tableless.
Como apoio vou usar o Dreamweaver.
Em layouts tableless e no mundo dos padrões da web, a escolha do Doctype
correto é fundamental, uma vez que cada um deles tem sua finalidade e
diferenças no modo de renderização do browser ao seu layout.
Clique em File New e escolha XHTML 1,1

19
Clique na ABA Layout e escolha Insert DIV Tag.

Preencha da seguinte forma.

No ponto de inserção = a tag div será criada onde o curso estiver localizado
no código fonte da página. Quando criamos uma página, ele se posiciona logo
após a abertura da tag body.

20
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 não 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 posição do cursor e desta forma conscientizar seu
racioncínio.

21
Para nossa próxima DIV configure:

Depois a DIV lateral

E finalmente a DIV rodapé

22
Visualize pelo código e verifique se as DIVS estão dentro da DIV tudo.

Vamos agora ao CSS.

Inicie um arquivo de folha de estilo.

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

24
Pelo painel CSS clique no botão de nova regra CSS.

Vamos inicialmente aplicar a regra a toda a página, por essa razão vamos
trabalhar na TAG Body.

25
Defina as suas configurações e clique em OK.

Agora vamos definir as propriedades de nossa DIV topo. Clique sobre a DIV e
depois no botão Nova Regra CSS.

26
Defina.

Informamos que ela terá um padding - espaçamento entre a borda e conteúdo -

de 5px em todos os lados - em cima, à direita, em baixo, à esquerda.

27
Agora, vamos definir como será a estrutura do nosso menu presente no topo.

28
Informamos que as tags li ficarão dispostas de forma inline, com isso teremos o
efeito de uma menu na horizontal e excluíremos os "bullets" - Type: none
Para o conteúdo.

29
Lateral.

30
E o rodapé

31
Vamos agora acrescentar os elemento de nosso layout.
Acrescentei também cores para melhor visualizar o conteúdo.

9 – ESTILIZANDO ABREVIATURAS E ACRÔNIMOS

Estes elementos são usados para dar significado adicional a um conteúdo web.
Marca-se o conteúdo com um destes dois elementos e acrescenta-se o atributo
title contendo a informação adicional sobre o conteúdo.

32
Por exemplo:
<abbr title="associação">assoc.</abbr>
Em tese dois grupos de usuários serão beneficiados com o uso de marcação
com os elementos <abbr> ou <acronym>:
Usuários com tecnologias assistivas tais como leitores de tela e dispositivos
Braille - embora tenha sido demonstrado que vários usuários destas
tecnologias não tenham acesso ao atributo title.
Usuários com visão normal que não sabem qual o significado de uma
abreviação ou de um acrônimo.

Tipos de abreviação
A palavra "abreviação" (NT: ou seu sinônimo abreviatura) vem do latim
abbreviare (encurtar) que é relacionado a brevi (pequeno). Embora algumas
pessoas discordem, todos os métodos de encurtar palavras ou frases são
subconjuntos de abreviação.
Alguns destes subconjuntos:

 Inicialismos
 Contrações
 Acrônimos

Abreviações
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 abreviação para associação
<abbr title="associação">assoc.</abbr>

Inicialismos
Define-se assim: Uma abreviação formada pelas letras iniciais das palavras
constituintes e lida pronunciando-se o nome das letras individualmente. Esta

33
definição consta de muitos dicionários, mas não é unânime. O primeiro registro
de definição para a palavra inicialismo é encontrado no Oxford English
Dictionary (OED) datado de 1899.
 EUA é um inicialismo para Estados Unidos da América
 IE é um inicialismo para Internet Explorer
 CSS é um inicialismo para Cascading Style Sheets
 IRS é um inicialismo para Internal Revenue Service

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

Contrações
Existem duas formas de contração.
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 apóstrofe (') e omitindo-se algumas letras das palavras
constituintes.
 Ave é uma contração para Avenue (tipo 1)
 can't é uma contração para cannot (tipo 2)
 won't é uma contração para will not (tipo 2)

Não existe um elemento (X)HTML "contração". Contudo é muito pouco

provável que alguém queira marcar uma contração em um documento.

Acrônimos, uma vez que são palavras encurtadas constituem um subconjunto

de abreviação. Contudo eles são mais específicos que as abreviações. Define-
se acrônimo como: Uma PALAVRA formada pelas letras iniciais das palavras
constituintes. O importante aqui é destacar que um acrônimo deve ser uma
PALAVRA - isto significa que a junção das letras iniciais deve ser tal que se
possa pronunciar.

34
  OTAN é um acrônimo para Organização do Tratado Atlântico Norte
 PAM é um acrônimo para Posto de Assistência Médica
 Modem é um acrônimo para Modulator-Demodulator
Exemplo de marcação:

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

Não confundir o elemento <abbr> com o atributo abbrPode haver confusão no

uso de ABBR uma vez que é tanto um elemento HTML como um atributo. O
mais importante é que eles têm finalidades completamente diferentes.

O elemento abbr é usado juntamente com o atributo title para fornecer

informação adicional sobre abreviações, inicialismos e contrações
Por exemplo:

<abbr title="associação">assoc.</abbr>

O atributo abbr é usado para fornecer uma breve informação para tecnologias
assistivas tais como leitores de tela quando estiverem "lendo" conteúdos
tabulares.
Por exemplo:

<th abbr="caminhão">Caminhão para transporte pesado</th>

Estilizando os elementos <abbr> e <acronym>Os elementos <abbr> e

<acronym> em geral são estilizados por padrão com um sublinhado pontilhado
ao contrário do sublinhado sólido usado para hiperlinks. Este sublinhado alerta
o usuário que ali há uma informação motivando-o a interagir com a marcação e
também que não se trata de um hiperlink.

O efeito de sublinhado pontilhado pode ser obtido com regras de estilo

conforme mostrado abaixo:

35
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 não importando quão grande ou pequena a fonte seja.

Por que não foi definida uma cor para a borda? A propriedade border-bottom
permite definir três valores de uma só vez. Estes valores referem-se a:

 border-width
 border-style
 border-color
Cada um dos três tem um "valor inicial" - um valor que será aplicado pelo
navegador caso não tenha sido definido pelo autor. Os valores iniciais são:

 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 não 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 não 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

página, deixando a cor de border-bottom sem definição, 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 conteúdo mude.

36
Alterando o cursor você pode facilitar as coisas para os usuários, mudando o
estilo do cursor quando o ponteiro do mouse passar sobre uma abreviação ou
acrônimo usando a seguinte regra de estilo:

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

10 – CSS HACKS
CSS hack é quando o programador manipula os códigos CSS, de maneira que
ele consiga adaptar o seu código a diferentes tipos de navegadores, (Internet
Explorer, Firefox, Opera, Konqueror .) fazendo com que seu layout não tenha
problemas de visualização do usuário final, como por exemplo, quebras de
linha ou de tabela etc.

Bom, mas o CSS hack não é programado para ser interpretado pelos browsers
Netscape, Firefox, ou Internet Explorer para Mac, e sim para ser funcional ao
Internet Explorer para PC´s (Personal computers).
Então vamos a um exemplo:
* código normal:
div {
width:500px;
}
No código acima estamos setando que todos os <div> terão 500 pixels de
largura.
* código alterado:
div {
width:500px;
_width:400px; */ a posição do hack SEMPRE será após a opção
CORRETA. */

37
}
Já neste código alterado, todos os navegadores vão interpretar o css da
mesma forma, ou seja, todos os <div> terão 500 pixels de largura, porém o
Internet Explorer para PC´s interpretará a segunda opção, que no caso é de
400 pixels. Não se sabe qual o motivo pelo qual o IE interpreta o _ (underline)
na linha de código e portanto seu layout irá funcionar perfeitamente em
qualquer browser.

CONCLUSÃO

Com isto finalizamos nossa apostila de Photoshop TRUQUES

MÁGICOS, se você quer aprender mais sobre esta fantástica ferramenta e
quer aprender a usá-la para projetos de criação de web sites conheça nosso
curso Webkit através do link: http://apostilando.com/pagina.php?cod=30.

38