Manual css

Manual CSS Hugo Farinha

Hugo Farinha Página 1 29-08-2014

Introdução As folhas de estilo, CSS (Cascade Style Sheets), permitem controlar a aparência de elementos HTML, à semelhança do que era conseguido em parte com a marca HTML <font> e o seu atributo color. A principal caracteristica distintiva das folhas de estilo, relativamente à formatação com HTML, reside no facto da especificação da forma estar separada do conteúdo. A formatação por folhas de estilo é vantajosa, relativamente à formatação em HTML. Esse facto torna-se mais evidente em sites constituidos por muitas páginas. As CSS permitem, através das propriedades disponiveis, uma grande liverdade de formatação de conteúdos. A formatação não necessita de ser feita linha a linha, podendo configurar-se de uma só vez todos os parágrafos de um documento HTML, ou mesmo todos os documentos HTML de um site. Vantagens de utilização de estilos CSS: - Liberdade de formatação - maior produtividade - facilidade de actualização



Sintaxe de Folhas de Estilo As folhas de estilo obedecem à seguinte sintaxe básica: Selector {propriedade : valor} Ou às suas variantes:

Sintaxe Exemplo Selector { propriedade : valor} Body { background-color :

#FFFFFF} Selector {propriedade : valor ; propriedade : valor}

P { text-align : center ; color: red }

Selector { Propriedade : valor Propriedade : valor Propriedade : valor }

P { Text-align : center ; Color : black; Font-family : arial }

Selector, selector, selector { propriedade : valor }

H1, h2, h3 { color : green }

No primeiro exemplo declara-se o valor da propriedade background-color do elemento body como #FFFFFF, ou seja, declara-se que a cor de fundo do documento é #FFFFFF. O segundo e o terceiro exemplos explicam-se por si próprios. No terceiro exemplo, o selector é p e as declarações são text-align: center, color: black e font-family: arial. O conjunto das declarações de um selector denomina-se estilo. No terceiro exemplo, contrariamente ao segundo, colocam-se as propriedade em linhas diferentes para melhor legibilidade. No último exemplo agrupam-se selectores, ou seja, para todos os selectores indicados, h1, h2, e h3, atribui-se à propriedade color o valor green. Assim, sempre que surgir um elemento h1, h2 ou h3, ele é formatado com a cor verde. As folhas de estilo não distinguem entre maiúsculas e minúsculas. Contudo há que ter em conta que algumas referências feitas pelas folhas de estilo distinguem maiúsculas de minúsculas, tais como URLs, os nomes dos ficheiros de imagem e os nomes das famílias de fontes.



Os nomes utilizados nas folhas de estilo podem ser qualquer cadeia de caracteres de a-z, A-Z ou 0-9, ponto, hífen ou caracteres Unicode. Não podem começar por um digito. Os caracteres colocados entre os delimitadores /* e */ são ignorados. Os documentos HTML têm uma estrutura hierárquica, baseada em mecanismos de herança, em que uns elementos são filhos de outros, seus pais. O nível de topo é o elemento <html>. Todos os outros elementos descendem deste. Os elementos filhos herdam, dos seus pais, as caracteristicas e propriedade, como por exemplo, cor ou tamanho. Body { font-size: 10pt} H1 { font-size: 14pt} O exemplo acima especifica que todos os elementos dentro do <body> usam fontes com o tamanho 10pt. No entanto a linha posterior, determina que os elementos h1 usam fontes com tamanho de 14pt.

Tipos de Folhas de Estilo Existem três tipos de folhas de estilo: - Folhas de estilo externas - Folhas de estilo internas - Folhas de estilo em linha Nas folhas de estilo externas a formatação é definida num ficheiro à parte, ou seja, num ficheiro exterior ao documento, ou documentos, HTML que se pretende formatar. Nas folhas de estilo internas a formatação é definida no próprio documento HTML que se pretende formatar. A formatação de cada tipo de elemento HTML é definida no cabeçalho e depois aplicada a todos os elementos desse tipo que surjam no documento. Nas folhas de estilo em linha a formatação é definida na própria linha do elemento HTML a formatar, e produz efeito apenas sobre esse elemento. Esta formatação é semelhante à formatação tradicional feita em HTML. Um documento HTML pode ser formatado com vários tipos de folhas de estilo, em simultâneo. Ou seja, a um mesmo documento HTML pode aplicar-se simultâneamente uma folha de estilo externa, uma folha de estilo interna e diversas folhas de estilho em linha. Neste caso, a formatação que prevalace é definida para seguinte regra de prioridades: - Se existir uma folha de estilo em linha, esta prevalece sobre qualquer outra. - A folha de estilo interna prevalece sobre a folha de estilo externa.



Folhas de estilo Externas Uma folha de estilo externa é definida num ficheiro à parte e pode ser responsável pela formatação de todas as páginas de um site. Cada página que pretende usar essa folha de estilo deve invocá-la no cabeçalho do documento. O ficheiro que define a folha de estilo tem a extensão .css. Codigo Fonte P {margin-left: 100px} Body {background-image: url(“imagens/mac.jpg”)} O código acima deve ser escrito sem as marcas <html> ou <body>. Grave o código anterior num ficheiro com o nome meuestilo.css. Este ficheiro é a folha de estilo externa que formatará o documento HTML. Crie uma pasta de imagens e copie para essa pasta uma imagem com o nome mac.jpg. Crie um novo ficheiro e introduza o código seguinte: Codigo Fonte <html> <head> <link rel=”stylesheet” type=”text/css” href=”meuestilo.css” /> </head> <body> <p> Exemplo de CSS externa</p> </body> </html> Na folha de estilo define-se a formatação para os elementos p e body, sempre que estes elementos ocorrem numa página que invoca a folha de estilo, a página formata-se de acordo com a folha de estilo.



Folhas de Estilo Internas Nas folhas de estilo internas, a formatação é definida no cabeçalho do próprio ficheiro, delimitada pelas marcas <style> e </style>. A formatação efectuada vale apenas para a página em questão. Codigo Fonte <html> <head> <style type=”text/css”> p {margin-left : 100px} body {background-image: url(“imagens/mac.jpg”)} </style> </head> <body> <p> Texto à direita </p> <p> outro texto à direita</p> <p> formatados pela folha de estilo interna</p> </body></html> Entre as marcas <style> e </style>, define-se que: - a marca <p> tem uma margem à esquerda de 100 pixeis - a imagem de fundo do documento é a imagem mac.jpg A marca <body> utiliza uma imagem de fundo indicada na folha de estilo. Todas as marcas <p> que venham a ser escritas comportam-se como indicado na folha de estilo, ou seja, têm uma margem esquerda de 100 pixeis. Folhas de Estilo em Linha Nas folhas de estilo em linha a formatação é definida na própria linha do elemento HTML a formatar. Aplica-se o atributo style à marca que se presente formatar, afectando as propriedades pretendidas.



Ao contrário das folhas de estilo internas e externas, as folhas de estilo em linha não oferem a vantagem de formatar de uma só vez vários elementos. Código Fonte <html> <head></head> <body> <p style=”color: blue; margin-left: 20px”> Paragrafo formatado com css em linha</p> </body> </html> No exemplo a formatação do parágrafo utiliza o atributo style com as propriedades color e margin-left, às quais se atribuem os valores pretendidos. Utilizar diferentes tipos de Estilos CSS Como foi visto, a folha de estilo em linha é a que tem maios nível de prevalência e a folha de estilo externa a que tem menor nível de prevalência. Exemplo de articulação entre diferentes tipos de folhas de estilo. Codigo Fonte <html> <head> <style type=”text/css”> p {margin-left: 100px} </style> </head> <body> <p> Paragrafo formatado com folha de estilo interna</p> <p style=”color: blue; margin-left: 20px”> Paragrafo formatado com folha de estilo em linha</p> </body> </html> Tipos de Selectores Um selector indica os elementos HTML a que um estilo se aplica. Existem vários tipos de selectores, com diferentes sintaxes e resultados diversos.



- Selectores de classe - Selectores de ID - Selectores de contexto - Selectores de atributo - Selectores pai-filho Selectores de Classe Um selector de classe permite identificar um conjunto de ocorrências de um elemento e atribuir-lhes um estilo comum. A classe pode ser genérica ou aplicar-se exclusivamente a um tipo de elementos. Para criar uma classe genérica utiliza-se o “.” Seguido do nome da classe e adicionam-se as declarações correspondentes . .rodape {color:blue} A classe é posteriormente invocada através do atributo class: <h1 class=rodape>Elemento associado à classe rodape</h1> <h2 class=rodape> outro elemento associado à classe rodape</h2> Para criar uma classe associada a um tipo de elementos, p por exemplo, utiliza-se o nome do elemento, seguido de “.” E do nome da classe: p.nome1 {color:red} p.nome2 {color:blue} As classes são posteriormente invocadas através do atributo class: <p class=nome1> paragrafo vermelho</p> <p class=nome2> paragrafo azul</p> <p class=nome2> paragrafo azul</p> Os nomes das classes podem utilizar qualquer caracter de a-z, A-Z, 0-9, ponto, hífen e caracteres Unicode. Não podem começar com um digito. É boa pratica atribuir nomes às classes de acordo com as sua função. O atributo class permite especificar duas ou mais formatações diferentes para um mesmo tipo de elemento. Na folha de estilo, definem-se para esse tipo de elemento duas classes que funcionam com subtipos e a respectiva formatação. Sempre que o elemento ocorrer basta indicar a classe a que o elemento pertence e ele adopta a formatação correspondente. Selectores de ID Um selector de ID permite identificar uma única ocorrência de um elemento HTML e atribuir-lhe um estilo.



Os selectores de ID são criados pelo caracter # seguido do nome do selector, que pode conter qualquer caracter de a-z, A-Z, 0-9, ponto, hífen e caracteres Unicode. Não pode começar por um digito. #abc123 {color: red; background: black} O ID anterior é depois invocado através de: <p id=abc123> Este elemento e só este, é identificado como abc123</p> Selectores de Contexto Um selector de contexto indica que um elemento obedece a um estilo caso esteja inserido no contexto definido. p.footnote {color: red} Qualquer elemento da classe footnote que ocorra no contexto da marca p é vermelho. Unidades Unidades de Medida As CSS utilizam as seguintes unidades de medida relativas: Tabela – Unidades de medida relativa em css Unidade Descrição % Percentagem de qualquer unidade Em 1 em é igual ao tamanho da fonte

do elemento corrente Ex 1 ex é aproximadamente metade da

altura da fonte Px Pixels (um ponto no ecrã) Utilizam também as seguintes unidade de medida absoluta Tabela – Unidades de medida absoluta em css Unidade Descrição In Polegadas Cm Centimetros Mm Milimetros Pt Ponto (1 pt é 1/72 polegadas)



Pc Pica (1 pc é o mesmo que 12 pontos)

Formatos de Cor As CSS utilizam os seguintes formatos de especificação de cor: Tabela – Formatos de especificação de cor em css Unidade Descrição Nome_da_cor O nome da cor (blue) RGB(x,y,z) Um valor RGB (rgb(0,0,255) RGB(x%,y%,z%) Uma percentagem RGB

(0%,0%,100%) #rrggbb Um numero hexadecimal (#ff0000) O formato RGB (red, green, blue) representa a cor como uma combinação de três componentes: vermelho, verde, azul. Pode ser expresso de três formas diferentes: - Uma sequência de três números de 0 a 255 - Uma sequência de três percentagens - Uma sequência de três número hexadecimais, de 00 a FF Nomenclatura de Folhas de Estilo Selector Selector é uma cadeia que identifica os elementos a que uma declaração se aplica. O selector estabelece a ligação entre o documento HTML e a folha de estilo. Body { background-color : #FFFFFF } Propriedade Propriedade é o atributo da folha de estilo que pode ser afectado pela CSS, por exemplo font ou width. A cada propriedade deve ser atribuido um valor. P { font : arial; color : #0000FF } Valor



Valor é uma especificação concreta da propriedade. Indica como a propriedade deve ser formatada. P { font : 10pt verdana ; color : black } Declaração Declaração é cada instrução de atribuição de um valor a uma propriedade. Um selector pode ter várias declarações, separadas pelo simbolo de ponto e virgula, utilizando a estrutura Selector {declaração1; declaração2} P { background : white; color: black } Estilo Estilo é o conjunto das declarações de um selector. Classe Classe é um grupo de instâncias, do mesmo elemento ou de elementos diferentes, às quais se podem associar um estilo. Agrupamento Agrupamento é uma associação de vários selectores que partilham o mesmo estilo, separados por uma virgula ou várias declarações que se aplicam a um mesmo selector, separadas por “;” Propriedade Abreviada Propriedade abreviada é constituida pode propriedades individuais e agrega-as. H1 { font: bold italic small-caps 160% serif } Pseudo-elementos Pseudo-elementos são elementos ficticios que não existem em HTML e que se referem a uma subparte do elemento HTML. Como exemplos de pseudo-elementos podem apontar-se o pseudo-elemento de primeira linha e o pseudo-elemento de primeira letra. Utiliza-se o separados “:” entre o nome do elemento e do pseudo-elemento. Aos pseudo-elementos podem atribuir-se estilos. P: first-line {text-transform: uppercase} H1: first-letter {font.size:200%; color: green}



Os pseudo-elementos podem ainda ser combinados com classes p.inicial:first-line { text-transform: uppercase} O selector acima refere-se à primeira linha dos elementos p pertencentes à classe inicial. O estilo pode ser posteriormente invocado no código, através da linha seguinte: <p class=inicial> A primeira linha deste parágrafo <br> fica em maiusculas</p> Pseudo-Classes Pseudo-classes classificam os elementos por caracteristicas que não o seu nome, atributos ou conteudo. Pode associar-se um estilo a cada pseudo-classe de um elemento. Exemplo de pseudo-classes de a: A:link – ligação por visitar A:active – ligação activa A:visited – ligação visitada Às pseudo-classes podem-se associar os seguintes estilos: A:link {background: black ; color: white} A:active {background: black ; color: red} A:visited {background: transparent ; color: black} Fundo do documento As folhas de estilo podem ser utilizadas para seleccionar uma cor de fundo para um documento ou uma imagem de fundo. Selecção de fundo de documento:

1. <html> 2. <head> 3. <style type = “text/css”> 4. body 5. { 6. background: #000033 7. url(“imagens/mac.jpg”) 8. no-repeat fixed



9. center center 10. } 11. </style> 12. </head> 13. <body> 14. <p> Este documento tem uma cor de fundo</p> 15. <p> e uma imagem de fundo</p> 16. </body> 17. </html>

As linhas 3 a 11 definem a folha de estilo interna. A linha 6 define a cor de fundo. A linha 7 define que imagem de fundo é o ficheiro mac.jpg que se encontra na directoria imagens. Na linha 8: - no-repeat evita que a imagem de fundo repita em mosaico. - fixed evita qeu a imagem se desloque ao mover a página com os elevadores vertical e horizontal do navagador. - center center indica o alinhamento horizontal e vertical que se pretende para a imagem de fundo. Texto As folhas de estilo permitem simplificar bastante a formatação de texto. Formatar texto, cor, tamanho

1. <html> 2. <head> <style type =”text/css”> 3. h1 {color: rgb(255,0,0)} 4. p {font: 12px arial; color: #0000ff} 5. </style></head> 6. <body> 7. <h1> Teste ao titulo 1</h1> 8. <p>Este é o primeiro paragrafo</p>



9. <p>Este é o segundo paragrafo</p> 10. </body></html>

As linhas 2 a 5 definem a folha de estilo interna. A linha 3 indica que o titulo1 é vermelho, ou seja, rgb(255,0,0). A linha 4 indica que um paragrafo normal do texto tem tamanho 12, fonte arial e cor #0000ff (azul). Estilo de fonte Para especificar negrito (bold), utiliza-se a propriedade font-weight, que pode assumir os valores normal, negrito entre outros. Para especificar itálico utiliza-se a propriedade font-style, que pode assumir o valor normal, itálico entre outros. Negrito e Itálico

1. <html> 2. <head> 3. <style type=”text/css”> 4. p {font-weight: normal; font-style:italic; color:#0000ff} 5. </style> 6. </head> 7. <body> 8. <p style=”font-weight: bold”>Frase a bold</p> 9. <p> Frase em itálico</p> 10. </body> 11. </html>

A folha de estilo interna especifica que a fonte tem o peso normal e o estilo itálico. A folha de estilo em linha substitui apenas para o parágrafo da linha 8, o peso normal por bold. No que diz respeito às formatações não referidas na folha de estilo em linha mantêm-se os valores especificados na folha de estilo interna. Assim o parágrafo 8 mantém-se a itálico e com a cor #0000ff. Parágrafos Exemplo:

1. <html> 2. <head> 3. <style type =”text/css”> 4. h1 {text-align: center; color: rgb(255,0,0)} 5. p (font: 12px arial; margin-left: 50px; line-height: 20%) 6. </style>



7. </head> 8. <body> 9. <h1> teste ao estilo 1</h1> 10. <p>este é o primeiro paragrafo</p> 11. <p>este e o segundo paragrafo</p> 12. </body> 13. </html>

As linhas 3 a 6 definem a folha de estilo interna. A linha 4 especifica que o titulo1 é alinhado ao centro com cor vermelha. A linha 5 especifica que um paragrafo normal do texto é formatado com tamanho 12, usando a fonte arial, com uma margem esquerda de 50px e com uma altura de linha de 20%. ------------------------------- Familias de fontes As CSS especificam familias genéricas de fontes e familias de fontes, conforme indicado na tabela seguinte. Familias e familias genericas de fontes em CSS Familias Genericas de fontes

Caracteristicas Familias de fontes

Serif Com patilhas Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia

Sans-serif Sem patilhas Arial, Helvetica, Verdana, MS Trebuchet, Univers, Futura, Myriad Web, Minion Web, Gill Sans, ITC Stone Sans

Cursive As letras no texto estão ligadas pelas suas terminações

Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto

Fantasy Têm essencialmente um uso decorativo

Alpha Geometric, Critter, Cottonwood

Monospace O espaçamento entre glifos é constante

Courier, MS Courier New, Prestige, Everson Mono

Algumas fonts proporcionam uma melhor leitura do que outras. Fora da WWW, nos documentos impressos, considera-se por vezes, que as fontes com patilhas facilitam a leitura.



No entanto na WWW, as fontes com patilhas não proporcionam uma leitura agradável, pelo que devem ser evitadas em textos longos e substituidas por fontes sem patilhas. O número de fontes diferentes num documento deve ser limitado, tal como na imprensa escrita. Recomenda-se que se utilizem duas ou três fontes mas não mais, sendo que estas serão utilizadas para diferenciar titulos, navegação e texto (conteudo). A utilização de diferentes fontes ajuda a estabelecer uma hierarquia e permite uma melhor leitura da estrutura do documento. Existem limitações quanto às fontes que se podem utilizar na WWW. Para que o visitante de um sítio veja a fonte que foi especificada para esse sitio é necessário que essa fonte esteja disponivel no seu sistema, caso contrário o navegador procede à substituição dessa fonte por outra. Não serve de muito ser um designer cuidadoso e seleccionar as fontes criteriosamente, se as fontes seleccionadas forem depois substituidas por outras no navegador do visitante, de forma um pouco aleatória. É portanto útil saber quais as fontes que normalmente estão disponiveis. Em geral o Windows garante que as seguintes fontes estão disponiveis no computador: Arial, Arial Black, Times New Roman, Verdana, Comic Sans MS, Courier New. Arial, 10pt (que tem um tamanho próximo de Times a 12pt) e Verdana, 10pt estão entre as fontes normalmente disponiveis e que proporcionam uma melhor leitura. É possivel e conveniente especificar fontes de substituição para o caso da fonte especificada não estar disponivel no computador do visitante. Usualmente pretende-se que ela seja substituida por uma fonte semelhante ou seja, da mesma familia. Para isso utiliza-se a propriedade font-family. Na propriedade font-family indica-se uma sequência de fontes (times, courier, arial, etc) e termina-se com uma familia generica (serif, sans-serif, etc). Familias genéricas e familias de fontes

1. <html> 2. <head>



3. <style type =”text/css”> 4. p {font-family: verdana, Arial, “Gill Sans”, Helvetica, sans-serif; 5. font-size: 10px; 6. color: #0000ff} 7. </style> 8. </head> 9. <body> 10. <p style=”font-family: ‘times new roman’, times, serif; font-size:

20px”> Este é o primeiro paragrafo</p> 11. <p>este é o Segundo paragrafo</p> 12. </body></html>

A folha de estilo interna indica que a fonte a usar deve ser, por ordem de preferência, Verdana, Arial, Gill Sans ou Helvetica; se nenhuma destas estiver presente, deve ser usada outra da familia generica sans-serif. A folha de estilo em linha (linha 10) indica por ordem de preferência, times new roman, times e a familia generica serif. Usam-se aspas ou plicas para delimitar fontes cujo nome contenha espaços em branco. (ex. “Gill Sans”). Propriedade Border Esta propriedade permite definir uma envolvente para para o texto, a sua espessura e a respectiva cor. Por exemplo pode-se especificar que o elemento <p> tem uma linha envolvente dupla com espessura média e com determinada cor. Propriedade Padding A propriedade padding permite especificar a distância do texto às fronteiras das células de uma tabela <style type=”text/css”> td {padding: 1.5cm} td.limiteshv {padding: 0.5cm 3.0cm} </style> A css acima determina que o texto fica a uma distância afastado quer do topo quer da esquerda da tabela em 1.5cm. Se for atribuida a class limitesshv a determinada tabela, o texto contido na mesma ficará afastado 0.5cm do topo e 3.0cm da esquerda. Hiperligações



As folhas de estilo permitem dar às hiperligações um grafismo mais sofisticado do que aquele que é possivel apenas com HTML. Hiperligações

1. <html> 2. <head> 3. <style type=”text/css”> 4. a.mudacor:link {color:#ff0000} 5. a.mudacor:visited {color:#0000ff} 6. a.mudacor:hover {color:#ff9900} 7. a.mudafundo:link {color:#ff0000} 8. a.mudafundo:visited {color:#0000ff} 9. a.mudafundo:hover {color:#ffff00} 10. a.muda:link {color:#ff0000} 11. a.muda:visited {color:#0000ff} 12. a.muda:hover {font-size: 150%} 13. a.mudasub:link {color:#ff0000; text-decoration: none} 14. a.mudasub:visited {color:#0000ff; text-decoration: none} 15. a.mudasub:hover {text-decoration: underline} 16. </style> 17. </head> 18. <body> 19. <p>Passe o rato sobre as ligações para testar</p> 20. <p><b><a class=”mudacor” href=”index.html” target=”_blank”>

Esta ligação muda de cor</a></b></p> 21. <p><b><a class=”mudafundo” href=”index.html” target=”_blank”>

Esta ligação muda de fundo</a></b></p> 22. <p><b><a class=”muda” href=”index.html” target=”_blank”> Esta

ligação muda o tamanho da letra</a></b></p> 23. <p><b><a class=”mudasub” href=”index.html” target=”_blank”>

Esta ligação muda o sublinhado </a></b></p> 24. </body> 25. </html>

As linhas 4 a 6 criam uma classe de ligações que mudam de cor quando o rato passa sobre elas. A linha 20 cria uma ligação pertencente a essa classe. As linhas 7 a 9 criam uma classe de ligações que mudam de fundo quando o rato passa sobre elas. A linha 21 cria uma ligação pertencente a essa classe. As linhas 10 a 12 criam uma classe de ligações que mudam o tamanho da fonte quando o rato passa sobre elas. A linha 22 cria uma ligação pertencente a essa classe. As linhas 13 a 15 criam uma classe de ligações que mudam o sublinhado quando o rato passa sobre elas. A linha 23 cria uma ligação pertencente a essa classe.



O parâmetro target=”_blank” é utilizado para abrir o destino dessa hiperligação numa nova janela. Grafismo Dimensionamento de imagens Nas CSS, o estabelecimento das dimensões vertical e horizontal de uma imagem efectua-se através das propriedades height e width.

1. <html> 2. <head> 3. <style type=”text/css”> 4. img.pequena {height:20px; width:30px} 5. img.grande {height:60px; width: 90px} 6. img.normal 7. { 8. height: auto; 9. width: auto 10. } 11. </style> 12. </head> 13. <body> 14. <img class=”normal” src=”imagens/porto.gif”> 15. <br> 16. <img class=”grande” src=”imagens/lisboa.gif”> 17. <br> 18. <img class=”pequena” src=”imagens/palmela.gif”> 19. </body> 20. </html>

A folha de estilo interna define três classes para img: grande, pequena e normal. Define também as dimensões da imagem para cada uma dessas classes. As linhas 14 a 18 inserem imagens indicando qual a classe a que pertencem, determinando assim as suas dimensões verticais e horizontais. Propriedade Position A propriedade position permite especificar a posição de um elemento. Existem quatro formas diferentes de posicionar um elemento numa página: - posicionamento estático - posicionamento relativo - posicionamento fixo - posicionamento absoluto



O posicionamento estático é aquele que resulta naturalmente da interpretação do navegador. Corresponde ao fluxo normal dos elementos na página. No posicionamento relativo os elementos são recolocados relativamente à posição que ocupariam no posicionamento estático. No posicionamento fixo, os elementos são colocados em relação ao topo da janela, independentemente da posição do elevador. O posicionamento absoluto é definido relativamente ao elemento pai do elemento que se pretende posicionar. Para declarar os quatro tipos de posicionamento indica-se no estilo do elemento respectivamente. Position: static Position: relative Position: fixed Position: absolute O posicionamento fixo pode ser util para a colocação de dispositivos de navegação, uma vez que os objectos não se deslocam com a página. <html> <head> <style type=”text/css”> img.tipo1 { position: absolute; left: 50px; top: 100px; } p.tipo2 { position: fixed; left: 500px; top: 300px } </style> </head> <body> <img class=”tipo1” src=”terra.jpg” width=”200” height=”1700”> <p class=”tipo2”>Sol </p> </body> </html> A folha de estilo interna coloca a imagem na posição (50px, 100px) e o elemento <p> na posição (500px, 300px). Se se utilizar a barra de rolamento vertical, observa-se que a imagem terra.jpg se move



solidariamente com a página. No entanto o parágrafo “Sol” não se move, uma vez que o seu posicionamento é do tipo fixed. Propriedade z-Index Os diversos elementos existentes numa página podem ser colocados em camadas, podendo existir elementos sobrepostos a outros, total ou parcialmente. A colocação dos elemtnos em camadas é feita através da propriedade z-index (profundidade). Um objecto com um z-index mais elevado sobrepõe-se a um aque tenha um z-index inferior. Por omissão, o z-index de um elemento é 0. O valor de z-index pode ser negativo.

1. <html><head> 2. <style type=”text/css”> 3. img.tipo1 4. { 5. position:absolute; 6. left:0; 7. top:0; 8. z-index:1 9. } 10. </style></head> 11. <body> 12. <h1>Titulo parcialmente coberto pela imagem</h1> 13. <img class=”tipo1” src=”imagens/braga.gif” width=”45”

height=”170”> 14. <p>Texto parcialmente coberto pela imagem</p> 15. </body> 16. </html>

A folha de estilo interna define um estilo de imagens cujo valor de z-index é 1. Ao criar uma dessas imagens, ela sobrepõe-se aos outros objectos existentes, pois o valor de z-index destes é 0.



Propriedade Visibility Através da propriedade visibility é possivel esconder elementos de uma página. <html> <head> <style type=”text/css”> p.mostra {visibility:visible} p.esconde {visibility: hidden} </style> </head> <body> <p class=”mostra”>Este é o texto da linha 1</p> <p class=”esconde”> Este é o texto da linha 2</p> <p>A linha 2 não é visivel</p> </body> </html> A folha de estilo interna define uma classe de elementos <p> visiveis e uma classe de elementos <p> invisiveis ou escondidos. A linha 9 insere um elemento visivel e a linha 10 insere um elemento invisivel. Utilizando tecnologias mais sofisticadas, como ASP ou PHP, pode alterar-se dinamicamente o valor da propriedade visibility. Contorno de imagens Um bloco flutuante – float – é uma caixa que é deslocada para a esquerda ou direita da linha corrente. O restante conteúdo da página flui pelo lado direito de uma caixa flutuante à esquerda e pelo lado esquerdo de uma caixa flutuante à direita. A caixa flutuante pode ser uma imagem ou uma caixa de texto. Contorno de Imagens



1. <html> 2. <head> 3. <style type=”text/css”> 4. img {float: left } 5. p, img { margin: 1em } 6. </style> 7. </head> 8. <body> 9. <p><img src=”bola.jpg” width=”40” height=”30” alt=”esta imagem ilustra os blocos flutuantes”> 10. texto a contornar imagem pela direita 11. texto a contornar imagem pela direita 12. texto a contornar imagem pela direita 13. texto a contornar imagem pela direita 14. texto a contornar imagem pela direita 15. texto a contornar imagem pela direita 16. texto a contornar imagem pela direita 17. texto a contornar imagem pela direita 18. texto a contornar imagem pela direita 19. texto a contornar imagem pela direita 20. texto a contornar imagem pela direita 21. texto a contornar imagem pela direita 22. texto a contornar imagem pela direita 23. texto a contornar imagem pela direita 24. </p> 25. </body> 26. </html> A folha de estilo interna define uma classe de imagens flutuantes e encostadas à esquerda. A linha 9 insere um elemento desta classe, encostado à esquerda conforme prescreve a folha de estilo. O texto flui pelo lado direito da imagem. A linha 5 estabelece que os elementos p e img têm uma margem de 1 em. Para alinhar a imagem à direita utilizar-se-ia img{float:right} Utilizando a declaração p{clear:left} pode evitar-se que o texto contorne a imagem. Nesse caso o parágrafo inicia-se apenas depois da imagem. Conteúdos em Colunas Utilizando folhas de estilo é possivel publicar em colunas, de forma semelhante aos artigos dos jornais. Publicar em colunas

1. <html> 2. <head> 3. <style type=”text/css”>



4. .tituloJornal {text-align: center; width: 100% } 5. .colunasNoticias {float: left; width: 28%; margin: 1%} 6. .fundodestaque {border:solid black 3px; background-color:

yellow } 7. </style> 8. </head> 9. <body> 10. <h1>Exemplo de esquema de jornal</h1> 11. <div class=”fundodestaque”> 12. <h2 class=”tituloJornal”>Titulo do Jornal</h2> 13. </div> 14. <div class=”colunasNoticias”> 15. <h3>Titulo Coluna 1 – Noticia 1</h3> 16. <p>Dia, Mês, Ano</p> 17. <p> por... nome do jornalista 1</p> 18. Texto noticia 1... texto noticia 1.... texto noticia 1... 19. Texto noticia 1... texto noticia 1 ... texto noticia 1... 20. </div> 21. <div class=”colunasNoticias”> 22. <h3>Titulo Coluna 2 – Noticia 2</h3> 23. <p>Dia, Mês, Ano</p> 24. <p> por... nome do jornalista 2</p> 25. Texto noticia 2... texto noticia 2.... texto noticia 2... 26. Texto noticia 2... texto noticia 2 ... texto noticia 2... 27. </div> 28. <div class=”colunasNoticias”> 29. <h3>Titulo Coluna 3 – Noticia 3</h3> 30. <p> dia, mes, ano</p> 31. <p>por... nome do jornalista 3</p> 32. Texto noticia 3... texto noticia 3.... texto noticia 3... 33. Texto noticia 3... texto noticia 3 ... texto noticia 3... 34. </div> 35. </body> 36. </html>

Definem-se três estilos diferente: para o titulo, para as colunas e para os destaques. A linha do titulo está sujeita à formatação especificada para o titulo e para os destaques. A primeira coluna é formatada de acordo com o estabelecido na classe .colunasNoticias e inicia-se com o titulo da noticia, a data e o nome do jornalista, seguindo-se depois a noticia. As colunas 2 e 3 sáo semelhantes à coluna 1. Recomenda-se que as colunas não excedam o tamanho vertical do ecrã, de modo a evitar que o leitor tenha que utilizar o elevador vertical para passar do fim de uma coluna para o inicio da seguinte. Recomenda-se também que as colunas não tenham mais do que 400 pixeis de largura.



Conteúdos Variáveis em estrutura fixa Uma situação frequente em publicações electrónicas é aquela em que se tem uma estrutura fixa, na qual se inserir elementos de dimensão variavel. É de todo o interesse preservar o esquema fixo e, no entanto permitir visualizar os diversos conteudos sem ter que os alterar. A técnica seguinte resolve essa situação utilizando a marca div e a propriedade overflow.

1. <html><head> 2. <style type=”text/css”> 3. div 4. { 5. background-color:#00FFFF; 6. width:150; 7. height:100; 8. overflow:scroll 9. } 10. </style> 11. </head> 12. <body> 13. <div> 14. Tuco: If you save your breath I feel a man like you can manage it.

And if you don’t manage it, you’ll die. Only slowly, very slowly old friend. <br><br>

15. ( The good, the Bad, and the Ugly) 16. </div> 17. </body> 18. </html>

A marca div define um bloco que se sujeita a um conjunto de regras. A folha de estilo estabelece as regras para esse bloco: cores, dimensões e o atributo overflow com o valor scroll. Este último faz com que, no caso do conteúdo exceder a caixa, surjam elevadores. Texto que contorna Texto Numa publicação escrita são comuns situações em que o texto de uma caixa contorna o texto existente noutra caixa. Na WWW isso não é comum, devido às limitações do HTML. Com as CSS é possivel contornar um bloco de texto com outro bloco de texto.

1. <html><head> 2. <style type=”text/css”> 3. h2.bloco1FlutuaDireita {



4. float: right; 5. width: 9em; 6. margin: 0 0 0 0.2em; 7. padding-left: 0.2em; 8. background: #90ee90; 9. border-left: 2px dotted #2e8b57; 10. border-bottom: 2px dotted #2e8b57; 11. } 12. .blockquote.bloco2flutuaEsquerda { 13. float: left; 14. width: 13.5em /* “em” é uma unidade que depende do elemento */ 15. padding: 0.5em; 16. margin: 0 0.5em 0 0; 17. color: #00008b; 18. background: #b0c4de; 19. border-right: 2px dotted #4169e1; 20. border-bottom: 2 px dotted #4169e1; 21. } 22. p.bloco3 { 23. padding: 2.5em; 24. background: #e6e6fa; 25. } 26. span.maiuscVerde, span.maiuscLaranj, span.maiuscAmarelo { 27. float: left; /* estilos agrupados partilhados */ 28. font-size: 1.7em; 29. padding: 0 0.15em; 30. margin: 0 0.15em -0.5em 0; 31. border: 3px outset #2e8b57; 32. } 33. span.maiuscVerde { 34. background: #90ee90; 35. } 36. span.maisucLaranj { 37. background: #ffa500; 38. } 39. span.maiuscAmarelo { 40. background: #ffff00; 41. } 42. #imagemEsquerda1 {float: left} 43. </style> </head> 44. <body> 45. <h2 class=”bloco1FlutuaDireita”>ESTE É o BLOCO 1, flutuante. 46. Está encostado à direita. O restante fluirá pela sua esquerda</h2> 47. <blockquote class=”bloco2FlutuaEsquerda”> 48. <p>ESTE É O BLOCO 2, flutuante. Está encostado à esquerda. O

restante fluirá pela sua direita. 49. texto texto texto texto texto texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </p>



50. <p> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto</p>

51. </blockquote> 52. <p class=”bloco3”><span class=”maiuscVerde”>E</span>STE É O

BLOCO3. Repare-se que este bloco (ao contrário do 1 e do 2) não é flutuante.

53. Assim, o bloco seguinte vai surgir por baixo deste e não ao lado e em torno dele. Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

54. </p> 55. <p><span class=”maiuscVerde”>N</span> 56. <span class=”maiuscLaranj”>e</span> 57. <span class=”maiuscAmarelo”>t</span> 58. <img id=imagemEsquerda1 src=”bola.jpg” width=”50”

height=”50”> 59. ESTE É O BLOCO 4. Veja-se o que acontece quando se colocam,

seguidos, elementos flutuantes do mesmo lado. Aqui está o texto texto texto texto texto texto texto texto texto texto

60. </p> 61. </body> 62. </html>

Este exemplo apresenta algumas das potencialidades gráficas das CSS, no que diz respeito à estrutura de um documento. Usualmente, quando existem dois elementos sucessivos, o segundo coloca-se à direita ou abaixo do primeiro. No entanto, se um elemento é flutuante, o elemento seguinte sobe preenchendo o espaço deixado vago ao lado do elemento anterior. Obtém-se assim um efeito de contorno. No código anterior a linha 3 define uma classe de blocos flutuantes alinhados à direita: h2.bloco1FlutuaDireita. Estes blocos sáo do tipo titulo h2. A linha 45 introduz um destes blocos. A linha 12 define uma classe de blocos flutuantes alinhados à esquerda. Estes blocos são do tipo blockquote, o que lhes permite ter no seu interior outros elementos HTML, como <p> por exemplo. A linha 47 introduz um destes blocos. A linha 22 define uma classe de blocos <p>, não flutuantes. O bloco que se seguir a este será colocado depois deste, sem o contornar. A linha 52 introduz um destes blocos. Juntas as linhas 3 e 12 definem estilos para elementos flutuantes consecutivos, alinhados em lados opostos. As linhas 12 e 22 definem estilos para um elemento flutuante seguido de um não flutuante. As linhas 55 a 60 constituem um parágrafo que se segue a um bloco não flutuante e que, por isso não o contorna. A linha 33 define uma classe de span, que é usada na linha 52 onde formata parte de um paragrafo. As classes de span criadas nas linhas 33, 36 e 39 estão alinhadas à esquerda pelas instruções das linhas 26 e 27. Essas classes de span são



usadas nas linhas 55, 56 e 57 para produzir texto colorido em partes de um paragrafo. O ID criado na linha 42 é usado na linha 58 para introduzir uma imagem alinhada à esquerda. Juntas, as linhas 55, 56, 57 e 58 mostram o resultado de elementos flutuantes consecutivos alinhados do mesmo lado. Este exemplo mostra não só o contorno de texto como também o contorno misto de texto e imagem. As CSS permitem libertar o designer dos esquemas tradicionais, baseados em tabelas, dando uma liberdade criativa que se aproxima da existente na imprensa escrita. Fluxo de texto em torno de imagens irregulares Numa publicação escrita são comuns situações em que o texto flui ao longo de linhas definidas por imagens. Fluxo de texto

1. <html> 2. <head> 3. <style type=”text/css”> 4. /* lado esquerdo */ 5. #imagem1e, #imagem2e, #imagem3e { 6. float: left; 7. clear: left; 8. } 9. #imagem1e{ 10. width 395px; 11. height: 100px; 12. background: url(“florCima.jpg”) no-repeat; 13. } 14. #imagem2e { 15. width: 340px; 16. height: 100px; 17. background: url(“florMeio.jpg”) no-repeat; 18. } 19. #imagem3e { 20. width: 261px; 21. height: 100px; 22. background: url(“florBaixo.jpg”) no-repeat; 23. } 24. /* lado direito */ 25. #imagem1d, #imagem2d, #imagem3d{ 26. float: right; 27. clear: right; 28. padding: 0; 29. } 30. #imagem1d{ 31. width: 320px;



32. margin: 0 0 0 10px; 33. height: 100px; 34. background: url(“amarela1Cima.jpg”) no-repeat; 35. } 36. #imagem2d{ 37. width:350px; 38. height:100px; 39. background: url(“amarela1Meio.jpg”) no-repeat; 40. } 41. #imagem3d{ 42. width:400px; 43. margin: 0 0 0 15px; 44. height:100px; 45. background: url(“amarela1Baixo.jpg”) no-repeat; 46. } 47. </style> 48. </head> 49. <body> 50. <div id=”imagem1e”></div> 51. <div id=”imagem1d”></div> 52. <div id=”imagem2e”></div> 53. <div id=”imagem2d”></div> 54. <div id=”imagem3e”></div> 55. <div id=”imagem3d”></div> 56. <p> 57. texto texto texto texto texto texto texto texto texto texto texto texto

texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

58. </p> 59. </body> 60. </html>

Utilizam-se duas imagens, uma para o lado esquerdo e outra para o lado direito do ecrã. Cada uma destas é cortada horizontalmente em três secções, obtendo-se seis imagens: três para o lado esquerdo e três para o lado direito. Nas linhas 5, 9, 14 e 19 declaram-se os estilos das três imagens que vão limitar o texto pelo lado esquerdo. Essas imagens são flutuantes à esquerda. Nas linhas 25, 30, 36 e 41 declaram-se os estilos das três imagens que vão limitar o texto pelo lado direito. Essas imagens são flutuantes à direita. Nas linhas 50 a 55 colocam-se as imagens alternadamente à esquerda e à direita, o que evita problemas de interpretação por parte dos navegadores. Qualquer texto que se acrescente (linhas 56 a 58) aparece limitado à esquerda e à direita e parece contornar as figuras. Para dividir as figuras nas suas partes pode utilizar-se um programa de edição de imagem.



Para efectuar contornos com bastante detalhe deve partir-se a figura num maior número de blocos com menor altura. O tamanho da fonte e a altura da linha também influenciam o resultado. Recomenda-se um tamnho de fonte de 11px e uma altura de linha de 15px. Validação das folhas de estilo Existem serviços gratuitos de validação das folhas de estilo, disponiveis na internet. Estes serviços efectuam a verificação do código produzido de modo a garantir que não contém erros, obedecendo rigorosamente às normas estabelecidas pelo W3C. O W3C, a entidade que regulamenta a sintaxe das folhas de estilo, oferece um serviço desta natureza. Este serviço está disponivel em : http://jigsaw.w3.org/css-validator/

http://jigsaw.w3.org/css-validator/

Education

Manual css