Cascading Style Sheetsltodi.est.ips.pt/leonardo/ci/pdf/css.pdf · Quando múltiplas folhas de...

1

Cascading Style Sheets

António Gonçalves ESTSetúbal

Í N D I C E

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

2

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.

3

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

4

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.

5

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 */

6

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% }

7

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 pseudo-

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

8

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.

9

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.

10

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

Aplica-se: Todos os elementos

Herança: 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.

11

Font Style

Sintaxe: font-style: <value>

Valores Possíveis: normal | italic | oblique

Valor Inicial: normal


Herança: 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



Herança: 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: font-weight: <value>

Valores

Possíveis:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |

600 | 700 | 800 | 900



Herança: Sim

12

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 larger | smaller

• <length>

• <percentage>

Valor Inicial: medium


Herança: Sim

13

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: font: <value>

Valores

Possíveis:

[ <font-style> || <font-variant> || <font-weight> ]? <font-size>

[ / <line-height> ]? <font-family>

Valor Inicial: Não definido


Herança: 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.

14

Cores e Pano de Fundo

Color

Sintaxe: color: <color>

Valor Inicial: Determinado pelo browser


Herança: 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


Herança: 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.

15

Background Image

Sintaxe: background-image: <value>

Valores Possíveis: <url> | none

Valor Inicial: none


Herança: 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


Herança: 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.

16

Background Attachment

Sintaxe: background-attachment: <value>

Valores Possíveis: scroll | fixed

Valor Inicial: scroll


Herança: 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: background-position: <value>

Valores

Possíveis:

[<percentage> | <length>]{1,2} | [top | center | bottom] || [left

| center | right]

Valor Inicial: 0% 0%

Aplica-se: Block-level and replaced elements

Herança: 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 block-

level 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)

17

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: background: <value>

Valores

Possíveis:

<background-color> || <background-image> || <background-

repeat> || <background-attachment> || <background-position>

Valor Inicial: Não definido


18

Herança: 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.

19

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>



</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 () 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">



</STYLE>

20

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

21

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.

22

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">



</STYLE>

23

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

Cascading Style Sheetsltodi.est.ips.pt/leonardo/ci/pdf/css.pdf · Quando múltiplas folhas de...

Documents

Transcript of Cascading Style Sheetsltodi.est.ips.pt/leonardo/ci/pdf/css.pdf · Quando múltiplas folhas de...