Css Manual

APRENDENDO C.S.S. , UMA ESTRUTURA PARA WEB.
Por Andr Marinho C.
O QUE CSS? Voc no tem por que se intimidar com a perspectiva de usar as Folhas de Estilo em Cascata. Usar um computador pode ser algo assustador quando se vai experimentar pela primeira vez, mas decorrido algum tempo nem se pensa mais nas dificuldades iniciais. Tudo se resume, em se aprender por etapas e isto que eu vou fazer nesta srie de tutoriais. Uma etapa de cada vez. Quer voc seja usurio de um editor WYSIWYG e conhecedor do cdigo por ele gerado ou mesmo no tenha sequer criado uma pgina Web, este tutorial vai orient-lo na direo certa. O tutorial pressupe um pequeno ou nenhum conhecimento de produo de uma pgina Web. Ele trata o assunto realmente ' do seu incio' O que vai ser preciso? Nada especial. Se voc tem acesso a um editor de pgina Web, timo. Se no, voc pode usar qualquer editor de texto - NotePad no PC ou SimpleText ou TextEdit em Mac. Se voc usurio do DreamWeaver ou GoLive, iremos usar o modo de 'cdigo'. No se apavore! Um editor de imagens no ser essencial, pois a princpio no irei me preocupar muito com criao de imagens. Oh, voc ir precisar de um navegador, mas isto eu no precisava dizer. De fato, eu recomendo que voc tenha alguns diferentes navegadores. Se voc s possui o Explorer, deveria instalar o Mozilla e alguns outros que voc poder obter consultando qualquer listagem Browsers Atuais. Se voc desejar fazer upload de suas pginas para um servidor Web, vai precisar de um programa FTP, mas no se preocupe com isto agora, pois poder fazer tudo ensinado no tutorial, no seu prprio computador. ETAPA NMERO 1 - UMA PGINA BSICA Antes de fazer qualquer coisa iremos precisar de uma pgina Web. E a seguir voc tem uma pgina, a mais bsica possvel. <html> <head> </head> <body> Esta a minha pgina Web </body> </html> Temos aqui trs conjuntos de 'tags' - as tags, normalmente so aos pares, mas nem sempre assim. Englobando toda a pgina temos o par de tags <html>...</html>. A primeira <html> a 'tag de abertura' e a 'tag' de fechamento a mesma com uma / (barra) entre o sinal de 'menor que' (<) e html. Dentro da tag <html> existem mais dois pares de tags. <head>...</head> contm informaes que no foram ainda colocadas no nosso exemplo, a mais importante destas informaes o ttulo da pgina que aparece na barra de ttulos do navegador. Voc d um ttulo a sua pgina, escrevendo-o dentro da tag title, como mostrado a seguir... <html> <head> <title>Minha Pgina</title> </head> <body> Este o contedo da minha pgina Web! </body> </html> O par de tags <body>...</body> engloba todo o contedo da sua pgina Web, texto, imagens, filmes Flash - e tudo mais. Voc poder digitar no seu editor de texto, na janela de cdigo do seu editor WYSIWYG - ou mesmo copiar colar o cdigo da pgina bsica mostrado acima.
Manual de Programao
Bem, agora temos uma pgina Web que bem renderizada em qualquer navegador - depois que voc tiver 'salvado' ela. D a ela o nome de 'index.html' pois este o nome apropriado para a primeira pgina de qualquer Web site. Voc poder salvar o arquivo em qualquer lugar no hard disk do seu computador, mas para tornar as coisas claras e em ordem, crie um novo diretrio para salvar sua pgina Web. O caminho normal para abrir sua pgina em um navegador usar a opo 'Abrir' ('Open') no menu 'Arquivos' ('File') mas h um modo mais rpido. Crie um 'shortcut' do seu arquivo no desktop. Dali voc poder arrastar o cone do 'shortcut' direto para a janela do navegador e sua pgina ser carregada e mostrada! Sua pgina dever se parecer com esta Ainda que seja uma maravilha, sua pgina Web no possui um ingrediente vital - o contedo. No h sentido em uma pgina Web se ela no diz nada (ou outra coisa seno "Este o contedo da minha pgina Web!") mas isto eu vou deixar por sua conta. Qualquer contedo deve ser colocado entre o par de tags<body>...</body> para que o navegador possa renderiz-lo. Encher de textos a pgina, assim como ela est, no d uma estrutura e nem estiliza os textos. Por no dar estrutura eu quero dizer que os textos simplesmente fluem da esquerda para a direita, de cima para baixo, que as palavras no tem outra nfase particular que no seja a ordem natural em que so escritas. Faria muito mais sentido grupar palavras e sentenas em pargrafos, ttulos, sub-ttulos - bem, voc deve saber, aquelas coisas bsicas de estruturao de textos que se aprende na escola. Browsers ignoram qualquer pulo de linha ou pargrafos que voc insira em uma poro de texto. Eles ignoram tambm tabulaes e at mltiplos espaos entre palavras que so interpretados como um espao nico. til em qualquer poro de texto marcar ttulos, sub-ttulos, alguns pargrafos e talvez at uma assinatura final. Em HTML, existem diferentes tags de marcao que se constituem no mecanismo apropriado para estruturar os textos. Cria-se um pargrafo, colocando texto entre o par de tags <p>...</p>. Em HTML, um pargrafo um bloco constituido de uma ou mais sentenas separado do prximo bloco por um espao - tal como este paragrfo que voc v aqui. Para ttulos, existem seis nveis distintos de nfase, indo desde o mais alto nvel <h1>...</h1> at o mais baixo <h6>...</h6>. Eles so como mostrados a seguir... Como voc pode notar diminui o tamanho quando cresce o nmero que indica o nvel sendo que o h4 equivale aproximadamente ao tamanho de texto chamado 'small' (pequeno). h5 e h6 so 'smaller' (menor) ,mas em negrito. Existem outros truques que podemos usar para dar nfase a palavras ou frases. Antes de considerar como eles devem ser apresentados (como deve se parecer), considere acima de tudo sua funo. Bold (negrito) uma variante mais destacada que o texto normal e marcada com o par de tags <b>...</b> contudo, trata-se de um estilo de apresentao para impresso e na Web prefervel usar-se strong <strong>...</strong>. Embora elas (tags bold e strong) se paream iguais quando renderizadas na tela de um monitor, o HTML dever servir a outros dispositivos tambm. Softs leitores de tela usados por pessoas portadoras de necessidades especiais para viso, entendero perfeitamente <strong> e lero com a devida nfase. Voc deve saber que itlico conseguido com a tag <i>...</i>. E aqui tambm, melhor voc no se utilizar de estilizao visual, mas usar <em>...</em>. Este par de tags d a funcionalidade do itlico ao texto independentemente do dispositivo em uso. Sublinhado pode ser conseguido com o par de tags <u>...</u> , mas sublinhados na Web tem um significado especial. Usualmente indica um link. melhor no usar sublinhado para enfatizar, pois esta prtica poder confundir o visitante do site. Uma importante tag a de quebra de linha <br>. Ao contrrio de outras tags, esta no requer uma tag de fechamento, alis tag de fechamento neste caso no faria qualquer sentido, no mesmo? Usando estas tags bsicas de marcao, o texto comea a tomar forma. Ele se assemelhar a um texto produzido em um processador de texto. Esta pgina bsica provavelmente se parecer um pouco diferente quando visualizada em diferentes
Manual de Programao
navegadores e computadores. Cada navegador tem o seu prprio estilo padro e a menos que voc configure seu navegador ele usar os estilos padro. Para sobrescrever os estilos padro dos navegadores, ns criaremos nossos prprios estilos que sero agrupados em uma 'folha de estilos'. ETAPA NMERO 2 - FOLHA DE ESTILOS Uma folha de estilos conceitualmente bem simples, ela uma pgina contendo definies ou especificaes de estilos, que instrui o navegador como apresentar os diferentes elementos de uma pgina. Por enquanto, contenha sua curiosidade em saber o porqu de 'Cascata'. Eu voltarei a este assunto mais tarde, quando comearmos a aplicar estilos no nosso HTML. Para simplificar, comearemos construindo nossa folha de estilos dentro da prpria pgina Web. Mais adiante voc descobrir que pode ter sua folha de estilos em um 'arquivo externo de estilos' que pode ser 'chamado' por vrias pginas, com a grande vantagem de se poder controlar atravs deste arquivo mestre, os estilos de todas as pginas que lincam para ele. Os estilos que iremos usar sero definidos dentro do par de tags <head>...</head> como mostrado a seguir... <style type="text/css" title="mystyles" media="all">  se constituem em um modo de se 'esconder' texto em uma pgina Web - voc ver os textos somente na marcao do cdigo. Isto denominado 'comentario', e uma vez que os estilos esto dentro da seo <head>...</head> do documento, eles no devero aparecer na apresentao. A primeira coisa que faremos ser definir os estilos para a pgina como um todo, o body da pgina. Tudo que estiver dentro das tags <body>...</body> ter este estilo ou conjunto de estilos que lhe for aplicado. Basicamente a definio de estilos para body se parece com... body { } body seguido por um par de 'chaves' { }. Definiremos uma cor de fundo para a pgina... Os navegadores por padro, usualmente renderizam uma pgina na cor branca com textos na cor preta, mas ns iremos definir um tom de cinza claro para o fundo da pgina. Abaixo a maneira pela qual definimos uma cor de fundo para a pgina. Notar que no usamos sinal de igual '=' e sim dois pontos ':' . body {background-color: #e8eae8 } O que significa #e8eae8 ? As cores na Web so definidas pela mistura de 256 tonalidades de vermelho, de verde e de azul em diferentes propores. Humanos tem dez dedos nas mos e contam de dez em dez. Computadores foram projetados para contar de dezesseis em dezesseis, no que eles tenham dedos, mas uma vez ultrapassado o 9 (nove) no existe um numeral simples para representar 10, 11, 12, 13, 14, 15 assim estes numerais foram substituidos por letras a, b, c, d, e , f. Desta forma, em um sistema de contagem 'hexadecimal' (base dezesseis) o 10 representado pelo 'a' e o 15 pelo 'f'. Ao ultrapassar o 15, adicionase mais um dgito e assim '10' representa o 16. Usando-se este sistema de contagem, qualquer nmero entre 0 (zero) e 255 pode ser representado por dois nmeros ou letras - 255 ff. Ento, #ffffff ser o branco e #000000 o preto. A cor que escolhemos para nosso fundo composta de vermelho e8(232), verde ea(234), azul e8(232). O smbolo # ('tralha') indica que estamos usando numerao hexadecimal e no nmeros decimais ordinrios. Algumas vezes voc encontrar a sintaxe com apenas trs dgitos, por exemplo, #2a0. Isto uma abreviatura para #22aa00. Quando a cor representada por uma numerao composta por trs pares de dgitos que se repetem dois a dois, voc poder omitir o segundo dgito que o navegador entender a abreviatura.
Manual de Programao
Usando esta abreviatura com trs dgitos voc poder obter 4096 cores diferentes, e com seis dgitos mais de seis milhes de cores. Com uso de um dgito por cor, vermelha, verde e azul, cada uma tendo 16 nveis de brilho possvel combinaes para obter todas as demais. Se voc estiver digitando seu cdigo, esta tcnica de usar abreviadamente trs dgitos bem mais simples e eficiente. De toda forma, vamos agora definir uma cor para os textos na nossa pgina, diferente da cor padro preta. Voc poder usar a ferramenta 'colour picker' do Photoshop (ou de outro programa grfico) e definir ento uma cor por um nmero hexadecimal de 6 dgitos... body {background-color: #e8eae8; color: #5d665b } Observe na regra acima que as cores do fundo e do texto esto separadas por um ponto e vrgula ';'. Bastante cuidado com o uso apropriado de vrgulas e ponto e vrgulas pois a troca ou esquecimento delas causar erros. E agora, vamos definir margens ao redor da pgina para acertar o posicionamento dos textos convenientemente na tela, vamos usar uma margem de 50px (margin: 50px) na definio das regras para body. Esta nova definio separada da anterior por ponto e vrgula. body { background-color: #e8eae8; color: #5d665b; margin: 50px } Agora tudo o que digitarmos na pgina ser reprentado numa cor verde escura acinzentada sobre um fundo cinza. Veremos adiante casos especiais em que iremos alterar isto. ETAPA NMERO 3 - ESTILIZANDO TEXTO Embora j tenhamos livrado nossa pgina do austero preto e branco, mudando para cores ao nosso gosto, ainda podemos fazer muitas coisas. Podemos alterar o tipo e o tamanho das letras, o espaamento entre linhas e adicionar outros detalhes tal como indentao de pargrafos. O estilo para fontes Iremos trabalhar de incio com o estilo das fontes (typeface) pois esta alterao far uma diferena marcante na pgina. Diferentemente de projetos para impresso, as pginas Web s conseguem mostrar os tipos de fontes que estejam instalados na mquina do usurio, assim no podemos empregar no nosso projeto um tipo de fonte de nossa livre escolha, mas teremos que escolher uma, dentre aquelas que mais comumente encontram-se instaladas nos computadores - uma que venha pr instalada com o sistema operacional. Isto limita consideravelmente nossa escolha. Voc acabar descobrindo que est limitado a duas ou trs fontes do tipo serif (com serifas) duas ou trs do tipo sans-serif (sem serifas) e uma do tipo monospaced, (dactilogrfica). Em lugar de escolher um tipo nico de fonte, ns especificamos um conjunto de fontes no pressuposto que uma delas esteja instalada no computador do usurio. Abaixo um exemplo mostrando os tipos de fontes mais comuns pr instaladas em computadores Windows e Machintosh. Voc no pode assumir que a fonte que escolheu esteja instalada no computador do usurio e por isso dever fornecer alternativas. A seguir uma especificao tpica para escolha de uma famlia de fontes do tipo sem serifas. font-family: Verdana, Geneva, Arial, sans-serif; E, para fontes com serifas font-family: Georgia, "Times New Roman", Times, serif; Observe que nomes de fontes composto por mais de uma palavra devem ser escritos entre aspas "Times New Roman" Vamos adicionar fontes sem serifas nos estilos para a nossa pgina e ver o que acontece. Nossa pgina com fontes sem serifas O tamanho das fontes A especificao do tamanho de fonte um assunto controverso. Para impresso voc poder tranquilamente especificar um tamanho em 'points' (pontos) e ter sempre aquele tamanho na impresso. A quantidade de espao de impresso assim como as quebras de linha ser sempre exatamente como voc as especificou. Na Web os tamanhos de fonte no seguem um padro rgido variando de um computador para outro, e em alguns casos, uma variao drstica. Dependendo do tamanho da tela do usurio, do seu sistema operacional e do navegador usado um mesmo tamanho de fonte pode variar
Manual de Programao
desde de to pequeno que se torne ilegvel at tamanhos enormes semelhantes queles usados em livros grandes, para crianas. Felizmente os navegadores permitem aos usurios definir suas preferncias pessoais de tamanhos, o que vem a atenuar as grandes variaes, mas mesmo assim poder haver diferenas entre o que voc projetou e espera, e aquilo que ser de fato apresentado ao usurio. Com a crescente popularidade dos dispositivos Wi-Fi (acesso sem fio) e portteis, as condies de navegao por sua pgina sofrero uma mudana drstica nos prximos anos. Projetar hoje pginas Web para o futuro implica em considerar designs fludos que se auto adaptem aos diferentes tamanhos de tela. Repita comigo, "A Web no igual a uma impressora!" Tamanhos relativos para fontes Se voc quer servir sua pgina Web ao maior nmero possvel de usurios melhor especificar um tamanho de fonte relativo quele escolhido como padro pelo usurio. Vrias so as maneiras de especificar fontes relativas. Voc pode usar percentagem (%) da fonte padro do usurio ou uma unidade de medida chamada 'em', o que o mesmo que 100%. 1.2 em o mesmo que 120%. A maneira preferencial de especificar tamanhos relativos de fontes atravs do mtodo descritivo de tamanhos, algo parecido com a especificao de tamanhos de camisas ( T-shirt). 'Medium' (mdio) o mesmo que 100% ou 1em. 'Smaller' (pequeno) um tamanho menor que 'medium' e 'Larger' (grande) um tamanho maior que 'medium'. H tambm os tamanhos x-small, xx-small, x-large e xx-large (algo como - extra pequeno, super extra pequeno, extra grande, super extra grande). A vantagem deste sistema sobre as percentagens e ems que os navegadores no tornaro os textos ilegveis. Voc pode por exemplo, especificar um tamanho de fonte de 0.7 em ou 70% e isto ficar perfeito no seu PC. Para algum usando um Mac com um tamanho de fonte definido smaller por padro, 70% poder resultar em um tamanho ilegvel. xx-small o menor tamanho de fonte capaz de ser apresentado por um computador. xx-largex-large large medium small x-small xx-small xx-small type This type is small but not too small to render This type is way too small This type is way too small> Tamanhos absolutos para fontes Se o pblico para o qual voc projetar seu site for bastante especfico e usa basicamente as mesmas configuraes e tipo de computador que o seu, voc poder especificar o tamanho de suas fontes em pixels. Pixels no variaro muito de um para outro desktop e assim os tamanhos de fontes sero similares quando no idnticos. Uma vez que voc utilize laptops ou dispositivos portteis ou mesmo monitores com resoluo muito alta, os tamanhos em pixel iro variar de acordo com o dispositivo usado. Para que voc tenha uma idia exata destas variaes, eu construi trs pargrafos usando trs mtodos diferentes para definir o tamanho da fonte - percentagens - tamanhos T-shirt e pixels. Na tela do meu computador, usando um navegador Mozilla, os tamanhos so bem parecidos, mas podero no ser para voc. Para esta linha foi definido um tamanho de fonte de 85% do tamanho das fontes deste tutorial. Esta linha foi definida com o tamanho de fonte x-small Esta linha foi definida com um tamanho de fonte absoluto de 11px Convm ressaltar que voc nunca dever usar 'points' para definir tamanhos de fonte para tela (screen), use-o somente para impresso (print). Espaamento entre linhas O espaamento padro entre linhas de aproximadamente 120% do tamanho da fonte. Aumentar um pouco este espaamento em geral resulta em melhoria da legibilidade, especialmente se as linhas so muito longas. Irei discutir esta questo mais adiante. Para a nossa pgina no estgio atual o comprimento das linhas determinado pela largura da janela do navegador, assim, talvez um pouco maior do que o ideal. Para definir o espaamento entre as linhas podemos novamente optar por medidas relativas (% or ems) ou absoluta (px). Neste exemplo eu defini para toda a pgina, a altura da linha (line height), que vem a ser a altura do caracter (fonte) mais o espao extra acima, em 180% do tamanho da fonte (small). Como as definies de estilo para body esto crescendo, eu coloquei as regras, cada uma em uma linha diferente, (isto no far qualquer diferena para o browser) para que as regras de estilo fiquem mais fceis de serem lidas por humanos. de boa prtica sempre colocar um ponto e vrgula ao terminar de escrever uma regra.
Manual de Programao
body { background-color: #e8eae8; color: #5d665b; margin: 50px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; line-height: 180%; } Agora estamos com um pgina mais 'arejada'' Pargrafos Tudo o que fizemos at agora afeta a pgina toda. Agora iremos ver como definir estilos para reas especficas da pgina. Como eu j havia mencionado anteriormente, blocos de texto podem ser divididos em pargrafos para facilitar a leitura. Existem vrias maneiras de visualmente separar pargrafos uns dos outros. Voc poder acrescentar espaos extras entre as linhas ou indentar a primeira linha. Projetos tipogrficos as vezes se utilizam de outras tcnicas menos comuns tais como grandes indentaes ou mesmo exdentaes (o oposto de indentao). Com CSS possvel conseguir todos estes efeitos, mas por padro o separador de pargrafos o 'paragraph space' que equivale a metade da altura da linha 'line-height'. Para fazer com que um bloco de texto se transforme em um pargrafo, basta coloc-lo dentro de um par de tags <p>...</p>. Para manipular os estilos a aplic-los a um pargrafo, via CSS, ns adicionaremos p { } logo a seguir s regras j definidas para body dentro da tag head. Dentro do sinal de chaves { }, acrescente esta declarao text-indent: 3em <style type="text/css" title="mystyles" media="all"> <!-body { background-color: #e8eae8; color: #5d665b; margin: 50px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; line-height: 180%; } p { text-indent: 3em;} --> </style> Nossa pgina com pargrafos Observe que o primero pargrafo no est indentado - ele no foi colocado dentro das tags <p>...</p> e em consequncia em termos de HTML ele no oficialmente um pargrafo. Ttulos Eu j expliquei os seis nveis de ttulos padro do HTML. Ns no temos que ficar restritos a eles, pois podemos redefin-los de acordo com nossas necessidades. Novamente, isto uma simples questo de definir mais umas regras de estilo. Ttulos por padro so grandes e em negrito com um espaamento extra acima e abaixo. Lembre-se que ttulos dos nveis h1, h2 e h3 so maiores que o texto normal e dos nveis h5 e h6 so menores. Vamos trabalhar com o ttulo h3 e alterar sua fonte e cor. h3 {color:#966b72; font-family:Georgia,"Times New Roman",Times,serif;} Agora estamos com ttulos Voc deve ter observado que eu adicionei uma linha em branco acima do segundo ttulo. Se voc simplesmente colocar ali um pargrafo vazio <p></p> isto no vai funcionar pois sempre necesrio existir alguma coisa dentro das tags. Colocar um espao em branco dentro de <p></p> tambm no vai funcionar pois o HTML ignora espaos em branco que no estejam entre dois caracteres. O que ns precisamos ali de um caracter invisvel e o HTML nos disponibiliza um, chamado de 'non-breaking space' que escrito desta forma veja a seguir... <p> </p> O caracter 'non-breaking space' bastante til tambm para voc evitar que certas palavras sejam
Manual de Programao
quebradas ao fim de uma linha - palavras como nomes de pessoas ou de instituies.
Dicas extras Antes de passar para a prxima etapa vamos experimentar alguns 'truques' na nossa pgina. Na tag body eu defini uma margem de 50px para os quatro lados (ao redor de toda a pgina). Ns podemos definir margens diferentes para cima, para os lados direito e esquerdo e para baixo (top, right, left e bottom). Para isto basta que se declare as margens separadamente como mostrado abaixo:margin-top: 70px; margin-left: 120px; margin-right: 50px; margin-bottom: 70px; Isto faz nossa pgina se parecer a uma pgina impressa, com uma margem maior no lado esquerdo. Defini tambm na nossa pgina uma das palavras em negrito e outra em itlico. Ateno que o itlico pode ser renderizado erroneamente em alguns computadores e tornar-se ilegvel em tamanhos de fontes pequenos. Ver nossa pgina com textos estilizados Bem, agora voc est com uma pgina onde acresentou algum estilo - sem muito esforo. Contudo a pgina ainda se parece com um documento datilografado ou produzido em um processador de textos. A seguir veremos algumas possibilidades interessantes de estilizao para o layout. Enquanto espera, voc poder fazer experincias com a pgina que acabamos de criar, modificando os valores das declaraes de estilos. Tente mudar os tipos e tamanhos de fontes e os espaamentos entre as linhas, porm o mais importante que voc carregue sua pgina em diferentes navegadores para observar quo diferente sua pgina possa parecer. ETAPA NMERO 4 - MAIS ESTILIZAO DE TEXTO Antes de prosseguirmos com formatao de textos ser interessante familiariz-lo com alguns termos bsicos de tipografia. Quando dizemos, tamanho de fonte ou em CSS font-size, estamos nos referindo distncia que vai desde o topo de uma letra maiscula tal como o 'A' at a base de uma letra que se estende o mais baixo possvel (letra descendente) tal como o 'p' ou 'y'. Existe ainda um espao extra abaixo das letras, chamado de 'leading'. Este nome vem do fato de as impressoras usarem este espao como faixas para colocao de uma guia ('lead') metlica com a finalidade de definir as entre linhas. Hoje no usamos mais a 'lead', ns simplesmente determinamos o espao total entre a base de uma linha e a da linha seguinte. O espaamento entre linhas em consequncia vem a ser a altura da fonte mais o espao extra da 'lead'. Em CSS, dizemos line-height: 180%; com o valor especificado em percentagem, ems ou pixels (px). Saiba mais sobre espaamento de linhas, adiante. Vertical-align permite ajustar a linha de base de letras individualmente dentro de uma palavra, mas esta prtica bastante especfica e usada em frmulas matemticas e no nos aprofundaremos muito nesta propriedade agora. Para o exemplo mostrado abaixo eu poderia ter usado a marcao com as tags <sup>2</sup> porm com CSS eu tenho muito mais controle.. E=MC2 CSS tambm possibilita o controle sobre o espaamento horizontal entre as letras e as palavras. Isto apropriado para obter efeitos visuais em ttulos. TTULOESPAADO letter-spacing: 0.5em; word-spacing: 0.5em Projetando legibilidade. Em pocas passadas em que os navegadores no ofereciam um bom suporte para as CSS um aspecto de vital importncia para formatao de textos, disponvel at mesmo em mquinas de escrever mais modestas, era impossvel de se conseguir com a marcao HTML - trata-se do espaamento entre as linhas do texto, 'line spacing'. Quando o espaamento entre as linhas de um texto nulo ou muito reduzido, a leitura torna-se difcil. Quanto mais longas forem as linhas tanto maior ser a dificuldade de leitura. Linhas muito curtas provocam interrupes constantes na maneira natural de leitura da esquerda para a direita.
Manual de Programao
Linhas mais longas que um tamanho considerado ideal so tambm de leitura cansativa e tornam difcil a localizao do incio da prxima linha. Para uma leitura confortvel as linhas devem ter um comprimento entre uma vez e meia e duas vezes o comprimento ocupado por todas as letras (minsculas) do alfabeto - isto significa de 40 a 60 caracteres ou de oito a dez palavras. Se as linhas so mais longas, o aumento do espao entre as linhas ajudar na legibilidade. Muitas das antigas pginas web apresentam textos estendendo-se da esquerda para a direita, ocupando toda a largura da tela, independente do tamanho do monitor. Alguns sites ainda adotam esta prtica - e hoje em dia as telas tornaram-se bem maiores. Por padro, h um espaamento entre as linhas de um texto. Este espaamento padro de aproximadamente 20% do tamanho da fonte ('cap heigh't mais 'descender' ou seja, desde o topo de uma letra maiscula at a base de uma letra descendente - ver figura no primeiro ttulo deste tutorial) . Com CSS voc poder definir o espaamento que desejar para as entre linhas. Se voc est usando tamanhos de fontes relativos, voc poder definir o espaamento entre linhas como uma percentagem do tamanho da fonte - font-size: 1em; line-height: 1.5em (o mesmo que 150%). Se voc est usando tamanhos absolutos voc poder definir o espaamento entre linhas assim: font-size: 11px; line-height: 16px. As especificaes para este pargrafo so: font-size: small; line-height: 180% o que vem a ser equivalente a uma vez e meia o espaamento entre linhas de um processador de texto antigo. Para uma demonstrao, veja este exemplo onde o primeiro bloco de texto construido, no possui margens e nem uma line-height (espaamento entre linhas). As estilizaes gerais para o body definem somente o tamanho, famlia e cor das fontes, bem como a cor do fundo... body { color: #5d665b; font-size: small; font-family: Verdana, Geneva, Arial, sans-serif; background-color: #e8eae8; } O bloco de texto logo a seguir est dentro de um par de tags <div>...</div>, e como se fosse uma pgina dentro da pgina. Tem uma margem esquerda de 250px e direita de 200px e o espaamento entre linhas foi definido em 180%. Estes estilos foram acresentados ao corpo da pgina por um processo conhecido como herana ('inheritance'). Exatamente como uma criana herda as caractersticas de seus pais, as quais sero passadas para seus filhos, em CSS, este processo de "cascata" tambm acontece, com elementos herdando os estilos definidos para elementos que os contm. <div style="margin-left: 250px; margin-right: 200px; line-height: 180%">...</div> As 'divs' contidas nas pginas so uma parte muito importante das folhas de estilo em cascata e veremos mais detalhes sobre elas, adiante neste tutorial. Contraste Diferentemente de uma pgina impressa que voc l por reflexo de luz, uma pgina em uma tela monitor tem sua luminosidade prpria. As diferenas de brilho entre um texto preto e um fundo branco tem magnitude muito maior em uma tela do que em uma pgina impressa. Pores grandes de texto preto sob fundo branco podem ser comparadas a uma caminhada sob sol intenso sem uso de culos escuro. Em casos extremos voc apertaria os olhos para diminuir o efeito da claridade e muito provavelmente no geral iria se sentir desconfortvel e at mesmo sem saber bem porque. Diminuir o contraste numa pgina Web, faz com que ela se torne mais confortvel e menos estressante para leitura. Mas por outro lado, se voc exagerar acabar dificultando a leitura para pessoas com restries visuais. Em um artigo como este, onde h uma considervel quantidade de texto para leitura, onde o usurio ter que passar um perodo longo de tempo em frente a tela do monitor, importante tornar a tarefa o mais confortvel possvel. ETAPA NMERO 5 LISTAS Outra tcnica de formatao muito usada em pginas Web a lista ('list'). Ela como um pargrafo, porm tem uns detalhes adicionais. HTML define listas que podem ser do tipo com marcadores (bullets - listas no numeradas) ou listas ordenadas <ul>...</ul> <ol>...</ol> com numerao no incio de cada item da lista <li>...</li> . Cada tipo
Manual de Programao
de lista fornecido com algumas opes, que podem ser definidas no HTML - <li type="square"> coloca um marcador tipo um 'quadradinho', <li type="i"> coloca um numeral romano minsculo. Lista no ordenada padro Item da lista no ordenada Item da lista no ordenada Item da lista no ordenada Lista no ordenada com opo de marcador tipo 'quadradinho' _ Item da lista no ordenada _ Item da lista no ordenada _ Item da lista no ordenada Lista ordenada padro 1. Ordered list item 1 2. Ordered list item 2 3. Ordered list item 3 Lista ordenada com opo de numeral romano minsculo i. Item 1 da lista ordenada ii. Item 2 da lista ordenada iii. Item 3 da lista ordenada CSS possibilita mais opes e controle sobre as listas - basta voc criar regras de estilo para ol ou ul . ol { list-style-type: lower-roman; margin: 1em 0 1em 40px } O efeito destas definies de estilo o mesmo que o de colocar a opo em cada item da lista no HTML com a vantagem de proporcionar muito mais controle sobre as margens em volta da lista. Os quatro valores : 1em 0 1em 40px so respectivamente para as margens de cima, direita, em baixo e esquerda e podem ser definidos em ems, percentagens ou pixels. Se voc deseja controle sobre os itens da lista, voc poder definir as margens para eles tambm - para aumentar o espaamento entre eles por exemplo..... ol li { margin: .5em 0 .5em 0 } esta definio adiciona um espao extra de 0.5 em acima e abaixo de cada item da lista ordenada. Para uma lista no ordenada, bastaria voc substituir o seletor por ul li . E, melhor ainda, voc pode definir seu prprio marcador usando uma imagem. ul { list-style-image: url(smiley.gif) } ul li { margin: 1em 0 1em 0} Se voc gostou deste Vai gostar deste tambm E que tal este ? E, por fim, uma imagem para cada item da lista... <li style="list-style-image: url(icon1.gif); margin: 1em 0 1em 0">Sabemos sobre pessoas</li> <li style="list-style-image: url(icon2.gif); margin: 1em 0 1em 0">Sabemos sobre imagens</li> <li style="list-style-image: url(icon3.gif); margin: 1em 0 1em 0">Sabemos sobre idias</li> <li style="list-style-image: url(icon4.gif); margin: 1em 0 1em 0">Sabemos escrever</li> Sabemos sobre pessoas Sabemos sobre imagens Sabemos sobre idias Sabemos escrever Estilos definidos entre as tags head do documento aplicam-se toda a pgina, o que no o caso aqui. Para aplicar estilos individualmente aos itens de uma lista, devemos defin-los nos itens ou 'inline'. Os estilos so definidos na tag HTML de abertura <li> no corpo (body) da pgina. Notar que o IE6 (Windows) coloca os cones muito prximos ao texto do item. Eu adicionei um espao em branco para compensar isto, conforme mostro abaixo.... Sabemos sobre pessoas.
Manual de Programao
ETAPA NMERO 6 LINKS Na abreviatura HTML de especial significado as letras HT para Hiper Texto (HyperText). Links em palavras, frases ou imagens de uma pgina podem ser clicados para nos levar a outros lugares. Estes outros lugares so chamados de "ncoras". Imagine navios ancorados no imenso mar que a World Wide Web formando uma cadeia composta de links conduzindo s ncoras do navio no fundo do mar. Os navios esto ancorados em pontos especficos e no deriva, o que facilita sua localizao. Cada pgina tem pelo menos uma ncora. Por padro, est ncora localiza-se no topo da pgina, mas voc poder iserir mais ncoras em qualquer lugar da pgina que precisar chegar por um link. <a href="http://www.wpdfd.com/index.htm"> Este um link para o topo da minha Home Page</a> Assim, voc tem um par de tags <a>...</a> mais uma marcao href="..." dentro da tag de abertura. Esta uma referncia ao endereo do hipertexto ao qual voc ser conduzido. Se voc colocar uma ncora na pgina em um lugar especfico - bem, na verdade a ncora deve ser colocada imediatamente acima do lugar para o qual voc ir - veja a seguir... <a name="myanchor"></a> Um par de tags <a></a> com um nome, por exemplo, name="myanchor" dentro da tag de abertura. No h nada dentro do par de tags. Para ir quele local ("myanchor") voc acresenta mais o seguinte no fim do link... <a href="http://www.wpdfd.com/index.htm#myanchor"> Este um link para uma ncora na minha Home Page </a> Como voc j deve saber, os links em uma pgina so visualmente diferentes do restante do texto com a finalidade de serem facilmente identificados. Por padro os links so na cor azul e sublinhados. Quando voc clica em um link eles mudam para a cor vermelha. Mais tarde quando voc voltar quele link sua cor mudar novamente para prpura, indicando que voc j o visitou. Qualquer um que tenha navegado pela Web percebeu rapidamente este comportamento dos links. Por padro so trs os estados de representao dos hipertextos para links em HTML. Link no visitado Link ativo (clicado) Link visitado Observe que o cursor tambm muda. A seta padro muda para uma 'mozinha' quando aponta-se sobre o link. Certamente, como 'designers' no estamos satisfeitos com o visual padro dos links. Texto sublinhado pode ser prtico mais feio. O essencial que o link seja destacado do restante do texto para mostrar-se que ali h algo especial. O contexto ento torna-se um fator importante. Alguns textos so bvios que se constituem em um 'menu' de opes quer estejam ou no sublinhados. Seu destaque e a posio que ocupam na pgina e mais o fato de que aparentam convid-lo a ir a algum lugar do uma indicao precisa da sua funo. De maneira semelhante, deve haver uma boa razo para uma palavra ou frase dentro de um texto ter um visual diferente. A razo pode ser para dar nfase, mas aqui novamente o contexto quem vai dar uma indicao e tambm o fato de outras palavras ou frases terem o mesmo tipo de alterao no visual. Isto no vai funcionar se cada link tiver uma cor diferente. CSS permite estilizar o visual dos links. Links no precisam ser sublinhados e nem azuis. Tudo que temos a fazer estabelecer definies para as ncoras - 'a'. a:link { color: #696;text-decoration: none } na definio acima a cor do link foi alterada e o sublinhado retirado com a definio text-decoration:none Se voc quiser mudar a cor do link visitado faa assim... a:visited { color: #699; text-decoration: none } CSS ainda permite estilizar um estado de link chamado 'hover'. Neste estado - quando o ponteiro do mouse passado sobre o link - mudei a cor do texto do link o que tambm fornece mais uma informao adicional de que ali est um hipertexto para link. a:hover { color: #c93; text-decoration: underline } Neste estado, o sublinhado reaparece temporariamente enquanto o ponteiro est em cima do link, se assim voc desejar. O estado 'active' do link acontece quando voc clica. Normalmente o link muda de cor e em alguns navegadores tambm aparece uma borda em volta do texto do link. Para definir regras de estilo que se apliquem a todos os links de uma pgina voc deve coloc-las dentro das definies de estilo na tag head da pgina como mostrado abaixo. a:link {color: #696; text-decoration: none; background-color: transparent} a:visited {color: #699;text-decoration: none;
Manual de Programao
background-color: transparent} a:hover {color: #c93;text-decoration: underline; background-color: transparent} a:active { color: #900;text-decoration: underline; background-color: transparent } A ordem (sequncia) que voc escreve as definies de estilos para links muito importante. Normalmente a ordem no importa em CSS, mas neste caso importante que a:hover e a:active venham por ltimo, caso contrrio no funcionaro. Agora um outro estado para links no endossado pelas CSS. Este um link 'morto'. Ele no faz nada. Se voc tem um link na sua pgina que leva a mesma pgina, bem, no faz muito sentido clicar em link que leve para o mesmo lugar. Isto como um sinal, instruindo voc a dar uma volta para ir ao lugar em voc j se encontra. Existem duas maneiras para tratar esta questo. Voc poder destacar o link de um modo visual diferente dos outros links ou torn-lo invisvel indicando assim que ele um link no vlido. Est tcnica chamada de 'greying out' e voc j deve ter visto isto em ao em outros programas instalados no seu computador. Afinal, porque manter o link morto se ele no uma opo vlida? Bem, um dos princpios mais importantes de projeto de interfaces diz que voc deve manter as coisas o mais consistente possvel. Se voc remover um item de uma menu por exemplo, os demais itens vo sofrer um deslocamento de sua posio inicial. menos confuso para o usurio uma interface que se mantm sempre a mesma e inalterada. Um outro elemento disponvel a cor do fundo do texto. Algumas vezes os 'designers' mudam a cor do texto do link para o estado hover e/0u ative, simulando uma marca de iluminao. Existem muitos outros efeitos que voc pode conseguir com CSS para os links, ns apenas demos uma partida aqui e voc poder agora comear com suas experincias. Esta pgina exemplo demonstra os princpios que voc aprendeu aqui.. ETAPA NMERO 7 - BOXES CSS Vimos que um texto na Web pode ser dividido em ttulos e pargrafos atravs da marcao HTML. Vimos tambm como podemos definir estilos ao nosso gosto, de modo a sobrescrever os estilos padro. Vamos agora ver como definir estilos que possibilitam ir alm do que permite o HTML e construir layouts mais interessantes. O corpo ('body') da pgina a rea total visvel, mas conforme eu mostrei na etapa nmero 3, possvel compartimentar a pgina em pequenas divises com seus estilos prprios. Estas divises podem ser to pequenas quanto um caracter ou grandes o suficiente para acomodar pores retangulares inteiras de uma pgina. Tudo o que temos a fazer englobar entre o par de tags <div>...</div> a rea que pretendemos transformar em uma diviso. Tais reas, so como uma mini pgina que em CSS so chamadas de boxes CSS. Boxes CSS se constituem na unidade bsica de construo de layout de uma pgina Web e eu passarei a explic-los com detalhes pois eles so muito importantes. Boxes CSS podem ter uma largura e uma altura (width e height), uma cor de fundo ou at mesmo uma imagem de fundo que pode se repetir constituindo um padro de preenchimento. Um box CSS por padro estende-se da margem esquerda margem direita do corpo da pgina. Se voc no especificar uma margem para o corpo da pgina (body) um box CSS ocupar toda a largura da janela do navegador. Se voc no especificar uma altura para um box CSS ele no ter altura (ser considerada zero). Ao colocar texto dentro do box ele se expandir em altura de modo a acomodar o texto colocado - ou uma imagem. Para manter o texto afastado das bordas do box voc deve usar o enchimento - padding... Voc dever tomar precaues ao usar padding pois ele se comporta de maneira diferente no navegador Microsoft Internet Explorer. Ao contrrio do que foi mostrado no diagrama acima o IE coloca o padding dentro do box, e em consequncia seu comprimento e altura no se alteram. Todos os demais navegadores colocam o padding fora do box, adicionando seus valores ao comprimento e altura do box. Assim o seu box sofrer alteraes de acordo com o navegador em que for visualizado e isto poder trazer resultados desastrosos quando voc depende de maior preciso. Alm dos limites do padding voc poder ter uma borda... Bordas esto disponveis em uma variedade de estilos e voc poder defin-las separadamente para cada lado, em termos de espessura, estilo e cor. Elas so mostradas com pequenas diferenas de acordo com o navegador em que so visualizadas, a seguir como elas aparecem no navegador Mozilla... A espessura da borda aumenta o comprimento do box. Para separar um box de outro usamos as margens. Margens e paddings costumam ser confundidas pois o que ns chamamos de margem de uma pgina de um livro ou de uma pgina Web, na verdade um 'padding' porque obviamente este espaamento no
Manual de Programao
poderia ficar fora da pgina. Lembre-se que este caso especial. Para o body de uma pgina Web, as margens so contadas para dentro e para todos os demais boxes CSS so contadas para fora do box.
Posicionamento absoluto Alm de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da pgina atravs da definio CSS position: absolute; Posicionamento absoluto um conceito fcil de se entender, pois assim que as coisas funcionam na vida real. Por exemplo: a localizao de uma casa poderia ser descrita assim; 50 metros da Rua Norte e 100 metros da Rua Leste. A maneira mais simples de posicionar um box seria definir algo como top:50px; left:100px (topo: 50px; esquerda: 100px) mas no necessariamente ter que ser top e left, poder ser top e right (topo e direita), bottom e left (fundo e esquerda) ou bottom e right (fundo e direita). Aqui voc tem alguns boxes CSS estilizados e cada um deles com as definies de estilo mostradas. As possibilidades de estilizaes so infinitas. Boxes com dimenses definidas e posicionados de forma absoluta, so semelhantes a recortes de notcias e imagens de jornais que se faz para montagem de um lbum de recortes. O problema que tais lbuns permanecem com suas dimenses fixas - Pginas Web, no. Posicionamento relativo Se voc quiser descrever a posio da porta da casa do seu vizinho voc poderia dizer que ela encontrase a 70 metros da Rua Norte e a 100 metros da Rua Leste, ou ainda, dizer que ela localiza-se a 5 metros da sua casa. Posicionamneto relativo considera que boxes CSS localizam-se prximos a um outro box. O primeiro box ocupa a posio mais acima, o prximo box localiza-se abaixo do primeiro, o seguinte abaixo deste. Eles efetivamente flutuam colocando-se de cima para baixo na pgina. Este exemplo um pouco fora da vida real, mas imagine-se dentro de uma piscina coberta onde uma pilha de colches de ar flutuassem, o primeiro colaria na cobertura, o seguinte em baixo dele e seguinte em baixo e assim por diante. Para fazer com que boxes flutem um ao lado do outro em lugar de em baixo, voc definir float: left; ou float: right; semelhana dos colches de ar na piscina coberta, os boxes vo flutuando um ao lado do outro enquanto houver espao lateral. Acabado o espao lateral eles ocuparo a posio abaixo daqueles que j flutuaram, comeando uma nova camada. Voc poder evitar uma situao destas assegurandose que a soma total das larguras dos boxes no ultrapasse a largura da pgina. Isto pode ser feito especificando-se as larguras ('width') em pixel - mantendo a soma total abaixo da largura do navegador. Ou ainda, definir as larguras em percentagens, mantendo a soma total igual a 100 - ou preferencialmente um pouco abaixo de 100. Ao posicionar de maneira relativa, evite misturar pixel com percentagem, pois os resultados podem ser imprevisveis. Esta pgina de exemplos para boxes flutuantes mostra o comportamento de boxes posicionados de maneira relativa em colunas simples e mltiplas. ID's Ao criar seus boxes com definies de estilos segundo suas necessidades, no estaro disponveis elementos HTML para adicionar eles. Voc ter que inventar os seus prprios. Provavelmente havero alguns ou talvez muitos boxes CSS <divs> em uma pgina e assim devemos darlhes nomes que os identifique. Isto feito atravs de um 'identificador' - que abreviadamente denominamos id. Uma id deve ser nica por box e identifica um box na sua pgina, permitindo que tanto voc quanto o navegador saibam como apresentar o box com aquele nome. Um exemplo simples ocorre quando voc divide sua pgina em trs reas horizontais. Um topo ('header') contendo um logotipo e uma barra de navegao. A seo do meio a seguir contm textos e imagens. E embaixo teremos o rodap ('footer') com os direitos autorais e uma reproduo da barra de navegao superior. Este exemplo foi construido com 5 (cinco) boxes horizontais, sendo os dois boxes a mais, para a barra de navegao e o logotipo, que foram posicionados logo abaixo do topo. Observe que a margem direita menor que esquerda para compensar visualmente as diferenas de comprimento das linhas direita, proporcionando melhor noo de centralizao. Nas definies de estilos usamos um smbolo # ('tralha') antes do nome que identifica 'id' o box.
Manual de Programao
#header {...} #navbar {...} #logo {...} #midsection {...} #footer {...} Ento colocamos as definies de estilo para o box, dentro de sua respectiva 'id' como mostrado abaixo... <div id="header">...</div> <div id="navbar">...</div> <div id="logo">...</div> <div id="midsection">...</div> <div id="footer">...</div> Caso tenhamos declarado estilos para o corpo da pgina 'body', nossos boxes herdaro aqueles estilos. Qualquer estilo que voc declare para o box tem prioridade sobre aquele declarado para 'body'. Isto o efeito 'cascata'. Classes Em alguns casos voc ir se utilizar do mesmo box por vrias vezes em uma pgina. Suponha que voc queira dividir a seo central da pgina mostrada em dois ou mais boxes separados. Neste caso poderemos reutilizar um box em lugar de criar vrios. Um box que pode ser reutilizado nomeado com uma classe. Exatamente como se tem 'classes' de flores ou insetos, uma classe aqui basicamente um mesmo box com contedo diferente. Para mostrar que temos uma 'classe' e no uma 'id' nica, usamos um . (ponto) em lugar de uma # ('tralha'). .midsection {} pode ser agora usado quantas vezes quisermos e a sintaxe para a div conforme mostrado abaixo... <div class="midsection">...</div> <div class="midsection">...</div> <div class="midsection">...</div> Span Classes (mas no IDs) podem ser aplicadas em fragmentos de textos. Se desejarmos que algumas palavras do texto tenham a cor vermelha, criamos uma classe chamada .redtext .redtext { #c00 } <span class="redtext">This is red text!</span> Em lugar de colocar as palavras que queremos em vermelho, dentro de <div>...</div> , usamos <span>...</span>. Isto conhecido como elemento inline por aplicar-se a uma poro de texto dentro de uma <div>...</div> Use <span>...</span> sempre que voc quiser estilizar diferentemente uma poro de texto que difere do texto como um todo. Isto pode ser para cor, famlia de fonte, tamanho, peso ou qualquer outra propriedade. Assim, em CSS, existem elementos nvel de bloco que so boxes com uma nica ''id' ou uma 'classe' reutilizavel. Podemos ainda ter os elementos inline que se referem a um nvel de caracteres. Agora estamos comeando a chegar em algum lugar. ETAPA NMERO 9 - JUNTANDO TUDO A mais simples das pginas Web usar uma mistura de ids e classes e possivelmente uma combinao de posicionamento absoluto e relativo. Vamos dar uma olhada na nossa pgina composta de cinco boxes que estudamos na etapa nmero 8, e talvez, voc queira dividir a seo central em colunas. Para isto usaremos a declarao float:left tornando as coisas mais simples. Uma coluna direita, de largura reduzida, normalmente, usada em uma pgina Web para menu de navegao. .leftcol {} A coluna do meio para o contedo principal . .midcol {} E, direita uma outra coluna tambm de largura reduzida, usada para links relacionados ou de anunciantes e parceiros. .rightcol {}
Manual de Programao
Todas as trs colunas tero sua largura definida em percentagens de modo a que possam se ajustar de maneira fluida largura da pgina. Observe que eu usei classes para nomear as colunas de modo a que poderei reus-las mais adiante. Este exemplo mostra a seo central nica .midsection transformada em trs colunas flutuando esquerda. <div class="leftcol">...</div> <div class="midcol">...</div> <div classs="rightcol">...</div> Esta tcnica amplia e torna mais interessante a construo do layout. No deixe qualquer uma das divs sem contedo, ainda que elas tenham que ser preenchidas com espaos vazios. Coloque espaos dentro delas. Doctypes e validao Chegamos a dcima etapa das lies 'CSS desde o incio' e eu tenho uma confisso a fazer. Tudo o que eu mostrei para vocs at aqui, - marcao de cdigos e pginas de exemplos esto todas erradas! Bem, tudo provavelmente funcionou muito bem a menos que voc esteja usando um navegador muito antigo, contudo se voc testar o que fizemos em um verificador de sintaxe ou submeter a uma programa de validao, tudo que fizemos ser reprovado. O que um programa de validao? deve estar voc perguntando. Voc j deve estar familiarizado com o conceito de checador de sintaxe. Provavelmente existe um deles no seu programa processador de textos. O checador compara as palavras que voc digita, com uma lista de palavras de um dicionrio e alerta quando encontra alguma palavra que no est no dicionrio. Pode ser que a palavra no esteja listada no dicionrio, mas tambm pode ser que voc tenha digitado errado. Em processadores de textos mais sofisticados possvel checar a gramtica, a existncia de verbo em uma frase, alertar para o uso repetido de uma mesma palavra 'e' importun-lo incessantemente. Para que um checador de palavras ou de gramtica possa funcionar a contento, ele precisa saber qual a 'linguagem' usada. O meu checador de ingls da Inglaterra diferente do ingls dos EUA - e se voc no estiver nos EUA? Assim como suas escritas em ingls ou seja l qual for o idioma usado checado pelo processador de texto, o HTML e as CSS podem e devem ser checadas tambm. Se voc comete um erro na sua escrita, as pessoas provavelmente julgaro tratar-se de um erro de datilografia, mas entendero o que voc quis dizer e no haver prejuizo para o entendimento. Um pequeno deslize no HTML ou nas CSS, por outro lado, uma histria diferente. Algo aparentemente insignificante como uma vrgula ou uma aspas fora do lugar, pode fazer toda a diferena entre uma pgina funcionando ou no - isto depender do erro e de como o navegador tratar o erro. uma boa idia submeter seu HTML e as CSS a um checador de sintaxe ou a um validador. Uma das vantagens de se utilizar um editor de HTML decente que ele vem com um checador de sintaxe embutido. Voc no dispe de checadores em editores de textos simples e de propsitos gerais. Se voc possui um editor tipo HomeSite ou BBEdit ou um editor WYSIWYG tal como o Dreamweaver ou GoLive, voc ter um checador e ainda sugestes de como corrigir erros. Se voc no possui um editor assim, poder usar um validador online fornecido pelo W3C - Validador HTML do W3C - Validador CSS do W3C - onde voc faz o upload de seu arquivo e obtm de imediato um relatrio de erros ou de no existncia de erros! evidente que o programa tem que saber qual a 'linguagem' que foi usada na marcao - existem vrias verses ('linguagens') do HTML. Todos os exemplos que mostrei, foram escritos usando o HTML 4.01 - esta a verso atual e a mais utilizada. Existem sub-verses do HTML 4.01 - 'Strict', 'Transitional' e 'Frame Set'. Strict um conjunto de regras muito rgidas que definem o que pode e o que no pode ser escrito em HTML. Transitional um conjunto um pouco mais flexvel e permite escrever algum HTML mais antigo e para algumas peculiaridades prprias de navegadores. Frame Set no muito usado nos dias atuais. No temos nos utilizado do uso de 'frames' pois eles esto em desuso desde o aparecimento das CSS. A maioria das pessoas est satisfeita com o uso de 'Transitional' pois ele no to rgido com a marcao, outras gostam de fazer tudo conforme 'reza o manual' e preferem usar 'Strict'. Para dizer ao navegador qual a linguagem de marcao e a sub-verso que voc est utilizando, coloque a declarao de DocType logo no incio da marcao, no topo da pgina - acima da tag de abertura <html>. Assim como mostrado abaixo... <!DOCTYPE HTML PUBLIC "-//W3C//DTD
Manual de Programao
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> No vou analisar a declarao agora, basta que voc saiba por enquanto que esta declarao no topo da pgina fornece ao validador as informaes necessrias para ele fazer seu trabalho de validao. Agora o validador saber quais so as regras (normas) voc esta utilizando na marcao e poder fazer as anlises necessrias. Ao adicionar o DocType, poderei checar minhas pginas em um editor de HTML que fornea esta facilidade e estar seguro de que terei um cdigo limpo. Agora que j sabemos da importncia do Doctype, podemos voltar ao assunto estilizaes. ETAPA NMERO 10 - FOLHAS DE ESTILO EXTERNAS Todas as folhas de estilo que construi at agora, foram colocadas dentro da seo <head> das pginas. Este procedimento facilita o entendimento, pois basta olhar o cdigo de marcao da pgina e ver como foram definidas as regras de estilo. Tudo est colocado em um nico lugar. Contudo muito raro termos pginas isoladas, o mais comum que tenhamos vrias pginas com uma apresentao semelhante em todo o Web site. Em lugar de colocar as folhas de estilo repetidamente em cada uma das pginas construidas, seria uma boa idia que tivessemos uma nica folha de estilos que pudesse ser lincada a cada uma das pginas. Isto permite mudar a cor de fundo das pginas ou usar um tipo ou tamanho de fonte diferente para todo o site, bastando que voc faa a alterao na folha de estilo 'mestre'. De fato, voc pode mudar completamente a apresentao de todo o site, alterando apenas um arquivo. D uma olhada em http://www.csszengarden.com/ para ver este princpio em ao. Vrios designers construiram suas folhas de estilos para uma pgina padro e isto demonstra de uma forma admirvel como pode-se projetar os mais variados 'skins' para um mesmo 'esqueleto' da pgina, alterando completamente suas caractersticas. Para fazer uso de uma folha de estilo externa, basta linc-la ao documento como mostrado a seguir: <link rel="stylesheet" href="basicsstyles.css" type="text/css" media="screen"> Isto diz ao navegador para procurar as especificaes de estilo em um arquivo chamado 'basicsstyles.css'. Trata-se de um arquivo de texto puro - type="text/css" e os estilos foram otimizados para apresentao em uma tela de computador - media="screen". As folhas de estilo no esto limitadas s telas de computador, voc poder cri-las para servir a outras mdias como, impresso, projeo e at mesmo braille. Se voc pensar sobre isto, concordar que uma folha de papel para impresso no tem o mesmo formato de uma tela de computador e ningum gosta de desperdiar preciosas quantidades de tinta em reas preenchidas com cores slidas, quando tudo o que se quer impresso um texto em preto e branco. Uma folha de estilo para impresso deve especificar uma rea de impresso compatvel com uma folha de papel e ao contrrio de estilizaes para a tela dever usar tamanhos de fontes em 'points' (pt). Esquemas coloridos devem ser minimizados ou mesmo abandonados completamente. Ento tudo o que voc precisar fazer adicionar outro link na seo <head> do documento, imediatamente abaixo daquele para mdia tela. <link rel="stylesheet" href="printstyles.css" type="text/css" media="print"> Se voc decidir que sua folha de estilo serve tanto para tela como para impressora, voc poder usar um link como mostrado a seguir... <link rel="stylesheet" href="styles.css" type="text/css" media="all"> Embora a maioria das minhas folhas de estilos sejam do tipo externa, eu comeo meus projetos com a folha de estilo declarada no prprio documento. Quando eu estou satisfeito com as definies de estilo que construi copio-colo a folha em um arquivo novo e coloco um link para ele na pgina. ETAPA NMERO 11 - ESTILIZANDO TABELAS Embora as tabelas venham sendo usadas para layout desde as eras negras da Web, penso que devo mostr-las aqui, para mostrar que layout construido com CSS oferece muito mais escopo e versatilidade. Tabelas tem por razo de ser e finalidade, a apresentao de dados tabulares, aquelas coisas que normalmente so colocadas em 'folha de dados' onde voc precisa de linhas e colunas para relacionar textos ou mesmo figuras. Nos tempos antigos (e de navegadores hoje ultrapassados) voc alterava a apresentao de uma tabela
Manual de Programao
e de suas clulas, usando vrias propriedades - cores de fundo, imagens de fundo, etc. Uma grande quantidade destes atributos atualmente est em desuso e h algum tempo j no so mais vlidos - muito embora eles hoje ainda funcionem, para o futuro bom no contar com eles. Na verdade melhor que voc no conte com eles desde j. Se voc tentar colocar uma imagem de fundo que seja renderizada no Netscape 4 ou anterior tera que repet-la para cada clula individualmente, como se tivesse dividido a imagem em mltiplas partes, tornando a tarefa pouco usual e frustrante. A prtica usual de definir uma altura e uma largura para a tabela em pixel ou em percentagem no mais vlida. Tabelas devem se auto ajustar em dimenses ao seu contedo. A estilizao de tabelas com CSS tem seus macetes prprios e nem sempre simples e imediata. Voc poder construir sua estrutura de tabela usando display:table; and display:table-cell; no qual cada clula uma div, e para fins de estilizaes usar os elementos HTML de tabelas - table , tr , td , th , etc - com a finalidade de facilitar a tarefa. tr uma linha da tabela, uma fila horizontal de clulas. td e uma diviso de uma linha da tabela. Voc deve estar pensando em coluna, mas o comportamento no de coluna e voc no pode colocar uma imagem de fundo na coluna ou estilizar. As tabelas herdam alguns estilos das DIV's em que forem colocadas, alguns, mas no todos os estilos. Se voc definir font-family: verdana, arial, sans-serif e color: #009 , para o corpo (body) de sua pgina, as tabelas herdaro estas definies, mas no herdaro tamanhos de fontes e nem alinhamentos de textos. H tambm uma hierarquia para os elementos de tabelas. Uma definio para td prevalece sobre uma para tr, que por sua vez prevalece sobre aquelas para table. Voc pode tirar vantagem desta hierarquia. Se voc definir uma cor preta para fundo da tabela e uma cor branca para td e um cellspacing="2", voc ter uma tabela com com clulas brancas e uma borda preta de 2px ao redor. Nota do tradutor: No original desta pgina o autor mostrou a seguir 5 tabelas estilizadas e comentadas, com as regras de estilo para cada uma delas incorporadas na prpria pgina. Como estou usando em meu site marcao XHTML 1.1 que no admite alguns atributos usados pelo autor, criei uma pgina separada para mostrar as tabelas estilizadas e assim continuar com minha pgina vlida. Veja o cdigo fonte da pgina dos exemplos para estudar as regras de estilizao das tabelas. Ver Tabela 1. Esta simples tabela tem um fundo definido como transparent e uma cor cinza bem clarinha pra o fundo das tds. Ver Tabela 2. De acordo com os dados contidos na tabela voc poder dar maior nfase s linhas horizontais ou s colunas verticais. Ver Tabela 3. Aqui um efeito de alto relevo em 3D conseguido atravs de definies de estilos para as cores das bordas. Para as linhas do cabealho da tabela foi definida uma cor escura. Ver Tabela 4. Usei um gradiente para as linhas do cabealho e uma borda esquerda na cor cinza clara para separar as colunas. Ver Tabela 5. OK, eu sou um f de Mondrian, mas minha inteno aqui demonstrar que se voc quiser, poder estilizar as clulas da tabela individualmente.
As possibilidades de estilizao de tabelas so muitas. Quem disse que as tabelas tem que ser entediantes.
Manual de Programao

Css Manual

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Css Manual

Загружено:

Авторское право:

Доступные форматы

APRENDENDO C.S.S. , UMA ESTRUTURA PARA WEB.

Por Andr Marinho C.

quebradas ao fim de uma linha - palavras como nomes de pessoas ou de instituies.

Вам также может понравиться