Cascading Style Sheets - Apostilas - Informática, Notas de estudo de Informática

Baixe Cascading Style Sheets - Apostilas - Informática e outras Notas de estudo em PDF para Informática, somente na Docsity!

CSS

Cascading Style Sheets

© Datamec S.A.

Sumário

Capítulo 1:

Aplicando Style Sheets

Objetivo

Ao final deste capítulo você será capaz de :

• Adicionar Style Sheets em documentos HTML;
• Criar arquivos com a extensão .CSS;
• Entender como os estilos são herdados;
• Criar estilos de acordo com necessidades diferentes;
• Analisar documentos CSS escritos por outros autores.

Anexando Style Sheets em documentos HTML

A linguagem HTML permite que qualquer trecho de código seja adicionado à página. Para tanto é utilizada o elemento . Entretanto, você deve especificar a linguagem a ser utilizada, como no exemplo abaixo:

Através de links

Você pode criar uma Style Sheet em um arquivo separado para posteriormente aplicar tal estilo em todas as páginas do site. Utilizando este recurso adequadamente, é possível centralizar quase toda a apresentação de um site em um ou mais arquivos. Caso haja necessidade de mudança na apresentação do site, esta é feita em um único lugar.

É aconselhável que o arquivo de estilos possua a extensão .css mas não é obrigatório. Outra extensão também funciona. É um arquivo somente texto cujo formato é legível e de fácil compreensão. Isto facilita a criação de Style Sheets utilizando editores simples como o notepad.

Para associar uma Style Sheet armazenada em um arquivo separado use o elemento como no exemplo abaixo:

Incluindo CSS no documento

Nem sempre é necessário armazenar o estilo em um arquivo separado. Os códigos de estilo podem ser colocados dentro de cada documento HTML. Obviamente os códigos colocados dentro um documento HTML afetarão somente aquele documento.

É possível a utilização de estilos internos e estilos externos. Neste caso os estilos internos sobrepõem estilos externos se houver conflitos. Se não houver, os estilos internos são aplicados e posteriormente são aplicados os estilos externos.

O elemento utilizada para adicionar o estilo ao documento é o elemento

Importância do estilo

A utilização de estilo na construção de grandes sites é fundamental. A utilização adequada pode contribuir nos seguintes aspectos:

• Existência de um padrão de cores e navegação para todo o site
• Reutilização de código
• Velocidade no carregamento das páginas
• Administração centralizada
• Personalização de sites.

Apesar das inúmeras vantagens a construção de estilos sólidos e reusáveis é uma tarefa difícil e requer administração centralizada. Mais tarde discutiremos os desafios enfrentados ao desenvolver sites utilizando CSS.

Entendendo a ordem

Como dito anteriormente, você pode utilizar vários tipos de estilos para controlar a aparência do seu site. O navegador estabelece uma prioridade para cada estilo a ser aplicado como na lista a seguir:

• Estilos definidos junto com o elemento;
• Estilos definidos no documento;
• Estilos anexados.

Embora não seja aconselhável você pode usar o palavra importante para alterar esta precedência. No exemplo abaixo o estilo atribuído ao elemento H1 sobrepõe o estilo definido junto com o elemento graças ao uso da palavra important:

Criando Style Sheets para cada tipo de Mídia

CSS permite também estilos diferentes para cada tipo de mídia utilizada para apresentação deste estilo. Isto dá um enorme poder para a CSS permitindo a utilização de um documento por portadores de deficiência visual ou auditiva. Permite também a aplicação de estilos especificamente para impressão de documentos, o que resolve uma grande deficiência dos navegadores. Tanto o IE quanto o Netscape possuem dificuldades na hora de paginar documentos para impressão.

H1 {color: red! important; font-weight: bold; font-family: sans-serif! important}

Adicionando regras para uma Style Sheet

Tanto Style Sheets anexadas quanto no documento permitem a definição de um ou mais elementos. Por exemplo você deseja criar uma Style Sheet que define estilos para os elementos , e

. Cada definição de estilo é chamada de regra. Uma regra contém um seletor (que é o próprio elemento), seguido da declaração (a definição do estilo). O exemplo abaixo mostra uma regra que define um estilo para cada ocorrência do elemento

:

A declaração é colocada entre chaves ({}). Cada item na declaração possui duas partes: O nome da propriedade e o valor atribuído a esta, separado por dois pontos (:). No exemplo abaixo, color é o nome da propriedade e blue é o valor atribuído a esta. Existes dezenas de propriedades as quais se aplicam tipos predefinidos e certos intervalos de valores:

H1 {color: blue}

Atribuindo múltiplas propriedades em uma regra simples

Múltiplas propriedades podem ser atribuídas em uma única declaração. Isto é feito separando cada atribuição com o sinal de ponto e vírgula (;). No exemplo abaixo o navegador mostra cada ocorrência do elemento usando a cor azul, fonte 12 centralizada. Para todas as outras propriedades o navegador utilizará os valores padrão:

Agrupando seletores juntos em uma regra simples

Caso seja necessária a definição de um mesmo estilo para vários elementos, esta pode ser feita listando os estilos individualmente.

Entretanto, existe uma maneira mais eficiente de fazer a mesma ação. Os elementos (ou seletores) podem ser agrupados de modo a definir uma regra única para todo o grupo. No exemplo abaixo os seletores são agrupados e uma única regra é atribuída:

H1 {color: blue; font-size: 12pt; text-line: center}

P, UL, LI {font-size: 12pt}

A Style Sheet para este exemplo muda a cor do elemento

para azul. Não há definição para o elemento . Devido ao fato do elemento está dentro do elemento

, herda o propriedade color do elemento

.

Trabalhando com Classes em Style Sheets

Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência específica de um elemento utilizando o atributo CLASS. Por exemplo, você pode definir três variações do estilo H1 e então usar cada variação em um contexto apropriado. Uma classe é definida normalmente, como é definido um estilo. Apenas é adicionado o nome da classe no final do elemento, separado por ponto, assim como no exemplo:

Quando o elemento

é adicionado ao documento, o atributo CLASS é utilizado para atribuir qual estilo será utilizado.

H1.blue {color: blue} H1.red {color: red} H1.black {color: black}

Red Heading

Uma classe não precisa de estar ligada à um elemento. As classes podem ser declaradas sem nenhum elemento. Assim, qualquer elemento que utilize aquela classe utilizará aquele estilo:

Definindo um estilo para um elemento específico

Como já discutido anteriormente, você pode declara estilos junto com o elemento. Entretanto, para facilitar a leitura do documento, você pode atribuir um ID aos elementos e então associar estilos à este ID. Para declarar o estilo para um ID é usado o símbolo (#). Somente aos atributos com aquele ID são aplicados os estilos.

O exemplo abaixo declara um estilo para o ID test.. Ele também usa o elemento

e atribui a este o ID test:

.red {color:red}

Red Heading

Red Paragraph

test {color:red}

This is a test paragraph

#### Adicionando comentários em Style Sheets

Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.

Tanto para linhas de comentário quanto para blocos a sintaxe é a mesma:

Ocultando Style Sheets de navegadores antigos

Para manter a compatibilidade com navegadores antigos CSS implementa a funcionalidade de ocultar o código CSS destes navegadores. Lembre-se que seu site não deve depender exclusivamente da CSS. Este deve funcionar mesmo caso não seja possível aplica-la. Utilize o exemplo abaixo para criar esta compatibilidade:

H1 {font-size: 16; margin-left: -1in} /* estilo do elemento H1 / H2 {font-size: 14; margin-left: -1in} / estilo do elemento H2 */

/------------------------------------------------------ Este é um bloco de comentario ------------------------------------------------------/

Revisão

1. Quais são as principais vantagens e desvantagens do uso de Style Sheets em arquivos externos?
2. É aconselhável que a funcionalidade do site dependa 100% de CSS?
3. Diferencie a necessidade de utilização de IDs e classes.