Cascading Style Sheets António Gonçalves ESTSetúbal ÍNDICE Introdução Sintaxe Básica Regras Selectores Selectores Contextuais Propriedades Valores Agrupamento Herança Comentários Pseudo-classes e Pseudo-elementos Pseudo-classes de âncoras O pseudo-elemento First Line O pseudo-elemento First Letter Ordem de Cascading! Important Origem das Regras Regras de Selectores: Cálculo de Especificação Ordem de Especificação Propriedades das Fontes Font Family Font Style Font Variant Font Weight Font Size Font Cores e Pano de Fundo Color Background Color Background Image Background Repeat Background Attachment Background Position Background Referenciar Style Sheets Incorporar um Style Sheet Importar um Style Sheet Inlining Style O Elemento SPAN O Elemento DIV 1
Introdução Uma folha de estilo é composta por regras de formatação que informam o navegador como exibir o documento. Existem várias maneiras de referenciar estas regras nos documentos HTML, mas o método mais simples é utilizar o elemento STYLE do HTML. Este elemento é inserido na marca HEAD do documento e contém o conjunto de regras de formatação da página. Note-se que o elemento STYLE é um bom método para criação de estilos, mas existem desvantagens que devem ser consideradas antes de implementar este método. Cada regra é composta de um selector -- geralmente um elemento HTML como a marca BODY, P ou EM --e o estilo, ou layout, a ser aplicado neste selector. Existem várias propriedades que podem ser definidas num elemento. Cada propriedade recebe um valor que, juntamente com a propriedade, descreve como o selector deve ser apresentado. As regras de Style são definidas de seguinte forma: selector { propriedade: valor } Declarações múltiplas para um único selector podem ser separadas por ponto e vírgula: selector { propriedade1: valor1; propriedade2: valor2 } Por exemplo, o segmento de código define as propriedades de cor e tamanho da fonte para os elementos H1 e H2: <HEAD> <TITLE>Exemplo de CSS</TITLE> <STYLE TYPE="text/css"> H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } </STYLE> </HEAD> A folha de estilo acima informa o navegador que as marcas H1 devem ser exibidas em tamanho de fonte extra-large e cor vermelha, e as marcas H2 devem ser exibidas em tamanho de fonte large e cor azul. A especificação CSS1 formalmente define todas as propriedades e valores existentes. 2
Sintaxe Básica Regras Selectores Qualquer elemento HTML pode ser um selector CSS1. Um selector é simplesmente o elemento que está ligado a um layout em particular. Por exemplo, a etiqueta P é o selector em: P { text-indent: 3em } Selectores de Classes Um selector simples pode possuir diferentes classes, permitindo que o mesmo elemento possua diferentes estilos. Por exemplo, podemos desejar exibir cores diferentes para cada tipo de documento: code.html { color: #191970 } code.css { color: #4b0082 } No exemplo acima criamos duas classes, css e html para serem usadas no elemento CODE do HTML. O atributo CLASS é usado em HTML para indicar a classe de um elemento, por exemplo: <P CLASS=aviso>Somente é permitido definir uma classe para cada selector. Por exemplo, code.html.proprietary é inválido.</p> As classes também podem ser declaradas snum elemento associado:.note { font-size: small } Neste caso, a classe note pode ser usada em qualquer elemento. Um bom hábito é definir as classes de acordo com as suas funções ao invés de seu layout. A classe note do exemplo acima poderia ter sido designada de small, mas este nome não faria sentido caso o Webmaster desejasse alterar o layout da classe para que não mais utilizasse uma fonte tamanho pequeno. Selectores ID Os selectores ID são individualmente definidos com o propósito de nomear os elementos. Este tipo de selector deve somente ser usado em extrema necessidade em virtude de suas 3
limitações. Um selector ID é nomeado através do indicador "#" precedente ao nome. Por exemplo, um selector ID pode ser nomeado assim: #svp94o { text-indent: 3em } Este deve ser referenciado em HTMl através do atributo ID: <P ID=svp94O>Text indented 3em</P> Selectores Contextuais Os selectores contextuais são meramente strings de dois ou mais selectores simples, separados por espaços em branco. Estes selectores podem ter as suas propriedades definidas e, devido às regras na ordem de cascading, terão preferência em relação aos selectores simples. Por exemplo, o selector contextual em: P EM { background: yellow } É P EM. Esta regra diz que o o texto enfatizado no parágrafo deve possuir um pano de fundo amarelo. O texto enfatizado no cabeçalho não será afectado. Declarações Propriedades Uma propriedade é definida no selector para que os estilos possam ser manipulados. Exemplos de propriedades incluem cor, margem, e fonte. Valores Os valores declarados são recebidos pelas propriedades. Por exemplo, a propriedade cor pode receber o valor vermelho. Agrupamento Para minimizar as repetições de códigos nas folhas de estilo, é possível definir um agrupamento de declarações e selectores. Por exemplo, todos os cabeçalhos num documeto podem estar definidos através de declarações idênticas num agrupamento: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } Herança Virtualmente todos os selectores agrupados receberão por herança os valores atribuídos às propriedades de outros selectores, caso não tenha sido definido o contrário. Por exemplo, a cor definida no BODY será também aplicada no texto de um parágrafo. 4
Existem alguns casos onde os selectores não recebem por herança os valores dos demais. Por exemplo, a propriedade margin-top não é herdada, e com isto o parágrafo não terá o mesma formatação que o restante do documento. Comentários Comentários são introduzidos em style sheets usando as mesmas convenções da linguagem de programação C. Um exemplo de comentário em CSS1 terá o seguinte formato: /* Aqui digitamos os comentários necessários */ 5
Pseudo-classes e Pseudo-elementos As pseudo-classes e os pseudo-elementos são classes e elementos "especiais" que são automaticamente reconhecidos pelos browsers que suportam CSS. As pseudo-classes apresentam diferentes tipos de elementos (Exemplo: links visitados e links activos representam dois tipos de âncoras diferentes). Os pseudo-elementos fazem referência à sub-partes de elementos, como a primeira letra de um parágrafo. A regra de declaração de pseudo-classes ou pseudo-elementos tem a seguinte formatação: selector:pseudo-classe {propriedade: valor} ou selector:pseudo-elemento {propriedade: valor} As pseudo-classes e os pseudo-elementos não devem ser especificados no atributo CLASS do documento HTML. As classes normais podem ser usadas juntamente com as pseudo-classes e pseudo-elementos, como vemos a seguir: selector.classe:pseudo-classe {propriedade: valor} ou selector.classe:pseudo-elemento { propriedade: valor} Pseudo-classes de âncoras As pseudo-classes podem ser aplicadas em elementos âncora A para exibição de links, links visitados e links activos de forma diferente. Os links visitados podem ser definidos de forma que sejam exibidos com diferentes tipos de fonte e estilos. Um efeito interessante seria fazer com que o link selecionado (ou activo) possa exibir uma fonte de outra cor e com o tamanho maior que a original. Então, quando a página for novamente exibida para o utilizador, o link visitado será exibido com uma fonte de outra cor e menor que a original. Esta exemplo seria implementado desta forma: A:link { color: red } A:active { color: blue; font-size: 125% } A:visited { color: green; font-size: 85% } 6
O pseudo-elemento First Line Podemos observar em muitos jornais que a primeira linha do texto de uma reportagem possui todas as letras maiúsculas e em negrito. O CSS1 inclui esta capacidade através de um pseudo-elemento. O pseudo-elemento first line pode ser utilizado em qualquer elemento do tipo block-level (como por exemplo, P, H1, etc.). O pseudo-elemento first line pode ser codificado da seguinte forma: P:first-line { font-variant: small-caps; font-weight: bold } O pseudo-elemento First Letter O pseudo-elemento first letter é usado para criar efeitos drop caps entre outros. A primeira letra do texto num selector será exibida conforme o valor definido. O pseudoelemento first letter pode ser utilizado em qualquer elemento do tipo block-level. Por exemplo: P:first-letter { font-size: 300%; float: left } Isto criará um efeito drop cap com três vezes o tamanho original da fonte. 7
Ordem de Cascading Quando múltiplas folhas de estilo são usadas, estes podem criar conflitos sobre o controle de um selector em particular. Nestas situações são necessárias regras que permitam especificar qual folha de estilo tem prioridade sobre os demais. As características a seguir solucionarão o problema de folha de estilo em conflito.! Important As regras podem ser definidas como importantes ao especificar o argumento!important. Um style designado como importante terá prioridade sobre os demais, caso não possuam a mesma importância. Aqui está um exemplo do uso do argumento! important: BODY { background: url(bar.gif) white; background-repeat: repeat-x! important } Origem das Regras Os autores devem ter cuidado na utilização do argumento! important para as regras, pois os mesmos terão prioridade sobre as regras de importância do utilizador. O utilizador pode, por exemplo, ter definido fontes com cores especiais devido a alguma deficiência visual. Este utilizador provavelmente definiu determinadas regras de style através do argumento! important, pois são vitais para que as páginas sejam visualizadas de forma adequada. Qualquer argumento! important presente na definição terá prioridade sobre as regras normais, portanto, os autores são recomendados a utilizar regras normais para ter certeza de que os utilizadores que utilizam styles especiais possam visualizar a página corretamente. Regras de Selectores: Cálculo de Especificação Os style sheets podem também criar conflitos através de seu nível de especificação, onde um style mais específico sempre terá prioridade sobre um menos específico. Isto é simplesmente uma questão de calcular a especificação de um selector. a. Contar o número de atributos ID num selector. b. Contar o número de atributos CLASS num selector. c. Contar o número de tags HTML no selector. 8
Finalmente, escrever os três números na ordem exacta, sem espaços ou vírgulas para obter o número de três dígitos. (Note que pode precisar converter estes números para uma base maior, de forma que sejam expressos somente três dígitos). A lista final dos números correspondentes aos selectores facilmente determinarão a especificação através da ordem numérica. A seguir, mostramos uma lista de selectores ordenados por especificação: #id1 {xxx} /* a=1 b=0 c=0 --> specificity = 100 */ UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */ LI.red {xxx} /* a=0 b=1 c=1 --> specificity = 011 */ LI {xxx} /* a=0 b=0 c=1 --> specificity = 001 */ Ordem de Especificação Para tornar o procedimento mais fácil, quando duas regras possuem o mesmo equivalente numérico, a última sempre prioridade. 9
Propriedades das Fontes Font Family Sintaxe: font-family: [[<family-name> <generic-family>],]* [<family-name> <generic-family>] Valores Possíveis: <family-name> Qualquer nome pode ser usado. <generic-family> serif (exemplo, Times) sans-serif (exemplo, Arial ou He cursive (exemplo, Zapf-Chancery) fantasy (exemplo, Western) monospace (exemplo, Courier Valor Inicial: Determinado pelo browser Sim As font families podem ser definidas por uma fonte específica ou genérica. Definições múltiplas de font families podem ser feitas, e caso uma fonte específica seja definida, a mesma deve ser acompanhada por um nome de family genérico, caso a primeira escolha não esteja disponível. Um exemplo de declaração de font family pode ser visto em seguida: P { font-family: "New Century Schoolbook", Times, serif } Note que as duas primeiras definições são de tipos específicos: New Century Schoolbook e Times. No entanto, como ambas são fontes do tipo serif, a font family genérica é declarada caso o sistema não possua estas fontes instaladas e seja necessário fazer uso de outra fonte do tipo serif que se enquadre nas qualificações. 10
Font Style Sintaxe: font-style: <value> Valores Possíveis: normal italic oblique Valor Inicial: normal Sim A propriedade font-style define que a fonte pode ser exibida de três maneiras: normal, italic ou oblique. Um exemplo de style sheet com declarações de font-style ficaria assim: H1 { font-style: oblique } P { font-style: normal } Font Variant Sintaxe: font-variant: <value> Valores Possíveis: normal SMALL-CAPS Valor Inicial: normal Sim A propriedade font-variant determina se a fonte deve ser exibida em normal ou SMALL- CAPS. Aqui está um exemplo de seu uso: SPAN { font-variant: small-caps } Font Weight Sintaxe: Valores Possíveis: Valor Inicial: font-weight: <value> normal bold bolder lighter 100 200 300 400 500 600 700 800 900 normal Sim 11
A propriedade font-weight é usada para especificar o volume da fonte. Os valores bolder e lighter são relativos ao volume da fonte herdado, enquanto os demais valores são absolutos. Nota: Como nem todas as fontes possuem novos tipos de volume disponíveis, alguns dos volumes podem ser definidos em agrupamentos. Caso o volume especificado não seja válido, um volume alternativo será escolhido através do seguinte método: 500 pode ser substituído por 400, e vice versa. 100-300 podem ser reduzidos ao volume anterior, caso haja, ou para um volume mais denso. 600-900 podem ser substituídos pelo próximo volume mais denso, caso haja, ou para o volume menos denso anterior. Aqui está um exemplo das definições de font-weight: H1 { font-weight: 800 } P { font-weight: normal } Font Size Sintaxe: font-size: <absolute-size> <relative-size> <length> <percentage> Valores Possíveis: <absolute-size> o xx-small x-small small medium large x- large xx-large <relative-size> o <length> <percentage> larger smaller Valor Inicial: medium Sim 12
A propriedade font-size é usada para modificar o tamanho da fonte exibida. Valores absolutos (usando unidades como pt e in) podem ser utilizados com cautela, devido a falta de compatibilidade com diferentes browsers. Fontes com valores absolutos podem facilmente tornarem-se pequenas ou grandes demais para o utilizador. Exemplo para definições de tamanho: H1 { font-size: large } P { font-size: 12pt } LI { font-size: 90% } STRONG { font-size: larger } Os utilizadores devem saber que o Microsoft Internet Explorer 3.x trata incorrectamente as unidades em e ex como pixels, causando distorções no texto apresentado. O browser também incorrectamente aplica os valores percentuais relativos ao tamanho default do selector, ao invés de relativo ao tamanho do elemento parent da fonte. Isto cria regras perigosas como: H1 { font-size: 200% } Perigosas porque o tamanho será o dobro do tamanho default para as fontes relativas aos cabeçalhos nível 1 do IE. Font Sintaxe: Valores Possíveis: Valor Inicial: font: <value> [ <font-style> <font-variant> <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> Não definido Sim A propriedade font pode ser utilizada com um atalho para as demais propriedades de fontes. Por exemplo: P { font: italic bold 12pt/14pt Times, serif } Isto especifica que os parágrafos devem ser exibidos através de fontes Times ou serif, bold e italic, utilizando tamanho de 12 pontos mínimo e 14 pontos máximo. 13
Cores e Pano de Fundo Color Sintaxe: color: <color> Valor Inicial: Determinado pelo browser Sim A propriedade color permite que os programadores especifiquem a cor de um elemento. Veja a secção Unidades para a descrição dos valores possíveis. Alguns exemplos de regras incluem: H1 { color: blue } H2 { color: #000080 } H3 { color: #0c0 } Para evitar conflitos entre style sheets de utilizadores, as propriedades background e color devem ser especificadas juntamente. Background Color Sintaxe: background-color: <value> Valores Possíveis: <color> transparent Valor Inicial: transparent Não A propriedade background-color define a cor para o pano de fundo de um elemento. Por exemplo: BODY { background-color: white } H1 { background-color: #000080 } Para evitar conflitos entre style sheets de utilizadores, background-image deve ser especificada sempre que background-color for usada. Na maioria dos casos podemos usar background-image: none. 14
Background Image Sintaxe: background-image: <value> Valores Possíveis: <url> none Valor Inicial: none Não A propriedade background-image define a imagem para pano de fundo do elemento. Por exemplo: BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.htmlhelp.com/bg.png) } Quando uma imagem de pano de fundo é seleccionada, um background color deve também ser definido para browsers que não suportam tal peso de imagens. Os programadores podem utilizar o atalho da propriedade background, que hoje é mais suportado que a propriedade background-image. Background Repeat Sintaxe: background-repeat: <value> Valores Possíveis: repeat repeat-x repeat-y no-repeat Valor Inicial: repeat Não A propriedade background-repeat determina a repetição de um background image. O valor repeat-x é atribuído à repetição horizontal, enquanto o valor repeat-y é atribuído à repetição vertical. Por exemplo: BODY { background: white url(candybar.gif); background-repeat: repeat-x } No exemplo acima, a imagem será repetida horizontalmente apenas. Os programadores podem utilizar o atalho da propriedade background, pois é mais suportado que a propriedade background-repeat. 15
Background Attachment Sintaxe: background-attachment: <value> Valores Possíveis: scroll fixed Valor Inicial: scroll Não A propriedade background-attachment determina se um background image específico poderá ter o seu conteúdo fixo ou não em relação ao ecrã. Por exemplo, a linha de código seguinte especifica o pano de fundo como fixo: BODY { background: white url(candybar.gif); background-attachment: fixed } Os programadores podem utilizar o atalho da propriedade background, pois é mais suportado que a propriedade background-attachment. Background Position Sintaxe: Valores Possíveis: background-position: <value> [<percentage> <length>]{1,2} [top center bottom] [left center right] Valor Inicial: 0% 0% Block-level and replaced elements Não A propriedade background-position indica a posição inicial de um background image especificado. Esta propriedade pode ser aplicada somente em elementos do tipo blocklevel ou substituídos. Um elemento substituído é qualquer elemento que possui dimensões conhecidas. Alguns elementos substituídos em HTML são IMG, INPUT, TEXTAREA, SELECT, e OBJECT.) A maneira mais fácil de definir um background position é através de palavras-chave: Palavras-chave horizontais (left, center, right) Palavras-chave verticais (top, center, bottom) 16
Percentagens e lengths podem ser utilizados para definir a posição do background image. Percentagens são relativas ao tamanho do elemento. Embora lengths sejam permitidos, não são recomendados por causa de possíveis problemas devido à resolução do ecrã utilizado. Quando usamos percentagens ou lengths, a posição horizontal é especificada primeiro, seguida da posição vertical. Um valor como 20% 65% especifica que a imagem deve ser posicionada no ponto 20% horizontal e 65% vertical em relação ao elemento. Um valor como 5px 10px especifica que a parte superior esquerda da imagem deve ser posicionada 5 pixels à direita e 10 pixels para baixo em relação ao elemento. Se apenas o valor horizontal for definido, a posição vertical será 50%. Combinações de lengths e Percentagens são permitidas. Também são permitidas posições negativas. Por exemplo, 10% -2cm é permitido. No entanto, Percentagens e lengths não podem ser combinadas através de palavras-chave. As palavras-chave são interpretadas a seguir: top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% Se o background image é definido como fixed, a imagem será posicionada em relação, e não em relação ao elemento. Os programadores podem utilizar o atalho da propriedade background, pois é mais suportado que a propriedade background-position. Background Sintaxe: Valores Possíveis: Valor Inicial: background: <value> <background-color> <background-image> <backgroundrepeat> <background-attachment> <background-position> Não definido 17
Não A propriedade background é um atalho para as propriedades mais específicas. Aqui estão alguns exemplos de declarações da propriedade background: BODY { background: white url(http://www.htmlhelp.com/foo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } Um valor não especificado receberá o valor inicial. Por exemplo, nos três primeiros exemplos anteriores, a propriedade background-position é definida por 0% 0%. Para evitar conflitos com style sheets de utilizadores, as propriedades background e color devem ser especificadas juntamente. 18
Referenciar folhas de estilo Existem diversas maneiras de referenciar style sheets no HTML, cada uma delas possui vantagens e desvantagens. Novos elementos e atributos HTML foram introduzidos para permitir fácil incorporação de style sheets em documentos HTML. Incorporar um Style Sheet Um style sheet pode ser incorporado ao documento através do elemento STYLE: <STYLE TYPE="text/css" MEDIA=screen> <!-- BODY { background: url(foo.gif) red; color: black } P EM { background: yellow; color: black }.note { margin-left: 5em; margin-right: 5em } --> </STYLE> O elemento STYLE é inserido no documento HTML e delimitado pelo elemento HEAD. O atributo TYPE é necessário e especifica o tipo de media e sua função atrabés do elemento LINK. Os atributos TITLE e MEDIA podem ser especificados também em STYLE. Os browsers mais antigos desconhecem o elemento STYLE e exibem normalmente o conteúdo deste elemento como uma simples parte do elemento BODY, fazendo com que o style sheet seja exibido para o utilizador. Para que isto não aconteça, o conteúdo do elemento STYLE devem estar comentados (<!-- commentário -->) para tornarem-se invisíveis aos utilizadores de browsers antigos. Importar um Style Sheet Um style sheet pode ser importado através da declaração @import do CSS. Esta declaração pode ser usada no arquivo contendo o CSS ou através do elemento STYLE: <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- @import url(http://www.htmlhelp.com/style.css); @import url(/stylesheets/punk.css); DT { background: yellow; color: black } --> </STYLE> 19
Note que outras regras do CSS podem estar incluídas no elemento STYLE, mas todas as declarações @import devem ocorrer no início do style sheet. Quaisquer regras especificadas no próprio style sheet terão prioridade sobre regras conflituantes de styles sheets importados. Por exemplo, mesmo que um dos style sheets importados defina DT { background: aqua }, os termos continuariam a ser exibidos com pano de fundo amarelo. A ordem de importação dos style sheets é importante para determinar o chamado "efeito cascata". No exemplo acima, se o style sheet importado style.css especifica que os elementos b devem ser exibidos em vermelho e o style sheet punk.css especifica que os elementos b devem ser exibidos em amarelo, então a última regra tem prioridade. Portanto, os elementos b serão exibidos em amarelo. A importação de style sheets é útil para a modularização. Por exemplo, um site pode separar diferentes style sheets para os selectores usados. Pode haver um style sheet simples.css que define as regras para os elementos comuns como BODY, P, H1 e h3. Além disto, pode haver um style sheet extra.css que define as regras para os elementos de menos importância como CODE, BLOCKQUOTE e DFN. Um style sheet tables.css pode ser definido para especificar as regras para os elementos de tabelas. Estes três styles sheets podem ser incluídos em documentos HTML através da declaração @import statement. Os três style sheets também podem ser combinados através do elemento LINK. Inlining Style Podemos definir um inlining style usando o atributo STYLE. O atributo STYLE pode ser aplicado para qualquer elemento em BODY (incluindo o próprio BODY), excepto BASEFONT, PARAM e SCRIPT. O atributo recebe como valor uma variedade de declarações CSS, onde cada declaração deve ser separada por ponto e vírgula. Aqui está um exemplo: <P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> Este parágrafo será exibido em vermelho, com fonte New Century Schoolbook, se disponível.</p> Note que New Century Schoolbook está entre apóstrofes no atributo STYLE, uma vez que aspas são utilizadas para delimitar declarações de estilo. Inlining style é muito mais flexível que os outros métodos. Para utilizar o inlining style, é necessário declarar um único style sheet para todo o documento usando a extensão 20
HTTP do cabeçalho Content-Style-Type. Com a utilização de inlining style em CSS, o programador deve definir text/css como o cabeçalho HTTP Content-Style-Type ou incluir o seguinte tag no HEAD: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> O estilo embebido perde muitas vantagens das folhas de estilo por misturar o conteúdo com a apresentação. Não existe mecanismo para especificar o meio de saída para um inlining style,. Este método deve ser utilizado somente quando necessário. Se o estilo necessita ser aplicado somente a um único elemento definido, utilize o atributo ID ao invés do atributo STYLE. O Atributo CLASS O atributo CLASS é usado para especificar o estilo da classe na qual o elemento pertence. Por exemplo, o style sheet pode ter sido criado as classes punk e warning:.punk { color: lime; background: #ff80c0 } P.warning {font-weight:bolder;color:red; background:white} Estas classes podem ser referenciadas no HTML através do atributo CLASS: <H1 CLASS=punk>Extensões Próprias</H1> <P CLASS=warning>Muitas extensões próprias podem resultar em efeitos negactivos tanto em browsers que suportam quanto naqueles que não suportam... Neste exemplo, a classe punk pode ser aplicada a qualquer elemento do BODY, pois não existe nenhum elemento HTML associado no style sheet. Usando o style sheet do exemplo, a classe warning deve ser aplicada somente no elemento P. É um bom hábito nomear classes de acordo com suas funções ao invés da sua aparência. A classe warning do exemplo anterior foi nomeada red, mas este nome pode não fazer sentido se o programador alterar o estilo da classe para uma cor diferente ou se definir o style como aural, para apresentações com sintetizadores de voz. As classes podem ser um método extremamente eficaz de aplicar diferentes estilos para estruturas de secções idênticas num documento HTML. Por exemplo, esta página utiliza classes com estilos para diferenciar códigos CSS e HTML. 21
O Atributo ID O atributo ID é usado para definir um estilo único para um elemento. Uma regra CSS como #wdg97 { font-size: larger } pode ser aplicada através do atributo ID: <P ID=wdg97>Bem-vindo a WebTriad International!</P> Cada atributo ID deve possuir um único valor para o documento. O valor deve ser uma letra inicial seguido por letras, dígitos ou hífens. As letras são restritas de A-Z e a-z. Note que o HTML 4.0 permite o uso de pontos para valores do atributo ID, mas o CSS1 não permite o uso de ponto em selectores do tipo ID selectores. Note também que o CSS1 permite o uso de caracteres Unicode 161-255, bem como caracteres de códigos numéricos. O HTML 4.0 não suporta o uso deste caracteres para valores do atributo ID. O uso do atributo ID é apropriado quando um estilo precisa ser aplicado apenas uma vez em qualquer documento. O Elemento SPAN O elemento SPAN foi introduzido no HTML para permitir que se criem estilos que não possam ser incorporados a um elemento estrutural do HTML. O SPAN pode ser utilizado como um selector num style sheet, mas também aceita os atributos STYLE, CLASS e ID. O SPAN é um elemento inline, portanto pode ser usado em HTML da mesma forma que os elementos EM e b. A diferença importante: enquanto EM e b contém dados estruturais, o SPAN não possui nenhum. Ele existe puramente para aplicar o estilo, portanto não tem efeito algum se o style sheet for inibido. Aqui estão alguns exemplos do uso de SPAN: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Draft//EN"> <HTML> <HEAD> <TITLE>Exemplo de SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"> <!--.firstwords { font-variant: small-caps } --> </STYLE> 22
</HEAD> <BODY> <P><SPAN CLASS=firstwords>As primeiras palavras</span> de um parágrafo podem ser minúsculas. Pode-se usar inlined style para alterar o estilo da palavra como <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P> O Elemento DIV O elemento DIV é similar às funções do elemento SPAN. A diferença é que o elemento DIV (abreviação para "divisão") é um elemento do tipo block-level. O DIV pode conter parágrafos, cabeçalhos, tabelas e até mesmo outras divisões. Isto torna o DIV ideal para marcação de diferentes classes, como capítulos ou notas. Por exemplo: <DIV CLASS=nota> <H1>Divisões</H1> <P>O elemento DIV é definido em HTML 3.2, mas somente o uso do atributo ALIGN é permitido no HTML 3.2. O HTML 4.0 adiciona os atributos CLASS, STYLE e ID, além de outros.</p> <P>Como o DIV pode conter outros elementos do tipo block-level, é útil na marcação de grandes seções de um documento, como esta nota.</p> <P>O tag de fechamento da delimitação é necessário.</p> </DIV> 23