Html by sirius chaves

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

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

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

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:

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:

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:

Todavia, lembre-se que além de acelerar a busca, armazenar uma cópia em

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

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

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:

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

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.

03 – OPÇÕES DA TAG MAILTO Ao

criar

simples

link

e-mail

comum

usar

mailto:email@provedor.com.br, mas podemos acrescentar diversas outras funcionalidades a TAG, vamos conhecer alguma delas.

href="mailto:email@provedor.com.br?subject=Assunto

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.

href="mailto:email1@provedor.com.br?cc=email2@provedor.com.br">,

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

href="mailto:email1@provedor.com.br?bcc=email2@provedor.com.br">,

permite enviar um e-mail com cópia 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 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.

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

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

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>

<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

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>

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

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

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

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>

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

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.

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.

Para nossa pr贸xima DIV configure:

Depois a DIV lateral

E finalmente a DIV rodap茅

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.

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

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.

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.

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.

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

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.

Lateral.

E o rodapĂŠ

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.

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

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



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:

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.

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

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