Você está na página 1de 28

Manual de CSS, folhas de estilo

Manual de: Criar Web, manuais e recursos para desenvolvimento web Verso on-line: http://www.criarweb.com/manuais/5

Introduo s CSS
A linguagem HTML est limitada na hora de aplicar forma a um documento. Isto assim porque foi concebido para outros usos (sobretudo cientficos), diferente dos atuais, que so muito mais amplos. Para solucionar estes problemas, os web designers utilizaram tcnicas tais como a utilizao de tabelas imagens transparentes para ajust-las, a utilizao de etiquetas que no so padres do HTML e outras. Estas "trapaas" causaram muitas vezes problemas nas pginas na hora de sua visualizao em distintas plataformas. Ademais, os desenhadores se viram frustrados pela dificuldade com a qual, mesmo utilizando estes truques, encontravam-se planejando pginas sobre o papel, onde o controle sobre a forma do documento absoluto. Finalmente, outro antecedente que fez necessrio o desenvolvimento desta tecnologia consiste em que as pginas web tm misturado em seu cdigo HTML o contedo do documento com as etiquetas necessrias para lhe dar forma. Isto tem seus inconvenientes j que a leitura do cdigo HTML se faz pesada e difcil na hora de buscar erros ou depurar as pginas. Mesmo que do ponto de vista da riqueza da informao e a utilidade das pginas na hora de armazenar seu contedo, um grande problema que estes textos estejam misturados com etiquetas incrustadas para dar forma a estes: degrada-se sua utilidade. Nestas pginas de CSS pretendemos tornar conhecida a tecnologia com um enfoque prtico para que em poucos captulos voc possa usar as CSS de forma depurada, refletindo toda nossa experincia em seu uso. No pretendemos explorar todos os aspectos da tecnologia j para realizar isto necessitaramos uma extenso do livro inteiro.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Caractersticas e vantagens das CSS


A forma de funcionamento das CSS consiste em definir, mediante uma sintaxe especial, a forma de apresentao que lhe aplicaremos a: Um web inteiro, de modo que se pode definir a forma de todo o web de uma vez s. Um documento HTML ou pgina, que se pode definir a forma, em um pequeno pedao da pgina. Uma poro do documento, aplicando estilos visveis em um pedao da pgina. Uma etiqueta em concreto, chegando inclusive a poder definir vrios estilos diferentes para uma s etiqueta. Isto muito importante j que oferece potncia em nossa programao. Podemos definir, por exemplo, vrios tipos de pargrafos: em vermelho, em azul, com margens, sem margens...

A potncia da tecnologia bvia. Mas no fica s por aqui, j que ademais esta sintaxe CSS permite aplicar o documento formato de forma muito mais exata. Se antes o HTML ficava curto para planejarmos as pginas e teramos que utilizar truques pra conseguir nossos efeitos, agora temos muitas mais ferramentas que nos permite definir esta forma. Podemos definir a distncia entre as linhas do documento. Pode-se aplicar recuo s primeiras linhas do pargrafo. Podemos colocar elementos na pgina com maior preciso, e sem lugar para erros. E muito mais, como definir a visibilidade dos elementos, margens, sublinhados, riscados...

E continuamos mostrando vantagens, j que com o HTML somente podamos definir atributos nas pginas com pixels e porcentagens, agora podemos definir utilizando muito mais unidades como:

Pixels (px) e porcentagem (%), como antes. Polegadas (in) Pontos (pt) Centmetros (cm)

Navegadores que o suportam Esta tecnologia bastante nova, porm nem todos os navegadores a suportam. De fato, somente os navegadores de Netscape verses da 4 em diante e de Microsoft a partir da verso 3 so capazes de compreender os estilos em sintaxe CSS. Ademais, cabe destacar que nem todos os navegadores implementam as mesmas funes de folhas de estilos, por exemplo, Microsoft Internet Explorer 3 no suporta nada em relao a camadas. Isto quer dizer que devemos usar esta tecnologia com cuidado, j que muitos usurios no podero ver os formatos que apliquemos s pginas com CSS. Sendo assim, utilizem as folhas de estilos quando estas no forem a supor causar um problema.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Uso das CSS I


Vamos agora descrever os diferentes usos das CSS introduzidos no captulo anterior. Vamos por ordem descrevendo os pontos segundo sua dificuldade e importncia. Dividimos este captulo em duas partes por sua extenso e por haver vrias formas distintas de aplicar estilos. Aqui veremos as mais simples e no captulo seguinte outras mais complicadas, mas mais potentes. Pequenas partes da pgina
CSS tem uma sintaxe prpria, a veremos atravs de exemplos. Em seguida, veremos com detalhes.

Para definir estilos em sees reduzidas de uma pgina se utiliza a etiqueta <SPAN>. Com seu atributo style indicamos em sintaxe CSS as caractersticas de estilos. Vemos com um exemplo, colocaremos um pargrafo onde vamos visualizar determinadas palavras na cor verde
<p> Isto um pargrafo com vrias palavras <SPAN style="color:green">de cor verde</SPAN>. muito fcil. </p>

Que tem como resultado: Isto um pargrafo com vrias palavras de cor verde. muito fcil. Estilo definido para uma etiqueta Deste modo podemos fazer com que toda uma etiqueta mostre um estilo determinado. Por exemplo, podemos definir um pargrafo inteiro de cor vermelha e outro de cor azul. Para isso, utilizamos o atributo style, que admitido por todas as etiquetas do HTML (sempre e quando dispormos de um navegador compatvel com CSS).
<p style="color:#990000"> Isto um pargrafo de cor vermelha. </p> <p style="color:#000099"> Isto um pargrafo de cor azul. </p>

Que tem como resultado: Isto um pargrafo de cor vermelha. Isto um pargrafo de cor azul.

Estilo definido em uma parte da pgina Com a etiqueta <DIV> podemos definir sees de uma pgina e aplicar estilos com o atributo style, ou seja, podemos definir estilos de uma s vez a todo um bloco da pgina.
<div style="color:#000099; font-weight:bold"> <h3>Estas etiquetas vo em <i>azul e negrito</i></h3> <p> Continuamos dentro do DIV, por isso permanecem os estilos. </p> </div>

Que tem como resultado:

Estas etiquetas vo em azul e negrito


Continuamos dentro do DIV, por isso permanecem os estilos.

No prximo captulo seguiremos vendo formas mais avanadas de usar as CSS.


Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Uso das CSS II


Estilo definido para toda uma pgina Podemos definir no cabealho do documento, estilos para que sejam aplicados a toda pgina. uma maneira muito cmoda de dar forma ao documento e muito potente, j que estes estilos continuaro em toda a pgina e com isso, economizaremos muitas etiquetas HTML que do forma ao documento. Alm disso, se desejamos mudar os estilos da pgina simplesmente faremos de uma vez s. Este exemplo mais complicado visto que utiliza a sintaxe CSS de forma mais avanada. Mas no se preocupe, pois com os exemplos voc ir aprendendo seu uso e mais tarde comentaremos a sintaxe com mais profundidade. No exemplo vemos que se utiliza a etiqueta <STYLE> colocada no cabealho da pgina para definir os diferentes estilos do documento. Simplificando, entre as etiquetas <STYLE> e </STYLE>, se coloca o nome da etiqueta que queremos definir os estilos e entre chaves -{ }- colocamos em sintaxe CSS as caractersticas de estilos. <html> <head> <title>Exemplo de estilos para toda uma pgina</title> <STYLE type="text/css"> <!-H1 {text-decoration: underline; text-align:center} P {font-Family:arial,verdana; color: white; background-color: black} BODY {color:black;background-color: #cccccc; text-indent:1cm} // --> </STYLE> </head> <body> <h1>Pgina com estilos</h1> Bem-vindos... <p>Desculpe ser to breve, mas isto um exemplo sem importncia</p> </body> </html>

Como se pode apreciar no cdigo, definimos que a etiqueta <H1> se apresentar: Sublinhada Centralizada

Tambm, por exemplo, definimos que no corpo do texto inteiro da pgina (etiqueta <BODY> sero aplicados os seguintes estilos: Cor do texto negro Cor do fundo acinzentado Margem lateral de 1 centmetro

Cabe destacar que se aplicamos estilos etiqueta <BODY>, estes sero herdados pelo resto das etiquetas do documento. Isto ser sempre assim, e no caso de que no volte a definir estes estilos nas seguintes etiquetas, dominar a etiqueta mais concreta. Este detalhe pode ser visto na etiqueta <P>, que tem definidos estilos que j foram definidos para <BODY>. Os estilos que so aplicados so os da etiqueta <P> que mais concreta. Por ltimo, vlido apreciar os comentrios HTML que englobam toda a declarao de estilos: <!-Declarao de estilos-->. Estes comentrios so utilizados para que os navegadores antigos que no compreendem a sintaxe CSS, no incluam esse texto no corpo da pgina. Caso contrrio, os navegadores antigos (por exemplo Netscape 3) escreveriam esse "feio cdigo" na pgina. Estilo definido para todo o site web Uma das caractersticas mais potentes da programao com folhas de estilo, consiste em que podemos definir os estilos de todo um site web de uma s vez. Isto se consegue criando um arquivo onde somente colocamos as declaraes de estilos de pgina e linkando todas as pginas do site com esse arquivo. Dessa forma, todas as pginas compartem uma mesma declarao de estilos e, portanto, se a mudamos, mudaro todas as pginas. Todas as vantagens acrescentadas de que se economiza em linhas de cdigo HTML (o que reduz o peso do documento) e se evita a molstia de definir uma e outra vez os estilos com o HTML, tal como foi comentado anteriormente. Veremos agora como o processo para incluir estilos com o arquivo externo. 1 - Criamos o arquivo com a declarao de estilos um arquivo de texto normal, que pode ter qualquer extenso, apesar de podermos atribuir a extenso .css para lembrarmos que tipo de arquivo . O texto que devemos incluir deve ser escrito exclusivamente em sintaxe CSS, ou seja, seria errado incluir o cdigo HTML nas etiquetas e etc. Podemos ver um exemplo a seguir: P{ font-size : 12pt; font-family : arial,helvetica; font-weight : normal; } H1 { font-size : 36pt; font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal; } TD { font-size : 10pt; font-family : verdana,arial; text-align : center; background-color : 666666;

} BODY { background-color : #006600; font-family : arial; color : White; } 2 - Linkamos a pgina com a folha de estilos Para isso, vamos colocar a etiqueta <LINK> com os atributos: rel="STYLESHEET" indicando que o link com uma folha de estilos type="text/css" porque o arquivo de texto, em sintaxe CSS href="estilos.css" indica o nome do arquivo fonte dos estilos

Vejamos uma pgina web inteira que linka com a declarao de estilos anterior.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel="STYLESHEET" type="text/css" href="estilos.css"> <title>P&aacute;gina que l estilos</title> </head> <body> <h1>P&aacute;gina que l estilos</h1> Esta p&aacute;gina tem no cabealho a etiqueta necessria para linkar com a folha de estilos. muito f&aacute;cil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Isto est&aacute; dentro de um TD, logo tem estilo prprio, declarado no arquivo externo</td> </tr> <tr> <td>A segunda fila do TD</td> </tr> </table> </body> </html>

O resultado conseguido por ser visto aqui. Regras de importncia nos estilos Os estilos se herdam de uma etiqueta para outra, tal como foi indicado anteriormente. Por exemplo, se temos declarado no <BODY> alguns estilos, em geral, estas declaraes tambm afetaro etiquetas que estejam dentro desta etiqueta, ou o que o mesmo, dentro de todo o corpo. Em muitas ocasies mais de uma declarao de estilos afeta a mesma parte da pgina. Sempre se leva em conta a declarao mais particular. Porm, as declaraes de estilos podem ser realizados de mltiplas formas e com vrias etiquetas, tambm entre essas formas existe uma hierarquia de importncia pra resolver conflitos entre vrias declaraes de estilos diferentes para uma mesma parte da pgina. Pode ser visto a seguir, esta hierarquia, primeiro colocamos as formas de declaraes mais gerais, e portanto, menos respeitadas em caso de conflito: Declarao de estilos com arquivo externo. (para todo o site web) Declarao de estilos para toda a pgina. (com a etiqueta <STYLE> no cabealho da pgina) Estilos definidos em uma parte da pgina. (com a etiqueta <DIV>) Definidos em uma etiqueta em concreto. (Utilizando o atributo style na etiqueta em questo) Declarao de estilo para uma pequena parte do documento. (Com a etiqueta <SPAN>)

J vimos como incluir estilos na pgina, de todas as maneiras possveis e fizemos uma reviso com a lista

anterior. Agora voc j est em condies de comear a usar as folhas de estilo em cascata para melhorar sua pgina e aumentar a produtividade de seu trabalho. Mas esteja atento aos captulos seguintes onde ir aprende as lies que lhe faltam para dominar bem a matria: conhecer a sintaxe, os diferentes atributos de estilos e outras coisas que iro melhorar sua pgina.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Outra maneira de definir estilos em um arquivo externo


Veremos agora outra maneira de importar uma declarao externa de estilos CSS: @import url ("arquivo_a_importar.css"), que se utiliza para importar umas declaraes de estilos salvadas na rota que se indica entre parnteses. (as aspas so opcionais, mas os parntesis so obrigatrios, pelo menos, em Explorer). Deve-se incluir na declarao de estilos global a uma pgina, ou seja, entre as etiquetas <style type="text/css"> e </style>, que se colocam no cabealho do documento. importante assinalar que a sentena de importao do arquivo CSS deve ser escrita na primeira linha da declarao de estilos, algo parecido ao cdigo seguinte. <style type="text/css"> @import url ("estilo.css"); body{ background-color:#ffffcc; } </style> O funcionamento o mesmo que se escrevssemos todo o arquivo a importar dentro das etiquetas dos estilos, com a garantia de que, se redefinimos dentro do cdigo HTML (entre as etiquetas </style>) estilos que haviam ficado definidos no arquivo externo, os que se aplicaro sero os que tivermos redefinido. Assim, no exemplo anterior, mesmo que tivssemos definido em estilo.css uma cor de fundo para a pgina, a cor que prevaleceria seria o definido em seguida da importao: #ffffcc A diferena entre este tipo de importao do tipo e a que vimos anteriormente: <link rel="stylesheel" type="text/css" href="folha.css"> que @import url ("estilo.css") costuma ser utilizado quando existe umas pautas bsicas no trabalho com os estilos (que se definem em um arquivo a importar) e uns estilos especficos para cada pgina, que se definem a seguir, dentro do cdigo HTML entre as etiquetas </style>, como o caso do exemplo visto anteriormente.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Sintaxe CSS
Tal como vimos nos exemplos, a sintaxe bastante simples e repetitiva. Vamos v-la: Para definir um estilo se utilizam atributos como font-size,text-decoration... seguidos de dois pontos e o valor que lhe desejamos atribuir. Podemos definir um estilo a base de definir muitos atributos separados por ponto e vrgula. Exemplo: font-size: 10pt; text-decoration: underline; color: black; (o ltimo ponto e vrgula da lista de atributos opcional)

Para definir o estilo de uma etiqueta basta a escrevermos seguida da lista de atributos fechados entre chaves. Exemplo: H1{text-align: center; color:black} Os valores que se podem atribuir aos atributos de estilo podem ser vistos em uma tabela no seguinte captulo. Muitos destes valores so unidades de medida, por exemplo, o valor do tamanho de uma margem ou o tamanh da fonte. As unidades de medida so as seguintes: Pontos Polegadas Centmetros pixels pt in cm px

At aqui deixamos claro tudo relativo sintaxe. No prximo captulo voc poder encontrar uma lista de atributos das folhas de estilo em cascata.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Atributos das folhas de estilo


Tanto para praticar em sua aprendizagem como para trabalhar com as CSS o melhor dispor de uma tabela onde se vejam os distintos atributos e valores de estilos que podemos aplicar s pginas web. Aqui voc pode ver a tabela dos atributos CSS, e t-la a mo quando for utilizar as CSS. Nome do atributo color Possveis valores FONTES - FONT
color: #009900; color: red; Serve para indicar a cor do texto. Admitem quase todas as etiquetas de HTML. Nem todos os nomes de cores so admitidos no padro, aconselhvel ento utilizar o valor RGB. xx-small | x-small | small | medium | large | x-large | font-size:12pt; font-size xx-large font-size: x-large; Unidades de CSS Serve para indicar o tamanho das fontes de forma mais rgida e com maior exatido. serif | sans-serif | cursive | font-family:arial,helvetica; fantasy | monospace font-family font-size: fantasy; Todas as fontes habituais Com este atributo indicamos a familia de tipografia do texto. Os primeiros valores so genricos, ou seja, os exploradores as compreendem e utilizam as fontes que o usurio tenha em seu sistema. Tambm podem se definir com tipografias normais, como ocorria em html. Se o nome de uma fonte tem espaos se utilizam aspas para que se entenda bem. normal | bold | bolder | lighter | 100 | 200 | 300 | font-weight:bold; font-weight 400 | 500 | 600 | 700 | 800 font-weight: 200; | 900 Serve para definir a largura dos caracteres, ou com outras palavras, para colocar negritas com total liberdade. Normal e 400 so o mesmo valor, assim como bold e 700. font-style:normal; normal | italic | oblique font-style font-style: italic; o estilo da fonte, que pode ser normal, itlico ou oblquo. O estilo oblquo similar ao itlico. valor RGB ou nome da cor

Exemplos

PARGRAFOS - TEXT
line-height: 12px; line-height: normal; A altura de uma linha, e portanto, o espaamento entre linhas. uma dessas caractersticas que no se podiam modificar utilizando HTML.

line-height textdecoration

normal e unidades CSS

none | [ underline || overline || line-through ]

text-decoration: none; text-decoration: underline;

Para estabelecer a decorao de um texto, ou seja, se est sublinhado, tachado, etc. left | right | center | justify text-align: right; text-align

text-align: center; Serve para indicar o alinhamento do texto. interessante destacar que as folhas de estilo permitem o justificado de texto, mesmo assim, lembre-se que no tem porque funcionar em todos os sistemas. text-indent: 10px; Unidades CSS text-indent text-indent: 2in; Um atributo que serve para fazer recuos ou margens nas pginas. Muito til e novo. capitalize | uppercase | text-transform: none; text-transform lowercase | none text-transform: capitalize; Permite-nos transformar o texto, fazendo com que tenha a primeira letra em maisculas de todas as palavras, tudo em maisculas ou minsculas.

FUNDO - BACKGROUND Backgroundcolor


Uma cor, com seu nome ou background-color: green; seu valor RGB background-color: #000055;

Serve para indicar a cor de fundo de um elemento da pgina. Background- O nome da imagem com seu background-image: url(mrmol.gif) ; background-image: caminho relativo ou absoluto image url(http://www.x.com/fondo.gif) Colocamos com este atributo uma imagem de fundo em qualquer elemento da pgina.

BOX - CAIXA
margin-left: 1cm; margin-left: 0,5in; Indicamos com este atributo o tamanho da margem esquerda. margin-right: 5%; Unidades CSS Margin-right margin-right: 1in; Utiliza-se para definir o tamanho da margem direita. margin-top: 0px; Unidades CSS Margin-top margin-top: 10px; Indicamos com este atributo o tamanho da margem acima da pgina. margin-bottom: 0pt; Margin-bottom Unidades CSS margin-top: 1px; Com ele indica-se o tamanho da margem na parte debaixo da pgina. padding-left: 0.5in; Unidades CSS Padding-left padding-left: 1px; Indica o espao inserido, pela esquerda, entre a borda do elemento que contem e o contedo deste. parecido ao atributo cellpadding das tabelas. O espao inserido tem o mesmo fundo que o fundo do elemento que contem. padding-right: 0.5cm; Padding-right Unidades CSS padding-right: 1pt; Indica o espao inserido, neste caso pela direita, entre a borda do elemento que contm e o contedo deste. parecido ao atributo cellpadding das tabelas. O espao inserido tem o mesmo fundo que o fundo do elemento que contem. padding-top: 10pt; Unidades CSS Padding-top padding-top: 5px; Indica o espao inserido, por cima, entre a borda do elemento que contem e o contedo deste.

Margin-left

Unidades CSS

Paddingbottom

Unidades CSS

padding-right: 0.5cm; padding-right: 1pt;

Indica o espao inserido, neste caso por baixo, entre a borda do elemento que contm e o contedo deste. border-color: red; cor RGB e nome de cor Border-color border-color: #ffccff; Para indicar a cor da borda do elemento da pgina a qual aplicamo-la. Pode-se colocar cores separadas com os atributos border-top-color, border-right-color, border-bottomcolor, border-left-color. none | dotted | solid | border-style: solid; double | groove | ridge | Border-style border-style: double; inset | outset O estilo da bordea, os valores significam: none=nenhuma borda, dotted=pontilhado (no parece funcionar), solid=slido, double=borda dupla, e desde groove at outset so bordas com vrios efeitos 3D. border-width: 10px; border-width Unidades CSS border-width: 0.5in; O tamanho da borda do elemento ao qual o aplicamos.

float

none | left | right

float: right;

Serve para alinhar um elemento esquerda ou direita fazendo com que o texto se agrupe ao redor de tal elemento. Igual que o atributo align em imagens em seus valores right e left.

clear

none | right | left

clear: right;

Se este elemento tem a sua altura imagens ou outros elementos alinhados direita ou esquerda, com o atributo clear fazemos com que se coloque em um lugar onde j no tenha estes elementos ao lado que indicamos.

A especificao de estilos CSS muito ampla, mas acredito que a imensa maioria est aqui definida, mas

claro, com a seleo dos mais importantes.


Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Avanados truques com CSS


As folhas de estilos so um assunto muito longo o qual j foram escritos livros inteiros. Ns nos centramos nos temas mais prticos e por isso vamos j iremos acabar com este captulo com alguns pontos. Definir estilos utilizando classes As classes nos servem para criar definies de estilos que podem ser utilizadas repetidas vezes. Uma classe pode ser definida entre as etiquetas <STYLE> (no cabealho do documento), ou em um arquivo externo pgina. Para defin-las utilizamos a seguinte sintaxe, um ponto seguido do nome da classe e entre chaves os atributos de estilos desejados. Desta maneira: .nomedaclasse {atributo: valor;atributo2:valor2; ...} Uma vez tendo uma classe, podemos utiliz-la em qualquer etiqueta HTML. Para isso utilizaremos o atributo class, colocando como valor o nome da classe, desta forma: <ETIQUETA class="nomedaclasse"> Exemplo da utilizao de classes
<html> <head> <title>Exemplo da utilizao de classes</title> <STYLE type="text/css"> .fundonegroletrasbrancas {background-color:black;color:white;font-size:12;font-family:arial} .letrasverdes {color:#009900} </STYLE> </head> <body> <h1 class=letrasverdes>Ttulo 1</h1> <h1 class=fundonegroletrasbrancas>Ttulo 2</h1> <p class=letrasverdes> Isto um pargrafo com estilo de letras verdes</p> <p class=fundonegroletrasbrancas> Isto um pargrafo com estilo de fundo negro e as letras brancas. tudo!</p> </body> </html>

Ver o exemplo anterior Estilo nos links Uma tcnica muito habitual, que se pode realizar utilizando as folhas de estilo em cascada e no se podia em HTML, a definio de estilos nos links, tirando os sublinhados ou fazer links na mesma pgina com distintas cores. Para aplicar estilo aos links devemos defin-los para os distintos tipos de links que existem (visitados, ativos...). Utilizaremos a seguinte sintaxe, na declarao de estilos global da pgina (<STYLE>) ou do site (Definio em arquivo externo): Links normais A:link {atributos} Links visitados A:visited {atributos}

Links ativos (Os links esto ativos no preciso momento em que se clica sobre eles) A:active {atributos} Links hover (Quando o mouse est em cima deles, funciona somente em explorer) A:hover {atributos} O atributo para definir links sem sublinhado text-decoration:none, e para dar cor color:sua cor. Tambm podemos definir o estilo de cada link na prpria etiqueta <A>, com o atributo style. Desta maneira podemos fazer com que determinados links da pgina seja vistas de forma distinta. Exemplo de estilos nos links
<html> <head> <title>Exemplos de estilo nos links</title> <STYLE type="text/css"> A:link {text-decoration:none;color:#0000cc;} A:visited {text-decoration:none;color:#ffcc33;} A:active {text-decoration:none;color:#ff0000;} A:hover {text-decoration:underline;color:#999999;font-weight:bold} </STYLE> </head> <body> <a href="http://dominioinexistente.nofunciona.com">Link normal</a> <br> <br> <a href="links.html">Link visitado</a> Clicar este link para v-lo ativo, passar o mouse por cima para que mude. </body> </html>

Ver o exemplo anterior URL como valor de um atributo: Determinados atributos de estilos, como background-image necessitam uma URL como valor, para indic-las podemos definir tanto caminhos relativos como absolutos. Assim, podemos indicar a URL da imagem de fundo destas duas maneiras: background-image: url(fundo.gif) No caso de que a imagem esteja no mesmo diretrio que a pgina. backgroundimage: url(http://www.criarweb.com/imagens/fundo.gif) Ocultar estilos em navegadores antigos No caso de definir dentro da etiqueta <STYLE> umas declaraes de estilos devemos certificarmos que estas no vo ser imprimidas na pgina com navegadores antigos. Pensar em um navegador que no reconhea a etiqueta <STYLE>, pensar que corresponde com algo que no entende e se esquecer da etiqueta. O que encontra a seguir um texto normal e far com que este se veja na pgina, como com qualquer outro texto. Para evitar isso devemos ocultar com comentrios HTML (<!-- isto um comentrio -->) tudo que tiver dentro da etiqueta <STYLE>. Deste modo terminamos nosso manual de CSS. Esperamos poder ter ajudar a fazer pginas melhores e mais rapidamente.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

O que so as camadas?

Vejamos uma pequena introduo ao que so as camadas, a etiqueta HTML <DIV> utilizada para constru-las e os atributos CSS com os quais podemos aplicar estilos. Como j vimos em nosso manual de CSS, <SPAN> serve para aplicar estilo a uma pequena parte de uma pgina HTML. Por exemplo, com ela poderamos fazer com que uma parte de um pargrafo fosse colorida de vermelho. Com <SPAN> no habitual englobar um pedao muito grande de texto, por exemplo que ocupe vrios pargrafos. Com <DIV> tambin podemos aplicar estilo a partes de la pgina HTML. A diferena entre <SPAN> e <DIV> que com esta ltima sim que podemos aplicar estilo a uma parte mais ampla da pgina, por exemplo com trs pargrafos. Alm do mais, a etiqueta <DIV> tem um uso adicional que o de criar divises nas pginas as quais poderemos aplicar uma quantidade adicional de atributos para modificar seus comportamentos. Por exemplo, com o atributo align de HTML podemos alinhar a diviso ao centro, esquerda, direita ou justificado. Porm seu uso mais destacado o de converter essa diviso em uma camada. Uma camada uma diviso, uma parte da pgina, que tem um comportamento muito independente dentro da janela do navegador, j que podemos coloc-la em qualquer parte da mesma e poderemos mover por ela independentemente, por exemplo. Muitos dos efeitos mais comuns do DHTML se baseiam no uso de camadas. As etiquetas <LAYER> e <ILAYER> tm como objetivo construir camadas, mas estas no so compatveis mais do que com Netscape, por isso mais recomendvel utilizar a etiqueta <DIV> para fazer camadas. Os atributos que podemos aplicar a estas etiquetas, mas em concreto s duas recomendadas <SPAN> e <DIV>, so principalmente de estilos CSS. Estes atributos nos permitem, como podemos ver no manual de folhas de estilo em cascata de criarweb, modificar de uma maneira muito exaustiva a apresentao dos contedos na pgina. Para aplicar estilos a estas etiquetas utiliza-se o atributo de HTML style, desta forma: <SPAN style="text-decoration:underline;font-weight:bold">...</SPAN> <DIV style="color:red;font-size:10px">...</DIV> Como podemos ver muitos exemplos no manual de CSS, nos referimos a ele para ampliar esta informao. Mas no havamos visto ainda uma srie de atributos que nos servem para posicionar a diviso na pgina como uma camada. Estes atributos podem ser aplicados etiqueta <DIV> que a qual servia para criar camadas compatveis com todos os navegadores. Os atributos para que a diviso seja uma camada so vrios e podem ser vistos a seguir. <div id="c1" style="position:absolute; left: 200px; top: 100px;"> Oi! </div> O primeiro, position, indica que se posicione de maneira absoluta na pgina e os segundos, left e top, so a distncia desde a borda esquerda da pgina e a borda superior. Existem outros atributos especiais para camadas como width e height para indicar a largura e a altura da capa, Z-index que serve para indicar que camadas se vem em cima de que outras, clip que serve para recortar uma camada e fazer com que partes dela no sejam visveis, ou visibility para definir se a camada visvel ou no. Estes, e outros atributos veremos no prximo captulo, onde falaremos do posicionamento de camadas.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Atributos para camadas

Vimos no captulo anterior o que so as camadas e algumas pequenas mostras sobre como cri-las dando algum estilo.. Agora vamos ver detalhadamente os atributos especficos para aplicar posicionamento a uma camada e outros estilos. Antes de mais nada, cabe dizer que uma camada pode ter qualquer atributo de estilos dos que vimos no manual de CSS. Assim, o atributo color indica a cor do texto da camada, o atributo font-size indica o tamanho do texto e assim com todos os atributos j vistos. Agora ento, existem uma srie de atributos que servem para indicar a forma, o tamanho das camadas, a visibilidade, etc, que no vimos nos captulos anteriores e que veremos a seguir. Atributo position Indica o tipo de posicionamento da camada. Pode ter dois valores, relative ou absolute. - relative indica que a posio da camada relativa ao lugar onde se estava escrevendo na pgina no momento de escrever a camada com sua etiqueta

- absolute indica que a posio da camada se calcula com relao ao ponto superior esquerdo da pgina. Atributo top Indica a distncia em vertical onde ser colocada a camada. Se o atributo position absolute, top indica a distncia da borda superior da camada com relao a borda superior da pgina. Se o atributo position era relative, top indica a distncia desde onde se estava escrevendo nesse momento na pgina at a borda superior da camada. Atributo left Basicamente funciona igual ao atributo top, com a diferena que o atributo left indica a distncia na horizontal a que estar situada a camada. Atributo height Serve para indicar o tamanho da camada na vertical, ou seja, sua altura. Atributo width Indica a largura da camada Atributo visibility Serve para indicar se a camada pode ser vista na pgina ou se permanece oculta ao usurio. Este atributo pode ter trs valores. - visible serve para indicar que a camada poder ser vista. - hidden indicar que a camada est oculta. - inherit o valor por padro, que quer dizer que herda a visibilidade da camada onde est colocada a camada em questo. Se a camada no est colocada dentro de nenhuma outra se supem que est colocada na camada do documento, que toda a pgina e que sempre est visvel. Atributo z-index Serve para indicar a posio sobre o eixo que tero as distintas camadas da pgina. Com outras palavras, com z-index podemos dizer quais camadas sero vistas em cima ou embaixo de outras, no caso de que estejam sobrepostas. O atributo z-index toma valores numricos e a mayor z-index, mais em cima ser vista na pgina. Atributo clip um atributo um pouco difcil de explicar. Em concreto serve para recortar determinadas reas da

camada e que no podem ser vistas. Uma camada que est visvel se pode recortar para ser vista, mas no ser visto nenhum pedao desta. O cliping se indica por meio de 4 valores, com esta sintaxe. rect (<top>, <right>, <bottom>, <left>) Os valores <top>, <right>, <bottom> y <left> indicam distncias que se podem neste esquema.

Este um exemplo de camada que utiliza todos os atributos que vimos neste artigo e em algum mais para aplicar estilo camada.
<div style="clip: rect(0,158,148,15); height: 250px; width: 170px; left: 10px; top: 220px; position: absolute; visibility: visible; zindex:10; font-size: 14pt; font-family: verdana; text-align: center; background-color: #bbbbbb"> Esta camada tem um cliping, por isso se v entrecortada. <br> <br> Isto uma camada de prova </div>

Pode ser visto o exemplo em uma pgina web, onde tambm poder ser apreciado o efeito conseguido ao realizar o cliping.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Problema com o posicionamento absoluto de camadas


Recebi uma consulta em meu correio eletrnico sobre a colocao de camadas de maneira absoluta, mas na que no nos importa a definio da tela do usurio e outros ir e vir dos elementos HTML. Nosso companheiro expressou sua dvida da seguinte maneira: Se trabalhamos com position: absolute dando um left e um top funciona se tiver sua pgina alinhada esquerda. Minha pgina est alinhada no centro, ento o que acontece que dependendo da resoluo da tela que tenha (largura de 800px,1024px,etc) a pgina fica sambando e no enquadra nada. Primeiro de tudo, devemos saber que se trabalhamos com o position relative as camadas se colocam no lugar onde aparecem dentro do cdigo HTML. Deste modo, se colocamos uma camada com position relative dentro de uma clula de uma tabela, tal camada apareceria dentro da clula onde a estamos colocando, independentemente do lugar onde se situa a clula ao mudar a definio da tela. O problema desta soluo que a camada faria crescer a clula da tabela onde queremos coloc-la ( igual a qualquer outro elemento HTML que colocssemos dentro da tabela) e muito provvel que nosso desenho no nos permitia este fato. Certamente j teria notado este problema e se no assim, convido-lhe a que crie a camada que voc tenta colocar com o atributo position a relative para ver se com isso seu problema j est resolvido.

Em todos os casos, a camada que tentamos colocar ter que ter o position absolute, porque com relative no consertamos totalmente o problema. Ento voltaremos ao problema inicial, que era situar a camada com position absolute no lugar exato, independentemente da definio de tela. A soluo final que proponho passa por aplicar algum truquezinho. De fato, estive a alguns dias atrs me perguntando sobre esta questo e afinal encontrei a soluo, apesar de no ter vindo de mim, e sim que a extrai de www.cross-

browser.com.

A idia um pouco complexa e coloc-la em ao devemos realizar uma srie de aes que, sinceramente, considero excessivas para um problema inicialmente simples. Sendo assim, no se assustem com o que vou expor a seguir, pois logo tratarei de explicar um pouco melhor. Nosso esquema de trabalho consistir em uma camada com posio relativa, que nos servir de "ncora" e outra com a posio absoluta, onde colocaremos o contedo final a mostrar na camada. Colocaremos a camada relativa no lugar aproximado onde queremos que aparea a camada absoluta. Posicionaremos a camada absoluta, uma vez carregada a pgina, em um lugar prximo camada relativa. Supostamente, vamos ter que realizar estas aes com Javascript, que a linguagem que nos permite atualizar as posies das capas dinamicamente. Detalhadamente Dissemos que haveria que colocar uma camada perto do lugar onde tem de aparecer a camada com position absolute. Insisto em que as camadas relativas sejam colocadas no lugar onde as colocamos dentro do cdigo HTML, pois ser fcil colocar a capa relativa no lugar exato e que este lugar seja vlido para qualquer definio. A segunda capa, a que Tem o contedo final, a colocamos inicialmente em uma posio qualquer e escondida, de forma que no se veja que est mal colocada. Uma vez terminada de carregar a pgina, poderemos acessar a posio da camada relativa, extraindo seus valores top e left e colocando-os em os correspondentes top e left da capa com posio absoluta. Uma vez marcada a posio da capa absoluta podemos torn-la visvel. Na imagem seguinte colocamos a camada com posio relativa no link. Na verdade haveria trs camadas para poder posicionar outras tantas camadas com posio absoluta. A parte que vemos sombreada de verde corresponde ao espao que abarcaria a camada relativa. Sua posio seria a que est marcada por um "x " vermelho que aparece em sua esquina esquerda. Tal posio depende do lugar onde aparea os links na pgina. Logo, com Javascript deveramos atribuir a posio da camada absoluta de uma maneira parecida a esta.
left da capa absoluta = left da capa relativa top da capa absoluta = top da capa relativa + altura da capa relativa

Podemos somar algum pxel a mais posio da camada, se que queremos mov-la um pouco abaixo e direita, tal como vimos na imagem. No pretendo neste artigo, explicar como se fazem essas operaes de Javascript. Advirto que se no se conhece nada de Javascript ser impossvel se dispor de uma tarefa to tediosa como o maneja de camadas. Se por o contrrio, j tivemos contato com Javascript e DHTML anteriormente, no deveria ser um problema realizar essas aes.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Construo CSS
Neste artigo vamos conhecer a construo de pginas utilizando Folhas de estilos em cascata (CSS).

Veremos como realizar este tipo de construo, junto com algumas vantagens e inconvenientes. Para muitos ser ainda um campo por explorar. Embora no vamos entrar em grandes detalhes, vamos tentar tornar conhecida a construo com CSS para tirar as possveis dvidas por parte do leitor. Nos prximos captulos ampliaremos a informao e oferecemos tutoriais mais prticos. Como se pode aprender no Manual de CSS, as folhas de estilo em cascata ajudam a separar o contedo da forma, ou seja, os elementos que compem uma pgina da forma com a qual se mostram. Ademais, CSS ajuda em grande medida definio de estilos na pgina, j que permite ajustar de uma forma muito mais precisa qualquer aspecto de qualquer elemento da pgina. A construo com CSS leva a utilizao das folhas de estilo a seu grau mximo, de maneira que qualquer definio do aspecto da pgina se realiza na declarao CSS que linkamos com o documento HTML. Para definir a situao dos elementos na pgina se utilizam as camadas, a quais se aplica um posicionamento atravs tambm das folhas de estilo. Para criar as camadas se utilizam etiquetas <DIV>, nas que se introduzem os elementos que quisermos que apaream na pgina. Os elementos dentro dos <DIV> tambm podem se acrescentar, para herdar as propriedades e posicionamento das camadas pai. Na construo por camadas se definem unicamente etiquetas <DIV> e as tabelas s se utilizam para mostrar informao tabulada, ou seja, mostrada em filas e colunas. Cabe assinalar que na construo tradicional se utilizam as tabelas para ajustar a posio dos elementos na pgina. Certamente, muito dos leitores esto bem familiarizados com o uso de tabelas para construir uma web, pois se trata de uma tcnica bastante simples, embora muito bastante pouco prtica e que complica bastante o cdigo das pginas web resultantes. A construo por tabelas uma forma de criar webs mais evoluda e que melhora muito a construo tradicional, embora tenha tambm seus inconvenientes. Vejamos primeiro, algumas das vantagens da construo CSS: A separao do contedo da pgina e do estilo ou aspecto com o qual se devem mostrar. Ter em conta que, quanto mais separarmos estes dois elementos, mais simples ser a manuteno das pginas e o processamento da informao. Com isso tambm poderemos obter pginas mais limpas e claras. Economia na transferncia. Se todos os estilos e posies dos elementos se introduzem em um documento externo, liberaremos o cdigo da pgina e ocupar muito menos. Como a declarao de estilos se armazena no cach do navegador, s se transfere na primeira pgina que se visita do site, com o qual a segunda e as posteriores pginas que se solicitem se carregaro muito mais rpido. Facilidade para alterar o aspecto da pgina sem tocar no cdigo HTML. Como toda a informao dos estilos e o posicionamento das camadas se encontram em um mesmo arquivo, se desejarmos mudar qualquer elemento da pgina -seja sua posio ou seu aspecto-, s temos que atualizar a folha de estilos, e as mudanas sero vistas automaticamente em todo web.

Como dissemos, tambm existem algumas desvantagens: Compatibilidade com navegadores antigos. Necessita-se que o visitante disponha de um navegador bastante avanado. A maioria dos visitantes dispe de navegadores que suportam caractersticas avanadas das CSS, mas ainda h muita gente que no atualizaram suas mquinas ou que navega em sistemas de somente texto. Os navegadores que no suportam folhas de estilos, pelo menos lero o cdigo da pgina e o mostraro sem nenhum posicionamento. Isto pode ser fatigante, mas pelo menos visualizaro todos os dados da pgina, embora desarrumados e sem estilo. Diferenas entre navegadores. Dependendo do navegador tambm mudam as etiquetas de estilos suportadas, podendo fazer com que as pginas no sejam vistas exatamente igual entre um cliente e outro. Tambm, assim como ocorre com HTML, existem atributos no padronizados ou que tm valores padronizados diferentes. Quando se inicia com a construo em CSS, pode ser um tema bastante complicado e pode dar bastante dor de cabea, porm, trata-se de, pouco a pouco, ir aprendendo todos os atributos e os navegadores onde se visualizam ou no. Dificuldade. Sem dvida, se estamos acostumados ao HTML, passar a CSS bastante mais complicado e requer um estudo mais profundo. Entretanto, este passo nos brindar um maior controle dos elementos da pgina e ampliar nossas fronteiras na hora de construir.

Exemplo CssZenGarden Existe um site muito interessante e ilustrador que pode nos ajudar a conhecer rapidamente a potncia das CSS e termos uma idia do que pode significar seu uso. um site onde se mostra um contedo e um desenho bastante logrado. Ademais, dispe de vrios links para poder ver o mesmo site, como mesmo contedo, mais com distinto aspecto. Dessa forma podemos ver como se pode chegar a alterar o desenho de uma pgina com somente mudar a folha de estilos. A URL do site http://www.csszengarden.com. muito interessante que selecionem outros desenhos para ver a mudana radical que as pginas web podem ter com distintas folhas de estilos. Ns exploramos um pouco as capacidades das CSS e realizamos um exemplo de desenho de CssZenGarden por nossa conta. Podemos v-lo neste link. Por onde continuar Em CriarWeb.com pensamos em fazer uma srie de artigos para explicar o processo de criao de uma web, projetada completamente em CSS. Entretanto, por enquanto, devemos fazer referncia a algumas pginas em ingls que explicam este assunto detalhadamente. http://www.stylegala.com/ http://www.cssbeauty.com/ http://www.cssvault.com/
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Formas de aplicar estilos em construo CSS


Vamos ver outra vez distintos modos de aplicar estilos s pginas. um tema que j vimos no manual de CSS, mas vale a pena refrescar conceitos e ampliar a informao que foi oferecida em seu dia. Aplicao de estilo a etiquetas Pode-se atribuir o estilo a uma etiqueta concreta de HTML. Para isso, na declarao de estilos escrevemos a etiqueta e entre chaves, os atributos de estilo que desejarmos.
body { background-color: #f0f0f0; color: #333366; }

Podemos aplicar o mesmo estilo em um conjunto de etiquetas. Para isso, indicamos as etiquetas seguidas por vrgulas e logo, entre chaves, os atributos que quisermos definir.
h1, p{ color: red; }

Neste caso se define que os cabealhos de nvel 1 e os pargrafos, tenham a letra vermelha. Definio de classes Podemos utilizar uma classe se desejarmos criar um estilo especfico, para logo aplica-lo a distintos elementos da pgina. As classes na declarao de estilos se declaram com um ponto antes do nome da classe.
.minhaclasse{ color: blue; }

Para atribuir o estilo definido por uma classe em um elemento HTML, simplesmente se acrescenta o atributo class etiqueta que quisermos aplicar tal classe. O atributo class se atribui ao nome da classe a

aplicar. Por exemplo:


<p class="minhaclasse">este pargrafo tem o estilo definido na classe "minhaclasse".</p>

O pargrafo anterior se apresentaria com a cor azul. A definio de classes e sua utilizao simples, vejamos um exemplo mais detalhado: Para a seguinte declarao de estilos:
body, td, p{ background-color: #000000; color: #ffffff; } .inverso{ background-color: #ffffff; color: #000000; }

Foi definido um fundo preto e cor de texto branco para o corpo da pgina, assim como as clulas e os pargrafos. Logo, foi declarado uma classe, de nome "inverso", com as cores ao contrrio, ou seja, com fundo branco e texto negro.
<body> <p>Ol, isto um pargrafo normal</p> <p class="inverso">Pargrafo com as cores invertidas</p> <table> <tr> <td class="inverso">INVERSO</td> <td>NORMAL</td> </tr> </table> </body>

Esta pgina tem, geralmente, o fundo negro e o texto branco. O primeiro pargrafo, que u pargrafo normal, continua com esta definio geral de estilos, mas o segundo pargrafo, cujo foi aplicado a classe "inverso", tem o fundo branco e o texto em preto. Em relao tabela, em sua primeira clula foi atribuda a classe "inverso", portanto ser visto com fundo branco e cor de texto em preto. Enquanto que a segunda clula, que no tem atribudo nenhuma classe, se apresentar como foi definido na regra geral. Para conhecer os resultados obtidos no exemplo anterior podemos v-lo em uma pgina a parte. Estilos que s se utilizam uma vez Tambm podemos ter um estilo especfico para um nico elemento, que no vai se repetir em nenhum outro caso. Para isso temos os estilos atribudos por identificador. Os identificadores se definem em HTML utilizando o atributo id na etiqueta que desejarmos identificar. O valor do atributo id ser o que ns definirmos.
<div id="camada1">

Na folha de estilos, para definir o aspecto desse elemento com id nico, escreve-se o caractere "jogo da velha", seguido do identificador indicado na etiqueta e entre chaves os atributos css que desejarmos.
#camada1{ font-size: 12pt; font-family: arial; }

Neste caso, foi atribudo fonte de tamanho 12 pontos e corpo arial. Como se pode concluir na leitura destas linhas, geralmente prefervel utilizar estilos definidos em classes do que aos definidos com identificadores, a no ser que estivermos certos de que esse estilo no vai se repetir em todo o documento.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Pseudo-element em CSS
Os pseudo-elements (pseudo-elementos, se traduzimos em portugus) servem para aplicar estilos a partes mais especficas dentro de uma etiqueta. Ou seja, para o exemplo concreto da etiqueta pargrafo, com os pseudo-elementos podemos definir o estilo para a primeira letra do pargrafo e para a primeira linha. Pseudo-element first-letter Um efeito habitual de algumas publicaes, por exemplo, as de estrias para crianas, fazer maior a primeira letra de una pgina e enfeita-la de alguma maneira. Com CSS podemos aplicar estilos especficos e fazer, por exemplo, que essa primeira letra seja maior e tenha uma cor diferente do resto do pargrafo. Utiliza-se desta maneira: P:first-letter { font-size: 200%; color: #993333; font-weight: bold; } Assim, estamos atribuindo um tamanho de letra 200% maior do prprio pargrafo. Tambm estamos mudando a cor dessa primeira letra. Dentre todas as propriedades de estilos, somente algumas podem se aplicar aos pseudo-elementos firstletter. So as seguintes, segundo a especificao do W3C: font properties, color properties, background properties,'text-decoration', 'vertical-align' (somente se 'float' estiver atribudo a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' e 'clear'. Pode-se ver um exemplo de aplicao de um estilo com first-letter. Pseudo-element first-line Como adiantava, este pseudo-elemento, serve para atribuir um estilo prprio primeira linha do texto. possvel que tenhamos visto alguma revista ou jornal que utilize este estilo para remarcar as primeiras linhas do pargrafo. Um exemplo de seu uso seria o seguinte: P:first-line { text-decoration: underline; font-weight: bold; } As propriedades de estilos que podem se aplicar ao pseudo-element first-line so as seguintes: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' e 'clear'. Pode-se ver um exemplo de aplicao de um estilo com first-line. Uso de classes com os pseudo-elementos Em determinadas ocasies podemos necessitar criar uma classe (class) de CSS a qual atribuir os pseudoelementos, de modo que estes no se apliquem em todas as etiquetas da pgina. Por exemplo, podemos desejar que somente se modifique o estilo da primeira linha do texto em alguns pargrafos e no em todos da pgina. Uma classe se define com o nome da etiqueta seguido de um ponto e o nome da classe. Se ademais, desejarmos definir um pseudo-elemento, deveramos indic-lo a seguir, com esta sintaxe: P.nomeclasse:first-line { font-weight: bold;

} Pseudo-elementos em CSS2 A parte de first-line e first-letter, nas especificaes de CSS 2 existem outros pseudo elementos que vou nomear para conhecimento dos leitores, embora nos aprofundaremos em seu uso. Tratam-se de before e after e servem para inserir "contedos gerados" antes e depois do elemento ao qual atribuirmos estes pseudo-elements. Um exemplo disso : P.nota:before { content: "Nota: " } Assim, se definiu uma classe de pargrafo chamada "note" na qual se indica que antes da prpria nota se deve incluir o texto indicado, ou seja, "Nota: ". Ateno compatibilidade com CSS2, que, pelo menos para estes elementos, no est suportada em verses 6 de Internet Explorer. Firefox, por sua vez, sim que compatvel com estas caractersticas de CSS2.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Definio de estilos CSS Shorthand


Shorthand: Vamos explicar como escrever de forma reduzida nossas regras CSS para que nossos arquivos de estilo tenham menos peso e sejam mais entendveis na hora de uma atualizao. Segunda a W3C h duas formas de escrever a mesma regra de CSS: a padro e a shorthand. Uma a longa e a outra a reduzida. Propriedade Font (fonte)
font-style || font-variant || font-weight || font-size / line-height || familia da fonte

Exemplo:
P {font: italic normal bold 12px/14pt Verdana, Tahoma, Arial}

Propriedade Background (fundo)


background-color || background-image || background-repeat || background-attachment || background-position

Exemplo:
Body {background: #FFF url(../imagens/exemplo.gif) no-repeat fixed center}

Margin (Margem)
longitude | porcentagem | auto

Exemplo:
Body {margin: 5px} /* todas as margens a 5px */ P {margin: 2px 4px} /* margens superior e inferior a 2px, margens esquerda e direita a 4px */ DIV {margin: 1px 2px 3px 4px} /* margem superior a 1px, right margin a 2px, bottom margin a 3px, left margin a 4px */

Padding (Enchimento)

longitude | porcentagem | auto

Exemplo:
Body {padding: 2em 3em 4em 5em} /* Se definimos quatro valores estamos aplicando o padding superior, direito, inferior e esquerdo */ Body {padding: 2em 4em) /* Se definimos dois ou trs valores, os valores faltantes se tomam do lado oposto: superior e inferior a 2em, direito e esquerdo a 4em */ Body {padding: 5em} /* Se definimos um s valor se aplicam a todos os lados */

Border (Borda)
border-width || border-style || color

Exemplo:
H3 {border: thick dotted blue}

Informe de Federico Elgarte e-mail: mgf@netverk.com.ar URL: http://www.cssboulevar.com.ar/

Utilizar porcentagens para tamanhos de texto com CSS


A porcentagem outra das medidas ou unidades que podemos utilizar nos atributos de folhas de estilo em cascada (CSS) para definir um tamanho. Neste artigo, veremos exemplos sobre como modificar os tamanhos dos textos por meio de porcentagens, para conseguir novos tamanhos que sejam relativos aos que se esto utilizando. Por exemplo, poderamos definir um estilo para escrever com um texto com o dobro de tamanho do que se estiver trabalhando:
<span style="font-size:200%">Este texto tem o dobro de tamanho</span>

Isto quer dizer que o texto ter o dobro e tamanho, 2 pelas unidades de texto que estivermos trabalhando. Por exemplo, se estivermos trabalhando com tamanhos de texto de 10pt, o texto dentro do anterior span seria 20pt. O do seguinte cdigo exemplifica este caso concreto:
<span style="font-size:10pt;">Ola amigos <span style="font-size:200%">Este texto tem o dobro de tamanho</span> </span>

O mesmo pode ser feito, porm para definir um texto menor, atribuindo porcentagens abaixo de 100%. Por exemplo, se quisssemos fazer um texto com a metade do tamanho utilizaramos a seguinte etiqueta:
<span style="font-size:50%">Este texto a metade do anterior<,/span>

Se estivssemos trabalhando com um tamanho de texto de 16pt, com a anterior etiqueta se escreveria com tamanho 8pt. O cdigo seria o seguinte:
<span style="font-size:16pt;">Ola amigos <span style="font-size:50%">Este texto a metade do anterior</span> </span>

Agora vamos definir um par de classes para um texto maior e menor, que poderamos utilizar para aumentar e reduzir o texto respectivamente.
<style type="text/css"> .mayor {font-size:150%}

.menor {font-size:75%} </style>

Este cdigo indica que a classe maior um texto de 150%, ou seja, a metade mais que o anterior, e a classe menor um texto de 75%, ou seja, trs quartas partes do anterior. Poderamos utilizar estas classes com um cdigo como este: Este um texto normal <span class="maior">e este maior</span>, este volta a ser normal <span class="menor">e este menor</span> Os diferentes exemplos deste artigo podem ser vistos em uma pgina a parte.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Por que desenhar com CSS


As tabelas existem e existiram desde o comeo em HTML, porm no se criaram para desenhar um site, e sim para a apresentao de dados tabulares. A utilizao do "border=0" e as imagens transparentes tornaram possvel criar uma rede que permitiu aos designers organizar textos e imagens, estabelecer tamanhos e localizar objetos. Porm, isto simplesmente incorreto. As tabelas no se criaram para construir e no devem ser utilizadas para isso, porque desta forma se misturam apresentao e contedo. A soluo clara: CSS+HTML/XHTML. Felizmente, cada vez so mais as empresas que decidem deixar atrs as tediosas tabelas e evoluir desenvolvendo seus sites respeitando os padres estabelecidos pela W3C (organizao internacional que h uns 12 anos se dedica ao desenvolvimento de pautas e padres web), o que facilita a acessibilidade e a correta visualizao das pginas nos navegadores que respeitem tais padres. Algumas das vantagens da construo com CSS: Separao de forma e contedo. Geralmente CSS e HTML se encontram em arquivos separados, o que facilita o trabalho em equipe porque designer e programador podem trabalhar independentemente. Por outro lado, permite o acesso a distintos navegadores e dispositivos. Trfego no servidor. As pginas podem reduzir seu tamanho entre um 40% e um 60%, e os navegadores salvam a folha de estilos no cache, isto reduz os custos de envio de informao. Tempos de carregamento. Pela grande reduo no peso das pginas, melhora a experincia do usurio, que valoriza de um site o menor tempo no download. Preciso. A utilizao de CSS permite um controle muito maior sobre o desenho, especificando exatamente a localizao e tamanho dos elementos na pgina. Tambm se podem empregar medidas relativas ou variveis para que a tela se acomode ao seu contedo. Manuteno. Reduz notavelmente o tempo de manuteno quando necessrio introduzir uma mudana porque se modifica um s arquivo, o da apresentao, sem ter que tocar as pginas que contm a estrutura com o contedo. Desenho unificado e flexibilidade. possvel mudar completa ou parcialmente o aspecto de um site simplesmente com modificar a folha de estilos. Por outro lado, o ter o estilo de uma web em um s arquivo permite manter a mesma aparncia em todas as pginas. Posicionamento. As pginas desenhadas com CSS tm um cdigo mais limpo porque no levam desenho, s contedo. Isto semanticamente mais correto e a pgina aparecer melhor posicionada nos buscadores. Google navega se esquivando do desenho.

Recomendo um site simptico e didtico sobre o tema: http://www.effectivetranslations.com/stupidtables/everything_es.html


Informe de Serviweb e-mail: infos@serviweb.es URL: http://www.serviweb.es/

Truques CSS para no enlouquecer


No tire ainda o monitor contra a parede! Aqui vo os principais truques CSS para fazer frente aos tpicos problemas que os web designers enfrentam quando constroem com CSS. Podero existir discrepncias entre os leitores, porm esclareo que estas so tcnicas que a mim pessoalmente me deram resultado, depois de muitas provas e tentativas aprendi isto... Use um continer global para todas as caixas (quando as coisas se disparam) Desta forma estar pr-fixando globalmente a ordem de todas as demais caixas. Em referncia a este continer ordena o resto das coisas interiores. como se fizesse uma cerca para que nada se escape. Obviamente estamos falando de sites "fixos" no elsticos. vezes bom usar um continer at o corpo do site, logo deixar o rodap fora. Exemplo para um continer de 900px centrado: #continer { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 900px; } Que flutue esquerda (quando as caixas se sobrepem) Esta uma tima forma de evitar incompatibilidades entre navegadores. O uso de hacks de CSS se devia em grande parte porque se trabalhava "centralizando" as caixas. Se por exemplo, precisar colocar trs caixas de 300px em um continer de 900px voc poder fazer o seguinte: Exemplo: #caixa { float: left; width: 300px; } Calcular bem os paddings ou preenchimentos (quando as caixas forem abaixo) Quase todas as dores de cabea com o CSS se devem ao mal uso ou m interpretao que se faz do padding. Porm, mais simples do que parece. Para que servem os paddings ou preenchimentos? Bom, o que faz gerar um "preenchimento" de determinada medida para dar por exemplo, como uma margem aos elementos, porm o faz sobre a largura em pxels que esteja pr-fixada. Por exemplo: se tivermos uma caixa de 300px e lhe aplicarmos um padding de 10px na esquerda, agora teremos uma caixa de 310px. Isto far transbordar o resto das caixas e as deslocaro para baixo. A quando o designer principiante fica louco. O tema que se houver uma diferena de at um 1px se produziro estes transbordamentos, seno observe quando lhe incluir bordas em sua caixa se se produziro diferenas. O que se deve fazer simples, calcular bem e lembrar cada ajuste que se faa dos preenchimentos. Agora teremos que fazer uma caixa de 290px com paddings de 10px esquerda. Exemplo: #caixa { float: left; width: 290px; padding-left: 10px; background-color: #FFE6DD; } O rodap da pgina com largura fixa (quando o rodap da pgina enlouquece): Para entender melhor como funciona o uso de caixas em CSS se pode pensar em um grupo de objetos de diferentes formas que lutam por se adaptar e ocupar o espao que se pr-fixou. Acontece muitas vezes que os rodaps de pgina so os que mais problemas trazem quando se constri um site. Ou vai para cima, ou se alinha esquerda, ou transborda, etc. Muitos de ns resolvamos este tema pr-fixando valores fixos s alturas de caixas, porm no faz sentido. O que se deve fazer estabelecer de novo um valor de largura fixo. Desta forma o rodap ir definir seu lugar do resto e ir parar aonde tem que ir. Exemplo:

#rodape { width: 900px; background-color: #666666; } Nem tudo 1+1=2 em CSS (quando as larguras no fecham) Um problema comum em css pensar que todas as larguras entre caixas fecham perfeitamente. s vezes necessrio jogar com os valores dos continers, s vezes contrrio lgica h que adicionar alguns px aos continers. OUTROS TRUQUES RPIDOS: Truques simples, dos que no fazem falta explicar muito, mas que so muito prticos e tornar o trabalho mais fcil e evitaro possveis erros. - Use cores diferentes para distinguir as caixas - Coloque uma palavra descritiva em cada caixa - Comente o cdigo fonte e assinale os finais dos continers grandes - No seja mesquinho com os espaos entre os divs - No seja um fundamentalista e no queira escrever seu CSS com dois ou trs linhas. Se no quiser erros escreva o necessrio. - Cuidado com o tamanho das imagens que voc insere, estas mudam a largura dos continers. - Escolha bem os nome de cada div e trate de ser ordenado no cdigo. - Se for trabalhar com vrias caixas, trate de agrup-las, isto muito importante. Por exemplo, um continer que agrupe trs ou quatro caixas. CONCLUSO: Todos estes pargrafos so simplesmente algumas sugestes ou comentrios do que me deu dado um bom resultado. Existem outras muitas "ligaes" deste tipo, se tiver alguma dvida no duvide em coment-las neste mesmo artigo. O que acontece quando no puder resolver um problema com CSS ou similar? Para mim o melhor me levantar e espairecer por um momento, fazer qualquer outra coisa e logo voltar e tentar resolver de novo. Deixar de renegar e no enlouquecer com CSS depender da quantidade de tempo, trabalho e esforo que coloque em seu trabalho. No duvide!
Informe de Leonardo A. Correa e-mail: info@webnova.com.ar URL: http://www.webnova.com.ar

10 erros comuns nos CSS


1. Uso desnecessrio do valor 0 O cdigo seguinte no necessita a unidade especificada se o valor for zero.
padding:0px 0px 5px 0px;

Em seu lugar pode ser escrito desta maneira:


padding:0 0 5px 0;

Da mesma maneira igual para outros estilos. Ex.:


margin:0;

No desperdice espaos agregando unidades tais como px, pt, em, etc, quando o valor for zero. A nica razo de fazer isto se necessitar mudar estes valores mais tarde. Se no declarar estas unidades no

tem sentido. Os pixels zero so iguais que os pontos zero. Entretanto, line-height pode no ter unidade. Por isso, vlido o seguinte:
line-height:1;

De qualquer maneira voc pode utilizar uma unidade em concreto como em se desejar. 2. As cores em formato hexadecimal necessitam uma almofadinha Isto est mal:
color: ea6bc2;

Deve ser:
color: #ea6bc2;

Ou este outro:
color: rgb (234.107.194);

3. Valores duplicados nos cdigos de cores No escrever o cdigo desta maneira:


color: #ffffff; background-color:#000000; border:1px solid #ee66aa;

Os valores duplicados podem ser omitidos escrevendo os cdigos desta maneira:


color:#fff; background-color:#000; border:1px solid #e6a;

Obviamente isto no deve ser feito com cdigos como este!


color: #fe69b2;

4. Evitar repeties de cdigo desnecessria Evite usar vrias linhas quando se pode conseguir com uma s. Por exemplo, ao fixar as bordas, algumas vezes se deve fazer separadamente, porm em casos como o seguinte no necessrio:
border-top:1px solid #00f; border-right:1px solid #00f; border-bottom:1px solid #00f; border-left:1px solid #00f;

Poderamos resumi-lo em uma nica linha como esta:


border:1px solid #00f;

5. A duplicao necessria com os estilos em cascata Nos estilos em cascata aceitvel repetir o mesmo cdigo para um elemento duas vezes, se significa evitar a repetio mencionada no ponto acima. Por exemplo, digamos que temos um elemento onde somente diferente a "border" esquerda. Ao invs de colocar cada "border" escrita usando quatro linhas, uso s duas:
border:1px solid #00f; border-left:1px solid #f00;

Neste caso, primeiro definimos todas as "borders" com a mesma cor, porm mais tarde para economizarmos duas linhas de cdigo redefinimos a "border" esquerda a outra cor, desta maneira economizamos duas linhas de cdigo.

O exemplo desperdiando espao ficaria assim:


border-top:1px solid #00f; border-right:1px solid #00f; border-bottom:1px solid #00f; border-left:1px solid #f00;

claro que esta economia de carregamento supe um atraso no carregamento da pgina, pois estamos definindo a "border" esquerda duas vezes, porm o carregamento deste processo insignificante. 6. Os estilos invlidos no fazem nada Um exemplo suficiente para explicar este erro:
padding:auto

Este estilo s pode ser aplicado a width e height, porm no a padding. 7. Cdigo Especfico para cada navegador Logicamente este tipo de cdigo s funcionar no navegador ao que vai destinado, porm h que pensar se rentvel visto que s alguns usurios podero apreciar essas mudanas. 8. Espao perdido No estou seguro do porqu, mas muitos designers esto empenhados em desperdiar o espao em seu cdigo, usando um monto de quebras de linha desnecessrias. Lembre que isso s ser visto por voc e estar fazendo um uso excessivo de largura de banda. Tambm seu cdigo ser mais fcil de ler visto que ter menos "brechas". Por suposto que sbio deixar um certo espao para mant-lo legvel, embora haja pessoas que gostem de condensar todo, no deixando nenhum espao. 9. Especificar as cores sem usar palavras Definir as cores usando as palavras que as definem no uma boa idia visto que estaramos confiando no navegador para que interprete que cor e cdigo devem aplicar. As tonalidades para um mesmo nome de cor mudam muito de um navegador a outro. uma boa prtica especificar sempre a cor por seu cdigo hexadecimal. Ex.: utilizar "#fff" ao invs de branco. 10. Agrupar estilos idnticos comum ver os estilos escritos s vezes com o mesmo cdigo, mesmo quando o estilo igual. Seria conveniente agrup-los e assim otimizaramos espao:
h1, p, #footer, .intro { font-family:Arial,Helvetica,sans-serif; }

Tambm nos far muito mais fcil a tarefa de atualizar o cdigo.


Informe de Manu Gutierrez e-mail: manugut@gmail.com URL: http://www.tufuncion.com

Introduo a CSS3
Desde que CSS comeou passaram muitos anos e j vamos pela especificao de CSS3, que incorpora uma srie de novidades que vamos tratar de resumir neste artigo.

O que CSS Se voc no sabe o que CSS provavelmente lhe interessaria comear lendo nosso manual de CSS ou a seo de CSS a fundo. No obstante, caberia dizer que CSS uma linguagem para definir o estilo ou a aparncia das pginas web, escritas com HTML ou dos documentos XML. CSS se criou para separar o contedo da forma, ao mesmo tempo que permite aos designers manter um controle muito mais preciso sobre a aparncia das pginas. Com CSS3, mais controle sobre a forma O objetivo inicial de CSS, separar o contedo da forma, se cumpriu j com as primeiras especificaes da linguagem. Entretanto, o objetivo de oferecer um controle total aos designers sobre os elementos da pgina foi mais difcil de cobrir. As especificaes anteriores da linguagens tinham muitas utilidades para aplicar estilos s webs, porm os desenvolvedores ainda continuam usando truques diversos para conseguir efeitos to comuns ou to desejados como as bordas arredondadas ou a sombra de elementos na pgina. CSS 1 j significou um avance considervel na hora de desenhar pginas web, trazendo muito maior controle dos elementos da pgina. Porm, como ainda ficaram muitas coisas que os designers desejavam fazer, mas que CSS no permitia especificar, estes deviam fazer uso de truques para o design. O pior destes truques que muitas vezes implica alterar o contedo da pgina para incorporar novas etiquetas HTML que permitam aplicar estilos de uma maneira mais elaborada. Dada necessidade de mudar o contedo, para alterar o desenho e fazer coisas que CSS no permitia, estava-se acabando com algum dos objetivos para os que CSS foi criado, que era o de separar por completo o contedo da forma. CSS 2 incorporou algumas novidades interessantes, que hoje j utilizamos habitualmente, porm CSS 3 ainda avana um pouco mais na direo, de dar mais controle sobre os elementos da pgina. Sendo assim, a novidade mais importante que traz CSS 3, para os desenvolvedores de webs, consiste na incorporao de novos mecanismos para manter um maior controle sobre o estilo com o qual se mostram os elementos das pginas, sem ter que recorrer a truques ou hacks, que a muitas vezes complicavam o cdigo das webs. Propriedades novas em CSS3 Segue aqui uma lista das principais propriedades que so novidade em CSS3. Bordas border-color border-image border-radius box-shadow

Fundos Cor Texto cores HSL cores HSLA cores RGBA Opacidade background-origin background-clip background-size fazer camadas com mltiplas imagens de fundo

text-shadow text-overflow Ruptura de palavras longas

Interface box-sizing resize outline nav-top, nav-right, nav-bottom, nav-left

Seletores Seletores por atributos

Modelo de caixa bsico overflow-x, overflow-y

Outros media queries criao de mltiplas colunas de texto propriedades orientadas a discurso ou leitura automtica de pginas web Web Fonts

Esta lista de novas propriedades de CSS3 foi tirado de: http://www.css3.info/preview/. um site em ingls, mas pode ser bom visitar para ir conhecendo mais detalhes sobre CSS3. Em futuros artigos daremos algumas chaves e explicaes sobre vrias destas propriedades, pelo menos as mais interessantes, com especificaes detalhadas, assim como exemplos que sirvam para ir conhecendo esta nova especificao de CSS.
Informe de Miguel Angel Alvarez - Traduo de JML e-mail: juliana@criarweb.com

Bordas arredondadas em CSS 3


CSS 3 incorpora novas propriedades para o controle de bordas dos elementos. Agora se permitem bordas com as esquinas arredondadas, bordas com imagens (inclusive pode-se utilizar vrias imagens para definir o aspecto da borda, sombras, etc. Neste artigo vamos explicar como realizar bordas arredondadas com CSS3. Temos a propriedade border-radius, que permite definir bordas arredondadas nas esquinas, especificando as medidas do radio que devem dar curva das esquinas
border-radius: 5px;

Definiria um radio de 5 pixels no arredondamento das esquinas do elemento. At agora Mozilla adotou este atributo com um nome especial, que vlido para produtos como Firefox, enquanto que as especificaes de CSS3 no tiverem alcanado o estado "Candidate Recommendation", que quando se supe que os diferentes navegadores devem implement-las. O nome do atributo por enquanto :
-moz-border-radius

Quanto Internet Explorer h que dizer que ainda no suporta este atributo de CSS 3, porm esperemos que o pessoal de Microsoft possa implementar em breve no navegador, ou que as especificaes de CSS3 passem rpido ao estado "Candidate Recommendation", que seria a chamada para que se implementem na generalidade dos navegadores.

Por enquanto, para navegadores Mozilla, o atributo border-radius se utilizaria, por exemplo, assim:
DIV { border: 1px solid #000000; -moz-border-radius: 7x; padding: 10px; }

Com isto conseguimos que todos os div tenham uma borda arredondada nas esquinas de radio de 7pixels. Podemos ver o exemplo em uma pgina a parte. Porm, h que lembrar que s se ver o efeito utilizando Firefox ou navegadores baseados em Mozilla. Contudo, o atributo border-radius tem outras possveis configuraes, na qual se podem definir os valores para o radio das quatro esquinas separadamente. Desta maneira:
-moz-border-radius: 7px 27px 100px 0px;

Assim estaramos definindo uma borda arredondada com radio de 7 pixel para a esquina superior esquerda, logo 27px para a esquina superior direita, de 100px para a inferior direita e 0px para a inferior esquerda. (H que explicar que um border-radius de 0px uma borda com esquina em ngulo reto) Podemos ver este ejemplo em uma pgina a parte. As bordas arredondadas com CSS 3, como se poder imaginar, s so vistas se tiver sido definida alguma borda visvel ao elemento que as atribumos, seja solid, dotted, etc. Isso o que define as especificaes de CSS3, embora no momento de escrever o artigo devo assinalar que inclusive Mozilla ou Firefox (o nico que at agora suporta este atributo de CSS3) no funciona inteiramente corretamente com isto e s mostra as bordas arredondadas com solid. Outra coisa que definem as especificaes de CSS e que por enquanto no est funcionando inteiramente bem, que as imagens de fundo devem se ajustar s bordas arredondadas. Ocorre, at este momento, que as imagens de fundo saem por fora das bordas arredondadas. Confiamos em que no futuro isto possa ser revisado e otimizado, para que tudo funcione corretamente. Devemos lembrar que no momento de escrever o artigo ainda se tm que terminar de definir as especificaes de CSS 3 e depois, os navegadores web deveram se atualizar em um certo espao de tempo para suport-las completamente.
Nota: Oferecemos uma lista das caractersticas principais de CSS 3 no artigo Introduo a CSS3.