HTML & CSS

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

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

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

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

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

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

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.

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.

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.

10

O cdigo: <body> <ul <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> style='list-style:url(http://www.multimidiaearte.com/imagens/213.gif)'>

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

11

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;backgroundcolor: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 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

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

15

<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

16

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 marginleft negativa! E o arrastar para cima consegue-se com uma margin-top

17

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>

18

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

19

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.

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

21

Para nossa prxima DIV configure:

Depois a DIV lateral

E finalmente a DIV rodap

22

Visualize pelo cdigo e verifique se as DIVS esto 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 boto de nova regra CSS.

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

25

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.

26

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.

27

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

28

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.

29

Lateral.

30

E o rodap

31

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.

32

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

33

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

34

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:

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

36

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

37

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

38