html&css truquesmagicos

HTML & CSS

2

Í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

3

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

4

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

5

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

6

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="[email protected]">

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

7

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

8

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.

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

9

03 – OPÇÕES DA TAG MAILTO Ao se criar um simples link de e-mail é comum usar o

mailto:[email protected], mas podemos acrescentar diversas outras

funcionalidades a TAG, vamos conhecer alguma delas.

<a href="mailto:[email protected]?subject=Assunto da

Mensagem">[email protected]</a>, permite adicionar conteúdo ao

campo assunto da mensagem.

<a href="mailto:[email protected],[email protected]">, permite

adicionar o e-mail a mais de um endereço.

<a href="mailto:[email protected][email protected]">,

permite enviar um e-mail com cópia a outro destinatário.

<a href="mailto:[email protected][email protected]">,

permite enviar um e-mail com cópia oculta.

mailto:[email protected]

mailto:[email protected]%3C/a

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

11

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

12

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;}


Black;

color:blue;font-size:28pt;}


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>

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

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

16

<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

17

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

18

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>

19

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

20

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.

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

22

Para nossa próxima DIV configure:

Depois a DIV lateral

E finalmente a DIV rodapé

23

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.

24

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

CSS.

25

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.

26

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.

27

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.

28

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

29

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.

30

Lateral.

31

E o rodapé

32

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.

33

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


Inicialismos

Define-se assim: Uma abreviação formada pelas letras iniciais das palavras

constituintes e lida pronunciando-se o nome das letras individualmente. Esta

34

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.

35

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:


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:

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

37

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. */

38

}

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.

http://apostilando.com/pagina.php?cod=30

html&css truquesmagicos

Documents