Aula 08

Aula 8: Folhas de Estilo
Nesta aula voc estar se habilitando a usar Folhas de Estilo, um recurso que
permite separar o estilo do documento da sua estrutura. A introduo das folhas
de estilo representa um passo importante na evoluo da Web, til para facilitar
a atualizao e a manuteno do padro de um conjunto de pginas sob sua
administrao.
Objetivos:
- Aprender a sintaxe bsica das folhas de estilo.
- Usar seletores, propriedades e valores.
- Incluir seletores contextuais e mltiplos.
- Conhecer as classes de estilo e as pseudo-classes.
- Usar identificadores.
- Fazer definio inline.
- Estilos de diviso e de trecho de pargrafo.
Pr-requisitos:
Todas as aulas anteriores sero usadas nesta ltima aula, se algo ainda no
estiver bem, especialmente at a aula 4, reveja estes tpicos e tire suas dvidas.
1. Folhas de Estilo
At a verso 4 da linguagem HTML, caso se desejasse criar pginas cuja
aparncia fosse ligeiramente diferente do comportamento padro, era
necessrio incluir os atributos e tags que definissem essa aparncia nos pontos
do documento onde fosse necessrio, misturados prpria estrutura do
documento.
Por exemplo, num documento cujo texto fosse de cor preta (definida na tag
<BODY> atravs do atributo TEXT color=black), caso se desejasse
cabealhos de cor azul marinho seria necessrio incluir, em cada ocorrncia da
tag <H1></H1>, a tag <FONT color=navy> </FONT>. Qualquer
modificao a ser realizada nesta definio tornava necessrio buscar por todo
o documento o que deveria ser modificado.
A partir da verso 4 foi introduzido o conceito de folhas de estilo em cascata
(CSS cascade style sheets). A introduo das folhas de estilo representa um
passo importante na evoluo da Web, pois atravs delas os estilos (cores,
fontes, tamanho e tipo de fontes etc.) podem ser separados da estrutura (o
contedo do texto da pgina).
Essa estratgia torna sua pgina mais flexvel e fcil de atualizar. Ela
possibilita separar a tarefa de tornar o site graficamente atraente das tarefas
ligadas programao. Essa separao importante pois geralmente feita por
pessoas com formaes e experincias profissionais diferentes. A criao
artstica do visual do site o trabalho de um designer visual, geralmente com
formao na rea de Artes. A gerao do contedo do documento o trabalho
1
do programador HTML ou de algum especialista em um utilitrio de criao de

pginas, ou seja, pessoas que so da rea tcnica em informtica.
Voc tambm pode definir

os valores de estilo em
qualquer tempo, mas
definindo os estilos na
seo <BODY>, eles no
tero efeito imediato, ainda
que as mudanas no estilo
passem a aparecer se o
usurio redimensionar a
janela, causando uma
reformatao no
documento.
Estas informaes ligadas aparncia ou formato do site podem inclusive estar

contidas em um arquivo parte que pode ser includo nos diversos documentos
que compem o site, garantindo assim uma apresentao comum em todas as
pginas. Alm das facilidades de formatao j existentes, foram acrescentadas
novas facilidades (como a criao de classes), o que permite um controle muito
maior do layout.
A folha de estilos definida por meio da tag <STYLE> ... </STYLE> que
deve ser colocada na seo <HEAD> do documento, antes que qualquer texto
seja formatado. Esta tag tem um atributo TYPE que indica a sintaxe dos estilos
contidos na tag.
H dois tipos de sintaxe possvel: a sintaxe CSS e a sintaxe JavaScript. A
sintaxe CSS normalmente a padro e definida atribuindo-se o valor
"text/css" ao atributo TYPE. A sintaxe JavaScript reconhecida apenas
pelo
navegador
Netscape,
definida
atribuindo-se
o
valor
"text/JavaScript" ao atributo TYPE.
Nesta aula veremos em detalhes a sintaxe padro. O exemplo a seguir faz com
que todos os cabealhos do tipo 1 (<H1>...</H1>) sejam escritos
utilizando a fonte Arial e a cor azul; e todos os cabealhos do tipo 2
(<H2>...</H2>) e 3 (<H3>...</H3>) sejam escritos utilizando a fonte
Bazzoka e a cor verde:
<STYLE TYPE="text/css">
<!-H1
{
font-family: Arial;
color: blue;}
H2,H3{
font-family: Bazzoka;
color: green; }
-->
</STYLE>
A colocao dos estilos entre os smbolos de comentrio, , no
obrigatria, mas uma boa sugesto, pois a utilizao destes smbolos
ignorada pelos navegadores que conhecem a tag <STYLE> (como o Explorer
e o Netscape na verso 4 ou posterior), mas no ignorada pelos navegadores
que no as conhecem ou as verses anteriores destes, que desta forma tomam a
definio dos estilos como comentrio.
O texto do interior da tag <STYLE> no HTML e segue a seguinte sintaxe:
<STYLE TYPE="text/css">
/* comentario */
seletor { propriedade: valor;
propriedade: valor valor valor ...;...}
seletor, seletor {propriedade: valor;...}
</style>
Ou seja, as folhas de estilo CSS so especificadas como uma lista de nomes de
seletores com diversas propriedades especificadas pelos seus valores separados
2
por ponto-e-vrgulas, onde cada nome de seletor com propriedades e valores

comuns separado por vrgula.
Os seletores podem ser uma tag ou uma classe de HTML (ou uma nica tag
com o identificador especificado), podem-se tambm fazer diversas atribuies
ao mesmo tempo ou fazer atribuies sensveis a certo contexto. Voc pode
encontrar as especificaes completas das CSS no site da W3E:
http://www.w3.org .
1.1. Seletor Mltiplo
possvel atribuir o mesmo valor s propriedades de vrias tags de uma s
vez, colocando-as separadas por vrgulas antes da definio das propriedades.
No exemplo a seguir, todos os cabealhos H1, H2 e H3 e todos os textos
em negrito (bold), B, sero escritos com a cor azul:
<STYLE>
H1, H2, H3, B {color: blue;
}
</STYLE>
1.2. Seletor Contextual
possvel indicar que as propriedades de uma determinada tag s sero
modificadas quando ela se encontrar em um determinado contexto, por
exemplo no interior de uma ou mais container tags.
Para indicar o contexto, simplesmente se escreve sua especificao antes das
chaves , { }. No exemplo a seguir, todos os textos em itlico, I , dentro de
cabealhos H1 (apenas estes) sero escritos com a cor verde, os demais textos
em itlico tero a cor padro :
<STYLE>
H1 I { color: green;}
</STYLE>
2. Propriedades dos Estilos
Propriedades so atributos que definem a forma de visualizao de uma
determinada tag ou de um grupo de tags. Elas podem ser divididas em 7
tipos, de acordo com sua funo e nem sempre so aplicveis a qualquer tag.
Os 7 tipos de propriedades so as que modificam:
as fontes de caracteres,
a cor ou a imagem de fundo da pgina usada,
os espaamentos,
as caractersticas das listas,
o alinhamento do texto,
as caractersticas das bordas, e
o posicionamento de camadas.
H pequenas incompatibilidades entre a forma como os dois principais tipos
de navegadores (Explorer e Netscape) so afetados por algumas propriedades,
que podem, inclusive, at mesmo serem ignoradas.
3
A implementao de estilos por parte do Netscape mais recente e nem tudo

que foi implementado no Explorer reconhecido por esse navegador.
Os quadros a seguir mostram as propriedades de cada tipo, seus valores
possveis e o(s) navegador(es) que as implementam. Ser excludo o
posicionamento de camadas por estar fora do objetivo do nosso curso.
Tabela 8.1 - Propriedades relacionadas s fontes de caracteres
Propriedades Valores Possveis
Browser
fontlista de nome de fontes
ambos
family
font-size tamanho, percentual, xx-small,
ambos
x-small,small,medium,large,
x-large,xx-large,larger,smaller
font-style normal, oblique, italic
ambos
fontnormal, bold, bolder, lighter,
ambos
weight
100, 200, 300, 400 (normal), 500,
600, 700, 800, 900
fontnormal, smallcaps
Explorer
variant
font
Explorer
family size style weight variant
color
nome da cor, #RRGGBB
ambos
textnone, overline, underline,
ambos
decoration blink, line-through
textcapitalize, lowercase, none,
ambos
transform uppercase
Tabela 8.2 - Propriedades relacionadas s cores e imagem de fundo da
pgina
Propriedades
Valores Possveis
Browser
backgroundposition
backgroundimage
backgroundcolor
backgroundattachment
backgroundrepeat
background
tamanho (x y), percentual (x y), top,

center, bottom, left, right
url da imagem
Explorer
transparent, nome da cor, #RRGGBB
ambos
scroll, fixed
Explorer
repeat, repeat-x, repeat-y,

no-repeat
attachment color image position repeat
ambos
ambos
Explorer
Tabela 8.3 - Propriedades relacionadas aos espaamentos

Letter spacing
define o espaamento
entre as letras do
texto.
White space
define o espaamento
em branco.
pre se refere fonte
mono-espaada.
nowrap impede a
quebra de linha do
texto dentro da clula.
padding define as
margens dentro da
clula.
word spacing
refere-se ao
espaamento entre
cada palavra do texto.
Propriedades
letter-spacing
white-space
line-height
margin-top
margin-bottom
margin-right
margin-left
margin
padding-top
padding-bottom
padding-right
padding-left
padding
word-spacing
float
clear
Valores Possveis
tamanho
normal, nowrap, pre
tamanho, percentual, normal
tamanho, percentual, auto
tamanho
none, left, right
none, both, left, right
Browser
Explorer
Netscape
ambos
ambos
ambos
ambos
ambos
Explorer
ambos
ambos
ambos
ambos
Explorer
ambos
ambos
ambos
Tabela 8.4 - Propriedades relacionadas s listas

Propriedades
list-styleimage
list-styletype
list-style
Browser
Valores Possveis
URL, none
explorer
circle, square, disc, lowerambos

alpha, upper-alpha, lower-roman,
upper-roman, decimal, none
ambos
image type
Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto

Propriedades Valores Possveis
Browser
textindent
text-align
verticalalign
tamanho, percentual
ambos
left, center, right, justify

baseline, middle, sub, super,
text-bottom, text-top, percentual
ambos
ambos
Tabela 8.6 - Propriedades relacionadas s bordas

Propriedades
border-topwidth
borderbottom-width
border-rightwidth
border-leftwidth
border-top
border-bottom
border-right
border-left
border-color
border-width
border-style
border
Valores Possveis
tamanho, thin, thick, medium
Browser
ambos
ambos
ambos
ambos
cor width style

cor width style
cor width style
cor width style
cor, #RRGGBB
none, dashed, dotted, double,
groove, inset, outset, ridge.
solid
cor width style
Explorer
Explorer
Explorer
Explorer
ambos
ambos
ambos
ambos
2.1. Valores das Propriedades

Como voc deve ter notado nos quadros acima, h 5 formas distintas de
definio dos valores das diferentes propriedades:
palavras-chave,
tamanhos,
percentuais,
URL's, e
cores.
Palavras-chave se referem ao uso de palavras predefinidas, com significados
definidos pelo contexto. Aparecem nas tabelas 8.1 a 8.6, na coluna "valores
possveis" escritas com fonte mono-espaada para facilitar sua
identificao. Elas podem expressar uma dimenso (small = pequeno), uma
relao (bolder = mais em negrito), um comportamento (auto =
automtico, normal, both, left etc.), o nome de uma fonte de
caracteres (arial, times etc.) ou outros valores. Estas palavras podem
estar escritas em letras maisculas ou minsculas (o que chamado de casesensitive).
Quando o valor da propriedade for um tamanho, corresponde ao fornecimento
de um valor numrico, precedido ou no de sinal e seguido da indicao da
unidade desejada. As unidades vlidas so: pixel (indicada pelo smbolo px),
polegadas (indicada pelo smbolo in), centmetros (indicada pelo smbolo
cm), milmetros (indicada pelo smbolo mm), pontos (indicada pelo smbolo
pt, sendo que um ponto eqivale a 1 / 72 de uma polegada) ou picas (indicada
pelo smbolo pc, sendo equivalente a 12 pontos). Por exemplo, so tamanhos
possveis: 1in, 1.5cm, -3pt, +0,25mm.
Uma propriedade tem valores percentuais se definida por um valor numrico
seguido do smbolo %. Este valor no dinmico e diz respeito apenas ao
6
momento em que o navegador for aplicar o estilo. Por exemplo: 120%.

URLs se referem indicao de um endereo. A forma de indicar uma URL
nas folhas de estilo diferente da utilizada em HTML, pois deve-se apresentar
o endereo entre parnteses e precedido das letras url. Ou seja, segue a
seguinte sintaxe: url(endereo). So, portanto, valores vlidos de URL:
url(http://equipe.nce.ufrj.br
/joao/home.html)
e
url(foto.jpg).
Quando na coluna valores possveis aparece cor, esta pode ser descrita por
at 3 formas:
seu nome em ingls;
a forma usada em HTML; e
na forma rgb(valor,valor, valor).
As duas primeiras formas foram assunto na aula 4. Na primeira forma
descrito o nome da cor em ingls. Na segunda, usada a definio RGB em
hexadecimal precedida do smbolo # da linguagem HTML (isto #RRGGBB).
A terceira forma uma variao da segunda, onde no necessrio conhecer
como definir valores em hexadecimais pois a intensidade das cores vermelho,
verde e azul definido atravs da sintaxe rgb(vermelho, verde,
azul) por valores numricos decimais usuais.
No caso da forma da linguagem HTML, essa definio nas folhas de estilo no
pode estar entre aspas. Os valores de vermelho, verde e azul da ltima forma
podem aparecer definidos em valores absolutos correspondendo a nmeros de
0 a 255 ou em percentagens. So, portanto, valores vlidos de cor: yellow,
#FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%).
3. Compartilhando Estilos
possvel compartilhar estilos entre vrios documentos HTML. Os estilos
devem estar contidos num arquivo com extenso css, que pode ser includo
num documento por meio da tag <LINK> colocada em sua seo <HEAD>.
A utilizao de um arquivo de estilo permite criar uma verdadeira
uniformizao das pginas de um site. Qualquer modificao neste arquivo
modifica todas as pginas de uma s vez.
O exemplo a seguir mostra a sintaxe da tag <LINK> para incluir o arquivo
estilo.css num documento HTML:
<LINK REL=stylesheet TYPE=text/css
HREF=estilo.css>
O valor do atributo HREF indica o nome do arquivo de estilos e alm dele
necessrio definir tambm os atributos REL e TYPE com os valores
mostrados no exemplo.
Um arquivo de estilos no um arquivo HTML (no segundo mdulo do curso
voc entender melhor isso, j estamos quase l!) , ou seja, no necessrio
nem se deve colocar os estilos dentro de uma tag <STYLE>.
7
4. Classes de Estilo
Com o que foi visto at o momento, ao definir o estilo de uma tag, sempre que
ela for utilizada no documento ter o aspecto determinado por este estilo.
Muitas vezes porm desejvel que uma tag tenha vrios aspectos de acordo
com o local onde utilizada.
possvel, portanto, criar diferentes estilos para uma tag criando vrias
classes. Para criar uma classe basta acrescentar ao nome da tag, no seletor, o
caracter ponto (.) seguido de um nome para a classe.
O exemplo a seguir mostra uma definio aplicada a todos os cabealhos do
tipo <H1> (tipo e tamanho de fonte) e as definies de cor aplicveis apenas
aos cabealhos <H1> pertencentes s classes vermelho (cor de texto
vermelha) e verde (cor de texto verde):
<style>
H1 { font-family: Arial;
font-size: 20pt;}
H1.vermelho
{
color: red;}
H1.verde {color: green;}
</style>
Para aplicar o estilo (definido numa classe) a uma tag basta utilizar o atributo
class, definindo como valor o nome da classe desejada. No exemplo a seguir, o
primeiro cabealho estar sujeito definio de tamanho e tipo de fonte e ser
escrito na cor padro; o segundo e o quarto cabealho tambm estaro sujeitos
definio de tamanho e tipo de fonte mas sero escritos na cor vermelha; o
terceiro, por sua vez, estar sujeito definio de tamanho e tipo de fonte, mas
ser escrito na cor verde:
<h1> Cabecalho normal</h1>
<h1 class=vermelho> Cabecalho Vermelho</h1>
<h1 class=verde> Cabecalho Verde</h1>
<h1 class=vermelho> Outro Cabecalho Vermelho</h1>
4.1. Classes Genricas

As classes definidas no exemplo anterior s podem ser aplicadas a tags do tipo
<H1>, pois s esta tag foi includa no seletor. possvel criar classes
aplicveis a qualquer tipo de tag, bastando para isso omitir o nome da tag
como mostrado no exemplo a seguir:
<STYLE>
.verde {
color: green;
}
</STYLE>
A utilizao de uma classe genrica tambm feita por intermdio do atributo
class como mostra o exemplo a seguir:
<h1 class=verde>
Este um cabealho verde
</h1>
<p class=verde>Este um texto verde</p>
8
4.2. Pseudo-classes
A tag <A> tem algumas classes com nomes pr-definidos que so associadas a
estados assumidos por esta tag. Estes estados so descritos na tabela 8.7.
Tabela 8.7 - Estados da tag <A>
Pseudo-classe
link
active
visited
hover
Descrio
Link que ainda no foi visitado
Link selecionado no momento pelo usurio
Link que j foi visitado
Link no momento em que o usurio passa o
mouse sobre ele
Browser
ambos
ambos
ambos
Explorer
No caso da pseudo-classe, diferentemente de uma classe comum, o nome da

classe separado do nome da tag no seletor pelo caracter ":".
No existem pseudo-classes genricas e, portanto, sempre necessrio indicar
o nome da tag. O exemplo a seguir define a cor azul para os links no visitados,
a cor vermelha e negrito para os links no momento em que o boto do mouse
est pressionado sobre o link, a cor verde e itlico para os links que j foram
visitados e a cor vermelho escura para quando o cursor do mouse passar sobre
o link (este ltimo s funcionar para o Explorer, sendo ignorado se o
navegador for o Netscape):
<STYLE>
A:link
{color:blue;}
A:active {color:red; font-weight:bold;}
A:visited{color:green;font-style:italic;}
A:hover {color:darkred;}
</STYLE>
5. Identificadores
Da mesma forma que uma classe modifica as definies feitas para uma tag,
possvel redefinir, em um determinado elemento do documento, as definies
de uma classe.
Isso feito atravs da criao de um identificador no interior da tag
<STYLE>. O seletor de um identificador um nome qualquer antecedido do
caracter #. Ao definir um atributo ID com o nome de um identificador numa
tag qualquer, esta tag tem seu aspecto modificado conforme o estilo definido
no identificador.
Se nesta tag tambm estiver definido o atributo classe, as propriedades
definidas no identificador tm prioridade sobre as definidas na classe. Muito
embora os navegadores normalmente no imponham restries, um
identificador deve ser utilizado em apenas uma tag, criando uma instncia
particular desta tag.
No exemplo a seguir, os trs cabealhos sero desenhados com a fonte Arial
e o tamanho Grande, porm o primeiro ser desenhado em verde (definio
da classe), o segundo em azul e o terceiro em amarelo (definies dos
identificadores):
9
<STYLE>
H1.grande {
font-family: arial;
font-size: large;
color: green;
}
#azul
{ color: blue; }
#amarelo { color: yellow; }
</STYLE>
...
<H1 class=Grande>
Grande e verde
</H1>
<H1 class=Grande id=azul>
Grande e azul
</H1>
<H1 class=Grande id=amarelo>
Grande e amarelo
</H1>
6. Estilos inline
Uma outra forma de redefinir o estilo de uma tag atravs do atributo STYLE.
Este atributo pode ser colocado em qualquer tag e tem precedncia sobre os
estilos definidos atravs dos atributos ID e CLASS.
O valor do atributo STYLE uma string contendo propriedades e valores
separados por vrgulas, da mesma forma que utilizado associado a um seletor
na tag <STYLE>. Esta forma denominada inline.
No exemplo a seguir, usa-se esta forma para fazer o segundo cabealho herdar
da classe o tipo de fonte, herdar do identificador o tamanho, e assumir a cor
definida no atributo STYLE:
<STYLE>
H1.grande {
font-family: arial;
font-size: xx-large;
color: green;
}
#azul
{
font-size: x-large;
color: blue;
}
</STYLE>
...
<H1 class=grande>
Muito grande e verde </H1>
<H1 class=grande id=azul STYLE=color: red;>
Grande, vermelho e com fonte Arial
</H1>
7. Tags <div> e <span>
Algumas vezes pode ser interessante modificar a forma de apresentao de um
trecho do texto que no est associado a nenhuma tag em especial. Nestes
casos, a linguagem HTML fornece duas tags que no tm nenhum
comportamento padro especial: a tag <DIV> ... </DIV> e a tag
10
<SPAN> ... </SPAN>. O aspecto dessas tags pode ser determinado por
meio de estilos.
A nica diferena entre estas duas tags que a tag <DIV> causa,
necessariamente, uma mudana de linha antes e depois de sua utilizao, ao
passo que a tag <SPAN> pode ser utilizada no meio de um pargrafo, sem
causar nenhuma quebra de linha.
A tag <DIV> pode ser utilizada para definir o estilo de vrios pargrafos, sem
que seja necessrio definir um a um o estilo das tags <P> destes pargrafos.
No exemplo a seguir, a tag <DIV> define um pargrafo de cor vermelha, no
meio do qual foi includa uma palavra na cor verde:
<div style=color: red;>
Este um paragrafo vermelho com um texto
<span style=color: green;>
verde
</span>
no meio
</div>
Estas duas tags tm uma grande importncia em HTML 4 pois servem para
definir camadas (ou em ingls layers, o que est associado a posicionamento
dinmico, um assunto importante para DHTML- Dynamic HTML).
Exerccios:
1. Utilize, nos exerccios 1 a 4 que usam o exemplo atividade da aula 1, as
possibilidades de definir o estilo por CCS que voc aprendeu nesta aula. Faa
diversas verses do mesmo site, todas com o mesmo contedo, mas com as
aparncias mais diversas possveis de formato. Ficou mais fcil para voc
agora manipular cada verso?
2. Atribua, no exerccio anterior, as caractersticas de formatao a um arquivo
separado do anterior. Compare como fica a pgina agora. Associe o mesmo
arquivo de estilo a diversas outras pginas suas, padronizando suas aparncias.
3. As linhas que seguem resumem tudo o que vimos sobre folhas de estilo.
<style type=text/css>
H1,H2 { color:blue;font-style:italic}
<--! elementos da classe aviso
tem aparencia especial -->
.aviso{
font-weight:bold;
background-color:yellow;
margin-left:1in;
margin-right:2cm;
border-color:red;
border-width:8px;
border-style:solid
}
<--! os tipos H1 e H2 na classe aviso
centrados -->
.aviso H1, .aviso H2{text-align:center}
11
estarao
<--! define um elemento especial

:ID=P23 -->
#P23 {
text-align:center;
text-transform:uppercase;
}
</style>
<H1>Exemplo de folhas de estilo em cascata
</H1>
<div class=aviso>
<H2>Cuidado</H2>
Esteja atento! Note que chamou-se a atencao com um
texto em negrito e cores brilhantes. Note ainda que o
titulo "Cuidado" aparece centrado em italico e azul.
</div>
<p ID=P23>
Este paragrafo ficou centrado<br>
e em letras maiusculas.<br>
<span style=text-transform:none>
Aqui explicitamente usou-se um estilo inline para se
sobrepor as maiusculas.
</span>
</p>
Aps entender o que elas fazem no arquivo, inclua-as na posio adequada.
Depois modifique o documento de modo que os formatos fiquem em um
arquivo separado. Inclua no seu computador ambas as formas e compare-as
(veja o resultado, voc mesmo avaliar se ficaram idnticas).
4. Associe o mesmo arquivo de estilo s pginas do exerccio 2 e 3. Faa o
mesmo com diversas outras pginas suas, padronizando suas aparncias. As
mudanas no ficaram mais fceis agora!
Resumo:
Nesta aula voc aprendeu a usar CSS em HTML, ou seja, aprendeu como
estruturar sua pgina para ter sua formatao (a forma como ela aparece)
separada do contedo do documento. A vantagem desta estratgia que agora
um artista grfico pode modificar o arquivo CSS e propiciar uma aparncia
melhor, sem tocar em seu cdigo. Pois afinal um layout agradvel sempre atrai
mais a ateno dos visitantes, possibilita que eles encontrem facilmente o que
desejam ver em sua pgina e voltem com mais freqncia ao site! Essa
aparncia pode ser associada a um grupo inteiro de pginas e modificada de
tempos em tempos com muita facilidade. Este um elemento importante para
voc reduzir seu tempo de manuteno dos sites. O que abre para voc
caminhos para ser um construtor profissional de pginas Web!
Auto-avaliao:
Esta uma das aulas mais complexas, ela apresentou um conjunto muito
grande de novas informaes. Voc realmente s ficar vontade com elas
depois de concluir a execuo de um razovel nmero de atualizaes de
pginas usando CSS. Talvez o mais importante neste ponto seja o
conhecimento dos caminhos que ela lhe abre e isso voc pode antever
executando bem os exerccios.
12

Aula 08

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Aula 08

Transféré par

Droits d'auteur :

Formats disponibles

Aula 8: Folhas de Estilo

do programador HTML ou de algum especialista em um utilitrio de criao de

Voc tambm pode definir

Estas informaes ligadas aparncia ou formato do site podem inclusive estar

por ponto-e-vrgulas, onde cada nome de seletor com propriedades e valores

A implementao de estilos por parte do Netscape mais recente e nem tudo

tamanho (x y), percentual (x y), top,

transparent, nome da cor, #RRGGBB

repeat, repeat-x, repeat-y,

Tabela 8.3 - Propriedades relacionadas aos espaamentos

Tabela 8.4 - Propriedades relacionadas s listas

circle, square, disc, lowerambos

Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto

left, center, right, justify

Tabela 8.6 - Propriedades relacionadas s bordas

tamanho, thin, thick, medium

tamanho, thin, thick, medium

tamanho, thin, thick, medium

cor width style

2.1. Valores das Propriedades

momento em que o navegador for aplicar o estilo. Por exemplo: 120%.

4.1. Classes Genricas

No caso da pseudo-classe, diferentemente de uma classe comum, o nome da

<--! define um elemento especial

Vous aimerez peut-être aussi