Baixe Cascading Style Sheets (CSS) para HTML e outras Notas de estudo em PDF para Cultura, somente na Docsity!
1.1 Cascading Style Sheets – CSS
Uma folha de estilos consiste de uma ou mais definições de estilo (tamanho de fonte, estilo da fonte, alinhamento de texto, cor de texto e do fundo, margens, altura da linha, etc) para elementos HTML que podem ser linkados ou embutidos em documentos HTML. Esta funcionalidade foi criada para propiciar aos desenvolvedores e projetistas Web a possibilidade de contar com estilos e posicionamentos consistentes no documento.
1.1.1 O Uso de Estilos
**} -->
Green, italic, and a point size of 12 Yellow, italic, and a point size of 12 Point size of 24
Here is some capitalized text.
**
** **
Figura 3.7 - Texto do cabeçalho redefinido com class para o IE
Utiliza-se se for preferível armazenar todos ou um conjunto de estilos em um único local para que as mudanças sejam globalmente aplicadas. Este elemento é usado para ligar estilos externos ao documento. Os atributos do elemento , type e ref são usados para definir o tipo de link e a URL que contém o estilo desejado. CSS externos são construídos de forma similar ao CSS definido dentro do documento. A folha de estilos é armazenada numa URL que contém as definições de estilos, mas os elementos HTML não são necessários. Este elemento deve estar contido na seção do documento em questão. Para se incluir um arquivo de estilos chamado “chapters.css” deve-se usar:
** **
Figura 3.8 - Especificando estilos com o atributo id
1.1.3.2 O Atributo class
Estilos definidos por class são explicitamente chamados com os elementos HTML que os utilizam. Classes de estilo, como mostra o exemplo X.3 são uma forma de agrupar propriedades de estilos que serão utilizadas em várias partes do documento. O exemplo 3.9 define duas classes de estilo e os aplica a diferentes instâncias do elemento
. A Figura 3.9 ilustra a página resultante no browser.
Exemplo 3.9 – Usando o atributo class para selecionar um estilo **
JavaScript Lumina
Welcome to my page! Style Font 24
Here is some text. Style Font 12
** ** **
Figura 3.9 - Usando o atributo class para selecionar um estilo
_1.1.3.3 O elemento _
O último método de se aplicar um estilo é através dos elementos e . Estes elementos são usados para marcar uma parte específica do texto na qual o estilo deve ser aplicado. Este elemento é usado quando um trecho do texto dentro de um elemento precisa ter um estilo aplicado. O exemplo 3.10 mostra como aplicar um estilo a uma parte do texto que já possui um estilo pré-definido. A Figura 3.10 ilustra a página resultante no browser.
Exemplo 3.10 – Usando o tag **
JavaScript Lumina
**
**} #myid{ font-size: 12; } -->
Green Yellow and point size 12 Yellow and italic This will be default text
**
Figura 3.11 - Combinando estilos em uma única definição de estilos
1.2 Layers
Algumas das limitações das páginas Web têm sido a dificuldade de se posicionar texto ou imagem precisamente em uma página, e de sobrepor elementos HTML. Um dos aspectos mais inovadores dos browsers atuais é o suporte para layers (camadas). Layers permitem a definição de conteúdo sólido ou transparente num documento HTML que pode ser posicionado de forma precisa no local desejado. Os layers podem ser implementados utilizando várias ténicas diferentes. Com exceção do Navigator 4, um layer pode ser criado usndo um comando HTML e aplicando propriedades de estilo (CSS) para posicionar, mostrar e controlar o que o comando vai executar. Simplesmente pela natureza do que o comando representa (uma divisão de dados), foi a
escolha mais lógica para a criação de layers. O Navigator 4 inclui dois novos comandos: e (o i vem de inflow). Diferentemente do comando , eles possuem atributos que essencialmente permitem sua estilização. Para criar um layer com posicionamento absoluto, usa-se o comando , e para um layer com posicionamento relativo, usa-se .
1.2.1 Uso de Folhas de Estilo para Layers
A maneira própria e padronizada de se implementar layers é controlá-los através do uso de folhas de estilo, que incluem posicionamento, estilo e visibilidade. As propriedades CSS que serão utilizadas são:
- • Position
- • Left, right
- • Height , width
- • Z-index
- • Visibility
1.2.1.1 Position
A propriedade position é usada para informar ao browser como fixar um determinado elemento numa posição do documento. Existem quatro valores para esta propriedade:
Valores Descrição Absolute As coordenadas absolutas do elemento serão especificadas. Se não estiverem especificadas o browser assume que x e y são zero. Fixed O elemento não deve mudar quando a janela é rolada. Relative Permite posicionar o elemento com base no elemento anterior. Static Valor default
O Exemplo 3.12 mostra a implementação do posicionamento absoluto de elementos HTML, e a Figura 3.12 ilustra a página resultante.
Exemplo 3.12 – Especificando o posicionamento absoluto de elementos com propriedades CSS **
JavaScript Lumina
1.2.1.2 Left, right, top e bottom
São utilizadas para informar o browser o local exato em que o elemento deve ser exibido. Estas propriedades não são usadas todas juntas, por exemplo, left e right não devem estar ambas definidas, o mesmo vale para top e bottom. O Exemplo 3.13 mostra a implementação do posicionamento de quatro elementos HTML do tipo layer, usando as propriedades left, right, top e bottom. A Figura 3.13 ilustra a página resultante, com os objetos dispostos precisamente nos locais definidos.
Exemplo 3.13 – Posicionando objetos usando as propriedades left, right, top e bottom
JavaScript Lumina
Layer 1
Layer 2
Layer 3
Layer 4
Figura 3.13 – Usando as propriedades right, left, top e bottom
1.2.1.3 Height e width
Estas duas propriedades permitem definir a altura e a largura do layer, e devem receber valores numéricos. O Exemplo 3.14, continuação do exemplo anterior, altera o tamanho e a largura dos objetos exibidos, através das propriedades height e width. A Figura 3.14 mostra os objetos com os tamanhos alterados.
Exemplo 3.14 – Usando height e width para especificar o tamanho do layer **
JavaScript Lumina
Figura 3.14 – Usando height e width para especificar o tamanho do layer
O Exemplo 3.15, mostra a sobreposição dos elementos HTML implementados em layers, usando apenas as propriedades definidas anteriormente. A Figura 3.15 exibe a sobreposição dos quadrados coloridos, sendo que a ordem da sobreposição é a ordem em que os elementos aparecem no código.
Exemplo 3.15 – Sobreposição de layers
JavaScript Lumina
left: 40; position: absolute; top: 40; width: 100; } #fourth{ background-color: yellow; height: 100; left: 60; position: absolute; top: 60; width: 100; } -->
Layer 1
Layer 2
Layer 3
Layer 4
Figura 3.15 – Sobreposição de layers
**
Layer 1
Layer 2
Layer 3
Layer 4
**
Figura 3.16 – Trocando o z-index dos layers (Ordem dos layers)
1.2.1.5 Visibility
A propriedade visibility é responsável por ocultar ou deixar visível um determinado layer. Possui quatro valores possíveis:
Valores Descrição Collapse Possui o mesmo significado de hidden, exceto quando utilizado em tabelas. Hidden Oculta o elemento. Inherit Valor defaul do browser, recebe o valor do elemento anterior. Visible Torna o elemento visível.
O Exemplo 3.17, como os exemplos anteriores, mostra a exibição de layers sobrepostos, porém agora com a propriedade visibility aplicada de forma a ocultar dois dos objetos que poderiam ser exibidos. A Figura 3.17 mostra os layers em que os atributos visibility não receberam o valor hidden.
Exemplo 3.17 Ocultando layers **
JavaScript Lumina
Layer 1
**
Com o uso de layers, JavaScript e folhas de estilo pode-se criar (com HTML), projetar (com CSS) e manipular (com JavaScript) elementos numa página. Com os avanços tais como melhor suporte do modelo de objetos do documento (DOM) e XML (eXtensive Markup Language) nos browsers, as possibilidades são sem fim.
** e **
O melhor método para a implementação dos layers é através dos elementos e . Os elementos e da Netscape estão desaprovados.
1.2.3 Definição de Blocos de Dados
O primeiro passo na criação de layers é definir o bloco de dados que será considerado um layer. Para uma aplicação comum, a primeira janela do browser deve ser considerada o primeiro layer. Um botão no primeiro layer pode disparar um menu, considerado então no segundo layer, no topo do documento. Se um clique no menu dispara um submenu em cascata então este é um novo layer (podendo estar ou não no mesmo nível do anterior). A definição dos blocos de dados é feita através do uso do elemento . Os atributos do elemento são:
Atributos Descrição Align Usado para alinhar os dados. Recebe os valores left, right, center e justify. O uso de CSS é mais aconselhável para o alinhamento. Class Lista de classes de estilo, separadas por vírgula, que faz do elemento uma instância das classes. Dir Especifica a direção do texto: ltr (left to right) e rtl (right to left). Id Usado para definir o tipo do estilo que deve ser aplicado aos dados. Lang Identifica o código da linguagem humana em que os dados estão. Name Usado para dar um nome ao bloco. Pode ser usado pelo JavaScript para manipular os layers. Style Permite especificar uma definição de estilo ao invés de uma folha de estilos. Title Provê um título para a divisão.
1.2.3.1 Definição de um bloco de dados
Deve-se colocar o bloco de dados entre os elementos e . O Exemplo 3.18 mostra a criação de duas divisões
chamadas “layer1” e “layer2” no corpo do documento HTML, ilustradas na Figura 3.18.
Exemplo 3.18 – Usando o elemento **
JavaScript Lumina
Before the first block.
DIV 1
After the first block.
Before the second block.
DIV 2
I am inside the second DIV block.
After the second block.
**
Figura 3.18 – Definindo blocos de dados no documento
