Apostila de css, Notas de estudo de Eletromecânica

Baixe Apostila de css e outras Notas de estudo em PDF para Eletromecânica, somente na Docsity!

Criação de Web Sites I

de

Conteúdo

12. Introdução

12.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/.

12.2. Para que servem as folhas de estilo

Separar apresentação da estrutura

Com isto é possível voltar a suportar browsers antigos que antes estavam condenados por não conseguirem ler a informação sem perdas. Com a informação toda armazenada no HTML (estrutura), a apresentação (estilo) seria uma camada a mais, alterando a disposição do texto, cores, etc. mas sem afetar a estrutura essencial da informação. Isto permite que uma página tenha vários estilos e use scripts (programas embutidos) para decidir qual carregar (em função do browser e da plataforma). Isto é muito menos trabalho que fazer uma página para cada browser e plataforma, pois a atualização é feita apenas no HTML. Também, com isso, é possível ter uma folha de estilos especial somente para impressão, onde haveria informações de quebra de páginas, etc. (este recurso não faz parte da versão 1 do CSS).

Controle absoluto da aparência da página.

É algo que não se tem com o HTML. Pode-se usar tabelas, GIFs invisíveis de um pixel e mais uma dúzia de "macetes" mas não se consegue fazer o texto fluir suavemente em volta de uma imagem irregular, por exemplo. Além do mais, quanto mais sofisticada a técnica, mais difícil é de codificar e mais "sujo" fica o código, o que o torna mais sujeito a erros. Com CSS, pode-se colocar uma imagem em qualquer lugar da página (até fora dela), usando técnicas de posicionamento absoluto ou relativo. Pode-se escolher a posição exata da imagem de back- ground e fazê-la combinar com algo no foreground. As dimensões e posições são exatas e dadas em unidades conhecidas no mundo da tipografia como pixels, pontos, paicas , milímetros.

Páginas mais leves

Com folhas de estilo é possível criar muitas páginas com um layout sofisticado que antes só era possível usando imagens, tecnologias como Flash ou applets Java. Estas páginas eram sempre mais pesadas, pois precisavam carregar imagens, componentes, programas. Com CSS é possível definir texto de qualquer tamanho, posicioná-lo por cima de outros objetos, ao lado ou por cima de texto e conseguir efeitos sofisticados a um custo (banda de rede) baixo. É pos- sível ainda importar fontes (que o usuário talvez não tenha).

Manutenção de um grande site

Uma folha de estilos serve para toda uma coleção de páginas, podendo ser usada para dar um estilo consistente a todo o site. Sendo aplicada em separado da informação e estrutura, não precisará ser atualizada todas as vezes em que a informação for mudada. A página pode ser atualizada em um editor HTML ou gerador de HTML simples, sem recursos de cor ou alinha-

13. Regras Básicas

13.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 }.

13.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 } As aspas devem ser usadas quando uma palavra que tem espaços precisar ser usada. No exemplo acima, o nome "Times New Roman" deveria ser tratado como o nome de uma fonte distinta, e não como três valores, o que ocorreria se as aspas não estivessem presentes. Assim como um seletor pode ter várias propriedades definidas para ele, um mesmo con- junto de propriedades pode ser aplicada a um grupo de seletores, separando-os com vírgulas:

H1, H2, H3 { color: blue; font-size: 18pt; font-family: Arial, Helvetica, Sans-serif } As declarações de estilo podem ser aplicadas em quase qualquer descritor HTML - no mundo perfeito! Na prática, muitos browsers ainda têm problemas de compatibilidade, e não implementam a especificação à risca, como veremos adiante. Ao utilizar folhas de estilo, deve-se respeitar os elementos HTML que possuem descrito- res finais freqüentemente ignorados, como

, , etc. A falta do

pode causar o "vazamento" das declarações de estilo para fora do parágrafo em alguns browsers.

13.3. Comentários e instruções

Além das regras, um arquivo CSS pode ter ainda comentários e instruções (precedidas de @). No CSS1 apenas uma instrução é definida: @import. Ela é usada para que uma folha de estilos possa importar estilos de outro arquivo CSS através de uma URL. Os estilos importados

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

13.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.

13.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.

13.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á- lo a partir de todos os documentos HTML onde o estilo será aplicado. Não é preciso compilar ou qualquer coisa do tipo. Depois que as definições estiverem prontas, o estilo estará pronto para ser usado. Pode ser importado através do descritor LINK:

(...)

---

O elemento não tem descritor de fechamento e deve ser usado dentro do blo- co . Uma segunda forma, permite que estilos sejam aplicados localmente, em uma única pá- gina, embutindo uma folha de estilos diretamente na página HTML dentro de um bloco for- mado pelos descritores . Este método permite que você altere as propriedades de estilo de uma única página. A linguagem que é embutida em um bloco deve ser usado em . Um atributo type informa o tipo de arquivo utilizado:

---

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.

13.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?

Enterrado latindo, Senhor Bispo, Au, au, au, não sa- be?

Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atribu- tos, usa-se:

P. grilo { color: maroon } P. padre { color: black } P. bispo { color: navy }

Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão em azul marinho. Uma classe também pode conter descritores diferentes. Se todos os textos citados por um certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar o descritor:

.verde { color: green } Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo:

,

, , etc.

13.9. Links (pseudo-classes e pseudo-elementos)

Para seletores especiais que mudam de estado, como o texto marcado com , é pos- sível atribuir propriedades diferentes para cada estado:

A :link {color: red} A :active {color: 660011} A :visited {color: black; text-decoration: none} A :hover {color: blue; text-decoration: underline}

muda as características dos links não-visitados, ativos e visitados. Assim como qualquer seletor, os links podem ser combinados com outros descritores:

P, A:link, H2 {color: red}

13.10. Seletores de contexto

Você também pode definir seletores que só serão aplicados se estiverem no contexto de um outro seletor, por exemplo:

P.verde EM {color: 000040}

indica que o EM só terá sua cor alterada se ocorrer dentro de um bloco P da classe "verde". Os seletores de contexto podem ser bem longos: .bispo P UL UL LI A.classX:link {font-style: italic }

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.

13.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

14. 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.

14.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 }

As fontes sans-serif e monospaced são nomes genéricos. Não se referem a uma fonte em particular mas a um grupo genérico. Os outros são serif, cursive e fantasy.

O browser usará a primeira fonte da lista se a encontrar. Se não encontrar, irá procurar a fonte seguinte. Se o nome de uma fonte tiver mais de uma palavra, este deverá ser colocado entre aspas. As aspas podem ser apóstrofes simples (') ou aspas duplas ("). Os apóstrofes são necessários quando for preciso especificar estilos dentro de um atributo HTML:

...

14.2. font-size

O tamanho de uma fonte é alterado usando font-size. Pode ser especificado em valo- res absolutos ou relativos. Para especificar um valor absoluto, pode-se usar:

font-size: número(pt | px | cm | mm | pc | in) font-size: xx-small|x-small|small|medium|large|x-large|xx-large O tamanho também pode ser especificado relativo ao elemento no qual o atual objeto está contido.

font-size: tamanho_relativo (smaller, larger) font-size: comprimento (em ou ex) font-size: porcentagem% Exemplos: H1 { font-size: 24pt} H1 { font-size: x-large} H1 { font-size: smaller} H1 { font-size: 1.5em} H1 { font-size: 150%}

Os tamanhos de pontos devem ser especificados como valores inteiros (mesmo se usa- dos cm ou in). Os browsers podem formatar os tamanhos de forma diferente e os mesmos podem ser alterados pelos usuários nos browsers atuais. As unidades válidas são: pt (pontos), px (pixels), pc (paicas), cm (centímetros), mm (milímetros) e in (polegadas).

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.

14.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:

font-weight: normal | bold (normal=400 e bold = 700) font-weight: bolder | lighter (valores relativos) font-weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Exemplos: H1 { font-weight: normal } B { font-weight: 900 } ... ... ... A palavra oblique deve fazer com que fontes chamadas de "oblique" (se existirem no sistema) sejam usadas, assim como ocorre com fontes "italic". A rigor, italic é uma fonte distinta da normal, e não, meramente uma versão inclinada da mesma. Os browsers, porém, não encontrando um equivalente "italic", "oblique", "kursiv" ou similar irão inclinar o texto, simulando um itálico. Os valores numéricos para font-weight oferecem um controle excepcional sobre o pe- so da fonte na tela, embora isto esteja limitado aos níveis disponíveis nas fontes instaladas (pa- ra um mesmo nome de fonte). Na prática, dos 9 níveis disponíveis de peso, se consegue 4 ou 5 níveis diferentes de mais pesado ou mais leve. 700 é o "bold" típico e 400 é o "normal". O exemplo a seguir ilustra o efeito com a fonte "Tahoma" (Windows):

(...)

100 200 300 400 500 normal
600
700 800 bold
900