Manual Css

Manuais e recursos para desenvolvimento web www.criarweb.
com
Manual de CSS, folhas de estilo
Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Miguel Angel Alvarez Federico Elgarte Serviweb http://www.cssboulevar.com.ar/ http://www.serviweb.es/ Traduo de JML
(19 captulos) (1 captulo) (1 captulo)
Leonardo A. Correa
http://www.webnova.com.ar (1 captulo)
Manu Gutierrez
http://www.tufuncion.com (1 captulo)
Miguel Angel Alvarez Traduo de Celeste Veiga

(3 captulos)
Manual de CSS, folhas de estilo: http://www.criarweb.com/manual/css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.
Manuais e recursos para desenvolvimento web www.criarweb.com
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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,
Manual de CSS, folhas de estilo: http://www.criarweb.com/manual/css/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 2
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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.
CSS tem uma sintaxe prpria, a veremos atravs de exemplos. Em seguida, veremos com detalhes.
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 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. Artigo por Miguel Angel Alvarez - Traduo de JML
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:
. 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ágina que l estilos</title> </head> <body> <h1>Página que l estilos</h1> Esta página tem no cabealho a etiqueta necessria para linkar com a folha de estilos. muito fácil. <br> <br> <table width="300" cellspacing="2" cellpadding="2" border="0"> <tr> <td>Isto está 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. Artigo por Miguel Angel Alvarez - Traduo de JML
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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
valor RGB ou nome da cor
Exemplos
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.
font-size
xx-small | x-small | small | medium | large | x-large | xxlarge Unidades de CSS serif | sans-serif | cursive | fantasy | monospace Todas as fontes habituais
font-size:12pt; font-size: x-large;
Serve para indicar o tamanho das fontes de forma mais rgida e com maior exatido.
font-family
font-family:arial,helvetica; font-size: fantasy;
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.
font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-weight:bold; font-weight: 200;
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 | italic | oblique
font-style:normal; font-style: italic;
o estilo da fonte, que pode ser normal, itlico ou oblquo. O estilo oblquo similar ao itlico.
PARGRAFOS - TEXT line-height

normal e unidades CSS 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.
text-decoration text-align
none | [ underline || overline || line-through ]
text-decoration: none; text-decoration: underline; text-align: right; text-align: center;
Para estabelecer a decorao de um texto, ou seja, se est sublinhado, tachado, etc. left | right | center | justify
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 text-transform
Unidades CSS
text-indent: 10px; text-indent: 2in; text-transform: none; text-transform: capitalize;
Um atributo que serve para fazer recuos ou margens nas pginas. Muito til e novo. capitalize | uppercase | lowercase | none
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 Background-color

Uma cor, com seu nome ou seu valor RGB background-color: green; background-color: #000055; background-image: url(mrmol.gif) ; background-image: url(http://www.x.com/fondo. gif) Serve para indicar a cor de fundo de um elemento da pgina. O nome da imagem com seu caminho relativo ou absoluto
Background-image
Colocamos com este atributo uma imagem de fundo em qualquer elemento da pgina.
BOX - CAIXA Margin-left Margin-right Margin-top Margin-bottom Padding-left

Unidades CSS margin-left: 1cm; margin-left: 0,5in; margin-right: 5%; margin-right: 1in; margin-top: 0px; margin-top: 10px; margin-bottom: 0pt; margin-top: 1px; padding-left: 0.5in; padding-left: 1px; Indicamos com este atributo o tamanho da margem esquerda. Unidades CSS
Utiliza-se para definir o tamanho da margem direita. Unidades CSS
Indicamos com este atributo o tamanho da margem acima da pgina. Unidades CSS
Com ele indica-se o tamanho da margem na parte debaixo da pgina. Unidades CSS
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.
10
Padding-right
Unidades CSS
padding-right: 0.5cm; 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 Padding-bottom
Unidades CSS
padding-top: 10pt; padding-top: 5px; padding-right: 0.5cm; padding-right: 1pt;
Indica o espao inserido, por cima, entre a borda do elemento que contem e o contedo deste. Unidades CSS
Indica o espao inserido, neste caso por baixo, entre a borda do elemento que contm e o contedo deste.
Border-color
cor RGB e nome de cor
border-color: red; 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-bottom-color, borderleft-color.
Border-style
none | dotted | solid | double | groove | ridge | inset | outset
border-style: solid; border-style: double;
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 float clear
Unidades CSS
border-width: 10px; border-width: 0.5in; float: right;
O tamanho da borda do elemento ao qual o aplicamos. none | left | 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. 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. Artigo por Miguel Angel Alvarez - Traduo de JML
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. background-image: 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 () 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. Artigo por Miguel Angel Alvarez - Traduo de JML
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. Artigo por Miguel Angel Alvarez - Traduo de JML
14
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; z-index: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.
16
Artigo por Miguel Angel Alvarez - Traduo de JML
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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. 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
19
Como dissemos, tambm existem algumas desvantagens:
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/ Artigo por Miguel Angel Alvarez - Traduo de JML
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,
21
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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 pseudoelementos first-letter. 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', 'textdecoration', '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 pseudo-elementos, 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
23
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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,
24
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}
Artigo por Federico Elgarte
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
25
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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.
26
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 Artigo por Serviweb
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
28
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! Artigo por Leonardo A. Correa
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;
29
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:
30
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. Artigo por Manu Gutierrez
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.
32
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 text-shadow text-overflow Ruptura de palavras longas cores HSL cores HSLA cores RGBA Opacidade background-origin background-clip background-size fazer camadas com mltiplas imagens de fundo
Interface box-sizing resize
33
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. Artigo por Miguel Angel Alvarez - Traduo de JML
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 implementlas. O nome do atributo por enquanto :
34
-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.
Artigo por Miguel Angel Alvarez - Traduo de JML
35
Listagem de distintos frameworks CSS

Neste artigo vamos enumerar e comentar algumas coisas sobre frameworks CSS, se que se pode chamar de frameworks, visto que esse conceito se usa muitas vezes para sistemas que facilitam a programao de aplicaes e no caso dos CSS, no programao, e sim que se utilizam para obter ajudas na construo de webs. Como sabemos, no momento atual as pginas se constroem com CSS. Com HTML especificamos os contedos e com CSS a forma ou disposio com a qual deve se apresentar ao usurio nos navegadores. CSS, portanto, uma linguagem que serve para especificar o estilo das pginas, porm muitas vezes fazemos coisas repetitivas, como divises de pgina em colunas, caixas de determinados tipos, etc. Pois os Frameworks CSS nos ajudam a realizar essas tarefas de construo bsicas, que muitas vezes temos que implementar repetidas vezes em diversos lugares, para gerar as estruturas de elementos da pgina. Os frameworks CSS dispe de uma srie de classes (de folhas de estilo) j criadas com as quais ajuda a posicionar elementos na pgina e criar estruturas de construo, mais ou menos versteis. Sendo assim, no desenvolvimento de pginas novas, ou no redesenho de pginas antigas, os frameworks CSS podem nos ajudar para dispor de uma rede onde posicionar os distintos componentes de nosso desenho. Com isso economizaremos o tempo de ter que criar de novo dezenas de classe que estamos entediados de implementar para criar construes a 2, 3 ou 4 colunas, com divises de cabealho, corpo e rodap, etc. Neste artigo pretendo simplesmente enumerar este e outros frameworks CSS, em uma lista que pretende dar uma idia das possibilidades que nos oferece neste momento o mercado.
960 Grid System

, talvez, o mais utilizado dos frameworks CSS, cujas pginas se constroem em larguras de 960 pixels (da vem seu nome). Oferece duas possibilidades de construo de pginas, com uma rede de 12 ou 16 colunas. Ns escolhemos este framework CSS para explic-lo aos nossos leitores de CriarWeb.com, justamente por ser to popular. Em nosso trabalho com este sistema podemos comprovar que muito verstil e sobretudo, simples de utilizar. Pgina web de 960 Grid System
Simple
Este framework CSS apresentado por um desenvolvedor chileno, com o qual todos os exemplos e documentao que puder encontrar est em espanhol. O criador o realizou para poder simplificar as coisas, no s no desenvolvimento das pginas, como tambm na aprendizagem. Pgina web de Simple
Blueprint
um framework CSS que pretende reduzir o tempo de desenvolvimento das pginas web. Oferece uma estrutura slida na que fundar seu trabalho de desenho, por meio da tpica rede. Porm, no se limita simplesmente a isso, e sim que oferece outra srie de classes muito teis para estilizar componentes tpicos, como formulrios, botes, abas, tipografias ou para que
36
suas pginas web se possam imprimir de maneira tima em papel. Pgina web de Blueprint
YUI Grids CSS

O framework CSS de Yahoo! um cdigo CSS que permite construir pginas com distintas larguras (750px, 950px, e 974px) e fazer todas as coisas tpicas que se podem desejar em uma pgina. Tem 6 planilhas pr-definidas e a possibilidade de criar mais de 1.000 combinaes de construo, em regies de 2, 3 e 4 colunas. Faz parte da Yahoo! User Interface Library, o que d uma garantia adicional, por vir de to renomado buscador. Pgina web de YUI Grid CSS
Tripoli
Tripoli no um framework CSS e segundo remarcam os criadores, isso significa que no te obriga a desenvolver sua pgina de uma maneira determinada. Em contra, o que oferece um cdigo CSS que "resetea" os estilos pr-definidos dos navegadores e os redefine, conseguindo uma base estvel sobre a que realizar um site e que se veja igual em qualquer cliente web. Pode ser interessante porque tenta no cair nos problemas que tm os frameworks CSS. Pgina web de Tripoli
Boilerplate
Este framework me pareceu interessante porque est criado por um dos desenvolvedores iniciais de Blueprint, que fundou o novo projeto para colocar em funcionamento suas idias particulares. Como ele diz, este framework est pensado para simplificar as coisas e ser ligeiro, oferecendo todo o bsico para poder construir uma web, porm sem as complexidades que tem Blueprint e com convenciones de nomes que do mais sentido e significado ao que estamos codificando. Pagina web de Boilerplate
BlueTrip
Segundo seus criadores, BlueTrip uma combinao do melhor de distintos frameworks CSS dos que j falamos. Seu nome vem da unio de BLUEprint - TRIpoli, fazendo referncia a essa unio dos melhores framewoks, entre os que tambm se inspiraram em nosso framework preferido nestes momentos, 960 grid, por sua simplicidade. Pgina web de BlueTrip
Outros Framework CSS

Coloco outros frameworks CSS que encontrei e que no investiguei tanto as possibilidades que oferecem, embora tambm possam ser interessantes, sobretudo pode que dem enfoques diferentes que possam ser teis em certas ocasies.
37
Elements ESWAT Content with style My CSS Framework Hartija Malo (Framework CSS ultra pequeno) emastic Artigo por Miguel Angel Alvarez - Traduo de JML
Fluxo HTML e atributos CSS

Vale a pena determos para explicar mais detalhadamente o que o fluxo HTML, pois um conceito simples e bsico para poder entender muitos assuntos sobre o posicionamento web e mais concretamente o posicionamento com CSS. O fluxo da pgina algo assim como o fluxo de escritura de elementos dentro da tela que nos apresenta o navegador. Sabemos que as pginas web so codificadas em HTML e os elementos aparecem no cdigo em uma posio dada. O navegador, no momento que interpreta o cdigo HTML da pgina, vai colocando na pgina os elementos (definidos por meio de etiquetas HTML) segundo vai encontrando-os no mesmo cdigo. Por exemplo, pensemos em uma pgina que tem um titular com H1, logo vrios pargrafos e alguma imagem. Pois se o primeiro que aparece no cdigo HTML for o cabealho H1, pois esse cabealho aparecer na pgina tambm em primeiro lugar. Logo, se colocaro os pargrafos e se a imagem aparecia no cdigo por ltimo, na pgina tambm aparecer ao final. Ou seja, os elementos aparecem colocados tal como estiverem ordenados no cdigo. Isto chamado de fluxo HTML, a colocao dos elementos no lugar que corresponda segundo seu aparecimento no cdigo. Isto em geral ocorre com qualquer dos elementos da pgina. Entretanto, h alguns atributos HTML que podem marcar distintas propriedades no fluxo, como que uma imagem se alinhe direita, com align="right", com o texto do pargrafo que possa ter a seguir rodeando a imagem. Porm, com HTML, se por exemplo, uma imagem vai antes que um pargrafo, nunca vamos poder trocar suas posies e colocar a imagem detrs do pargrafo que lhe segue no cdigo. Isto no ocorre de igual maneira quando trabalhamos com CSS, visto que existem diversos atributos que podem mudar radicalmente a forma na que se mostram na pgina, por exemplo, o atributo position que pode definir valores como absolute, que rompe o fluxo da pgina, o melhor dito, tira do fluxo da pgina ao elemento que lhe atribui.
Comportamentos inline e block e como afetam ao fluxo da pgina

Quando tratamos com etiquetas, existem dois modos principais de comportamento. Etiquetas como uma imagem, ou um negrito, que funcionam em linha ("inline"), ou seja, que se colocam na linha onde se est escrevendo e onde os elementos seguintes, sempre que tambm sejam "inline" se posicionam todo seguido na mesma linha. Temos por outra parte os elementos que funcionam como bloco ("block") que implicam quebras de linha antes e depois do elemento.
38
Por exemplo, os pargrafos ou cabealhos so elementos com comportamento prdeterminado tipo "block". Duas etiquetas muito utilizadas na construo CSS so DIV e SPAN. Uma das diferenas principais que DIV funciona com comportamento "block" e SPAN funciona como "inline". Na verdade, este o comportamento padro, visto que ns com CSS em qualquer momento podemos mud-lo por meio do atributo display. Por exemplo:
<div style="display: inline;"> Este elemento funcionar em linha </div>
Ou ento:
<span style="display: block;"> Este span agora funciona como bloco </span>
Realmente ambas possibilidades funcionam dentro do fluxo HTML normal, por isso, tanto os elementos display inline como display block, se encontram dentro do fluxo HTML padro, a nica diferena que os blocos se escrevem em linhas independentes, ou seja, com quebras de linha antes e depois do elemento, assim como uma quantidade de margem acima e abaixo que depende do tipo de elemento de que se trate.
Atributo CSS Float e o fluxo

Outro atributo que afeta o fluir dos elementos na pgina o atributo float de CSS, que se utiliza bastante na construo web. Este atributo podemos utiliz-lo sobre elementos da pgina de tipo "block" e o que faz convert-los, em "flutuantes" que um comportamento parecido ao que seria o mencionado anteriormente "inline". Com float podemos indicar tanto left como right e conseguiremos que os elementos se posicionem esquerda ou direita, com o contedo que se coloque a seguir rodeando ao elemento flutuante. A diferena que os elementos continuam sendo tipo "block" e aceitam atributos como a margem (atributo CSS margin), para indicar que haja um espao em branco aos lados e acima e abaixo do elemento. Por exemplo, os elementos das listas (etiqueta LI) so por padro de tipo "block", por isso aparecem sempre um abaixo do outro, em linhas consecutivas. Porm, ns poderamos mudar esse comportamento com:
li{ float: right; }
Assim, uma lista como esta:

<ul> <li>Elemento1</li> <li>Elemento2</li> <li>Elemento3</li> </ul>
Veramos como o primeiro elemento aparece direita de tudo e os outros elementos vo se colocando na mesma linha no seguinte espao livre que houver. Assim, o segundo elemento se colocaria na mesma linha, todo direita que puder, conforme o espao que tiver no continer aonde estiverem.
39
Fluxo e o atributo position

O atributo position de CSS sim que capaz de mudar radicalmente o fluxo dos elementos da pgina. Este atributo, que explicaremos com detalhe mais adiante em outros artigos de CriarWeb.com, por padro, tem o valor "static", que indica que o elemento faz parte do fluxo HTML normal da pgina. Entretanto, com o atributo CSS position, podemos indicar outros valores que fazem com que os elementos saiam do fluxo HTML e se posicionem em lugares fixos, que no tm a ver com a posio na que apaream no cdigo HTML. Por exemplo:
<div style="position: absolute; top: 10px; left: 100px;"> Este elemento tem posicionamento absoluto </div>
Faz com que esse elemento fique fora do fluxo de elementos na pgina e ento, apareceria no lugar que se indica com os atributos top e left (top indica a distncia desde a parte de cima e left a distncia desde a borda esquerda). Os outros elementos que fazem parte do fluxo da pgina no ficam afetados pelos elementos com posicionamento absoluto. Outro valor para o atributo position que faz com que os elementos fiquem posicionados fora do fluir normal de elementos na pgina "fixed", cujo comportamento veremos mais adiante em outros artigos. Artigo por Miguel Angel Alvarez - Traduo de JML
O atributo Overflow de CSS

Neste artigo do Manual de CSS de CriarWeb.com vamos explicar uma propriedade interessante de CSS, contemplada na especificao CSS 2, o Overflow. Este um desses atributos que nos serviro para maquetar as camadas de uma web de uma maneira mais verstil e detalhada. Overflow serve no modelado de caixas para indicar ao navegador o que ele deve fazer com o contedo que no cabe dentro de uma camada, segundo as dimenses que lhe foram atribudas. Como sabemos, s camadas (elementos DIV) podemos atribuir-lhes um tamanho, em largura e altura. Porm, muitas vezes, o contedo que colocamos na camada ultrapassa o espao que destinamos a ela. Ento, o que costuma ocorrer que a camada cresce o suficiente para que o contedo colocado dentro caiba. Habitualmente as camadas crescem em altura, razo pela qual quanto mais contedo mais tamanho ter em altura. Este um comportamento que podemos alterar com o uso do atributo overflow. Dito de outro modo, overflow permite que se oculte o contedo de uma camada, para mostrar unicamente o contedo que caiba, segundo suas dimenses. Para ter acesso ao contedo que no se mostra, porque no cabe na camada, pode se configurar overflow de modo que apaream barras de rolagem. Assim, passemos diretamente a ver quais so os atributos possveis com o atributo overflow: visible: Este valor indica que se deve exibir todo o contedo da camada, ainda que no caiba no tamanho com a que a tenhamos configurado. Na Internet Explorer ocorre que a camada cresce em tamanho o suficiente para que caiba todo o contedo que colocamos dentro. No Firefox ocorre que a camada tem o tamanho marcado, mas o
40
contedo continua sendo visto, embora fora do espao da camada , podendo sobreporse a um texto ou a uma imagem que haja embaixo. O contedo no se oculta em nenhum caso, ou seja, sempre estar visvel. hidden: Este valor indica que os contedos que, pelo tamanho da camada, no caibam nela, se devem ocultar. Por isso, a camada ter sempre o tamanho configurado, mas os contedos em, algumas ocasies, podero no se ver por completo. scroll: Este valor indica que a camada deve ter o tamanho que se tenha configurado inicialmente e que, alm disso, se devem mostrar barras de rolagem, para mover o contedo da camada dentro do espao da mesma. As barras de rolagem sempre aparecem, solicitadas ou no. auto: Com este valor tambm se respeitaro as dimenses atribudas a uma caixa. O contedo ser ocultado, mas aparecero as barras de rolagem para mov-lo. No entanto, neste caso, as barras de rolagem podero aparecer ou no, dependendo se so necessrias ou no para exibir todo o contedo da camada.
Assim, o atributo overflow nos permitir ter um maior controle sobre os espaos que destinamos a cada caixa de nosso desenho. muito utilizado para mostrar textos longos, que se desejam integrar dentro de outro texto ou uma interface onde no temos espao disponvel para coloc-los ou no desejamos que cresam mais da conta. Por exemplo, para mostrar cdigo fonte dentro do texto de um artigo, o seguinte: <html> <head> <title>Ttulo</title> </head> <body> Corpo... </body> </html> Este exemplo, podemos apreciar a barra de rolagem vertical, se obtm com um atributo overflow: auto;. O cdigo utilizado o seguinte:
<div style="overflow: auto; width: 300px; height: 100px; background-color:#ededed; border: 1px solid #990000;"> CONTEUDO.... </div>
Agora vejamos outro exemplo, no qual simplesmente se oculta o texto que no cabe na camada. Indicamos overflow: hidden, razo pela qual o texto que sobra no vai ser visualizado. Esta camada tem um contedo maior do que o cabe no espao que designei com o atributo width e height. Como coloquei overflow: hidden, o que ocorrer que parte do texto que estou colocando no vai ser visto... Neste caso vemos como o texto aparece ocultado, porque no cabe no espao atribudo da camada. O cdigo seria o seguinte:
<div style="overflow: hidden; width: 200px; height: 50px; border: 1px solid #990000;"> CONTEUDO... </div>
Aqui se podem ver vrios exemplos de uso de overflow.
41
Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga
Posicionamento CSS
No Manual de CSS de CriarWeb.com tratamos em vrios pontos do posicionamento CSS, com as distintas tcnicas para criar e colocar partes da pgina de maneira absolutamente precisa. Em todos os casos explicamos diversos detalhes desde diferentes enfoques que sem dvida do uma viso particular sobre o posicionamento de elementos na pgina web. Por exemplo, j falamos sobre o que so as camadas, e tambm os atributos para seu posicionamento, bem como de outros assuntos como a construo CSS. No entanto, ficou faltando oferecer algumas explicaes gerais e detalhadas sobre o posicionamento CSS, que podem dar aos leitores uma idia global sobre este assunto to interessante. Sem dvida, um tema que vale a pena ser estudado e tambm praticado. Neste artigo vamos oferecer diversos conhecimentos tericos ao tempo que estamos preparando um vdeo no qual mostraremos na prtica as vrias opes para o posicionamento web.
Atributos para posicionamento CSS

Existem numerosos atributos para posicionar qualquer elemento da pgina com CSS. Alm disso, medida que vo sendo apresentadas novas verses de CSS, estes atributos e seus possveis valores vo aumentando. Em CSS 2 contamos com diversos atributos que veremos a seguir. Atributo position: Este atributo , digamos, o principal para definir o tipo de posicionamento de um elemento. Vale a pena v-lo separadamente e em detalhes. Trataremos dele mais adiante em outro artigo, mas adiantamos que ele vai permitir vrios valores para estabelecer como se posicionar o elemento na pgina e se far parte do fluxo normal de HTML. Seus valores possveis so absolute, fixed, relative,static e inherit Atributos top, left, right, bottom: Servem para indicar a posio de um elemento, quando ele tem os valores de position "absolute", "relative" ou "fixed" (em outros valores do atributo position estes atributos so ignorados). O atributo top indica a distncia da margem superior da pgina e left da margem da esquerda. Tambm se pode indicar opcionalmente a posio com bottom que a distncia de baixo e right , que a distncia da direita. Atributos float e clear: Float serve para estabelecer que um elemento tem que "flutuar", colocando-se os valores "right" ou "left" para que flutuem esquerda ou direita. Como esclarecimento, os elementos flutuarem algo assim como o que acontece quando definimos o atributo HTML align="right" ou align ="left nas imagens ou tabelas. Com o atributo clear fazemos com que o elemento se coloque na primeira rea livre que tenha lugar onde se indique. Por exemplo, o valor de clear "right" faz com que o elemento se coloque em primeiro lugar onde no tenha nenhum elemento flutuando direita. O valor de clear "both" faz com que o elemento se coloque onde no haja elementos flutuando, tanto direita quanto esquerda. Atributo clip: Estabelece uma rea de recorte da poro visvel de um elemento. Esta rea de recorte se estabelece com vrios valores, como detalhado no artigo atributos para camadas:
Atributo display: Especifica o tipo de caixa que deve ter um elemento que pode ser de diversas formas. Este atributo tambm tem bastante utilizao e entre os valores mais comuns poderamos destacar: "none" que faz com que esta caixa ou elemento no aparea na pgina nem se reserve espao para ela, "block" serve para que a caixa seja um bloco e se mostre em uma linha ou linhas independente de outros elementos da pgina,"inline", que indica que essa caixa tem que aparecer na mesma linha que outros elementos escritos antes ou depois. Atributo overflow: Este atributo serve para dizer o que acontece com os elementos que no cabem em uma caixa devido s dimenses da mesma e do contedo que tenha. Atributo visibility: Atributo para definir a visibilidade de um elemento. Com este atributo podemos dizer que certos elementos da pgina sejam visveis ou invisveis, mas ateno porque embora um elemento seja invisvel, continua ocupando espao na pgina. Se quisermos que no seja invisvel e nem se reserve espao na pgina, h que se utilizar o atributo display com o valor "none".Os valores mais comuns de visibility so: "visible", que faz com que o elemento se veja (valor por defeito) e "hidden", que faz com que o elemento seja invisvel, embora continue ocupando espao. Atributo z-index: Este atributo tem como valor qualquer nmero inteiro. Serve para indicar que camada se tem que ver por cima ou por baixo de outra ou outras , no caso de vrias camadas estarem superpostas. Com maiores valores de z-index, a camada se coloca mais frente, cobrindo outras camadas que tenham valores menores que z-index. Esta foi uma reviso geral dos distintos atributos de folhas de estilo que esto implicados no que se conhece como posicionamento em CSS. Como referncia, aos interessados, recomendamos a leitura dos artigos mencionados no comeo do Manual de CSS, especialmente o artigo sobre atributos para camadas. No seguinte artigo veremos vrios casos de utilizao do atributo position, que a chave para entender o posicionamento CSS. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga
Tipos de posicionamento com o atributo position de CSS

No que se conhece como posicionamento CSS, o atributo de folhas de estilo em cascata que mais importncia tem o position. Vamos dedicar todo este artigo para explicar os diferentes valores de position, e propor exemplos que esperamos esclaream os possveis valores que pode adquirir. Recordemos que no artigo anterior deste manual de CSS j se introduziu o conceito de posicionamento CSS e vimos uma lista dos atributos existentes at CSS 2 para posicionar elementos na pgina. Passemos ento ao tema em questo, vendo as possibilidades que nos oferece esta linguagem. Alm disso, ao longo deste artigo de CriarWeb.com, vamos mencionar repetidas vezes um conceito que tambm foi explicado anteriormente: o fluxo do HTML normal.
43
position: static
o valor predeterminado do atributo e o posicionamento normal dos elementos na pgina. Significa que os elementos se colocaro segundo o fluxo normal do HTML, ou seja, segundo estejam escritos no prprio cdigo HTML. Dito de outra maneira, static no provoca nenhum posicionamento especial dos elementos e portanto, os atributos top, left, right e bottom no se levam em conta. Podemos ver um exemplo de posicionamento static:
<div style="position: static; background-color: #ff9; padding: 10px; width: 300px;">Isto uma camada com posicionamento esttico</div> <div style="position: static; background-color: #f9f; padding: 10px; width: 500px;">posicionamento static, predeterminado.</div> <h1>CSS</h1> <div style="background-color: #9ff; padding: 10px; width: 400px;">Posicionamento static, embora neste caso no se tenha indicado o atributo position static, pois no necessrio.</div>
Pode ser visto em uma pgina parte.
position: absolute
O valor absolute no atributo position permite posicionar elementos de maneira absoluta, isto , de maneira definida pelos valores dos atributos top, left, bottom e right, que indicam a distncia em relao a um ponto. As camadas ou elementos com posicionamento absoluto ficam parte do fluxo normal do HTML, isto significa que no so afetados pelo lugar onde apaream no cdigo HTML e que tambm no afetam outros elementos que faam parte do fluxo normal do HTML. Os valores top, left, bottom e right se expresam com unidades CSS e so uma distncia referente ao primeiro elemento container que tenha um valor de position diferente de static. Se todos os containers onde esteja a camada posicionada com position absolute (todos seus pais at chegar a BODY) so static, simplesmente se posiciona em relao ao lado superior da pgina, para o caso de top, ou inferior para bottom, do lado esquerdo para left ou o direito, no caso de utilizar right. Vejamos o seguinte cdigo HTML no qual preparamos vrias camadas com position absolute, porm com diferentes caractersticas:
<div style="position: absolute; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 2;"> Esta camada tem posicionamento absoluto. <br> <br> Permite especificar top e left para coloc-la em relao ao canto superior esquerdo. </div> <div style="position: absolute; width: 820px; height: 30px; padding: 10px; background-color: #ddf; top: 150px; left: 10px; z-index: 1;">Posicionamento absoluto com z-index menor (a camada aparece abaixo das outras que se sobrepem com z-index maior.</div> <div style="position: absolute; width: 100px; height: 20px; padding: 10px; background-color: #ddf; bottom: 10px; right: 10px;">Posicionamento absoluto com atributos bottom e right</div> <h1>Posicionamento CSS</h1>
Podemos ver o exemplo em uma pgina parte. A primeira camada (chamamos assim aos elementos DIV que tm posicionamento CSS), tem
44
como todas as do exemplo, posicionamento absoluto. Os atributos top: 100px e left: 30px significam que se posiciona a 100 pixels da parte superior da pgina e a 30 pixels da esquerda. Neste caso as distncias top e left para localizar a camada com position absolute se referem ao canto superior esquerdo da rea disponvel do navegador, pois esta camada no est dentro de nenhuma outra com posicionamento diferente de static. Vale chamar a ateno nesta primeira camada sobre o atributo z-index: 2, que servir para indicar ao navegador a posio da camada, na terceira dimenso, com relao a outras que se possam sobrepor, para que saiba qual deve estar abaixo e qual deve estar acima. Podemos ver que a segunda camada tem um z-index:1. Isso quer dizer que, no caso de se posicionar no mesmo lugar se ocultar pela primeira camada, que tem um z-index maior. Na terceira camada testamos o posicionamento utilizando os atributos bottom e right, assim que a estamos posicionando em relao ao canto inferior direito. Vejamos um segundo exemplo onde vamos colocar uma camada com posicionamento absoluto e dentro vrias camadas tambm posicionadas com absolute.
<div style="position: <div style="position: Uno </div> <div style="position: Dos </div> <div style="position: Tres </div> </div> absolute; top: 100px; left: 200px; background-color: #ff9966; width: 400px; height: 100px;"> absolute; top: 10px; left:10px;"> absolute; top: 10px; left:100px;"> absolute; top: 10px; left:200px;">
Neste caso, a primeira camada, que no est dentro de nenhuma outra, se posiciona com top e left em relao ao canto superior esquerdo do espao disponvel no navegador para o corpo da pgina. As camadas aninhadas tambm esto com position: absolute, porm, por estarem dentro de outra camada que tem posicionamento diferente de static, seus valores top e left so relativos ao canto superior esquerdo da camada que as contm. Podemos ver o exemplo em funcionamento em uma pgina parte.
position: relative
O valor relative no atributo position indica que a camada sim faz parte do fluxo normal de elementos da pgina, razo pela qual sua posio depender do lugar onde esteja no cdigo e do fluxo HTML. Alm disso, as camadas com posicionamento relative, admitem os valores top e left para definir a distncia em que se colocam em relao ao ponto onde esteja nesse momento o fluxo normal do HTML. Como afetam o mencionado fluxo do HTML, os elementos colocados depois das camadas relative, levaro em conta suas dimenses para continuar o fluxo e saber onde se colocar. No entanto, no se levam em conta os top e left configurados. Vejamos um exemplo que talvez esclarea as coisas.
<h1>Hola</h1> <div style="background-color: #606; color:#ffc; padding:10px; text-align: center; width: 300px;">Ol isto um teste</div> <div style="position: relative; width: 300px; padding: 10px; background-color: #066; color:#ffc; top:100px; left: 30px;">camada de posicionamento relative<br>Leva- se em conta esta camada para posicionar as seguintes.</div> <h2>ol de novo!</h2>
Podemos ver a pgina em funcionamento. As etiquetas H1 e H2 respeitam o fluxo HTML e tambm temos um elemento DIV onde no se
especificou nada em position, assim static e portanto tambm afetada pelo fluxo. H uma camada relative, no segundo elemento DIV, que tambm se posiciona em relao ao fluxo normal. Como tem um top e left, aparece um pouco fora do lugar que lhe caberia em relao ao fluxo. O ltimo H2 que aparece se coloca tendo em conta o fluxo e a camada relative, por isso deixa um espao vazio acima, mas no atende posio real desta, que foi marcada com os atributos top e left.
position: fixed
Este atributo serve para posicionar uma camada com posicionamento absoluto, mas sua posio final ser sempre fixa, ou seja, embora se desloque o documento com as barras de rolagem do navegador, sempre aparecer na mesma posio. O lugar onde se "ancorar" a camada sempre relativo ao corpo (o espao disponvel do navegador para a pgina). Se utilizamos top e left, estaremos marcando sua posio em relao ao canto superior esquerdo e se utilizamos bottom e right sua posio ser relativa ao canto inferior direito. Vejamos um exemplo.
<div style="position: fixed; width: 300px; height: 140px; top: 100px; left: 30px; background-color: #ff8800; color: #fff; padding: 15px;z-index: 1;"> Esta camada tem posicionamento fixed. <br> <br> Permite especificar top e left para coloc-a em relao ao canto superior esquerdo. </div> <div style="position: fixed; width: 700px; height: 30px; padding: 10px; background-color: #d0f; top: 150px; left: 10px; z-index: 2;">Posicionamento fixed</div> <h1>Ola</h1> <div style="position: fixed; width: 100px; height: 30px; padding: 10px; background-color: #0df; bottom: 10px; right: 10px; z-index: 4;">Posicionamento fixed</div> <br> <br> <br> <br> Ponho texto para que se veja!! <br> <br> <br> Isto faz deslocamento, com tanto br <br> <br> ... <br>
Pode-se ver a pgina em funcionamento com este cdigo. Pode-se ver que h varias camadas com position: fixed e muito de BR para que a pgina possa ter um deslocamento. Se vemos a pgina em funcionamento e fazemos scroll para baixo com a barra de rolagem, veremos que as camadas fixed mantm sempre a mesma posio.
Nota: O valor fixed no atributo position funciona em todos os navegadores, mas no caso de Internet Explorer s funciona na verso 7 e superiores. Alm disso, para que funcione no Explorer tem que se declarar um DOCTYPE!. Servem vrios tipos de DOCTYPE!, no entanto, devem ser declarados com o formato completo. Algo assim como:
46
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Ou em outro exemplo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
position: inherit
O valor inherit indica que o valor de position tem que ser herdado do elemento pai. No funciona no Explorer, pelo menos at a verso 8. Tem na verdade pouca utilidade e alm disso, como no funciona no navegador mais utilizado na atualidade, faz ainda menos sentido us-lo. Por isso, no colocamos exemplos.
Concluso sobre o atributo position de CSS

Esperamos que com as explicaes anteriores e com os exemplos se tenha entendido bem as diferentes possibilidades do atributo position, que sem dvida chave para o posicionamento CSS. O mais comum para a construo web utilizar o posicionamento static, mas o posicionamento absoluto, junto com posicionamento fixed, e inclusive relative, podem ser muito teis para desenhos mais complexos, onde se requeira uma maior preciso na colocao dos diferentes elementos ou as camadas. Alm disso, para realizar efeitos Javascript e DHTML em geral, se utilizam frequentemente posicionamentos absolutos. So muito teis porque permitem que os elementos dinmicos no faam parte do fluxo normal do HTML, e portanto, podemos situ-los em qualquer lugar da rea disponvel do navegador, e inclusive mov-los dinamicamente ao trocar suas propriedades top e left mediante scripts no lado do cliente. Todos estes comportamentos dinmicos j ficam fora da temtica deste texto, embora os expliquemos com detalhe em distintos manuais da seo Javascript a Fundo, de CriarWeb.com. Artigo por Miguel Angel Alvarez - Traduo de Celeste Veiga
47

Manual Css

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual Css

Enviado por

Direitos autorais:

Formatos disponíveis

Manuais e recursos para desenvolvimento web www.criarweb.

Manual de CSS, folhas de estilo

Miguel Angel Alvarez Traduo de Celeste Veiga

Manuais e recursos para desenvolvimento web www.criarweb.com

Caractersticas e vantagens das CSS

Manuais e recursos para desenvolvimento web www.criarweb.com

Uso das CSS I

Manuais e recursos para desenvolvimento web www.criarweb.com

Que tem como resultado:

Estas etiquetas vo em azul e negrito

Uso das CSS II

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Outra maneira de definir estilos em um arquivo externo

Manuais e recursos para desenvolvimento web www.criarweb.com

Atributos das folhas de estilo

font-size:12pt; font-size: x-large;

font-family:arial,helvetica; font-size: fantasy;

Manuais e recursos para desenvolvimento web www.criarweb.com

font-weight:bold; font-weight: 200;

normal | italic | oblique

font-style:normal; font-style: italic;

PARGRAFOS - TEXT line-height

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

text-decoration: none; text-decoration: underline; text-align: right; text-align: center;

text-indent: 10px; text-indent: 2in; text-transform: none; text-transform: capitalize;

FUNDO - BACKGROUND Background-color

BOX - CAIXA Margin-left Margin-right Margin-top Margin-bottom Padding-left

Utiliza-se para definir o tamanho da margem direita. Unidades CSS

Manuais e recursos para desenvolvimento web www.criarweb.com

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

padding-top: 10pt; padding-top: 5px; padding-right: 0.5cm; padding-right: 1pt;

cor RGB e nome de cor

border-color: red; border-color: #ffccff;

none | dotted | solid | double | groove | ridge | inset | outset

border-style: solid; border-style: double;

border-width float clear

border-width: 10px; border-width: 0.5in; float: right;

O tamanho da borda do elemento ao qual o aplicamos. none | left | right

Avanados truques com CSS

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Atributos para camadas

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Artigo por Miguel Angel Alvarez - Traduo de JML

Problema com o posicionamento absoluto de camadas

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Como dissemos, tambm existem algumas desvantagens:

Manuais e recursos para desenvolvimento web www.criarweb.com

Formas de aplicar estilos em construo CSS

Podemos aplicar o mesmo estilo em um conjunto de etiquetas. Para isso, indicamos as

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Manuais e recursos para desenvolvimento web www.criarweb.com

Definio de estilos CSS Shorthand

Propriedade Background (fundo)

Manuais e recursos para desenvolvimento web www.criarweb.com