Escolar Documentos
Profissional Documentos
Cultura Documentos
Css PDF
Css PDF
Datamec S.A.
Sumrio
Captulo 1: ................................................................................................................. 3
Objetivo .............................................................................................................................4
Reviso............................................................................................................................19
Captulo 2: ............................................................................................................... 20
Objetivo ...........................................................................................................................21
Reviso............................................................................................................................28
Captulo 3: ............................................................................................................... 29
Dynamic HTML........................................................................................................ 29
Objetivo ...........................................................................................................................30
Introduo DHTML.......................................................................................................31
Reviso............................................................................................................................36
Cascading Style Sheets 3
Captulo 1:
Aplicando Style Sheets
Cascading Style Sheets 4
Objetivo
CSS, ou Cascading Style Sheets uma recomendao do W3C, assim como o XML e o HTML.
Style Sheets permite a separao do contedo dos documentos de sua apresentao. E associando
scripts aos elementos possvel alterar o formato do documento assim como sua interface com o
usurio.
Contedo
Contedo
Apresentao Apresentao
Tanto o Internet Explorer 4.0 ou superior quanto Netscape 4.7 suportam Cascading Style Sheets
Nvel 1 (CSS1). As implementaes superiores dos respectivos navegadores suportam CSS2 embora
de maneira diferente.
Anotaes
Cascading Style Sheets 6
A linguagem HTML permite que qualquer trecho de cdigo seja adicionado pgina. Para tanto
utilizada o elemento <META>. Entretanto, voc deve especificar a linguagem a ser utilizada, como no
exemplo abaixo:
Atravs de links
Voc pode criar uma Style Sheet em um arquivo separado para posteriormente aplicar tal estilo em
todas as pginas do site. Utilizando este recurso adequadamente, possvel centralizar quase toda a
apresentao de um site em um ou mais arquivos. Caso haja necessidade de mudana na
apresentao do site, esta feita em um nico lugar.
aconselhvel que o arquivo de estilos possua a extenso .css mas no obrigatrio. Outra
extenso tambm funciona. um arquivo somente texto cujo formato legvel e de fcil
compreenso. Isto facilita a criao de Style Sheets utilizando editores simples como o notepad.
Para associar uma Style Sheet armazenada em um arquivo separado use o elemento <LINK> como
no exemplo abaixo:
<LINK REL=STYLESHEET
HREF="http://www.myserver.com/mysheet.css"
TYPE="text/css">
Anotaes
Cascading Style Sheets 7
possvel a utilizao de estilos internos e estilos externos. Neste caso os estilos internos
sobrepem estilos externos se houver conflitos. Se no houver, os estilos internos so aplicados e
posteriormente so aplicados os estilos externos.
O elemento utilizada para adicionar o estilo ao documento o elemento <STYLE>. O atributo TYPE
especifica o tipo MIME. Existem alguns outros atributos que sero abordados posteriormente.
Anotaes
Cascading Style Sheets 8
Por exemplo: suponhamos que voc queira alterar a cor de um pargrafo destacando-o diante do
resto do documento mas esta alterao uma exceo. Ento voc pode utilizar o atributo STYLE e
atribuir a este o estilo a ser aplicado:
Estilos definidos junto com os elementos devem ser utilizados com cuidado para que seja preservada
uma das principais caractersticas da CSS: a reutilizao de estilos.
<STYLE TYPE="text/css">
@import url(http://www.myserver.com/style.css);
</STYLE>
Anotaes
Cascading Style Sheets 9
Importncia do estilo
A utilizao de estilo na construo de grandes sites fundamental. A utilizao adequada pode
contribuir nos seguintes aspectos:
Apesar das inmeras vantagens a construo de estilos slidos e reusveis uma tarefa difcil e
requer administrao centralizada. Mais tarde discutiremos os desafios enfrentados ao desenvolver
sites utilizando CSS.
Anotaes
Cascading Style Sheets 10
Entendendo a ordem
Como dito anteriormente, voc pode utilizar vrios tipos de estilos para controlar a aparncia do seu
site. O navegador estabelece uma prioridade para cada estilo a ser aplicado como na lista a seguir:
Embora no seja aconselhvel voc pode usar o palavra importante para alterar esta precedncia. No
exemplo abaixo o estilo atribudo ao elemento H1 sobrepe o estilo definido junto com o elemento
graas ao uso da palavra important:
Anotaes
Cascading Style Sheets 11
@media print
{ BODY { font-size: 10pt } }
@media screen
{ BODY { font-size: 12pt } }
Tipo Descrio
Screen Telas de computadores
Print Impressoras
Projection Projees
Braile Dispositivos Braile
Speech Sintetizadores de voz
All Todos os dispositivos
Anotaes
Cascading Style Sheets 12
Tanto Style Sheets anexadas quanto no documento permitem a definio de um ou mais elementos.
Por exemplo voc deseja criar uma Style Sheet que define estilos para os elementos <H1>, <H2> e
<P>. Cada definio de estilo chamada de regra. Uma regra contm um seletor (que o prprio
elemento), seguido da declarao (a definio do estilo). O exemplo abaixo mostra uma regra que
define um estilo para cada ocorrncia do elemento <H1>:
H1 {color: blue}
A declarao colocada entre chaves ({}). Cada item na declarao possui duas partes: O nome da
propriedade e o valor atribudo a esta, separado por dois pontos (:). No exemplo abaixo, color o
nome da propriedade e blue o valor atribudo a esta. Existes dezenas de propriedades as quais se
aplicam tipos predefinidos e certos intervalos de valores:
<STYLE TYPE="text/css">
H1 {color: blue}
P {font-size: 10pt}
</STYLE>
Anotaes
Cascading Style Sheets 13
Entretanto, existe uma maneira mais eficiente de fazer a mesma ao. Os elementos (ou seletores)
podem ser agrupados de modo a definir uma regra nica para todo o grupo. No exemplo abaixo os
seletores so agrupados e uma nica regra atribuda:
Anotaes
Cascading Style Sheets 14
Seletores contextuais definem a seqncia exata de elementos para o qual um estilo ser aplicado.
OL LI {list-style-type: decimal}
UL LI {list-style-type: square}
Note que a lista de seletores no separada por vrgula. Separando cada seletor por vrgula os
estilos atribudos sero aplicados aquele grupo de elementos.
Entendendo Herana
Os elementos herdam certas propriedades de seus pais. Por exemplo, todas os elementos dentro do
elemento <BODY> (<P> e <UL>) herdam certas propriedades deste. Assim como o elemento <LI>
herda propriedades do elemento <UL> no qual ele est contido. Veja o exemplo:
Anotaes
Cascading Style Sheets 15
A Style Sheet para este exemplo muda a cor do elemento <P> para azul. No h definio para o
elemento <EM>. Devido ao fato do elemento <EM> est dentro do elemento <P>, <EM> herda o
propriedade color do elemento <P>.
Quando o elemento <H1> adicionado ao documento, o atributo CLASS utilizado para atribuir qual
estilo ser utilizado.
Anotaes
Cascading Style Sheets 16
Uma classe no precisa de estar ligada um elemento. As classes podem ser declaradas sem
nenhum elemento. Assim, qualquer elemento que utilize aquela classe utilizar aquele estilo:
.red {color:red}
O exemplo abaixo declara um estilo para o ID test.. Ele tambm usa o elemento <P> e atribui a este
o ID test:
# test {color:red}
Anotaes
Cascading Style Sheets 17
Usando pseudo-classes
Em CSS1, um estilo normalmente associado a um elemento com base na posio que este
elemento ocupa dentro da estrutura hierrquica do documento. Isto suficiente para uma grande
variedade de estilos, mas no atende a alguns efeitos comuns. O conceito de pseudo-classes e de
pseudo-elementos veio atender esta rea, permitindo que informaes exteriores possam influenciar
o processo de formatao do documento.
Pseudo-classes e pseudo-elementos podem ser usados como seletores na CSS, mas eles no
existem dentro da HTML. Mais exatamente, eles so 'inseridos' pelo browser, sob certas condies,
para serem usados como elos de ligao com as folhas de estilo. Eles so referidos como 'classes' e
'elementos' porque esta uma maneira conveniente de descrever seu comportamento. Mais
especificamente, seu comportamento definido por uma tag fictcia de seqncia.
Todos os elementos 'A' com um atributo 'HREF' sero classificados em um, e apenas um, destes
grupos (ou seja, as definies das posies locais dos links no sero afetadas). Os navegadores
podem decidir mover um elemento de um grupo a outro (de 'visitado' para 'no visitado', por exemplo,
aps um certo tempo). Um 'link ativo' aquele que est sendo selecionado no momento pelo leitor
(est sendo 'clicado').
Anotaes
Cascading Style Sheets 18
/*------------------------------------------------------
Este um bloco de comentario
------------------------------------------------------*/
<STYLE TYPE="text/css">
<!--
H1 {color: red}
-->
</STYLE>
Anotaes
Cascading Style Sheets 19
Reviso
Captulo 2:
Posicionando elementos
Cascading Style Sheets 21
Objetivo
No mundo das publicaes, camadas so blocos retangulares de texto e imagens que podem ser
posicionados em qualquer lugar da pgina. Estas camadas podem ser ocultas e sobrepostas.
Antes da CSS, era impossvel construir pginas HTML utilizando este conceito. O documento era
exibido seqencialmente sem a possibilidade de sobrepor camadas.
CSS permite a construo de blocos de texto que se sobrepe assim como ocultar ou exibir
determinados blocos.
Anotaes
Cascading Style Sheets 23
No exemplo acima, o elemento posicionado 100 pixels da borda superior do elemento pai e 20
pixels da borda esquerda o elemento pai. Quando o elemento a ser posicionado no possui pai, este
posicionado em relao s bordas do navegador.
A unidade de medida padro para LEFT e TOP pixels. Pode ser usado tambm valores percentuais,
que eqivale ao percentual do elemento pai. O exemplo abaixo posiciona uma imagem 40 pixels do
topo e 100 pixels da borda esquerda do elemento <BODY>. Como no elemento <BODY> no existe
posicionamento definido e ele no tem nenhum elemento pai, este assume a posio 0, 0.
Anotaes
Cascading Style Sheets 24
#element {position: absolute; top: 100; left: 20; width: 100; height: 100}
A propriedade WIDTH no usada para definir exatamente a largura do elemento. Esta propriedade
serve apenas para o caso em que haja algum elemento dentro do qual definido pela propriedade
WIDTH e este seja maior que o mesmo.
Existe ainda a propriedade OVERFLOW que determina como o navegador se comporta no caso em que
o contedo de um elemento excede o tamanho do elemento. Os possveis valores so NONE, CLIP e
SCROLL.
<HTML><STYLE TYPE=text/css>
#example {position: absolute; top:80; left:40; width:160} </STYLE>
<BODY><DIV ID=example>
Este texto est dentro da tag DIV. Observe seu comportamento.
</DIV> </BODY> </HTML>
Anotaes
Cascading Style Sheets 25
Sobrepondo elementos
A propriedade Z-INDEX aceita valores inteiros positivos. Um elemento com a propriedade Z-INDEX
igual 10 sobrepe um elemento com a propriedade Z-INDEX igual 1.
O exemplo abaixo mostra 2 elementos usando a propriedade Z-INDEX para manipular a ordem de
exibio:
<STYLE TYPE="text/css">
#ex1 {position: absolute; top: 40; left: 60; z-index: 2}
#ex2 {position: absolute; top: 80; left: 200; z-index: 1}
</STYLE>
<BODY><DIV ID=ex1>
<B>This is the first element. It's in the middle.</B><BR>
<B>This is the first element. It's in the middle.</B><BR>
</DIV>
<DIV ID=ex2>
<B>This is the second layer. It's behind the first layer.</B><BR>
<B>This is the second layer. It's behind the first layer.</B><BR>
</DIV>
Anotaes
Cascading Style Sheets 26
<STYLE TYPE="text/css">
# test1
{background-color: blue; position: absolute; top: 50; left: 60; width: 150}
# test2
{background-color: yellow; position: absolute; top: 70; left: 30; width: 150}
</STYLE>
Anotaes
Cascading Style Sheets 27
Dado o ID de um determinado elemento, este pode ser referenciado utilizando o DOM, como no
exemplo abaixo:
Document.all.item(id, 0).style.property
Anotaes
Cascading Style Sheets 28
Reviso
Captulo 3:
Dynamic HTML
Cascading Style Sheets 30
Objetivo
Introduo DHTML
DHTML promete causar uma revoluo na construo de sites combinando CSS, HTML e scripts
para manipular ambas.
Existem grandes diferenas entre Netscape e IE quanto a forma de implementar DHTML. Devido
grande diferena de implementao do DOM (Documento Object Model) praticamente impossvel
criar um site que funcione nos dois navegadores sem nenhuma alterao.
DOM um modelo de navegao em documentos atravs de rvore. Todo exemplo utilizado nesta
apostila baseado neste modelo.
Para efeitos didticos, adotamos aqui comandos que funcionam no IE devido ao seu domnio de
mercado.
Anotaes
Cascading Style Sheets 32
A maneira mais explcita de acessar uma elemento usando o objeto all, que pode usar ID, nome o
elemento ou nmero seqencial como parmetro. No exemplo abaixo a varivel e recebe o contedo
do objeto cujo ID example:
e = document.all(example);
Anotaes
Cascading Style Sheets 33
Antes de DHTML era impossvel mudar contedo de uma pgina dinamicamente aps esta ter sido
carregada.
No IE, cada elemento tem duas propriedades que permitem a alterao dos dados sem ter que
recarregar a pgina:
No exemplo acima, Test.innerText altera somente o texto enquanto Test.innerHTML pode incluir
cdigos HTML.
Anotaes
Cascading Style Sheets 34
Assim como possvel alterar textos possvel alterar as propriedades de estilos j atribudos.
possvel tornar um elemento visvel ou oculto, mudar suas cores, fonte, etc. Para tanto basta
referenciar o estilo e atribuir uma nova propriedade.
O DOM do Internet Explorer expe todos os estilos para cada elemento no documento. Estes estilos
so acessados utilizando a propriedade style, como mostrado no exemplo abaixo:
Test.style.color= red;
Anotaes
Cascading Style Sheets 35
Controlar a visibilidade de objetos cria uma infinidade de possibilidades no que diz respeito ao design.
Lgicas de vrias pastas que at ento eram impossveis no mundo web agora se tornaram fceis de
ser implementadas. Conforme o usurio clica em um item, o navegador mostra o texto apropriado
aquele item.
Anotaes
Cascading Style Sheets 36
Reviso
2. O que DOM?
CSS:
Guia de Referncia
Cascading Style Sheets 38
Sumrio
Propriedade 'padding'.................................................................................................................................60
Propriedade 'border-top-width'...................................................................................................................61
Propriedade 'border-right-width' ................................................................................................................62
Propriedade 'border-bottom-width' ............................................................................................................62
Propriedade 'border-left-width' ..................................................................................................................62
Propriedade 'border-width'.........................................................................................................................62
Propriedade 'border-color'..........................................................................................................................63
Propriedade 'border-style' ..........................................................................................................................63
Propriedade 'border-top'.............................................................................................................................64
Propriedade 'border-right' ..........................................................................................................................65
Propriedade 'border-bottom'.......................................................................................................................65
Propriedade 'border-left'.............................................................................................................................65
Propriedade 'border' ...................................................................................................................................66
Propriedade 'width'.....................................................................................................................................67
Propriedade 'height'....................................................................................................................................67
Propriedade 'float' ......................................................................................................................................67
Propriedade 'clear' ......................................................................................................................................68
Propriedades de Ordenao............................................................................................................................69
Propriedade 'display' ..................................................................................................................................69
Propriedade 'white-space'...........................................................................................................................70
Propriedade 'list-style-type'........................................................................................................................70
Propriedade 'list-style-image' .....................................................................................................................70
Propriedade 'list-style-position'..................................................................................................................71
Propriedade 'list-style' ................................................................................................................................71
Unidades ........................................................................................................................................... 73
Unidades de Medidas.....................................................................................................................................73
Unidades Percentuais .....................................................................................................................................74
Unidades para Cores ......................................................................................................................................74
URL ...............................................................................................................................................................76
Cascading Style Sheets 40
Propriedades CSS1
Valor: N | NW | NE
Valor: [ <comprimento> | thick | thin ]{1,4}
Valor: [<famlia> , ]* <famlia>
Valor: <url>? <cor> [ / <cor> ]?
Valor: <url> || <cor>
As palavras entre "<" e ">" indicam o tipo do valor. Os tipos mais comuns so <comprimento>,
<percentagem>, <url>, <nmero> e <cor>; eles esto descritos na seo Unidades. Os tipos mais
especficos de valores (<famlia-da-fonte> e <estilo-da-borda>) esto descritos nos tpicos
correspondentes.
As outras palavras so palavras-chaves que devem ser usadas tal como aparecem, sem as aspas. A
barra (/) e a vrgula (,) tambm devem ser empregadas tal como esto definidas.
Vrios parmetros indicados em seqncia significa que todos eles devem ser definidos, na ordem
em que aparecem. Uma barra (|) separa alternativas: apenas um dos parmetros deve ser definido.
Uma barra dupla (||) significa que tanto o parmetro A como o B, ou mesmo ambos, podem ser
definidos, em qualquer ordem. Colchetes ([]) so usados para agrupar parmetros. Em ordem de
prioridade, uma seqncia de parmetros vale mais que a barra dupla (||), e a barra dupla vale mais
que a barra simples (|). Portanto,
a b | c || d e equivalente a [ a b ] | [ c || [ d e ]]
Cada tipo de valor, palavra-chave ou grupamento ([]) pode vir seguido por um dos seguintes
modificadores:
Um asterisco (*) indica que o tipo, palavra ou grupo que o precede pode ser repetido zero ou mais vezes.
Um sinal positivo (+) indica que o tipo, palavra ou grupo que o precede repetido uma ou mais vezes.
Um ponto de interrogao (?) indica que o tipo, palavra ou grupo que o precede opcional.
Um par de nmeros entre chaves ({A,B}) indica que o tipo, palavra ou grupo que o precede repetido no mnimo A e
no mximo B vezes.
Cascading Style Sheets 41
2. Para um dado elemento, e para cada caracter definido neste elemento, o browser monta todas as propriedades
aplicveis quele elemento. Com base no conjunto completo de propriedades, o browser olha para o propriedade
'font-family' a fim de escolher uma famlia de fontes que possa ser usada. Com esta famlia j escolhida, todo o
conjunto de propriedades testado para ver se eles podem ser aplicados mesma. Em caso positivo est
determinada a fonte a ser usada.
3. Se no ocorre o casamento de todas as propriedades, e ainda existem mais famlias de fontes disponveis para uso,
ento o passo anterior repetido para uma nova famlia.
4. Caso ocorra o casamento de todas as propriedades, mas o caracter necessrio no esteja definido na famlia
escolhida, e se ainda houver mais famlias disponveis, ento o passo 2 repetido com a prxima famlia disponvel.
5. Se nenhuma fonte for encontrada no processo descrito, ento uma fonte 'default', dependente de cada browser, ser
empregada usando a melhor combinao de propriedades possvel para montar o caracter.
(este algoritmo pode ser otimizado para evitar a consulta de todas as propriedades para cada caracter
a ser montado).
1. Inicialmente testada 'font-style'. O estilo itlico ('italic') ser atendido caso exista uma fonte no banco de dados
usado pelo browser que esteja designada pela palavra-chave 'italic' (de preferncia) ou 'oblique'. Caso contrrio
todos os outros valores devero coincidir de maneira exata, ou o estilo no funcionar.
Cascading Style Sheets 42
2. A seguir testada a propriedade 'font-variant'. Um valor 'normal' aceito para uma fonte que no esteja especificada
como 'small-caps'; 'small-caps' aceito com (1) uma fonte especificada como 'small-caps', (2) uma fonte onde as
letras maisculas de tamanho pequeno sejam geradas, ou (3) uma fonte onde todas as letras minsculas foram
substitudas por letras maisculas. Uma fonte 'small-caps' pode ser gerada eletronicamente redimensionando letras
maisculas a partir de uma fonte normal.
4. A seguir, deve ser atendida a propriedade 'font-size', dentro de uma margem de tolerncia que depende de cada
browser. Normalmente, o tamanho para as fontes escalveis arredondado para o pixel inteiro mais prximo,
enquanto que a tolerncia para as fontes no escalveis (bitmap) pode chegar a 20%. Os clculos posteriores,
provocados pelos valores 'em' em outras propriedades, tomam como base o valor de 'font-size'.
Propriedade 'font-family'
O valor desta propriedade consiste numa relao de nomes especficos de famlias de fontes ou de
seus nomes genricos. Ao contrrio de outras propriedades CSS1, os valores na relao de nomes
so separados por vrgulas para indicar que eles so alternativos:
recomendvel que os autores de folhas de estilo sempre forneam uma famlia genrica
como ltima alternativa.
Nomes que contenham espaos em branco devem ser colocados entre aspas:
Cascading Style Sheets 43
Propriedade 'font-style'
A propriedade 'font-style' define se a fonte normal (algumas vezes chamada de 'romana'), itlica ou
oblqua.
Um valor 'normal' seleciona uma fonte que est classificada como 'normal' na base de dados do
browser, enquanto 'oblique' indica uma fonte classificada como 'oblique'. J um valor 'italic' seleciona
uma fonte classifica como 'italic' ou, caso no exista, uma outra classificada como 'oblique'.
Uma fonte que esteja classificada como 'oblique' no banco de dados de um browser , normalmente,
gerada internamente pela inclinao de uma fonte normal.
Fontes que contenham as palavras 'Oblique', 'Slanted' ou 'Incline' em seus nomes so classificadas
como 'oblique'. J as fontes com Italic, Cursive ou Kursiv so classificadas como 'italic'.
Neste exemplo, um texto enfatizado que faa parte de algum elemento 'H1' aparece como 'normal'.
Propriedade 'font-variant'
Um outro tipo de variao no formato da fonte dentro de uma famlia a 'small-caps'. Numa fonte
deste tipo, o formato das letras minsculas similar ao das letras maisculas, diferindo apenas no
tamanho.
O valor 'normal' indica uma fonte que no pertena a este tipo. aceitvel, embora no exigido pela
CSS1, que uma fonte 'small-caps' seja criada partir de uma fonte normal onde as letras minsculas
so substitudas pelas letras maisculas com tamanho menor. Como ltimo recurso, as letras
maisculas podero substituir as minsculas sem qualquer alterao de tamanho.
H3 { font-variant: small-caps }
EM { font-style: oblique }
Podero existir outras variaes dentro de uma famlia de fontes, tais como fontes com caracteres
antigos, letras condensadas ou expandidas, etc. A CSS1 no possui propriedades para tratar destas
fontes.
Propriedade 'font-weight'
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Os valores representados por 'bolder' e 'lighter' so usados sempre como referncia aos valores
herdados do elemento pai:
tonalidades dentro de uma nica famlia. Seu uso por outras famlias de fontes varia bastante; por
exemplo, uma fonte que voc imagina como sendo pesada (escura) pode ter sido descrita como
Regular, Roman, Book, Medium, Semi- ou DemiBold, Bold, ou ainda Black, dependendo de quo
escura a fonte dita 'normal' pelo seu criador. Devido a esta falta de padronizao, em CSS1 a
intensidade expressa por valores numricos, onde o valor '400' indica a fonte 'normal' para aquela
famlia.
Se a famlia da fonte j possui uma escala numrica com nove valores (tal como a OpenType), as intensidades
podem ser indicadas diretamente.
Se existe uma fonte identificada como Medium e outra como Book, Regular, Roman ou Normal, ento a Medium
associada intensidade '500'.
Se existem menos de nove valores de intensidade definidos para a famlia, deve ser usado o seguinte algoritmo para
preencher as lacunas. Se '500' no estiver designado, ele ser associado mesma fonte de '400'. Se qualquer dos
valores '600, '700', '800' ou '900' no estiverem designados, eles sero associados prxima fonte mais escura
disponvel, se houver, ou menos clara em caso contrrio. Se quaisquer dos valores '300', '200' ou '100' estiverem
ausentes, eles sero associados prxima fonte mais clara disponvel, se houver, ou menos escura em caso
contrrio.
Os dois exemplos seguintes mostram este processo. Foram assumidas quatro intensidades na famlia
do exemplo 1: Regular, Medium, Bold, Heavy (do mais claro ao mais escuro). J no exemplo 2 foram
assumidas seis intensidades: Book, Medium, Bold, Heavy, Black, ExtraBlack. Repare que no exemplo
2 decidiu-se no associar a ExtraBlack.
Desde que a inteno das palavras 'bolder' e 'lighter' escurecer ou clarear a fonte dentro de sua
famlia, e como a famlia pode no possuir associaes para todos os valores simblicos, o ajuste do
valor de 'bolder' feito levando a fonte para o prximo valor mais escuro disponvel, e 'lighter' para o
mais claro. Para ser mais preciso, o significado destas palavras :
Cascading Style Sheets 46
'bolder' seleciona a prxima intensidade mais escura que o valor herdado. Se tal intensidade no existe, caso do
valor herdado ser '900', este valor mantido.
No h garantia de que sempre haver uma fonte mais escura (ou mais clara) do que a especificada.
Por exemplo, algumas famlias de fontes possuem definidos apenas os valores 'normal' e 'bold',
enquanto que outras possuem oito valores diferentes. A nica garantia que a fonte de um dado
valor ser no mnimo mais escura que a que possui um valor menor, dentro da mesma famlia.
Propriedade 'font-size'
Note que uma aplicao pode interpretar de vrias maneiras um dado valor, em funo do contexto.
Por exemplo, num cenrio VRML uma fonte pode assumir tamanhos diferentes de acordo com a
perspectiva em que visualizada.
Exemplos:
Cascading Style Sheets 47
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Se o fator de escala de 1,5 estiver sendo usado, as ltimas trs declaraes so idnticas.
Propriedade 'font'
A propriedade 'font' um atalho para definir 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-
height' e 'font-family' em um nico local da folha de estilo.
Veja nos tpicos anteriores a definio dos valores permitidos. Propriedades para as quais no
fornecido nenhum valor assumem seu valor padro.
Na segunda atribuio, o tamanho percentual (80%) refere-se ao tamanho da fonte do elemento pai.
Na terceira, o tamanho percentual da linha diz referncia ao prprio tamanho da fonte do elemento
considerado.
A quinta atribuio define 'font-variant' ('small-caps'), 'font-size' (120% da fonte do elemento pai), 'line-
height' (120% do tamanho da fonte) e 'font-family' ('fantasy'). Deduz-se que o valor 'normal' refere-se
s outras duas propriedades: 'font-style' e 'font-weight'.
Cascading Style Sheets 48
Propriedade 'color'
color: <cor>
Esta propriedade define a cor do texto de um elemento (foreground color). Uma cor pode ser
especificada de vrias maneiras.
Propriedade 'background-color'
H1 { background-color: #F00 }
Propriedade 'background-image'
Esta propriedade define a imagem de fundo de um elemento. Quando da definio desta propriedade,
pode-se tambm definir uma cor alternativa que ser usada caso a imagem no seja encontrada.
Quando a imagem encontrada, ela se sobrepe cor de fundo.
Propriedade 'background-repeat'
Quando especificada uma imagem de fundo, o valor desta propriedade define se e como a imagem
repetida.
Um valor igual a 'repeat' indica que a imagem deve ser repetida tanto horizontal como verticalmente.
J 'repeat-x' ('repeat-y') faz a imagem repetir-se apenas horizontalmente (verticalmente), de maneira
a criar uma faixa que se estende de um lado a outro do ambiente de exibio. Quando o valor for
definido como 'no-repeat', a imagem no ser repetida.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
Propriedade 'background-attachment'
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Ncleo CSS1: os browsers podem tratar o valor 'fixed' como 'scroll'. Entretanto, recomendado que
eles interpretem 'fixed' corretamente, ao menos nos elementos 'HTML' e 'BODY', pois no existe
maneira dos autores de folhas de estilo definirem uma imagem apenas para os browsers que no
suportam o valor 'fixed' (veja normas de conformidade CSS1).
Propriedade 'background-position'
Valor padro: 0% 0%
Aplicvel a: elementos a nvel de bloco e elementos substitudos
Propriedade herdada: no
Valores percentuais: em relao ao tamanho do prprio elemento
Quando a imagem de fundo foi especificada, esta propriedade define sua posio inicial.
O par de valores '0% 0%' indica que o canto superior esquerdo da imagem deve ser colocado no
canto superior esquerdo do retngulo que contem o elemento em questo (exclui as reas de
espaamento, bordas e margens). J os valores '100% 100%' colocam o canto inferior direito da
imagem no canto inferior direito do mesmo retngulo. Com os valores '14% 84%', o ponto da imagem
que est 14% direita do canto superior esquerdo, e 84% abaixo do mesmo, ser colocado na
posio correspondente do retngulo j mencionado.
Com um par de valores '2cm 2cm', o canto superior esquerdo da imagem colocado 2cm direita e
2cm abaixo do canto superior esquerdo do elemento considerado.
Se for fornecido apenas um valor, ser assumido que este valor corresponde posio horizontal; o
valor vertical ser adotado como sendo 50%. Se existem dois valores definidos, o primeiro sempre
indica a posio horizontal. Combinaes de percentagens com comprimentos so aceitas ('50%
2cm'). No so permitidos valores negativos.
Palavras-chave tambm podem ser usadas para indicar a posio da imagem de fundo, embora elas
no possam ser combinadas com percentagens ou comprimentos. As palavras-chave aceitas, e suas
interpretaes, so as seguintes:
Cascading Style Sheets 51
'top left' e 'left top' significam, ambas, o mesmo que '0% 0%'
Exemplos:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
Propriedade 'background'
A propriedade 'background' um atalho para definir os valores das demais propriedades relacionadas
ao fundo de exibio em um nico lugar da folha de estilos.
Cascading Style Sheets 52
Os valores permitidos esto indicados na descrio individual, dada acima, de cada propriedade
'background'.
Propriedades de Texto
Propriedade 'word-spacing'
O valor indicado por 'length' corresponde ao espaamento adicional acrescentado ao espao padro
entre as palavras. Os valores podem ser negativos mas devem atender aos limites intrnsecos de
cada browser, o qual possui liberdade de escolher um algoritmo prprio. O espaamento entre as
palavras tambm pode ser influenciado pelo alinhamento de pargrafos ( esquerda, direita,
centralizado ou justificado), o qual definido pela propriedade 'text-align'.
H1 { word-spacing: 1em }
Aqui, o espaamento entre cada palavra do elemento 'H1' ser aumentado de '1em'.
Ncleo CSS1.Os browsers podem interpretar como 'normal' qualquer valor de 'word-spacing' (veja
normas de conformidade CSS1).
Propriedade 'letter-spacing'
Com o valor 'normal', os browsers so capazes de mudar o espao entre letras para justificar um
texto. Isto no possvel se 'letter-spacing' definida especificamente pelo valor <length>:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Ncleo CSS1: Os browsers podem interpretar como 'normal' qualquer valor de 'letter-spacing' (veja
normas de conformidade CSS1).
Propriedade 'text-decoration'
Esta propriedade no herdada, mas os elementos devem obedecer ao padro de seus pais. Ou
seja, se um elemento est subscrito esta caracterstica deve passar para seus elementos
subordinados. A cor usada no sublinhamento no ir mudar, mesmo que os elementos subordinados
possuam valores diferentes para a propriedade 'color'.
Neste exemplo, todos os links devero ser sublinhados (ou seja, todos os elementos 'A' com atributo
'HREF' definido).
Cascading Style Sheets 54
Os browsers devem reconhecer a palavra-chave 'blink', porm no esto obrigados a suportar este
efeito.
Propriedade 'vertical-align'
Esta propriedade age sobre a posio vertical do elemento. Um conjunto de palavras chaves diz
respeito s atribuies do elemento pai:
'baseline'
alinha as partes inferiores dos elementos pai e filho
'middle'
alinha os pontos mdios verticais dos elementos pai e filho
'sub'
aplica o efeito de subscrito ao elemento
'super'
aplica o efeito de sobrescrito ao elemento
'text-top'
alinha o topo do elemento com o topo das fontes usadas no elemento pai
'text-bottom'
alinha a parte inferior de um elemento com a parte inferior das fontes usadas no elemento pai
O emprego dos valores 'top' e 'bottom' pode levar a situaes insolveis, nas quais surge um loop
entre as interdependncias dos elementos.
Propriedade 'text-transform'
Cascading Style Sheets 55
'capitalize'
transforma o primeiro caracter de cada palavra em maiscula
'uppercase'
transforma todas as letras de todas as palavras em maisculas
'lowercase'
transforma todas as letras de todas as palavras em minsculas
'none'
cancela algum valor que tenha sido herdado
H1 { text-transform: uppercase }
Propriedade 'text-align'
Esta propriedade descreve como o texto alinhado dentro do elemento. O algoritmo de alinhamento
a ser empregado varia em funo do browser usado e do idioma empregado.
Como esta propriedade herdada, todo elemento a nvel de bloco que esteja dentro do elemento
'DIV' que possua a classe 'center' ('CLASS=center') ser centralizado. Note que os alinhamentos
dependem da largura do elemento, no da largura do ambiente de exibio. Se o valor 'justify' no
suportado pelo browser, este ir substitu-lo, normalmente, por 'left' para os idiomas ocidentais.
Cascading Style Sheets 56
Ncleo CSS1: Os browsers podem tratar 'justify' tanto como sendo 'left' como 'right', dependendo do
direo de escrita do texto ser da 'esquerda para a direita' ou da 'direita para a esquerda',
respectivamente.
Propriedade; 'text-indent'
Valor padro: 0
Aplicvel a: elementos a nvel de bloco
Propriedade herdada: sim
Valores percentuais: referentes largura do elemento pai
Esta propriedade define o tamanho da indentao (deslocamento para a direita) a ser inserido antes
da primeira linha formatada. O valor pode ser negativo, mas deve obedecer aos limites impostos por
cada browser. Uma indentao no inserida no meio de um elemento que tenha sido dividido por
outro (como o 'BR' no HTML).
Exemplo:
P { text-indent: 3em }
Propriedade 'line-height'
Um valor 'normal' ajusta a altura da linha para um valor compatvel com a fonte que est sendo
usada. recomendado que os browsers usem para o valor 'normal' um nmero entre 1 e 1,2.
Cada elemento possui quatro bordas, uma de cada lado, que so definidas por trs parmetros: seu
comprimento, sua cor e seu estilo.
As propriedades 'width' e 'height' agem sobre o tamanho do retngulo que define o elemento, e as
propriedades 'float' e 'clear' podem alterar a sua posio.
Propriedade 'margin-top'
Valor padro: 0
Aplicvel a: todos os elementos
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
H1 { margin-top: 2em }
Valores negativos so permitidos, mas esto restritos aos limites especificados por cada browser.
Propriedade 'margin-right'
Valor padro: 0
Aplicvel a: todos os elementos
Cascading Style Sheets 58
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
H1 { margin-right: 12.3% }
Valores negativos so permitidos, mas esto restritos aos limites especificados por cada browser.
Propriedade 'margin-bottom'
Valor padro: 0
Aplicvel a: todos os elementos
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
H1 { margin-bottom: 3px }
Valores negativos so permitidos, mas esto restritos aos limites especificados por cada browser.
Propriedade 'margin-left'
Valor padro: 0
Aplicvel a: todos os elementos
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
H1 { margin-left: 2em }
Valores negativos so permitidos, mas esto restritos aos limites especificados por cada browser.
Propriedade 'margin'
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade um atalho para definir as quatro outras propriedades em um nico lugar da folha
de estilo.
Se forem indicados quatro valores, eles dizem respeito, respectivamente, s margens superior,
direita, inferior e esquerda. Se for fornecido apenas um valor, ele aplicado s quatro margens. Se
existem dois ou trs valores, eles sero tomados na mesma ordem acima, e o(s) valor(es) ausente(s)
ser(o) igual(is) ao do(s) lado(s) oposto(s).
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* feita igual margem oposta (direita) */
}
So permitidos valores negativos, mas eles esto sujeitos aos limites impostos por cada browser.
Propriedade 'padding-top'
Valor padro: 0
Aplicvel a: todos os elementos
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
Propriedade 'padding-right'
Valor padro: 0
Cascading Style Sheets 60
Propriedade 'padding-bottom'
Valor padro: 0
Aplicvel a: todos os elementos
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
Propriedade 'padding-left'
Valor padro: 0
Aplicvel a: todos os elementos
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
Propriedade 'padding'
Propriedade herdada: no
Valores percentuais: referentes ao tamanho do elemento pai
Esta propriedade um atalho para a definio das outras quatro propriedades de espaamento em
um nico local da folha de estilo.
Com a definio de quatro valores, eles so aplicados, respectivamente, s reas superior, direita,
inferior e esquerda. Se apenas um valor for indicado, ele ser usado para as quatro reas. Se forem
fornecidos dois ou trs valores, eles sero tomados na mesma ordem acima, e o(s) valor(es)
ausente(s) ser(o) igual(is) ao do(s) lado(s) oposto(s).
H1 {
background: white;
padding: 1em 2em;
}
Este exemplo define os espaamentos verticais (superior e inferior) em '1em', e os horizontais (direito
e esquerdo) em '2em'. A unidade 'em' relativa ao tamanho do elemento fonte: '1em' igual ao
tamanho da fonte em uso.
Propriedade 'border-top-width'
Neste exemplo, 'H1' e 'P' tero a mesma espessura, independente do tamanho da fonte usada em
cada um. Para definir valores relativos, deve ser usada a unidade 'em':
H1 { border: solid 0.5em }
Propriedade 'border-right-width'
Propriedade 'border-bottom-width'
Propriedade 'border-left-width'
Propriedade 'border-width'
Propriedade herdada: no
Valores percentuais: N/A
Esta propriedade um atalho para definir as quatro propriedades anteriores em um mesmo local da
folha de estilos.
dois valores: o primeiro define as bordas superior e inferior, o segundo aplicado s bordas esquerda e direita
trs valores: o primeiro corresponde ao topo, o segundo determina as bordas direita e esquerda, e o terceiro define a
borda inferior
Propriedade 'border-color'
border-color: <color>{1,4}
Esta propriedades define a cor das quatro bordas, podendo serem definidos de um a quatro valores,
correspondentes aos mesmos lados da propriedade 'border-width'.
Se nenhuma cor for definida, ser usada a cor da propriedade 'color'.
P{
color: black;
background: white;
border: solid;
}
Propriedade 'border-style'
Cascading Style Sheets 64
border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset
Esta propriedade define o estilo das quatro bordas de um elemento. At quatro valores podem ser
definidos, sendo aplicados seguindo a mesma regra mostrada para a propriedade 'border-width'.
Neste exemplo, as bordas horizontais sero linhas slidas ('solid') e as verticais sero linhas
pontilhadas ('dotted').
Como o valor padro 'none', as bordas no tero estilos caso esta propriedade no seja
especificada.
Os estilos correspondem :
none
nenhuma borda desenhada, no importando o valor de 'border-width'
dotted
linha pontilhada
dashed
linha tracejada
solid
linha slida
double
linha slida dupla, onde a soma da espessura das duas linhas e mais o espao entre ambas deve ser igual ao valor
de 'border-width'
groove
linha em baixo relevo, com as cores baseadas no valor de 'color'
ridge
linha em alto relevo, com as cores baseadas no valor de 'color'
inset
linha 3D em baixo relevo, com as cores baseadas no valor de 'color'
outset
linha 3D em alto relevo, com as cores baseadas no valor de 'color'
Ncleo CSS1: os browsers podem interpretar como 'solid' as propriedades 'dotted', 'dashed', 'double',
'groove', 'ridge', 'inset' e 'outset'.
Propriedade 'border-top'
Esta propriedade um atalho para definir a espessura, a cor e o estilo associados a borda superior
de um elemento em um mesmo lugar.
Este exemplo define as caractersticas da borda superior do elemento 'H1'. Caso alguma
caracterstica deixe de ser especificada, ser adotado seu valor padro.
Como a cor no foi especificada no exemplo acima, ser usada a mesma cor definida para o prprio
elemento com a propriedade 'color'.
Note que enquanto a propriedade 'border-style' aceita at quatro valores, esta propriedade aceita
apenas um valor de estilo.
Propriedade 'border-right'
Propriedade 'border-bottom'
Propriedade 'border-left'
Cascading Style Sheets 66
Propriedade 'border'
Ao contrrio dos atalhos das propriedades 'margin' e 'padding', esta propriedade no permite indicar
valores distintos para as bordas.
Como a especificao das propriedades podem sobrepor caractersticas uma das outras, muito
importante prestar ateno na forma como elas so definidas dentro da folha de estilos. Veja este
exemplo:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
Neste exemplo, a cor da borda esquerda ser preta, enquanto que as demais sero vermelhas. Isto
ocorre porque 'border-left' define o estilo e tambm a cor.
Cascading Style Sheets 67
Note que enquanto 'border-width' aceita at quatro valores para a espessura, esta propriedade
permite a indicao de apenas um.
Propriedade 'width'
Esta propriedade pode ser usada com elementos de texto, mas mais til com elementos
substitudos, tais como as figuras. O elemento ser redimensionado para atender ao valor
especificado. Caso a propriedade 'height' esteja especificada como 'auto', o redimensionamento ser
proporcional (sem deformao).
Se tanto a propriedade 'width' como a 'height' forem especificadas como 'auto', o elemento ter suas
dimenses originais.
Veja modelo de formatao para uma descrio sobre o relacionamento entre esta propriedade com
as margens e reas de espaamento ('padding').
Propriedade 'height'
Ncleo CSS1: os browsers podem ignorar esta propriedade (ou seja, trat-la como 'auto') quando o
elemento considerado no um elemento substitudo.
Propriedade 'float'
Com o valor 'none', esta propriedade faz o elemento ser mostrado onde ele aparece dentro do texto.
Com o valor 'left' o elemento ser movido para a esquerda e o texto ser disposto do seu lado direito.
O similar ocorre com o valor 'right'. Em qualquer caso, o elemento ser tratado como sendo a nvel de
bloco. Veja em elementos flutuantes uma descrio completa deste processo.
IMG.icon {
float: left;
margin-left: 0;
}
Este exemplo coloca todos os elementos 'IMG' com 'CLASS=icon' alinhados ao lado esquerdo do seu
elemento pai.
Propriedade 'clear'
Esta propriedade indica se um elemento permite a existncia de elementos flutuantes ao seu redor.
Mais especificamente, o valor desta propriedade indica os lados que no aceitam elementos
flutuantes.
Um valor 'left' coloca o elemento abaixo de qualquer elemento flutuante que exista no seu lado
esquerdo. O valor 'none' permite elementos flutuantes em todos os lados. Exemplo:
H1 { clear: left }
Cascading Style Sheets 69
Propriedades de Ordenao
Estas propriedades classificam elementos em mais categorias que as normalmente usadas em
HTML.
A propriedade 'list-style' descreve como os itens de uma lista so formatados. Ela pode ser usada em
qualquer elemento, e ser herdada pelos elementos das hierarquias inferiores da lista. Entretanto,
ter efeito apenas em elementos com a propriedade 'display' definida como 'list-item'. Em HTML o
que acontece com o elemento 'LI'.
Propriedade 'display'
Esta propriedade define se o elemento ser ou no mostrado, e como ser visualizado no ambiente
de exibio (que pode ser uma impressora, um monitor, etc).
Um valor 'block' coloca o elemento em uma nova rea de exibio (um retngulo que contem o
elemento). Este retngulo ser posicionado de acordo com o descrito em modelo de formatao.
Normalmente, os elementos tipo 'H1' e 'P' so elementos a nvel de bloco. O valor 'list-item' produz
efeito similar 'block', exceto pelo fato de ser adicionado um marcador de lista. Em HTML, 'LI' um
exemplo deste caso.
O valor 'inline' resulta em um novo retngulo interno linha de exibio do elemento. Este retngulo
formatado de acordo com o seu contedo. Caso seja texto ele poder ocupar vrias linhas, sendo
criado um retngulo para cada linha. As propriedades das margens, bordas e reas de espaamento
so aplicveis ao elemento interno, mas no tero qualquer efeito nas quebras de linha.
J o valor 'none' desativa a exibio do elemento, inclusive dos seus elementos filhos.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Ncleo CSS1: os browsers podem ignorar a propriedade 'display' e usar apenas os seus valores
padres internos. Veja normas de conformidade CSS1.
Propriedade 'white-space'
Esta propriedade determina como os espaos em branco so tratados dentro de um elemento: pela
maneira 'normal' (so agrupados em um nico espao), pela mesma forma do elemento 'PRE'
(respeitando todos os espaos individualmente) ou pela forma 'nowrap' (onde a mudana de linha na
rea de exibio ocorre apenas com o elemento 'BR').
Embora o valor padro desta propriedade seja 'normal', os browsers normalmente possuem valores
padres para todos os elementos HTML conforme o sugerido na especificao HTML [2].
Ncleo CSS1. Os browsers podem ignorar a propriedade 'white-space' e usar seus padres internos.
Propriedade 'list-style-type'
Esta propriedade define a aparncia do marcador de lista quando a propriedade 'list-style-image' for
'none' ou se a imagem indicada pelo URL no estiver disponvel.
Propriedade 'list-style-image'
Esta propriedade define a imagem que ser usada como um marcador de lista.
UL { list-style-image: url(http://png.com/ellipse.png) }
Propriedade 'list-style-position'
Com esta propriedade definida a maneira como o marcador de lista posicionado em relao ao
contedo da lista. Para um exemplo de formatao, veja formatao de elementos de lista.
Propriedade 'list-style'
Esta propriedade um atalho para a definir as propriedades anteriores em um nico local da folha de
estilo.
A definio de 'list-style' diretamente nos elementos 'LI' pode provocar resultados inesperados:
<STYLE TYPE="text/css">
OL.alpha LI { list-style: lower-alpha }
UL LI { list-style: disc }
</STYLE>
<BODY>
<OL CLASS=alpha>
<LI>level 1
Cascading Style Sheets 72
<UL>
<LI>level 2
</UL>
</OL>
</BODY>
Como o grau de importncia (como definido em ordem de encadeamento) maior para a primeira
atribuio deste exemplo, ela ir se sobrepor segunda em todos os elementos 'LI', e ser usado
apenas o estilo 'lower-alpha'. Portanto, aconselhvel definir a propriedade 'list-style' somente em
elementos marcados como 'list-item':
Neste exemplo, a herana ir transferir o 'list-style' dos elementos 'OL' e 'UL' para os elementos 'LI'.
Um endereo URL pode ser combinado com qualquer outro valor:
No exemplo acima, o valor 'disc' ser usado quando a imagem no estiver disponvel.
Cascading Style Sheets 73
Unidades
Unidades de Medidas
O formato de uma unidade de medida constitudo por um sinal positivo ou negativo opcional ('+' ou
'-', sendo o padro '+') seguido imediatamente por um nmero (com ou sem ponto decimal - no use
vrgulas), com todo o conjunto imediatamente seguido por um identificador de unidade (um cdigo
com duas letras). Este identificador opcional caso o nmero seja '0'.
As unidades relativas 'em' e 'ex' tomam como base o tamanho da fonte do prprio elemento. A nica
exceo a esta regra a propriedade 'font-size', onde estas unidades so relativas ao tamanho da
fonte do elemento pai.
A unidade 'px', pixel, usada no exemplo acima, funo da resoluo da rea de exibio,
normalmente um monitor.
BODY {
font-size: 12pt;
text-indent: 3em; /* ou seja, 36pt */
}
H1 { font-size: 15pt }
Unidades Percentuais
O formato de um valor percentual composto de caracter de sinal (positivo ou negativo, '+' ou '-',
sendo '+' o padro) seguido imediatamente por um nmero (com ou sem ponto decimal, no use
vrgulas) seguido, tambm imediatamente, pelo smbolo '%'.
Os valores percentuais sempre so relativos a algum outro valor, por exemplo, uma unidade de
medida. Cada propriedade que permita o uso de unidades percentuais tambm define a qual valor
esta unidade se refere. Muito freqentemente o tamanho da fonte do prprio elemento:
Em todas as propriedades herdadas na CSS1, se o valor for especificado como uma percentagem,
ento os elementos filhos herdaro o valor resultante, no o valor da percentagem.
As palavras chaves sugeridas para indicar cores so: 'aqua' , 'black' , 'fuchsia' , 'gray', 'green', 'lime',
'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white' e 'yellow'. Estas 16 cores foram tiradas da
paleta de cores VGA do Windows, e seus valores RGB so esto definidos nesta especificao.
A codificao RGB usada para a indicao de cores no formato numrico. Todas as atribuies a
seguir indicam a mesma cor (vermelho):
O formato de um valor RGB 'rgb(' seguido trs nmeros separados por vrgulas. Quaisquer destes
trs nmeros podem estar na faixa de 0-255, ou serem trs valores percentuais entre 0% e 100%.
Finalmente a notao terminada por um ')'. So permitidos espaos em branco ao redor dos
nmeros.
Valores fora da faixa sero truncados. Desde modo, as trs atribuies a seguir so equivalentes:
As cores RGB esto especificadas no ambiente sRGB. Podem ocorrer variaes entre os browsers
na reproduo destas cores, mas o emprego deste ambiente fornece uma definio mensurvel, no
ambgua e objetiva, de como as cores devem ser geradas - de acordo com um padro internacional.
Os browsers podem otimizar os recursos usados na produo das cores empregando o mtodo de
correo "gamma". sRGB especifica um padro "gamma" de 2,2 a ser atendido sob condies bem
definidas de visualizao. Os browsers devem produzir as cores definidas nas folhas de estilos CSS,
em um certo dispositivo de sada (monitor, por exemplo) de maneira tal que seja atingido este padro
2,2 (Todo este processo aplicado apenas s cores indicadas pelas folhas de estilos CSS: as
imagens coloridas so reproduzidas com base nas suas prprias informaes internas de composio
de cores.
Cascading Style Sheets 76
URL
Um URL identificado pela notao:
O formato de um valor URL 'url(' seguido por espaos em branco opcionais seguidos por apstrofe
(') ou aspas duplas ("), tambm opcionais, seguidos pelo URL em si seguido novamente por pelo
apstrofe ou aspas e espaos adicionais opcionais e terminado por ')'.
Parnteses, vrgulas, espaos, apstrofes e aspas internos ao URL devem ser precedidos por uma
barra invertida (\).