Apostila CSS (Cascading Style Sheets), Notas de estudo de Cultura

Baixe Apostila CSS (Cascading Style Sheets) e outras Notas de estudo em PDF para Cultura, somente na Docsity!

de

4.1. Introdução

4.1.1. O que são folhas de estilo?

Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicada, como organizar uma coleção de documentos. A maior parte dos programas de editoração eletrônica e processadores de texto moder- nos trabalham com folhas de estilos. O processo consiste em definir um rótulo (nome do esti- lo) para um determinado parágrafo e em seguida alterar os seus atributos. Todo parágrafo que for rotulado com aquele estilo passará a exibir as características definidas anteriormente. Qual- quer alteração nos atributos de um estilo afetará todos os parágrafos que estiverem rotulados com ele. Esta descrição, que se aplica a estilos em processadores de texto e programas de editora- ção eletrônica, também vale para a Web. Na Web, os "parágrafos" são blocos marcados por descritores HTML como ,

, etc. Para fazer com que todos os blocos de textos mar- cados com

em um documento sejam exibidos em tamanho de 48 pontos, basta definir a regra:

H1 {font-size: 48pt}

dentro de uma "folha de estilos" aplicada ao documento. A folha de estilos pode ser um arquivo de textos simples (alfabeto ISO-Latin1) com a extensão .css. Para vinculá-lo a uma página HTML, esta deve ter dentro do seu bloco ... o seguinte descritor:

O restante deste artigo tratará dos fundamentos da tecnologia de folhas de estilos aplicáveis ao HTML, chamada de Cascading Style Sheets (folhas de estilo em cascata), mostrando como estabelecer as regras de estilo para um bloco de texto, uma página ou todo um site. Seções específicas abordarão cores, imagens, tipologia e posicionamento. Este texto não é completo. Omitimos propriedades e recursos não suportados nos browsers e nos limitamos àqueles recursos que constam da especifica- ção CSS1 (não incluímos recursos proprietários nem a maior parte das novidades do CSS2 que não funcionam nos browsers disponíveis no mercado). Para uma abordagem mais completa, consulte a documentação oficial do W3C: http://www.w3.org/Style/.

O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem CSS (é uma linguagem declarativa) trabalha com os elementos tratando-os como "objetos". Cada parágrafo

, cada

, cada é um objeto. Objetos podem ser agrupados de várias formas. A cada objeto ou grupo de objetos podem ser atribuídas propriedades de estilo definidas em regras. Por exemplo, considere a seguinte regra: "todo objeto P da classe 'editorial' será azul, terá tamanho de 12 pontos, espaçamento duplo, alinhamento pela direita e usará a família de fontes Arial, ou, se esta não existir, Helvetica, ou então a fonte sem-serifa _default_ do sistema". Um arquivo CSS com apenas a regra acima conteria o texto:

P.editorial {color: 0000ff; font-size: 12pt; line-height: 24pt; text-align: right; font-family: arial, helvetica, sans-serif} Se a folha de estilos acima for aplicada a uma página que possua parágrafos

rotula- dos com o nome "editorial" (atributo 'CLASS=editorial'), eles serão formatados de acordo com as propriedades especificadas se o browser suportar CSS. Se o browser não suportar CSS, a estrutura será mantida (embora a aparência não seja a ideal) e o usuário conseguirá ter acesso à informação estruturada, mesmo em um meio de visualização mais limitado. Quando se usa CSS, são poucas as modificações necessárias no HTML. Não são neces- sários novos descritores ou extensões. No exemplo acima, teremos que incluir apenas um atri- buto a mais (o atributo CLASS, do HTML 4) classificando os parágrafos que fazem parte do nosso 'editorial' (parágrafos que tem uma função diferente dos demais). A grande vantagem das folhas de estilo é a preservação da estrutura do HTML e um controle muito melhor do autor sobre a sua aparência na tela do usuário final. Uma página deverá aparecer da melhor forma possível tanto num PowerPC sofisticado como naquele IBM PCXT 4.77MHz rodando o Lynx for DOS. O primeiro utilizará todos os recursos gráficos determinados pelas folhas de estilo. O segundo as ignorará, mas preservará a estrutura e a in- formação

4.2. Regras Básicas

4.2.1. Regras, declarações e seletores

A estrutura dos estilos é bastante simples. Consiste de uma lista de regras. Cada regra pos- sui um bloco, entre chaves ({ e }), de uma ou mais declarações aplicáveis a um ou mais seletores. Um seletor é algo no qual pode-se aplicar um estilo. Pode ser um descritor HTML, uma hie- rarquia de descritores ou um atributo que identifique um grupo de descritores. Uma folha de estilos consiste de uma ou mais linhas de regras, da forma:

seletores { declarações }

As regras podem estar dentro de um arquivo de texto (ISO Latin1 ou ASCII 8-bit) com extensão ".css" ou _embutidas_ em um arquivo HTML (as várias maneiras de aplicar estilos a um arquivo HTML serão vistas na seção seguinte). Um exemplo de folha de estilos com apenas uma regra foi mostrada na seção anterior: H1 {font-size: 48pt} Nesta regra, H1 é o seletor e {font-size: 48pt} é o bloco da declaração, que estabele- ce um tamanho de fonte (prop. font-size) para todos os objetos (parágrafos) marcados com . As declarações são feitas usando a sintaxe: propriedade: valor Observe que se usa dois-pontos (:) e não igual (=) para aplicar um valor a uma proprie- dade. Pode haver mais de uma declaração de estilo para um seletor. Isto pode ser feito em ou- tro bloco. Cada linha acrescenta ou sobrepõe declarações feitas em linhas anteriores:

H1 { font-size: 24pt } H1 { color: blue } H1 { font-size: 18pt } No trecho acima, o texto marcado com será azul e terá tamanho de 18pt porque a regra H1 { font-size: 18pt }^ ocorreu depois da regra^ H1 { font-size: 24pt }.

4.2.2. Múltiplas declarações e seletores

Várias declarações de estilo podem ser aplicadas de uma vez a um seletor. As declara- ções, então, precisam ser separadas por ponto-e-vírgula (;) :

H1 {font-size: 18pt; color: blue; font-family: Caslon, serif } BODY { background : navy; color : white } Os espaços em branco (espaços, novas-linhas e tabulações) são ignorados pelo browser na hora de interpretar uma folha de estilos e podem ser usados para melhorar a sua legibilida- de. As duas linhas acima ficariam mais legíveis da forma:

BODY {background : navy; color : white }

H1 {color: blue; font-size: 18pt; font-family: Caslon, serif } Uma declaração só termina com uma fecha-chaves (}) ou com um ponto-e-vírgula (;). Dependendo da propriedade, esta pode ter vários valores separados por vírgulas ou valores compostos com as palavras separadas por espaços:

P { font: 12pt "Times New Roman" bold } H2 { font-family: Arial, Helvetica, Sans-serif }

sinal de porcentagem ou unidade deve estar junto ao número correspondente sem espaços. Ou seja, deve-se escrever font-size: 24pt e não font-size: 24 pt. Cores e arquivos externos podem requerer uma função para serem definidos. São duas as funções (ou procedimentos) do CSS1: rgb(), que constrói uma cor, e url(), que retorna um vínculo para uma imagem ou arquivo CSS (usada em instruções @import). Há quatro maneiras diferentes de especificar cores em CSS: usando o nome do sistema (red, yellow, blue, black, lightGray), usando seu código RGB hexadecimal (ff0000, ffff00, 0000ff, 34adfc, 80a7a7) ou usando a função rgb(). A função rgb() requer três argumentos que representam a intensidade dos componentes vermelho (R), verde (G) e azul (B) de uma cor em forma de luz (não opaca). A intensidade pode ser expressa em valores inteiros de 0 (mínimo) a 255 (máximo) ou em valores fracionários de 0% a 100%. As instruções abaixo de- finem a mesma cor para um parágrafo:

P {color: red} P {color: ff0000} P {color: rgb(100%, 0%, 0%)} P {color: rgb(255, 0, 0)} Não deve haver espaço entre o "b" de rgb e o abre-parênteses. A função URL pode ser usada em propriedades que requerem arquivos (no caso, ima- gens) como valores. Ela recebe um argumento apenas com a URL (relativa ou absoluta) da imagem:

P {background-image: url(../imagens/tijolos.gif)} P {background-image: url(http://longe.com/imagens/pedras.png)}

4.2.5. Herança

Os estilos "herdam" propriedades de várias maneiras. Uma das formas é através da pró- pria hierarquia do HTML. Se você declara propriedades para BODY, todos os descritores se- rão afetados a não ser que tenham as suas propriedades redefinidas dentro de um novo bloco de declarações CSS. Se um está dentro de um

e todos os

são declarados como tendo a cor vermelha, o também será vermelho a menos que haja um bloco, posterior àquela declaração, redefinindo as propriedades de , por exemplo:

P {font: 12pt "Times New Roman" bold; color: red }

I {color: black }

faria com que o texto "seletor", no texto a seguir permanecesse preto:

Um **seletor** é algo no qual pode-se aplicar um estilo.

Se você definir atributos para os descritores ou , toda a página será afetada. No exemplo a seguir, uma cor de texto definida para BODY será usada para colorir todo o texto do documento, a não ser que sejam sobrepostos por uma regra subseqüente:

BODY {color: navy } H1, H2 {color: yellow } Os blocos acima farão com que todo o texto seja azul marinho, exceto aquele marcado com H1 ou H2, que será amarelo. Os browsers comerciais têm problemas principalmente com a aplicação de estilos em BODY, portanto, freqüentemente é preciso mexer nas declarações de estilo, acrescentando propriedades redundantes para adaptá-los à realidade. No site do W3C (http://www.w3.org) há links para documentos que analisam essas diferenças entre browsers. O site http://www.w3.org/Styçe/CSS/Test/ é uma plataforma de testes que pode ser usada para verificar se um browser suporta ou não determinada propriedade.

4.2.6. Descritores HTML especiais

Dois descritores HTML têm importância fundamental em CSS. Eles são descritores es- truturais puros que não definem apresentação específica na folha de estilos nativa do browser. Com CSS é possível definir propriedades de apresentação para esses descritores. Eles são e . é um descritor que deve ser usado dentro de blocos de texto apenas. É cha- mado de descritor em-linha ( inline ), já que não quebra a linha antes ou depois. Ele se assemelha a descritores como , , , e que servem para formatar texto dentro de parágrafos, células de tabela, etc. é um descritor que define um bloco ou seção da página. Pode ser usado para di- vidir a página em seções (e subseções no Internet Explorer ) e permitir que sejam aplicados estilos específicos a essas seções. Descritores de bloco são

,

, , etc. define um bloco sem função ou aparência definida. A função e aparência será determinada em CSS.

4.2.7. Como incluir estilos em uma página

Há três formas de aplicar uma folha de estilos a uma página Web. Estas formas irão de- terminar a abrangência dos estilos: se afetarão um trecho limitado de uma página, se a toda a página, ou se irão afetar todo um site. A primeira forma, mais abrangente, é a vinculação a um arquivo CSS. Isto é feito ligando a página HTML a um arquivo de folha de estilo, usando do descritor ). Este método permite que múltiplas páginas ou um site inteiro usem a mesma folha de estilos. Para fazer um vínculo à uma folha de estilos externa, deve-se criar um arquivo de texto contendo um conjunto de regras de estilo em CSS, salvá-lo com uma extensão ".css" e chamá-

Permite alterar a aparência de um único descritor, de um conjunto deles ou de um bloco de informações da página. Por exemplo:

Este texto

Esta propriedade é mais interessante quando aplicada em um descritor que é usado para agrupar vários outros, como , que divide a página em seções ou , usado em situações bem específicas. Usar estilos desta forma é pouco diferente de usar atributos locais. Os benefícios de poder mudar a fonte, cores e outras características em todo o documento ficam mais difíceis. Pode-se usar um, dois ou os três métodos ao mesmo tempo. As características definidas pelos mais específicos sobrepõem as definidas pelos mais genéricos. Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes regras:

H1 { color: green; font-size: 24pt} P { color: blue} Suponha que ele seja carregado na página a seguir que possui um bloco

Mais adiante, existe um parágrafo e um título da forma: Auto da Compadecida

Ariano Suassuna (Recife, 1955)

Qual estilo irá predominar? Pela regra de que o mais específico sobrepõe o mais geral, teremos uma página onde os têm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da página) e os

são vermelhos (sobreposto pelo estilo da página). Nas duas linhas acima (e nelas apenas), o

será azul marinho (sobrepondo o estilo da página) e o

será preto.

4.2.8. Classes e IDs

Às vezes um parágrafo tem uma aparência diferente dos outros parágrafos em uma certa parte do texto. Para mudar o estilo dele, pode-se incluir as declarações em um atributo STYLE. Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, pode-se usar um recurso para marcá-lo de forma que seja considerado diferente. Isto pode ser feito atribuindo- lhe uma identificação única. Em HTML 3.2, pode-se usar o atributo ID:

Texto especial

Para alterar as características deste parágrafo agora, pode-se usar o seu ID como seletor, da forma:

#w779 {color: cyan } Se isto estiver em um arquivo CSS, todas as páginas que o usam e que tiverem um ele- mento com o ID #w779 serão afetadas. Se houver mais de um com o mesmo ID apenas o primeiro será afetado. Melhor que usar ID é agrupar características semelhantes em classes. Uma classe é uma variação de um determinado objeto. Por exemplo, um texto teatral pode ter três parágrafos com apresentação diferente, representando as falas de três personagens. Se quiséssemos que cada um tivesse uma cor diferente, poderíamos declarar cada um como sendo de uma classe distinta:

Eu retiro o que disse, João

Retirando ou não retirando, o fato é que o cachorro enterrou-se em latim

Um cachorro? Enterrado em latim?

fará com que apenas os links não visitados da classe "classX" que estejam dentro de itens de lista de segundo nível situados dentro de um parágrafo dentro de um bloco qualquer da classe "bispo" sejam mostradas em itálico.

4.2.11. Cascata de folhas de estilo

Existem seis diferentes folhas de estilo que podem ser definidas. Além das três formas que mostramos em seção anterior deste capítulo, há ainda, segundo a especificação, mais três folhas de estilos que podem afetar uma página: 1) uma folha de estilos que é importada por outra folha de estilos (isto é diferente daquela que é vinculada ao HTML, dentro de um ), 2) uma folha de estilos definida pelo usuário (ou leitor da página) e 3) a folha de esti- los default do browser (que é usada quando outra folha não define os estilos). Todas estas folhas de estilo diferentes podem provocar uma grande confusão se não houver uma regra clara de como devem ser consideradas. Ainda há um sétimo fator que é a formatação introduzida pelo HTML, como nos descritores e atributos align=center. Listando todas as folhas de estilos que podem afetar um texto, temos:

1. Folha de estilos default do browser: todos os browsers possuem regras comuns para formatar um texto. A especificação HTML não impõe um formatação padrão. Netscape Navigator por exemplo usa um fundo cinza como padrão e links azuis sublinhados. Já o Internet Explorer prefere um fundo branco.
2. Folha de estilos definida pelo leitor: a especificação define a possibilidade do leitor estabelecer uma folha de estilos própria. Isto é parcialmente conseguido quando o browser permite que se escolha diferentes cores para fundo, texto e links.
3. Folha de estilos vinculada ao HTML: é a folha de estilos que é importada pelo arquivo HTML através do descritor de ligação
4. Folha de estilos importada: uma folha de estilos externa (arquivo CSS) pode ser importada de dentro de outra folha de estilos (um outro arquivo CSS ou bloco .
5. Folha de estilos local: é aquela que é aplicada localmente a um descritor usando o atributo style="lista de declarações".
6. Estilo definido pelo HTML: atributos e descritores podem provocar alterações na aparência do texto, por exemplo: , , ,

   , etc. Um browser que siga a especificação CSS à risca obedece a seguinte ordem de precedên- cia: 1. Local, 2. Embutida, 3. Vinculada, 4. Importada, 5. HTML, 6. Leitor, 7. Browser Na prática, as coisas não são tão bonitas. No Internet Explorer para Macintosh , a ordem é respeitada. Na versão do Internet Explorer 3.0 para Windows , os estilos vinculados ao HTML têm

mais importância que os embutidos (o mesmo ocorre com _Explorer 4_ e _Navigator 4_ ). No _Netsca- pe Navigator 4_ e _Internet Explorer 4_ , os estilos aplicados via HTML têm precedência máxima (no _Internet Explorer 3_ a precedência funciona corretamente, mas não no 4). Com as diferenças exis- tentes nos browsers de hoje, não vale a pena ainda se aprofundar neste assunto. A solução ainda é testar, testar, testar antes de colocar no ar.

4.3. Fontes

Fontes são estilos de apresentação consistentes aplicados a alfabetos. Uma fonte consiste de atributos que alteram a aparência de um símbolo, sem alterar o seu significado. Oferecem as informações necessárias para que uma letra ou símbolo possa ser representado graficamente. Os atributos essenciais de uma fonte são:

• Seu tipo (ou família)

Seu tamanho Seu estilo (regular, itálico, outline , etc.) Seu peso (normal, negrito, light , black ) Para representar qualquer texto, portanto, é preciso escolher uma fonte, ou seja: um tipo, um estilo, um peso e um tamanho. Letras maiúsculas e minúsculas não são consideradas fontes diferentes, pois têm um significado distinto. Os quatro atributos acima podem ser definidos em CSS através das propriedades font- family, font-size, font-style e font-weight. Não é preciso definir todas pois sempre têm valores default. CSS oferece ainda font-variant, que permite considerar outras variações de uma fonte.

4.3.1. font-family

Uma família de fontes (tipo) é selecionada com a propriedade font-family. Esta pro- priedade aceita uma lista de valores separados por vírgulas representando nomes de fontes existentes ou não no sistema do usuário. No final da lista, pode ser incluída uma referência a uma família genérica, que será usada caso nenhum dos nomes coincida com o nome de uma fonte do sistema. A sintaxe é: font-family : fonte1, fonte2, fonte3, ..., fonte-genérica Exemplos: H1 { font-family : garamond } H2 { font-family : arial, helvetica, sans-serif } H3 { font-family : courier, "courier new", monospaced } H4 { font-family : monospaced }

Os tamanhos absolutos chamados pelo nome (xx-small, etc.) correspondem aos tama- nhos de 1 a 7 do descritor e podem variar de acordo com a família de fontes usada (variam bastante entre plataformas também). Veja um exemplo comparativo e o resultado no Internet Explorer para Windows:

(...)

xx-small | x-small | small | medium | large | x-large | xx-large size=1 | size=2 | size=3 | size=4 | size=5 | size=6 | size=7 |

Os tamanhos relativos funcionam como o e , aumentando a fonte atual por 150%. A diferença é que podem passar além do limite xx-large (ou ) ou xx-small (font size=1>). Os comprimentos referem-se a unidades comuns em tipografia. Um "em" é uma distân- cia horizontal equivalente ao tamanho de uma fonte (se uma fonte tem 20 pontos de tamanho, um em corresponde a uma distância de 20 pixels de largura). Um "ex" é a altura das letras de caixa-baixa (sem incluir as hastes ascendentes e descendentes). Tanto "em" como "ex" usam valores relativos ao elemento que contém o elemento atual. São úteis principalmente em espa- çamento, sendo pouco usados em fontes.

As porcentagens são afetadas pela herança, por exemplo:

Este é o texto desta seção. 2 vezes maior

Este é um parágrafo da seção. O texto tem 50% do tamanho do texto da seção.

As porcentagens de 50% e 200% são aplicadas na fonte atual, que é a fonte do bloco que contém os dois elementos (), e que tem tamanho 18pt. O resultado é que o será exibido em tamanho 26pt e

em tamanho 9pt.

4.3.3. font-style e font-weight

O estilo de uma fonte é afetado através de duas diferentes propriedades: font-weight, que altera o peso da fonte, e font-style, que altera o estilo ou inclinação. Sintaxe: font-style: normal (ou italic, oblique) Exemplos: H1 { font-style: italic } I { font-style: normal }

...

Sintaxe:

Os valores lighter e bolder especificam pesos de fontes relativos a algum valor her- dado. Eles avançam ou retrocedem na escala de 100 a 900 relativos aos pesos de fontes.

4.3.4. font-variant

Atualmente a única opção disponível para esta propriedade é small-caps, que deve co- locar o texto selecionado em maiúsculas, porém menores que as capitulares. Na prática, até as maiúsculas são reduzidas no Internet Explorer. Sintaxe: font-variant: small-caps Exemplos:

Um texto simples sem SmallCaps...

**

Um texto simples com SmallCaps...

**

Os small-caps acima, no Internet Explorer 4, são falsos. As le- tras maiúsculas não deveriam ter sido afetadas.

**** Um texto simples com SmallCaps... verdadei- ros **** .

4.3.5. A propriedade font

Para especificar várias propriedades de um seletor de uma vez só, pode-se usar a propri- edade font em vez de definir em separado font-size, font-weight, font-family, etc. Nesta sintaxe, a ordem dos fatores é importante, porém nem todos os elementos precisam estar presentes:

font: font-style font-variant font-weight font-size line-height font-family Exemplos: H1 { font: italic 700 24pt Tahoma, Arial, sans-serif }

4.4. Atributos de texto

As propriedades desta seção tratam de transformações e atributos aplicados a texto, não afetando a exibição das fontes. Os atributos tipográficos afetam a forma como o texto é apre- sentado na tela como o espaçamento entre linhas, entre palavras, entre letras, o alinhamento de parágrafos e a endentação. A propriedade text-transform permite colocar letras em maiúsculas ou minúsculas e a propriedade text-decoration permite acrescentar ou tirar efeitos decorativos do texto como riscados e sublinhados.

4.4.1. text-transform

A propriedade text-transform realiza transformações no formato caixa-alta ou caixa- baixa do texto. Sintaxe:

text-transform: capitalize text-transform: uppercase text-transform: lowercase text-transform: none (valor default) Exemplos: H1 { text-transform: capitalize} Capitalize coloca a primeira letra de cada palavra em maiúsculas. Uppercase coloca tudo em maiúsculas e lowercase coloca tudo em minúsculas. None remove qualquer transformação deixando o texto da forma como foi definido antes das transformações.