style Ajusta o estilo da borda ao longo do lado direito de um elemento nome do estilo (none, solid, double, groove, ridge, inset, outset) { borderrightstyle: solid } borderbottom style Ajusta o estilo da borda ao longo do lado de baixo de um elemento nome do estilo (none, solid, double, groove, ridge, inset, outset) { borderbottom style: groove } borderleft style Ajusta o estilo da borda ao longo do lado esquerdo de um elemento nome do estilo (none, solid, double, groove, ridge, inset, outset) { borderleftstyle: inset } borderstyle Ajusta o estilo da borda em todos os lados de um elemento nome do estilo (none, solid, double, groove, ridge, inset, outset) { borderstyle: outset } bordertop Ajusta a largura, cor, e estilo da borda ao longo do lado de cima de um elemento largura, cor, e estilo { bordertop: thin green ridge } borderright Ajusta a largura, cor, e estilo da borda ao longo do lado direito de um elemento largura, cor, e estilo { borderright: thin green ridge } borderbottom Ajusta a largura, cor, e estilo da borda ao longo do lado de baixo de um elemento largura, cor, e estilo { borderbottom: thin green ridge } Projeto eJovem Módulo II: CSS 63 borderleft Ajusta a largura, cor, e estilo da borda ao longo do lado esquerdo de um elemento largura, cor, e estilo { borderleft: thin green ridge } border Ajusta a largura, cor, e estilo da borda em todos os lados de um elemento largura, cor, e estilo { border: thin green ridge } float Faz com que o elemento flutue para um lado e outro do texto e o envolva. (Usado nos elementos DIV e SPAN.) left, right, ou none { float: left } clear Especifica se o elemento pode ter elementos flutuando à sua volta faz com que o elemento se posicione por baixo de qualquer elemento que esteja flutuando no lado especificado. left, right, ou both { clear: left } pt = pontos; in = polegadas; cm = centímetros; px = pixels; 2.9. Propriedades de classificação Estas propriedades classificam os elementos em categorias que podem receber estilos. Categorias podem ser: listas, blocos, trechos de blocos ou itens invisíveis. 2.9.1. display Esta propriedade define como um elemento é mostrado. A propriedade none desliga o elemento e fecha o espaço que o objeto antes ocupava (torna o objeto invisível); block abre uma nova caixa onde o objeto é posicionado, relativo aos outros blocos; listitem é um bloco com um marcador de lista e inline define um elemento como parte de um bloco. Sintaxe: • display: block | inline | listitem | none Exemplo: P {display: listitem} IMG {display: none} // desliga todas as imagens 2.9.2. whitespace Define como o espaço em branco do elemento é gerenciado (se as linhas devem ser quebradas para que apareçam na tela ou não (nowrap) ou se os espaços em branco, tabulações, etc. devem ser considerados (pre). • whitespace: normal | pre | nowrap Projeto eJovem Módulo II: CSS 64 2.9.3. liststyle Esta propriedade e as propriedades liststyletype, liststyleimage e liststyleposition definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e posição. Esses elementos não são suportados no Netscape. • liststyletype: disc | circle | square | decimal | lowerroman • liststyletype: upperroman | loweralpha | upperalpha | none • liststyleimage: url(url_da_imagem) • liststyleposition: inside | outside Exemplo: liststyleimage: url(bullet.gif) É possível definir as três propriedades através de um atalho usando listtype. A ordem dos fatores é importante neste caso. • liststyle: liststyletype | liststyleimage | liststyleposition Exemplo: liststyle: url(bullet.gif) liststyle: square outside Logo abaixo se encontra uma tabela de propriedades e valores estilísticos de classificação Propriedade Descrição Valores Exemplo display faz com que o elemento não apareça none { display: none } liststyletype especifica a aparência de marcadores de item de lista (uso com elementos LI) disk; circle; square; decimal; lower roman; upperroman; loweralpha; upper alpha; none { liststyletype: square } liststyleimage especifica uma imagem para ser usada como marcador de item de lista (uso com elementos LI) url(URL); none { liststyle image: url(redball.jpg) } liststyle position especifica a posição de marcadores de item de lista ( uso com elementos LI) inside; outside { liststyle position: inside } liststyle especifica a posição, estilo,e URL da imagem a ser usada como marcador de item de lista ( uso com elementos LI) inside; outside disk; circle; square; decimal; lower roman; upperroman; loweralpha; upper alpha; none URL { liststyle: inside disk url(redball.jpg) } pt = pontos; in = polegadas; cm = centímetros; px = pixels; Projeto eJovem Módulo II: CSS 65 2.10. Posicionamento O posicionamento de objetos em HTML pode ser conseguido em termos absolutos ou relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões (horizontal, vertical e em camadas). Embora os recursos de posicionamento não façam parte do CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam. 2.10.1. position, top e left Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A origem da posição absoluta será a posição do objeto no nível imediatamente superior. O posicionamento relativo referese à posição anterior do objeto. Sintaxe: • position: absolute | relative • left: comprimento | porcentagem | auto • top: comprimento | porcentagem | auto Exemplo: considere as quatro imagens a seguir: <div class="imagem1"> <img src="T1.gif" width=150 height=72 border=1> 1 Posição 0 0 </div> <div class="imagem2"> <img src="T2.gif" width=150 height=72 border=1> 2 Posição 0 200 </div> <div class="imagem3"> <img src="T3.gif" width=150 height=72 border=1> 3 Posição 25 25 </div> <div class="imagem4"> <img src="T4.gif" width=150 height=72 border=1> 4 Posição 100 0 </div> Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua localização original, obtemos a imagem ao lado (qual imagem?). Os retângulos claros indicam a posição original da imagem: DIV.imagem1 { position: relative; top: 0px; left: 0px; } DIV.imagem2 { position: relative; top: 0px; left: 200px; } DIV.imagem3 { position: relative; top: 25px; left: 25px; } DIV.imagem4 { position: relative; top: 100px; left: 0px; } Usando posicionamento absoluto, o bloco é movido em relação ao canto superior esquerdo do browser. Projeto eJovem Módulo II: CSS 66 DIV.imagem1 { position: absolute; top: 0px; left: 250px; } DIV.imagem2 { position: absolute; top: 100px; left: 0px; } DIV.imagem3 { position: absolute; top: 160px; left: 120px; } DIV.imagem4 { position: absolute; top: 200px; left: 80px; } 2.10.2. zindex A propriedade zindex permite ordenar os objetos em camadas. É um eixo de profundidade. Para usála, basta definir em cada objeto: • zindex: número onde número é a camada de exibição. Quanto maior o número, mais alta a camada. O corresponde à camada do texto. Se um objeto tiver zindex menor que zero aparecerá atrás do texto. Se zindex for maior que zero, aparecerá na frente. Quando não é definido ou quando zindex: 0 o bloco ocupará a mesma camada que o texto. 2.10.3. visibility Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque não remove o espaço antes