Escolar Documentos
Profissional Documentos
Cultura Documentos
17/04/2007
CSS
(Style Sheets - Folhas de Estilo)
Introduo...............................................................................................................................................................3
1.
1.1.
Histria...............................................................................................................................................................3
1.2.
Broswers que suportam......................................................................................................................................3
1.3.
No que eles podem nos ajudar?..........................................................................................................................3
2.
Porque que devemos formatar com estilos?.........................................................................................................3
2.1.
Vantagens dos estilos CSS.................................................................................................................................3
2.2.
As folhas de estilos permitem ganhar tempo e flexibilidade..............................................................................4
2.3.
O "mecanismo" de cascata.................................................................................................................................4
2.4.
Porque que a formatao com estilos superior?............................................................................................4
2.4.1. A formatao baseada em etiquetas e atributos estilsticos estava errada!.........................................................5
2.5.
Limitaes dos navegadores atuais ....................................................................................................................5
3.
Como criar estilos ...................................................................................................................................................5
4.
As folhas de estilo...................................................................................................................................................7
4.1.
Estilos externos ..................................................................................................................................................7
4.2.
Estilos incorporados...........................................................................................................................................8
4.3.
Estilos inline ......................................................................................................................................................8
5.
Tags Personalizadas................................................................................................................................................8
5.1.
Agrupar seletores ...............................................................................................................................................9
5.2.
Seletores de classe..............................................................................................................................................9
5.3.
Seletor de id .....................................................................................................................................................10
6.
Como se combinam estilos concorrentes ..............................................................................................................11
6.1.
A ordem da cascata ..........................................................................................................................................11
6.2.
Exemplos de Aplicao....................................................................................................................................11
7.
Herana de estilos entre elementos .......................................................................................................................13
8.
Propriedades dos fundos dos elementos (background) .........................................................................................16
8.1.
Exemplos .........................................................................................................................................................17
9.
Controlar o tipo de letra........................................................................................................................................23
9.1.
Propriedades "font":.........................................................................................................................................23
9.2.
Exemplos .........................................................................................................................................................25
9.2.1. Definir o tipo de letra para um texto ................................................................................................................25
9.2.2. Definir o tamanho das letras ............................................................................................................................26
9.2.3. Definir o estilo das letras .................................................................................................................................27
9.2.4. Todas as propriedades do tipo de letra numa nica declarao........................................................................28
10.
Formatao de texto .........................................................................................................................................29
10.1.
Propriedades do texto.......................................................................................................................................29
10.2.
Exemplos .........................................................................................................................................................30
10.2.1.
Definir a cor do texto ..................................................................................................................................30
10.2.2.
Especificar o espao que separa os caracteres.............................................................................................31
10.2.3.
Incios de pargrafo.....................................................................................................................................32
10.2.4.
Decorao do texto......................................................................................................................................33
10.2.5.
Controlar as letras de um texto....................................................................................................................34
11.
Unidades de Medida ........................................................................................................................................35
11.1.
Medio de distncias numa pgina HTML ....................................................................................................35
11.2.
Definio de cores............................................................................................................................................35
12.
Controlar as margens dos elementos................................................................................................................36
12.1.
Propriedades das Margens ...............................................................................................................................36
12.2.
Exemplos .........................................................................................................................................................36
12.2.1.
Definir a margem esquerda para um texto ..................................................................................................36
12.2.2.
Exemplo 02 - Definir a margem direita para um texto................................................................................37
12.2.3.
Todas as propriedades .................................................................................................................................38
13.
As linhas de contorno dos elementos (border) .................................................................................................39
13.1.
Propriedades das Margens ...............................................................................................................................39
13.2.
Exemplos .........................................................................................................................................................40
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 1 de 57
Programao de Computadores
13.2.1.
13.2.2.
14.
14.1.
14.2.
14.2.1.
14.2.2.
15.
15.1.
15.2.
15.2.1.
15.2.2.
16.
17.
18.
18.1.
18.2.
18.3.
18.4.
18.5.
18.6.
18.6.1.
19.
19.1.
19.2.
19.3.
19.4.
19.5.
19.6.
19.7.
19.7.1.
17/04/2007
Pgina 2 de 57
Programao de Computadores
17/04/2007
1. Introduo
CSS a mesma coisa que Style Sheets e que Folhas de Estilo. Voc j deve ter visto esses nomes em
vrios lugares. CSS mais uma forma de aperfeioar seus documentos, o CSS tem muitos tipos de
definio aqui veremos muitas delas.
A forma recomendada para formatar as pginas escritas em XHTML baseia-se nos padres "Cascading
Style Sheets" (folhas de estilos em cascata), publicados pelo World Wide Web Consortium (W3C).
A utilizao deste padro da Web permite ganhar tempo, dar consistncia e facilitar muito a escrita de
pginas para a Web. Neste tutorial vamos aprender a usar folhas de estilos em cascata (estilos CSS) para
criar pginas mais flexveis, mais leves, e controlar o seu aspecto grfico com maior preciso e com maior
facilidade na correo de erros.
Os "Style sheets" ou "Folhas de Estilo" para a Web foram propostos e desenvolvidos h alguns anos,
mas s recentemente eles ganharam uma divulgao mais ampla. A razo a de que os style sheets so
inteis a no ser que haja navegadores que os suportem, e nenhum browser largamente utilizado fez isso at
que a Microsoft comeou a oferecer suporte parcial para os Cascading Style Sheets (CSS) na verso 3.0 do
Internet Explorer. Atualmente dado suporte para os style sheets no IE 3.0 e superior, e no Netscape 4.0 e
superior.
1.1. Histria
No final de 1996 foi criado os Style Sheets. Apenas o navegador Internet Explorer 3.0 usava os Style
Sheets. Era ainda muito pouco conhecido e no tinha muita utilidade. Hoje o Style Sheets est em sua
segunda fase, a fase 2 (Level 2), hoje muitas pginas j usam.
Os estilos CSS foram adicionados pelo W3C s recomendao HTML 4 e XHTML para resolver
problemas muito srios que afetavam a qualidade das pginas escritas em HTML e dificultavam a
sua manuteno.
Pgina 3 de 57
Programao de Computadores
17/04/2007
A utilizao de folhas de estilos externa permite poupar tempo, ganhar flexibilidade e aumentar a
consistncia das pginas que constituem um website.
As pginas que usam estilos CSS, para alm de serem mais fceis de escrever, so tambm mais
leves e aparecem mais depressa no navegador.
Pgina 4 de 57
Programao de Computadores
17/04/2007
Mas isto no era suficiente porque havia coisas que no podiam ser feitas usando apenas os elementos
disponveis. Para dar aos designers aquilo que eles pediam os criadores dos navegadores acharam que era
boa idia inventarem as suas prprias etiquetas e acrescentaram atributos estilsticos aos que j existiam.
Estas extenses permitiram usar o HTML para dar cores e estilos diferentes ao texto e aplicar outras
formataes.
Pgina 5 de 57
Programao de Computadores
17/04/2007
Pgina 6 de 57
Programao de Computadores
17/04/2007
<body>
<p>
O texto deste pargrafo tem tipo de letra "comic sans ms".
</p>
</body>
</html>
Note como fcil aplicar todas as declaraes ao elemento pargrafo (P) e como cada declarao,
exceto a ltima, seguida pelo caracter de ponto-e-vrgula exigido.
4. As folhas de estilo
Voc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar uma combinao dos
trs mtodos nos seus web sites. A maneira como as regras interagem entre si est relacionada parte em
cascata. Os trs lugares so:
1) em um documento separado fora de todos os documentos HTML;
2) no cabealho de um documento HTML
3) dentro de uma tag de HTML. Cada um destes mtodos tem um nome e afeta as pginas HTML
em seu site de um modo diferente, como discutido aqui:
Externo: significa que voc coloca as regras de CSS em um arquivo separado, e ento sua pgina
HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em
um ou mais arquivos que podem ser aplicadas em alguma pgina do seu web site.
Incorporado: significa que voc especifica as regras de CSS no cabealho do documento. As regras
incorporadas afetam somente a pgina atual.
Inline: significa que voc especifica as regras de CSS dentro da tag de HTML. Essas regras afetam
somente a tag atual.
Arquivo meu_estilo.css
h1 {font-family: 'comic sans ms';
font-size: 36pt;
color: blue}
p {font-family: 'Courier';
margin-left: 0.5in}
Agora, para utilizar os estilos definidos neste arquivo .css voc precisa adicionar a tag a seguir ao
cabealho da pgina, onde nome_do_arquivo uma referncia absoluta ou relativa ao arquivo .css.
<link rel="stylesheet" href="http://www.iecentral.net/meu_estilo.css" type="text/css">
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 7 de 57
Programao de Computadores
17/04/2007
OBS: Voc deve inserir este texto entre as tags <head>...</head> e colocar a localizao correta do seu
arquivo e seu nome.
Note que em vez das tags <style>...</style>, voc apenas utiliza um atributo style dentro da tag para
definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, voc as coloca entre aspas,
separando-as com ponto-e-vrgula como de costume.
5. Tags Personalizadas
Com as classes de estilo, possvel definir diversas variaes de uma nica tag. Por exemplo, voc
poderia fazer um estilo de pargrafo "texto alinhado direita", um estilo de pargrafo "texto centralizado" e
assim por diante, criando mltiplos temas em torno da tag de pargrafo (<p>).
Voc pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (No h
sentido em definir uma classe em um estilo inline!) A sintaxe praticamente idntica sintaxe normal para
os estilos externo e incorporado, com adio de um ponto e o nome da classe depois do elemento na qual
ser utilizado o atributo.
<style type="text/css"><!-elemento.nomedaClasse {atrbuto:valor; ... }
--></style>
Pgina 8 de 57
Programao de Computadores
17/04/2007
Para dar um exemplo mais prtico, uma classe de estilo que eu particularmente uso muito nos links de
minhas pginas a seguinte:
<style type="text/css"><!-a.meuslinks {color: blue; text-decoration: none}
--></style>
Depois apenas adiciono o atributo class="meuslinks" aos links em que eu desejar que fiquem azuis e
no-sublinhados. Veja como deve ficar:
<a class="meuslinks" href="http://www.iecentral.net">
</style>
</head>
</body>
</html>
Pgina 9 de 57
Programao de Computadores
17/04/2007
Nota: O atributo class, como qualquer outro atributo, s pode ser especificado uma nica vez num dado
elemento. O exemplo seguinte est errado:
<p class="direita" class="verde">
Este pargrafo tem um erro causado pela utilizao repetida do atributo
class.
</p>
Os seletores de classe tambm podem ser definidos sem colocarmos o nome de um elemento no incio
da definio. Quando isso acontece as definies podem ser aplicadas a qualquer elemento cujo atributo
class tenha o valor correto. O exemplo seguinte define uma classe que pode ser utilizada com qualquer
elemento do HTML:
<html>
<head>
<style type="text/css">
.centro
{ text-align: center }
</style>
</head>
<body>
<h2 class="centro">
Cabealho alinhado ao centro
</h2>
<p class="centro">
Este pargrafo tambm est alinhado ao centro.
</p>
</body>
</html>
5.3. Seletor de id
O seletor de id diferente do seletor de classe porque se aplica a um nico elemento da pgina. As
regras do HTML ditam que os valores do atributo id no podem repetir-se numa mesma pgina. Da resulta
que o nmero de elementos no documento com um determinado id um ou zero.
A regra de seleo para o estilo definido no exemplo seguinte indica que ele s pode ser aplicado a um
elemento <p> que tenha o valor "para1" no atributo id:
<html>
<head>
<style type="text/css">
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 10 de 57
Programao de Computadores
17/04/2007
p#para1 {
text-align: center;
color: red
}
</style>
</head>
<body>
<p id="para1">
Este pargrafo est alinhado ao centro e
tem cor vermelha.
</p>
</body>
</html>
Se quisermos que a regra se aplique a qualquer elemento que tenha o id para1 basta escrev-la na forma
seguinte:
*#para1
{
text-align: center;
color: red
}
A regra acima aplicvel a qualquer elemento que tenha o id correto porque o seletor * diz que ela se
aplica a todos os elementos. No exemplo seguinte ela seria aplicada ao elemento <h1>:
<h1 id="para1">As msicas do Bonga so bu de fixes</h1>
Estilos definidos por omisso (so aplicados sempre que no existirem outros que se sobreponham a eles)
2.
Estilos definidos numa folha de estilos interna (dentro do elemento <style>) ou num arquivo externo
3.
Estilos "inline" (definidos atravs do atributo style nos elementos do documento HTML)
Assim, temos que os estilos que so definidos no prprio elemento atravs do atributo style tm a
prioridade mais elevada. As definies que o atributo style faz sobrepem-se a qualquer definio que
tenha sido feita antes.
O exemplo de aplicao seguinte ilustra melhor este mecanismo.
Pgina 11 de 57
Programao de Computadores
17/04/2007
Apesar de o exemplo de aplicao anterior ser elucidativo, analisemos mais um exemplo. Suponhamos
que uma folha de estilos externa define as seguintes propriedades para o seletor h3:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
Mas existe uma folha de estilos interna com as seguintes propriedades tambm para o seletor h3:
h3
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 12 de 57
Programao de Computadores
17/04/2007
{
text-align: right;
font-size: 20pt
}
Se a pgina que contm a folha de estilos interna usar o elemento <link> para se ligar folha de estilos
externa indicada antes, ento s duas definies sero combinadas para produzir a seguinte verso final
para o seletor h3:
h3
{
color: red;
text-align: right;
font-size: 20pt
}
A cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de letra foram substitudos
pelas definies dadas na folha interna.
Pgina 13 de 57
Programao de Computadores
17/04/2007
No exemplo que acabamos de ver, a folha de estilos diz que o texto dos elementos <div> deve ter cor
azul. O pargrafo que est dentro de um elemento <div> herda a cor azul porque a propriedade color
herdada pelos descendentes de um elemento. J o segundo pargrafo no est dentro de nenhum elemento
que lhe deixe uma "herana" (que neste caso a propriedade color) por isso o seu texto tem a cor normal.
H outras propriedades que s afetam o elemento ao qual so aplicadas e no se propagam aos seus
descendentes. Diz-se que estas propriedades no so herdadas. O exemplo seguinte semelhante ao
anterior, mas agora propriedade herdada color, juntamos a propriedade border, que no herdada:
<html>
<head>
<style type="text/css">
div
{ color: blue;
border: solid thin red
}
</style>
</head>
<body>
<div>
Os elementos <div> recebem uma linha de contorno vermelha
(border) e texto com cor azul.
<p>
Este pargrafo est dentro de um elemento <div>.
Ele herda a cor azul, mas no herda a linha de contorno
(border).
</p>
<div>
Tal como o elemento <div> principal este elemento
<div> recebe a sua prpria linha de contorno.
</div>
</div>
</body>
</html>
Pgina 14 de 57
Programao de Computadores
17/04/2007
Como pode observar a propriedade color propaga-se ao elemento <p> mas a propriedade border no.
Pgina 15 de 57
Programao de Computadores
17/04/2007
Descrio
Valores
background
background-attachment
A propriedade background-attachment
indica se a imagem de fundo deve
scroll
permanecer imvel na janela do browser
fixed
ou se acompanha o contedo quando o
movemos (scroll).
background-color
color-rgb
color-hex
color-name
transparent
background-image
url
none
background-position
top left
top center
top right
center left
center center
Define o local onde se comea a desenhar
center right
a imagem de fundo.
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat
W3C
CSS1
CSS1
CSS1
CSS1
repeat
repeat-x
repeat-y
no-repeat
CSS1
Pgina 16 de 57
Programao de Computadores
17/04/2007
8.1. Exemplos
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
<title></title>
</head>
<body>
<h1>Isto um cabealho de nvel 1</h1>
<h2>Isto um cabealho de nvel 2</h2>
<p>Isto um pargrafo</p>
</body>
</html>
Pgina 17 de 57
Programao de Computadores
17/04/2007
<html>
<head>
<style type="text/css">
body
{
background-image: url("praia.jpg")
}
</style>
<title></title>
</head>
<body>
<p>Texto da pgina</p>
<br />
<p>Texto da pgina</p>
<br />
<p>Texto da pgina</p>
<br />
<p>Texto da pgina</p>
</body>
</html>
Pgina 18 de 57
Programao de Computadores
17/04/2007
<html>
<head>
<style type="text/css">
body
{
background-image: url("praia.jpg");
background-repeat: repeat-y
}
</style>
<title></title>
</head>
<body>
<p>Texto da pgina</p>
<br/>
<p>Texto da pgina</p>
<br/>
<p>Texto da pgina</p>
<br/>
<p>Texto da pgina</p>
</body>
</html>
Pgina 19 de 57
Programao de Computadores
17/04/2007
<html>
<head>
<style type="text/css">
body
{
background-image: url("praia.jpg");
background-repeat: no-repeat;
background-position: center center
}
</style>
<title></title>
</head>
<body>
<p>Texto da pgina</p>
<br />
<p>Texto da pgina</p>
<br />
<p>Texto da pgina</p>
<br />
<p>Texto da pgina</p>
</body>
</html>
Pgina 20 de 57
Programao de Computadores
17/04/2007
<html>
<head>
<style type="text/css">
body
{
background-image: url("praia.jpg");
background-repeat: no-repeat;
background-attachment: fixed
}
</style>
<title></title>
</head>
<body>
<p style="width: 1400px">
Esta imagem de fundo permanece imvel quando se desce ou sobe
pgina ou quando se desloca para a direita ou para a esquerda
</p>
<br /><br />
<p> Esta imagem de fundo permanece imvel quando se desce
ou sobe na pgina ou quando se desloca para a direita ou para
esquerda
</p>
<br /><br />
<p> Esta imagem de fundo permanece imvel quando se desce
ou sobe na pgina ou quando se desloca para a direita ou para
esquerda
</p>
<br /><br />
<p> Esta imagem de fundo permanece imvel quando se desce
ou sobe na pgina ou quando se desloca para a direita ou para
esquerda
</p>
<br /><br />
</body>
</html>
Pgina 21 de 57
na
Programao de Computadores
17/04/2007
<html>
<head>
<style type="text/css">
body
{
background: #00ffff url("praia.jpg") no-repeat fixed center
center
}
</style>
<title></title>
</head>
<body>
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
</body>
</html>
Pgina 22 de 57
Programao de Computadores
17/04/2007
Valores
W3C
font
icon
Aceita os valores que podem ser dados s restantes propriedades desta tabela
menu
mais aqueles que se encontram na coluna seguinte desta linha. Oferece-nos
message-box
uma forma abreviada para definir numa nica declarao todas as
small-caption
propriedades relativas ao tipo de letra.
status-bar
CSS1
font-family
CSS1
xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
comprimento
%
font-size
font-sizeadjust
Pgina 23 de 57
CSS1
CSS2
Programao de Computadores
17/04/2007
font-stretch
normal
wider
ultra-condensed
extra-condensed
condensed
CSS2
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style
normal
italic
oblique
CSS1
font-variant
normal
small-caps
CSS1
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
CSS1
font-weight
Pgina 24 de 57
Programao de Computadores
17/04/2007
9.2. Exemplos
9.2.1. Definir o tipo de letra para um texto
<html>
<head>
<style type="text/css">
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
<title></title>
</head>
<body>
<h3>Isto um cabealho de nvel 3</h3>
<p>Isto um pargrafo</p>
<p class="sansserif">
Isto um pargrafo com uma class diferente
</p>
</body>
</html>
Pgina 25 de 57
Programao de Computadores
17/04/2007
Pgina 26 de 57
Programao de Computadores
17/04/2007
Pgina 27 de 57
Programao de Computadores
17/04/2007
Pgina 28 de 57
Programao de Computadores
17/04/2007
Descrio
Valores permitidos
W3C
color
cor
CSS1
direction
ltr
rtl
CSS2
letter-spacing
normal
comprimento
CSS1
left
right
center
justify
none
underline
overline
line-through
blink
text-align
text-decoration
text-indent
CSS1
CSS1
CSS1
text-transform
unicode-bidi
normal
embed
bidi-override
white-space
normal
pre
nowrap
CSS1
word-spacing
normal
comprimento
CSS1
CSS1
CSS2
Pgina 29 de 57
Programao de Computadores
17/04/2007
10.2. Exemplos
10.2.1. Definir a cor do texto
<html>
<head>
<style type="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
<title></title>
</head>
<body>
<h1>Cabealho de nvel 1</h1>
<h2>Cabealho de nvel 2</h2>
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
<p>Texto da pgina</p>
<br /><br />
</body>
</html>
Pgina 30 de 57
Programao de Computadores
17/04/2007
Pgina 31 de 57
Programao de Computadores
17/04/2007
Pgina 32 de 57
Programao de Computadores
17/04/2007
Pgina 33 de 57
Programao de Computadores
17/04/2007
Pgina 34 de 57
Programao de Computadores
17/04/2007
Descrio
percentagem de um valor
in
polegadas (inch)
cm
centmetros
mm
milmetros
em
ex
1 ex igual altura da letra "x" no tipo de letra em uso (cerca de metade do valor da
propriedade font-size).
pt
pc
px
Descrio
color_name
rgb(x,x,x)
Um valor rgb dado como uma percentagem do valor mximo de cor (por exemplo,
rgb(100%,0%,0%) a cor encarnada)
#rrggbb
Pgina 35 de 57
Programao de Computadores
17/04/2007
Descrio
Valores
W3C
margin
margin-top
margin-right
margin-bottom
margin-left
CSS1
margin-bottom
auto
comprimento
%
CSS1
margin-left
auto
comprimento
%
CSS1
margin-right
auto
comprimento
%
CSS1
margin-top
auto
comprimento
%
CSS1
12.2. Exemplos
12.2.1. Definir a margem esquerda para um texto
<html>
<head>
<style type="text/css">
p.margin {margin-left: 2cm}
</style>
<title></title>
</head>
<body>
<p> Este pargrafo contm algum texto no formatado com
estilos CSS.
</p>
<p class="margin">
Neste pargrafo usamos estilos CSS para tornar a
margem esquerda um pouco mais larga.
</p>
</body>
</html>
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 36 de 57
Programao de Computadores
17/04/2007
Pgina 37 de 57
Programao de Computadores
17/04/2007
Pgina 38 de 57
Programao de Computadores
17/04/2007
Descrio
border
CSS1
border-bottom
CSS1
border-bottom-color
border-color
CSS2
border-bottom-style
CSS2
border-bottom-width
CSS1
border-color
CSS1
border-left
CSS1
border-left-color
border-color
CSS2
border-left-style
CSS2
border-left-width
CSS1
border-right
CSS1
Valores
W3C
cor
Pgina 39 de 57
Programao de Computadores
17/04/2007
border-right-color
border-color
CSS2
border-right-style
CSS2
border-right-width
CSS1
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-style
border-top
CSS1
border-top-color
border-color
CSS2
border-top-style
border-style
CSS2
border-top-width
CSS1
border-width
thin
medium
thick
comprimento
CSS1
CSS1
13.2. Exemplos
13.2.1. Definir as cores das quatro linhas de fronteira
<html>
<head>
<style type="text/css">
p.stl1
{
border-style: solid;
border-color: #0000ff
}
p.stl2
{
border-style: solid;
border-color: #ff0000
#0000ff
}
p.stl3
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 40 de 57
Programao de Computadores
17/04/2007
{
border-style: solid;
border-color: #ff0000
#00ff00 #0000ff
}
p.stl4
{
border-style: solid;
border-color: #ff0000
#00ff00 #0000ff
rgb(250,0,255)
}
</style>
<title></title>
</head>
<body>
<p class="stl1">Pargrafo com o estilo "stl1"</p>
<p class="stl2">Pargrafo com o estilo "stl2"</p>
<p class="stl3">Pargrafo com o estilo "stl3"</p>
<p class="stl4">Pargrafo com o estilo "stl4"</p>
</body>
</html>
Pgina 41 de 57
Programao de Computadores
17/04/2007
<style type="text/css">
p {
border: medium double #ff00ff
}
</style>
<title></title>
</head>
<body>
<p>Pargrafo com texto</p>
</body>
</html>
Descrio
Valores
W3C
padding
padding-top
padding-right
padding-bottom
padding-left
CSS1
padding-bottom
CSS1
padding-left
CSS1
padding-right
CSS1
padding-top
CSS1
Pgina 42 de 57
Programao de Computadores
17/04/2007
14.2. Exemplos
14.2.1. Definir o espao em branco entre o limite esquerdo e o contedo de uma clula
de tabela
<html>
<head>
<style type="text/css">
td {padding-left: 20px}
</style>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td> Nesta clula de tabela existe uma separao de 20px
entre o contedo e o limite do lado esquerdo.
</td>
</tr>
</table>
</body>
</html>
Pgina 43 de 57
Programao de Computadores
<td>
17/04/2007
</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
<td class="stl2">
Nesta clula de tabela existe uma separao de 22px
entre o contedo e os limites superior e inferior.
Entre o contedo e os limites esquerdo e direito a
separao de 52px.
</td>
</tr>
</table>
</body>
</html>
Pgina 44 de 57
Programao de Computadores
17/04/2007
Descrio
Valores
W3C
height
auto
comprimento
%
CSS1
line-height
normal
nmero
Define a distncia entre as linhas
comprimento
%
CSS1
max-height
none
Define a altura mxima de um
comprimento
elemento
%
CSS2
max-width
none
Define a largura mxima de um
comprimento
elemento
%
CSS2
min-height
CSS2
min-width
CSS2
width
auto
Define a largura de um elemento %
comprimento
CSS1
15.2. Exemplos
15.2.1. Definir a altura e a largura de uma imagem
<html>
<head>
<style type="text/css">
img.normal
{
height: auto;
width: auto
}
img.grande
{
height: 64px;
width: 64px
}
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 45 de 57
Programao de Computadores
17/04/2007
img.pequeno
{
height: 16px;
width: 16px
}
</style>
<title></title>
</head>
<body>
<img class="normal" height="32" width="32"
src="2569.gif"/><br/><br/>
<img class="grande" height="32" width="32"
src="2569.gif"/><br/><br/>
<img class="pequeno" height="32" width="32" src="2569.gif"/>
</body>
</html>
Pgina 46 de 57
Programao de Computadores
17/04/2007
Pgina 47 de 57
Programao de Computadores
17/04/2007
16. Posicionamento
Propriedade
Descrio
bottom
CSS2
clip
CSS2
left
CSS2
overflow
visible
Define o que acontece quando o
hidden
contedo de um elemento excede a sua
scroll
rea.
auto
CSS2
right
CSS2
top
CSS2
vertical-align
baseline
sub
super
top
Define o alinhamento vertical de um text-top
elemento.
middle
bottom
text-bottom
comprimento
%
CSS1
z-index
CSS2
Valores
W3C
Pgina 48 de 57
Programao de Computadores
17/04/2007
Propriedade
Descrio
list-style
CSS1
list-style-image
CSS1
list-style-position
CSS1
list-style-type
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
Define o tipo de marcador a
lower-greek
usar.
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
CSS1
marker-offset
Valores
W3C
auto
comprimento
Pgina 49 de 57
CSS2
Programao de Computadores
17/04/2007
18. Pseudo-Classes
As pseudo-classes permitem-nos associar efeitos especiais a seletores CSS ou a partes de
seletores.
18.1. Sintaxe
A sintaxe das pseudo-classes a seguinte:
selector:pseudo-classe { propriedade: valor }
As classes CSS tambm podem ser utilizadas com pseudo-classes:
selector.classe:pseudo-classe { propriedade: valor }
18.2. Pseudo-classes para ligaes
a:link { color: #FF0000 } /* link ainda no visitado */
a:visited { color: #00FF00 } /* link j visitado */
a:hover
{ color: #FF00FF } /* link que est sob o ponteiro do mouse */
a:active
{ color: #0000FF }
/* link seleccionado */
Pgina 50 de 57
Programao de Computadores
17/04/2007
<p>
Este o segundo pargrafo.
Este pargrafo no ser deslocado para a direita.
</p>
</div>
mas o pargrafo do cdigo HTML seguinte no ser afetado porque no o primeiro descendente
do elemento div:
<div>
<h3>Cabealho</h3>
<p>
Este o primeiro pargrafo.
Este pargrafo no ser deslocado para a direita
porque no o primeiro descendente do elemento div.
</p>
</div>
No exemplo seguinte o seletor afetar um elemento <em> que aparea em primeiro lugar
(primeiro descendente) dentro de um elemento p, fazendo com que o seu contedo seja escrito em
negrito:
p:first-child em
{
font-weight:bold
}
Por exemplo, o elemento <em> no HTML seguinte o primeiro descendente do pargrafo:
<p>Hrcules <em>forte</em> e corajoso.</p>
No exemplo seguinte o seletor afetar um elemento <a> que aparea em primeiro lugar
(primeiro descendente) dentro de um elemento qualquer, fazendo com que a sua propriedade textdecoration tenha o valor none:
a:first-child {
text-decoration:none
}
Se aplicarmos este estilo ao exemplo seguinte vemos que o primeiro elemento <a> do
HTML o primeiro descendente do pargrafo e por isso no vai estar sublinhado, mas o segundo
elemento <a> vai estar sublinhado:
<p>
Visite o <a href="http://www.w3.org">W3C</a>
e consulte as recomendaes para CSS.
Visite o <a href="http://www.w3.org">W3C</a>
e consulte as recomendaes para o HTML.
</p>
Pgina 51 de 57
Programao de Computadores
17/04/2007
W3C
Finalidade
active
CSS1
hover
CSS1
link
CSS1
visited
CSS1
first-child
CSS2
lang
CSS2
18.6. Exemplos
18.6.1. Dar cores diferentes a uma ligao
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<title></title>
</head>
Prof. Anderson Parreira e Prof. Humberto Innarelli
Pgina 52 de 57
Programao de Computadores
17/04/2007
<body>
<p style="font-weight: bold">
<a href="ex_css.htm">Isto uma ligao</a>
</p>
<p><b>Nota:</b> a:hover deve ser definido DEPOIS de a:link e
de a:visited j esto definidos para que tudo funcione bem.
</p>
<p><b>Nota:</b> a:active deve ser definido DEPOIS de a:hover
j est definido para que tudo funcione bem.
</p>
</body>
</html>
Pgina 53 de 57
Programao de Computadores
17/04/2007
19. Pseudo-elementos
Os pseudo-elementos so usados em CSS para adicionar efeitos a alguns seletores ou a
partes de seletores.
19.1. Sintaxe
A sintaxe dos pseudo-elementos a seguinte:
selector:pseudo-elemento { propriedade: valor }
Pgina 54 de 57
Programao de Computadores
17/04/2007
Pgina 55 de 57
Programao de Computadores
17/04/2007
No output teremos a primeira letra de cada pargrafo com o dobro do tamanho (24pt) e cor
encarnada. Para isso as restantes letras da primeira linha tero cor azul. O resto do pargrafo ser
normal.
19.6. Lista de pseudo-elementos
Pseudo-elementos
W3C
Finalidade
first-letter
CSS1
first-line
CSS1
before
CSS2
after
CSS2
Pgina 56 de 57
Programao de Computadores
17/04/2007
19.7. Exemplos
19.7.1. Dar um estilo especial primeira letra de um texto
<html>
<head>
<style type="text/css">
div:first-letter
{
color: red;
font-size:xx-large
}
</style>
<title></title>
</head>
<body>
<p><b>Nota:</b> O Internet Explorer 5.0 no
suporta o pseudo-elemento "first-letter".</p>
<div>
O pseudo-elemento "first-letter" permite dar um estilo
especial ao texto fazendo com que a primeira letra de
um bloco tenha um estilo diferente.
</div>
</body>
</html>
Pgina 57 de 57