. Agora vamos ver detalhadamente os atributos específicos 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
. 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 então, existem uma série de atributos que servem para indicar a forma, o tamanho das camadas, a visibilidade, etc, que não vimos nos capítulos anteriores e que veremos a seguir.
Indica o tipo de posicionamento da camada. Pode ter dois valores, relative ou absolute.
- relative indica que a posição da camada é relativa ao lugar onde se estava escrevendo na página no momento de escrever a camada com sua etiqueta
- absolute indica que a posição da camada se calcula com relação ao ponto superior esquerdo da página.
Atributo top
Indica a distância em vertical onde será colocada a camada. Se o atributo position é absolute, top indica a distância da borda superior da camada com relação a borda superior da página. Se o atributo position era relative, top indica a distância desde onde se estava escrevendo nesse momento na página até a borda superior da camada.
Atributo left
Basicamente funciona igual ao atributo top, com a diferença que o atributo left indica a distância 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 página ou se permanece oculta ao usuário. Este atributo pode ter três valores.
- visible serve para indicar que a camada poderá ser vista.
- hidden indicará que a camada está oculta.
- inherit é o valor por padrão, que quer dizer que herda a visibilidade da camada onde está colocada a camada em questão. Se a camada não está colocada dentro de nenhuma outra se supõem que está colocada na camada do documento, que é toda a página e que sempre está visível.
Atributo z-index
Serve para indicar a posição sobre o eixo que terão as distintas camadas da página. Com outras palavras, com z-index podemos dizer quais camadas serão vistas em cima ou embaixo de outras, no caso de que estejam sobrepostas. O atributo z-index toma valores numéricos e a mayor z-index, mais em cima será vista na página.
Atributo clip
É um atributo um pouco difícil de explicar. Em concreto serve para recortar determinadas áreas da camada e que não podem ser vistas. Uma camada que está visível se pode recortar para ser vista, mas não será visto nenhum pedaço 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 distâncias 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 página web, onde também poderá ser apreciado o efeito conseguido ao realizar o cliping.
Comentários do artigo
