Isaac E.

Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

FOLHA DE ESTILO CSS

(Cascading Style Sheets) Apostila Completa

Por: Isaac E. Batista Instrutor do curso de Web Designer (CETAI-BH) http://web-isaac.blogspot.com/ e-mail: webisaac@ymail.com

A atual apostila consistiu de estudos pessoais sobre o CSS e da sntese de algumas pginas do site do autor Maurcio Samy Silva: Maujor (http://www.maujor.com). Tem o objetivo exclusivamente didtico, vedado seu uso comercial.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

ndices
FOLHA DE ESTILO CSS...................................................................................................1 (Cascading Style Sheets)......................................................................................................1 CSS (Cascading Style Shet)..................................................................................................5 Sintaxe do CSS...............................................................................................................5 Modos de aplicao.......................................................................................................5
Enbedding (Interno).................................................................................................................6 Linking.....................................................................................................................................6 Inline.........................................................................................................................................7

Prevalecncia................................................................................................................8 Introduo aos tipos de seletores..................................................................................8

Seletor Tag...............................................................................................................................8

Propriedades e Valores CSS.................................................................................................9 A propriedade font ::.....................................................................................................9

As fontes nos elementos HTML...............................................................................................9 Valores vlidos para as propriedades da fonte.......................................................................10

Como estudar e entender os exemplos........................................................................13 color ... A cor da fonte................................................................................................14

Este o efeito da folha de estilo acima: ................................................................................14

font-family...O tipo de fonte .......................................................................................14

Notas: ....................................................................................................................................15

font-size...O tamanho de fonte ...................................................................................15

Este o efeito da folha de estilo acima: ................................................................................15

font-style...O estilo de fonte .......................................................................................16

Este o efeito da folha de estilo acima: ................................................................................16

font-variant...fontes maisculas "menores"................................................................16

Este o efeito da folha de estilo acima: ................................................................................17

font-weight...Peso das fontes - negrito (intensidade da cor)......................................17

Este o efeito da folha de estilo acima: ................................................................................17

font...Todas as propriedades das fontes em uma declarao nica...........................17

Este o efeito da folha de estilo acima: ................................................................................18 Notas......................................................................................................................................18

A propriedade background................................................................................................19 O fundo dos elementos HTML.....................................................................................19 Valores vlidos para as propriedades do fundo.........................................................19
Como estudar e entender os exemplos....................................................................................20

A cor do fundo ............................................................................................................20

Este o efeito da folha de estilo acima: ................................................................................21

A imagem de fundo .....................................................................................................21

Repetir verticalmente a imagem de fundo .............................................................................21 Repetir horizontalmente a imagem de fundo .........................................................................22 Posicionar uma imagem de fundo...........................................................................................22

Mudando o estilo das listas HTML...................................................................................22 Valores vlidos para as propriedades do lista............................................................23
Como estudar e entender os exemplos....................................................................................24

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

list-style-image...imagem para marcadores de lista...................................................24

A folha de estilo acima resultar nesta lista: .........................................................................24

list-style-position...posio dos marcadores de lista..................................................24 List-style-typ e...os tipos de marcadores de lista........................................................25

Definir os marcadores de listas no ordenadas......................................................................25 Este o efeito da folha de estilo acima:.................................................................................26

Definir os marcadores de listas ordenadas.................................................................27

Este o efeito da folha de estilo acima:.................................................................................28

list-style...duas propriedades das listas em uma declarao nica............................28

A folha de estilo acima resultar nesta lista: .........................................................................29

Ajustar uma imagem de fundo fixa, que no "rola" com a tela..................................29 Todas as propriedades do fundo em uma declarao nica.......................................30 Seletores CSS 2.1 - Parte 1..................................................................................................30 Seletor - Conceitos bsicos.........................................................................................31 Seletor - Viso geral ...................................................................................................32
descendente ...........................................................................................................................35 ancestral ................................................................................................................................35 filho .......................................................................................................................................35 pai ..........................................................................................................................................35 sibling (irmos) .....................................................................................................................35

Seletores - Simples e combinados...............................................................................35 O seletor universal .....................................................................................................36 Seletores - tipo.............................................................................................................36 Seletor - classe.............................................................................................................36 Seletor - ID .................................................................................................................37 Seletores CSS 2.1 - Parte 2..................................................................................................39 Elementos de combinao...........................................................................................39 Seletores descendentes................................................................................................39 Seletores filho .............................................................................................................40 Seletores irmos adjacentes (sibling selectors)...........................................................41 Grupando.....................................................................................................................41 Seletores de atributo....................................................................................................42
[att] ........................................................................................................................................42 [att=val] .................................................................................................................................42 [att~=val] ..............................................................................................................................43 [att|=val] ................................................................................................................................43

Seletores CSS 2.1 - Parte 3 ::..............................................................................................43 Pseudo classes e pseudo-elementos.............................................................................44 Pseudo classes.............................................................................................................44
:first-child...............................................................................................................................44 :link e :visited.........................................................................................................................45 :hover, :active, e :focus...........................................................................................................45 :hover......................................................................................................................................45 :active ....................................................................................................................................45 :focus......................................................................................................................................45 :lang........................................................................................................................................46

Pseudo-elementos........................................................................................................46

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

:first-line.................................................................................................................................46 :first-letter..............................................................................................................................46 :before e :after........................................................................................................................47

Problemas com o Internet Explorer............................................................................47 Voc tem o poder use-o corretamente ............................................................................48 Extras:..................................................................................................................................48 Efeitos CSS em cabealhos :.......................................................................................48
Introduo..............................................................................................................................48

Os efeitos deste tutorial...............................................................................................48 Consideraes iniciais ................................................................................................49

O Cabealho nmero 1...........................................................................................................49 O Cabealho nmero 2...........................................................................................................50 O Cabealho nmero 3...........................................................................................................50 O Cabealho nmero 4...........................................................................................................50 O HTML para voc fazer suas experincias .........................................................................51 Barra de rolagem na esquerda da tela....................................................................................51

Referncias Bibliogrficas..................................................................................................53

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

CSS (Cascading Style Shet)

Folhas de Estilo em Cascata. um complemento linguagem HTML, usado para criar formataes adicionais e alterar suas propriedades e valores.

Sintaxe do CSS
Seletor {propriedade: valor;}

Declarao

Ex:
Separador dois pontos

Separador ponto e vrgula

body {backgound-color: #000;}
Valor Propriedade Cheve de abertura Seletor (no caso tag) Chave de Fechamento

Chave de fechamento

Modos de aplicao
1. Embedding (Interno)

2. Linking (Lincado ou Externo)

3. In Line ( Em linha)

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

Enbedding (Interno)
usado quando se quer aplicar um estilo a uma pgina especificamente, ou seja, quando trabalhamos com poucas pginas ou uma somente.

Exemplo de uso
<html> <head> <title>Seletor Tag</title> <style type=text/css> <!-body { background-color:#000; } h1 { font-family:tahoma,verdana, arial; } --> </style> </head> <body> <h1>titulo 1</h1> <p>texto 1</p> <h1>titulo 2</h1> <p>texto 2</p> </body> </html>

O estilo interno criado dentro da pgina HTML, entre a tag <head> e logo aps a tag <title>.

Linking
O estilo externo usado quando se quer formatar um nmero maior de pginas. Assim, no preciso colocar o cdigo CSS em todas elas. Para cri-lo, abri-se um novo

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

documento no Dreamweaver, Bloco de Notas ou outro editor de sua preferncia, e o salva com a exteno .css . A estrutura interna do documento a seguinte:

estilo.css
/*Este um comentrio no CSS*/ body { background-color:#fff; } h1 { font-family:tahoma,verdana, arial; }

Aps cri-lo, preciso vincul-lo ao HTML, para que as formataes sejam aplicveis. Para isso, dentro da pgina HTML, entre as tags head, digita-se a seguinte tag:

<link rel=styleshet type=text/css href=estilo.css media=scream />

Exemplo completo de uso:

<html> <head> <title>Seletor Tag</title> <link rel=styleshet type=text/css href=estilo.css media=scream /> </head> <body> <h1>titulo 1</h1> <p>texto 1</p> <h1>titulo 2</h1> <p>texto 2</p> </body> </html>

Inline
O estilo in line usado quando se quer aplicar um estilo a uma linha do trecho do cdigo HTML. Sua vinculao simples, bastando acrescentar tag, que se quer alterar, a propriedade style.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

Exemplo de uso
<html> <head> <title>Seletor Tag</title> </head> <body style=background-color:#fff;> <h1 style=font-family: tahoma, verdana, arial;>titulo 1</h1> <p>texto 1</p> </body> </html>

Como vimos, o estilo In Line colocado diretamente na tag que se quer estilizar, atravs do atributo style, para, depois, ento, adicionar as propriedades e valores CSS.

Prevalecncia
a ordem que prevalecem em relao ao outro, ou seja, qual se aplica primeiro.

1 In Line 2 Embedding (Interno) 3 Linking (Lincado)

Introduo aos tipos de seletores

Os seletores podem ser tags, Ids, classes, pseudo classes, pseudo elementos, dentre outros. As propriedades podem ser uma cor de fundo, fonte e margem, por exemplo. J os valores poderiam ser o cdigo da cor, o nome da fonte e a espessura da margem.

Seletor Tag

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

Quando formatamos uma tag, como por exemplo <h1>, pelo CSS, definindo suas propriedades e valores; a formatao se aplicar a essa tag todas as vezes que ele aparecer no documento.
Ex: <html> <head> <title>Seletor Tag</title> <style type=text/css> <!-h1 {color:red; text-decoration:underline;} --> </style> </head> <body> <h1>titulo 1</h1> <p>texto 1</p> <h1>titulo 2</h1> <p>texto 2</p> <h1>titulo 3</h1> <p>texto 3</p> </body> </html>

Faam o exemplo em um editor e vejam o resultado no navegador.

Os demais tipos de seletores sero vistos conforme o prosseguimento da apostila.

Propriedades e Valores CSS

A propriedade font ::
As fontes nos elementos HTML
As propriedades para as fontes, definem as caractersticas (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

10

As propriedades bsicas para fontes e que abordaremos neste tutorial so as listadas abaixo:

color:...................cor da fonte

font-family:..........tipo de fonte

font-size:.............tamanho de fonte

font-style:............estilo de fonte

font-variant:.........fontes maisculas de menor altura

font-weight:.........quanto mais escura a fonte (negrito)

font:....................maneira abreviada para todas as propriedades

Valores vlidos para as propriedades da fonte

1. color: cdigo hexadecimal: #FFFFFF

1.1.

cdigo rgb: rgb(255,235,0)

1.2.

nome da cor: red, blue, green...etc

2. font-family:

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

11

2.1.

family-name: define-se pelo nome da fonte,

p. ex:"verdana", "helvetica", "arial", etc.

2.2.

generic-family: define-se pelo nome genrico,

p. ex:"serif", "sans-serif", "cursive", etc.

3. font-size:

3.1.

xx-small

3.2.

x-small

3.3.

small

3.4.

medium

3.5.

large

3.6.

x-large

3.7.

xx-large

3.8.

smaller

3.9.

larger

3.10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

12

3.11. %

4. font-style:

4.1.

normal: fonte normal na vertical

4.2.

italic: fonte inclinada

4.3.

oblique:fonte obliqua

5. font-variant:

5.1.

normal: fonte normal

5.2.

small-caps: transforma em maisculas de menor altura

6. font-weight:

6.1.

normal

6.2.

bold

6.3.

bolder

6.4.

lighter

6.5.

100

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

13

6.6.

200

6.7.

300

6.8.

400

6.9.

500

6.10. 600

6.11. 700

6.12. 800

6.13. 900

Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

14

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Esta a melhor e mais rpida maneira de voc aprender CSS. Bons estudos! E faa timo proveito dos tutoriais.

color ... A cor da fonte

<html> <head> <style type="text/css"> <!-h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);} --> </style> </head> <body> <h1>Cabealho com letras vermelhas</h1> <h2>Cabealho com letras verdes</h2> <p>Pargrafo com letras azuis</p> </body> </html>

Este o efeito da folha de estilo acima:

Cabealho com letras vermelhas

Cabealho com letras verdes
Pargrafo com letras azuis

font-family...O tipo de fonte

<html> <head> <style type="text/css"> <!-h2 {font-family: arial, helvetica, serif;} p {font-family: sans-serif;} --> </style> </head> <body>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

15

<h2>Famlia por nome: arial, helvetica, serif;</h2> <p>Famlia genrica: sans-serif;<p> </body> </html>

Notas:
Famlia por nome: arial, helvetica, serif;
Famlia genrica: sans-serif;

A propriedade font-family usada para definir uma lista de tipos de fontes. O browser assume o primeiro nome que ele reconhece na lista. Separar cada nome por uma vrgula e sempre prever um nome genrico. Se o nome da fonte for composto (mais de uma palavra, p. ex: Comic Sans MS), usar aspas duplas no nome. Se estiver definindo um atributo de "style" em HTML, onde as aspas duplas j esto presentes usar no nome de fonte composto, aspas simples.

font-size...O tamanho de fonte

<html> <head> <style type="text/css"> <!-h1 {font-size: 14px;} h2 {font-size: smaller;} p {font-size: 100%;} --> </style> </head> <body> <h1>Letras com tamanho: 14px</h1> <h2>Letras com tamanho: smaller</h2> <p>Letras com tamanho:100%</p> </body> </html>

Este o efeito da folha de estilo acima:

Letras com tamanho: 14px

Letras com tamanho: smaller

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

16

Letras com tamanho:100%

font-style...O estilo de fonte

<html> <head> <style type="text/css"> <!-h1 {font-style: italic;} h2 {font-style: normal;} p {font-style: oblique;} --> </style> </head> <body> <h1>Este o estilo italic</h1> <h2>Este o estilo normal</h2> <p>Este o estilo oblique</p> </body> </html>

Este o efeito da folha de estilo acima:

Este o estilo italic

Este o estilo normal
Este o estilo oblique

font-variant...fontes maisculas "menores"

<html> <head> <style type="text/css"> <!-h3 {font-variant: normal;} p{font-variant: small-caps;} --> p</style> </head> <body> <h3>Este cabealho com letras normais</h3> <p>Este pargrafo com letras em "small-caps"</p> </body> </html>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

17

Este o efeito da folha de estilo acima:

Este cabealho com letras normais

ESTE
PARGRAFO COM LETRAS EM

"SMALL-CAPS"

font-weight...Peso das fontes - negrito (intensidade da cor)

<html> <head> <style type="text/css"> <!-p {font-weight: bold;} --> </style> </head> <body> <p> Este um pargrafo em negrito</p> </body> </html>

Este o efeito da folha de estilo acima:

Este um pargrafo em negrito

font...Todas as propriedades das fontes em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades das fontes. A sintaxe geral esta: font: [style] [variant] [weight] [size] [/line-height] [family] | caption |
icon | menu | message-box | small-caption | status-bar | inherit

Voc pode declarar todas ou algumas das propriedades. Os valores size e family so obrigatrios. Os demais so facultativos (se voc os omitir ser adotado o valor default ou herdado do elemento pai). Os valores style, variant, weight e size, podem ser declarados em qualquer ordem.
<html> <head> <style type="text/css"> <!-p{

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

18

font: italic small-caps bold 14px "Comic Sans MS", sans-serif; } --> </style> </head> <body> <p>Pargrafo em declarao nica</p> </body> </html>

Este o efeito da folha de estilo acima:

PARGRAFO EM DECLARAO NICA

Notas
O valores caption, icon, menu, message-box, small-caption e status-bar referem-se s fontes usadas pelo sistema operacional do visitante do site e devem ser declarados isolados na propriedade font.

caption............fontes usadas em botes; icon.................fontes usadas em cones; menu...............fontes usadas em menus; message-box...fontes ussadas em caixas de mensagens; small-caption...fontes usadas em pequenos controles; status-bar........fontes usadas na barra de status;

O valor inherit usado para herdar a fonte usada pelo elemento pai e tambm deve ser declarados isolados na propriedade font.
<html> <head> <style type="text/css"> <!-.p1 { font: status-bar; } .p2 { font: inherit; .p3 { font: small-caption ; } } --> </style>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

19

</head> <body> <p class="p1">Pargrafo com fonte status-bar</p> <p class="p2">Pargrafo com fonte inherit</p> <p class="p3">Pargrafo com fonte small-caption</p> </body> </html>

A propriedade background
O fundo dos elementos HTML
A propriedade background define as caractersticas (os valores na regra CSS) do fundo dos elementos HTML. As propriedades background so as listadas abaixo:

background-color............... cor do fundo; background-image............. imagem de fundo; background-repeat............. maneira como a imagem de fundo posicionada; background-attachment.......se a imagem de fundo "rola" ou no com a tela; background-position............como e onde a imagem de fundo posicionada; background........................maneira abreviada para todas as propriedades;

Valores vlidos para as propriedades do fundo

background-color: 1. cdigo hexadecimal: #FFFFFF 2. cdigo rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc 4. transparente: transparent background-image: 1. URL: url(caminho/imagem.gif)

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

20

background-repeat: 1. no repete: no-repeat 2. repete vertical e horizontal: repeat 3. repete vertical: repeat-y 4. repete horizontal: repeat-x background-attachment: 1. imagem fixa na tela: fixed 2. imagem "rola" com a tela: scroll background-position: 1. x-pos y-pos 2. x-% y-% 3. top left 4. top center 5. top right 6. center left 7. center center 8. center right 9. bottom left 10. bottom center 11. bottom right

Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Esta a melhor e mais rpida maneira de voc aprender CSS. Bons estudos! E faa timo proveito dos tutoriais.

A cor do fundo
<html> <head> <style type="text/css"> <!-body {background-color: #CCFFFF;} /*azul claro*/ h2 {background-color: #FF0000;} /* vermelho */ p {background-color: #00FF00;} /* verde */

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

21

--> </style> </head> <body> <h2>Estude CSS</h2> <p>Com CSS voc controla melhor seu layout</p> </body> </html>

Este o efeito da folha de estilo acima:

Estude CSS
Com CSS voc controla melhor seu layout

A imagem de fundo
<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif");} --> </style> </head> <body> </body> </html>

Repetir verticalmente a imagem de fundo

<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: repeat-y; } --> </style> </head> <body> </body> </html>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

22

Repetir horizontalmente a imagem de fundo

<html> <head> style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: repeat-x; } --> </style </head> <body> </body> </html>

Posicionar uma imagem de fundo

<html> <head> <style type="text/css"> <!-body { background-image: url("/images/css.gif"); background-repeat: no-repeat; background-position: 200px 70px; } --> </style> </head> <body> </body> </html>

Este o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margem esquerda e 70 pixel da margem superior

Mudando o estilo das listas HTML

A propriedade list define as caractersticas (valores) das listas HTML. As propriedades list so as listadas abaixo:

list-style-image............. imagem como marcador da lista; list-style-position..........onde o marcador da lista posicionado; list-style-type...............tipo do marcador da lista;

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

23

list-style........................maneira abreviada para todas as propriedades;

Valores vlidos para as propriedades do lista

list-style-image:

none URL: url(caminho/marcador.gif) list-style-position: 1. outside: marcador fora do alinhamento do texto 2. inside: marcador alinhado com texto list-style-type: 1. none: sem marcador 2. disc: crculo (bolinha cheia) 3. circle: circunferncia (bolinha vazia) 4. square: quadrado cheio 5. decimal: nmeros 1, 2, 3, 4, ... 6. decimal-leading-zero 7. lower-roman: romano minsculo i, ii, iii, iv, ... 8. upper-roman: romano maisculo I, II, III, IV, ... 9. lower-alpha: letra minscula a, b, c, d, ... 10. upper-alpha: letra maiscula A, B, C, D, ... 11. lower-greek 12. lower-latin 13. upper-latin 14. hebrew 15. armenian 16. georgian 17. cjk-ideographic 18. hiragana 19. katakana 20. hiragana-iroha 21. katakana-iroha

1. 2.

Os tipos de 11 a 20 so de uso especfico e sem suporte total pelos navegadores atuais e no sero tratados neste tutorial. Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

24

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faa timo proveito dos tutorial.

list-style-image ...imagem

para marcadores de lista

Este exemplo demonstra como definir uma imagem de marcador de listas:

<html> <head> <style type="text/css"> <!-ul { list-style-image: url("seta.gif"); } --> </style> </head> <body> <ul> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>

A folha de estilo acima resultar nesta lista:

Item um Item dois Item tres

list-style-position...posio dos marcadores de lista

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

25

Este exemplo demonstra como posicionar os marcadores de listas:

<html> <head> <style type="text/css"> <!-ul.inside { list-style-position: inside; } ul.outside { list-style-position: outside; } --> </style> </head> <body> <ul class="inside"> <li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"inside" dosmarcadores de listas.</li> </ul> <ul class="outside"> <li>Este texto destina-se a demonstrar o valor: "outside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.</li> </ul> </body> </html>

List-style-typ e...os tipos de marcadores de lista

Definir os marcadores de listas no ordenadas
Este exemplo demonstra como definir os marcadores de listas no ordenadas:
<html> <head> <style type="text/css"> <!-ul.none { list-style-type: none; } ul.disc { list-style-type: disc;

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

26

} ul.circle { list-style-type: circle; } ul.square { list-style-type: square; } --> </style> </head> <body> <ul class="none"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="disc"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="circle"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> <ul class="square"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body> </html>

Este o efeito da folha de estilo acima:

o o o

Item um Item dois Item tres Item um Item dois Item tres Item um Item dois Item tres

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

27

Item um Item dois Item tres

Definir os marcadores de listas ordenadas

Este exemplo demonstra como definir os marcadores de listas no ordenadas.
<html> <head> <style type="text/css"> <!-ol.decimal { list-style-type: decimal; } ol.lroman { list-style-type: lower-roman; } ol.uroman { list-style-type: upper-roman; } ol.lalpha { list-style-type: lower-alpha; } ol.ualpha { list-style-type: upper-alpha; } --> </style> </head> <body> <ol class="decimal"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="lroman"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="uroman"> <li>Item um</li>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

28

<li>Item dois</li> <li>Item tres</li> </ol> <ol class="lalpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> <ol class="ualpha"> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ol> </body> </html>

Este o efeito da folha de estilo acima:

1. Item um 2. Item dois 3. Item tres i. Item um ii. Item dois iii. Item tres I. Item um II. Item dois III.Item tres a. Item um b. Item dois c. Item tres A. Item um B. Item dois C. Item tres

list-style...duas propriedades das listas em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades das listas.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

29

Voc pode declarar duas das propriedades estudadas em uma regra nica: A sintaxe geral esta: list-style: position; imagem ou list-style: position; type podendo inverter a ordem. Veja o exemplo abaixo:
<html> <head> <style type="text/css"> <!-ul { list-style: inside url("seta.gif"); } --> </style> </head> <body> <ul> <li>Texto para demonstrar a propriedade de declarao nica para listas usando CSS - Folhas de Estilo em Cascata;</li> <li>Item dois;</li> <li>Item tres.</li> </ul> </body> </html>

A folha de estilo acima resultar nesta lista:

Texto para demonstrar a propriedade de declarao nica para listas usando CSS - Folhas de Estilo em Cascata; Item dois; Item tres.

Ajustar uma imagem de fundo fixa, que no "rola" com a tela.

<html> <head> <style type="text/css">

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

30

<!-body { background-image: url("/images/css.gif"); background-repeat: no-repeat; background-attachment: fixed; } --> </style> </head> <body> </body> </html>

Este o efeito da aplicao das regras CSS acima em uma pgina web.

Todas as propriedades do fundo em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades do fundo. Voc pode declarar todas ou algumas das propriedades estudadas em uma regra nica: A sintaxe geral esta:
background: color image repeat attachment position;

em qualquer ordem, podendo ser omitido um ou mais valores. Veja o exemplo abaixo:
<html> <head>> <style type="text/css">/> <!-body { background: #00FF00 url("css.gif") no-repeat fixed 200px 70px; } --> </style> </head>

Seletores CSS 2.1 - Parte 1

Autor: Roger Johansson

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

31

URL do original: http://www.456bereastreet....selectors_part_1/ Ttulo original: CSS2.1 selectors, Part 1 Traduzido por Maurcio Samy Silva com autorizao expressa do autor
Seletores esto entre as primeiras coisas que voc aprende quando comea a estudar CSS. Sem dvida os seletores fazem parte dos assuntos fundamentais das CSS, contudo poucos desenvolvedores sabem tirar proveito de todo o seu potencial. Ainda que voc possa fazer muitas estilizaes com os seletores do tipo ID e os seletores de classes, h muito mais a fazer com seletores. O conhecimento de como usar adequadamente todas as variantes de seletores disponveis em CSS 2.1 ir ajud-lo na tarefa de manter seu HTML bem mais claro. Voc ir minimizar o uso do atributo class bem como a necessidade de adicionar elementos div e span extras na sua marcao. Parece legal, no ? Ento, por que toda esta variedade de seletores disponveis ainda no est em pleno uso? A razo mais importante para isto a falta de suporte para estes seletores pelo Internet Explorer, inclusive pela verso mais recente em uso, a verso 6. Todos os demais navegadores recentes suportam a maioria dos seletores CSS 2.1. Esteja ciente desta limitao antes de sair usando tudo que ser explicado nestes tutoriais. A boa notcia que o Internet Explorer 7 ir oferecer melhor suporte para seletores. Sabendo que voc poder us-los em um futuro prximo, esta uma boa ocasio para aprender tudo sobre os seletores disponveis. Como existem muitos seletores a estudar, um artigo nico, para explicar todos eles ficaria muito extenso. Assim, para tornar as coisas mais fceis de digerir eu dividi o assunto em trs partes:

1. Parte 1, este artigo que explica os conceitos bsicos sobre seletores e mais o seletor universal, o seletor tipo ID e o seletor de classe; 2. Parte 2, trata de combinao de seletores, grupamento de seletores e seletor de atributo; 3. Parte 3, ser sobre pseudo classes e pseudo-elementos.
Eu publicarei os artigos em algumas semanas e atualizarei cada um deles com os links para as outras partes to logo as publique. Tudo certo ento. Vamos comear.

Seletor - Conceitos bsicos

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

32

Vamos aos fundamentos bsicos. Um seletor CSS uma declarao em um formato que "casa" com todos os elementos que sigam aquele formato na rvore do documento. Quando todas as condies estabelecidas no formato da declarao so satisfeitas o seletor "casa" com o elemento (ou elementos) no documento e as regras escritas no seletor so aplicadas. Considere a regra CSS bem simples escrita a seguir:

1. p { color:#f00; }
O seletor a parte da regra CSS que est antes do sinal { (chave de abertura). O seletor aqui p, que "casa" com todos os elementos p do documento e faz com que qualquer texto dentro de um pargrafo seja na cor vermelha. Bem bsico.

Seletor - Viso geral

OK, este foi um exemplo bem simples. Adiante irei descrever todos os demais seletores e as coisas definitivamente ficaro mais flexveis. Antes porm vamos a uma viso geral da sintaxe de todos os seletores CSS 2.1 (baseada nas especificaes CSS 2.1, 5.1 Pattern matching):

Viso geral da sintaxe dos seletores CSS 2.1 Seletor Universal Tipo Classe Formato * E .info Descrio Casa com qualquer elemento. Casa com qualquer elemento E. Casa com qualquer elemento cujo atributo class tem o valor info. Casa com qualquer elemento cuja id seja footer. Casa com qualquer elemento F que seja descendente do elemento E.

ID

#footer

Descendente

EF

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

33

Viso geral da sintaxe dos seletores CSS 2.1 Seletor Filho Formato E>F Descrio Casa com qualquer elemento F que seja filho do elemento E. Casa com qualquer elemento F que se segue imediatamente a E. Casa com qualquer elemento E que tenha um atributo att independentemente do valor deste atributo. Casa com qualquer elemento E que tenha um atributo att de valor igual a val. Casa com qualquer elemento E que tenha um atributo att de valor igual a um valor qualquer separado por um espao de um valor igual a val. Casa com qualquer elemento E que tenha um atributo att de valor igual a um valor qualquer separado por um hfen de um valor comeando com val. Casa com o elemento E que for o primeiro filho do seu elemento

Adjacente

E+F

Atributo

E[att]

Atributo

E[att=val]

Attribute

E[att~=val]

Atributo

E[att|=val]

Pseudo classe :first-child

E:first-child

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

34

Viso geral da sintaxe dos seletores CSS 2.1 Seletor Formato Descrio pai. Pseudo classe link E:link E:visited E:active E:hover E:focus E:lang(c) Casa com link ainda no vistado (:link) ou com link j visitado (:visited) links. Casa com E quando de uma ao do usurio. Casa com elementos E escritos no idioma c. Casa com o contedo da primeira linha do elemento E. Casa com a primeira letra do elemento E. Usado para gerar contedo antes ou depois do contedo do elemento E.

Pseudo classes dinmicas Pseudo classe :language

Pseudo-elemento E:first-line :first-line O pseudoelemento E:first-letter :first-letter Pseudoelementos :before e :after E:before E:after

Explicarei detalhadamente cada um destes seletores nas duas primeiras partes deste artigo, assim, continue lendo. Alguns termos usados na tabela acima e ao longo do artigo necessitam de uma explicao adicional:

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

35

descendente
Um elemento que filho, neto ou descendente mais distante de um elemento, na rvore do documento.

ancestral
Um elemento que pai, av ou ancestral mais distante de um elemento na rvore do documento.

filho
O descendente direto de um elemento. Nenhum elemento existe entre os dois na rvore do documento.

pai
O ancestral direto de um elemento. Nenhum elemento existe entre os dois na rvore do documento.

sibling (irmos)
Elementos irmos, filhos do mesmo pai.

Seletores - Simples e combinados

Existem duas categorias bsicas de seletores: os simples e os combinados. Um seletor simples consiste em um tipo qualquer de seletor ou o seletor universal seguido por nenhum ou algum seletor de atributo, seletor tipo ID, seletor de classe ou pseudo classe. A seguir uma regra contendo um exemplo de seletor simples:

1. p.info { background:#ff0; }
Um seletor combinado (algumas vezes chamado de seletor contextual) consiste de dois ou mais seletores simples separados por um elemento de combinao. A seguir um exemplo de seletor combinado.

1. div p { font-weight:bold; }

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

36

A regra acima aplica-se a todo elemento p que seja descendente do elemento div. Um pseudo-elemento pode ser colocado como apndice a um seletor. Em seletores combinados, o pseudo-elemento somente poder ser adicionado como apndice ao ltimo seletor simples. Nas Partes 2 e 3 deste artigo sero detalhados com mais profundidade os seletores combinados, os elementos de combinao e os pseudo-elementos.

O seletor universal
O seletor universal representado por um asterisco, *, e casa com todos os elementos do documento. raro ver-se empregado em uma folha de estilos, mas o seletor universal muito usado com seletores tipo ID e seletores de classe. Se o seletor universal no for o nico componente de um seletor simples, o * no deve ser usado :
.myclass equivalente a *.myclass #myid equivalente a *#myid

Um uso bastante popular para o seletor universal o uso para zerar margens e paddings de todos os elementos do documento:

1. * { margin:0; padding:0; }
Este procedimento tambm conhecido como Global White Space Reset. (NT: link para matria em ingles)

Seletores - tipo
Um seletor tipo, casa com qualquer instncia de um determinado tipo de elemento. A regra a seguir casa com qualquer elemento (do tipo) pargrafo no documento e configura seu tamanho de fonte para 2em:

1. p { font-size:2em; }

Seletor - classe

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

37

O seletor de classe representado por um ponto, ., e tem como alvo elementos com um determinado valor para seu atributo class. A regra a seguir aplica-se a todo elemento pargrafo cuja classe tenha o nome info:

1. p.info { background:#ff0; }
Voc pode atribuir vrios nomes para a classe de um elemento o atributo class pode conter uma lista de vrios nomes separados por espao em branco. Assim, os seletores de classe podem ser usados para casar com elementos cuja classe contenha vrios nomes. A regra a seguir casa com elementos p que tenham os nomes info e error declarados em seu atributo class:

1. p.info.error { color:#900; font-weight:bold; }

Nota: Seletores com mltiplos nomes de classes no so suportados pelas verses atuais do Internet Explorer, mas sero pelo IE7. O tipo de elemento no precisa necessariamente ser declarado. Este procedimento, no declarar o tipo de elemento, equivale a usar o seletor universal como tipo de elemento. A regra a seguir casa com qualquer elemento da classe info, independentemente do tipo de elemento:

1. .info { background:#ff0; }

Seletor - ID
A ID (#) uma identidade que damos a algumas das tags do corpo do documento HTML, a fim de diferenci-los dos demais. Uma ID represenada e usada da seguite forma:

no HTML como atributo de uma tag. Sendo a palavra ID a propriedade e o nome da ID o valor. Exemplo: <p id =vermelho >...</p> ;

no CSS, como seletor. Primeiro, coloca-se o sinal # (tralha ou jogo da velha), escreve-se o nome da ID, que ser a palavra vermelho , e aps, defini-se as propriedades e os valores para ela. Veja o exemplo:

#vermelho {

fonte-family: verdana, tahoma;

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

38

font-size: 11px; color: red; }

Contudo, a regra acima se aplica-se a todos os elementos cujo nome de ID seja vermelho, independentemente do tipo de elemento. Para que o estilo se aplique somente a tag <p> de ID vermelho, a regra no CSS dever ser:

p#vermelho { fonte-family: verdana, tahoma; font-size: 11px; color: red; }

Exemplo completo de uso do seletor ID:

Documento CSS externo (estilo.css):

#vermelho { fonte-family: verdana, tahoma; font-size: 11px; color: red; }

Documento HTML
<html> <head> <title>Seletor Tag</title> <link rel=styleshet type=text/css href=estilo.css> </head> <body> <h1>titulo 1</h1>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

39

<p id=vermelho>texto 1</p> <h1>titulo 2</h1> <p>texto 2</p> </body> </html>

Seletores CSS 2.1 - Parte 2

Autor: Roger Johansson URL do original: http://www.456bereastreet....selectors_part_2/ Ttulo original: CSS2.1 selectors, Part 2 Traduzido por Maurcio Samy Silva com autorizao expressa do autor
Esta a segunda parte da srie de trs artigos sobre os seletores disponveis em CSS 2.1. A Parte 1 trata dos conceitos bsicos tais como; seletor tipo, seletores ID, seletores de classes, seletor universal e seletores simples. Nesta parte eu tratarei mais detalhadamente de seletores mais avanados, os quais ainda no so em sua maioria suportados por navegadores atuais. O suporte est tornando-se cada vez melhor para tais seletores, de modo que o tempo gasto para aprender o que est descrito neste artigo no ser desperdiado.

Elementos de combinao
Elementos de combinao de seletores so usados para separar dois ou mais seletores simples que compem um seletor combinado. Os elementos de combinao disponveis so: espao em branco (qualquer quantidade de espao, tabulao ou caracteres de espaamento), o sinal de maior > e o sinal de adio + . A funo de cada um destes elementos de combinao dos seletores ser descrita adiante.

Seletores descendentes
Um seletor descendente uma combinao de dois ou mais seletores simples separados por um espao em branco. Casa com elementos que sejam descendentes do primeiro elemento simples declarado no seletor. Por exemplo, na regra a seguir o seletor casa com todos os elementos p que sejam descendentes do elemento div:

1. div p { color:#f00; }

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

40

Cada um dos seletores que compem um seletor descendente pode ser um seletor simples de qualquer natureza. Na regra a seguir o seletor casa com todo o elemento p da classe info contido em um elemento li que esteja contido em um elemento div cuja id seja myid.

1. div#myid li p.info { color:#f00; }

Seletores descendentes permitem que voc case um elemento sem necessidade de atribuir-lhe uma classe ou uma id, o que resultar em uma marcao mais limpa. Vamos supor uma lista de navegao conforme a marcao abaixo:

1. 2. 3. 4. 5.

<ul id="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul>

Para atingir os itens de lista e links contidos na lista de navegao voc poderia usar as seguintes regras CSS:

1. #nav li { display:inline; } 2. #nav a { font-weight:bold; }

Estas regras no sero aplicadas a nenhum outro item de lista ou links dentro do documento. Agora compare com a opo de nomear uma classe para cada item da lista e para os links e voc perceber quo mais limpa poder tornar-se sua marcao com o uso de seletores descendentes.

Seletores filho
Um seletor filho tem como alvo um filho imediato de um elemento. O seletor filho consiste de um ou mais seletores simples separados por um sinal de maior >. O elemento pai fica esquerda do sinal >, e permitido deixar espao em branco entre o elemento de combinao e os seletores. A regra a seguir aplica-se a todos os elementos strong que sejam filhos de um elemento div:

1. div > strong { color:#f00; }

Somente elementos strong que sejam descendentes diretos do elemento div sero afetados por esta regra. Se houver qualquer outro elemento entre o elemento div e o elemento strong na rvore do documento, o seletor no se aplicar. No exemplo a seguir, somente Texto um ser afetado pela regra:

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

41

1. 2. 3. 4.

<div> <strong>Texto um</strong> <p><strong>Texto dois</strong></p> </div>

Seletores irmos adjacentes (sibling selectors)

Um seletor irmo adjacente consiste de um ou mais seletores simples separados por um sinal de adio, +. permitido deixar espao em branco entre o elemento de combinao e os seletores. O seletor tem como alvo um elemento que seja irmo e adjacente ao primeiro elemento. Os elementos devem ter o mesmo pai e o primeiro elemento deve ser imediatamente anterior ao segundo.

1. p + p { color:#f00; }
A regra acima ser aplicada somente ao Pargrafo dois :

1. 2. 3. 4.

<div> <p>Pargrafo um</p> <p>Pargrafo dois</p> </div>

Grupando
Eu decidi abordar o grupamento a esta altura do artigo, porque um erro comum que eu vejo as pessoas cometer quando esto aprendendo CSS diz respeito ao grupamento de seletores. Para aplicar uma mesma regra a diferentes elementos alvo casados por diferentes seletores voc pode agrupar os seletores em uma lista e separando-os por uma vrgula no lugar de escrever repetidamente a mesma regra para cada um dos seletores. O erro que muitos cometem o de no listar de modo completo todos os seletores. Considere a seguinte marcao:

1. 2. 3. 4.

<div id="news"> <h3>News</h3> <ul> <li>Item 1</li>

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

42

5. <li>Item 2</li> 6. </ul> 7. </div>

Agora considere que voc quer aplicar a mesma margem para cabealhos do nvel 3 e para listas no ordenadas que estejam dentro do elemento div cuja id news. Aqui maneira errada:

1. div#news h3, ul { 2. margin:0 2em; 3. }

Esta regra ser aplicada a ambos os elementos h3 e ul na div#news. O problema que atingir todos os elementos ul contidos no documento, e no apenas aqueles na div#news. Agora a maneira correta de grupar os seletores para este caso:

1. 2. 3. 4.

div#news h3, div#news ul { margin:0 2em; }

Assim, quando grupar seletores lembre-se de escrever por completo cada um deles.

Seletores de atributo
Seletores de atributo atingem elementos baseados no valor de atributo declarado no seletor. Quatro so as maneiras de declarar um seletor de atributo:

[att]
Casa com qualquer elemento com o atributo att independente do seu valor.

[att=val]
Casa com qualquer elemento com o atributo att cujo valor seja val.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

43

[att~=val]
Casa com qualquer elemento que tenha um atributo att de valor igual a um valor qualquer separado por um espao de um valor igual val. Neste caso val no pode conter espaos.

[att|=val]
Casa com qualquer elemento que tenha um atributo att de valor igual a um valor qualquer separado por um hfen de um valor comeando com val. O principal uso deste seletor o de casar elementos com um valor de idioma especificado no atributo lang (xml:lang em XHTML), por exemplo;en, enus, en-gb, etc.
Alguns exemplos. O seletor na regra a seguir casa com todos os elementos p que tenham o atributo title, independentemente do valor do atributo:

1. p[title] { color:#f00; }
No prximo exemplo o seletor casa com todos os elementos div que tem um valor para o atributo class igual a error:

1. div[class=error] { color:#f00; }
Para atingir todos os elementos td cujo atributo headers contenha o valor col1, podemos usar o seguinte seletor:

1. td[headers~=col1] { color:#f00; }
E finalmente, o seletor seguinte atinge todo elemento p cujo atributo lang comece com en:

1. p[lang|=en] { color:#f00; }
Mltiplos seletores de atributos podem ser usados em um mesmo seletor. Isto possibilita atingir vrios diferentes atributos para o mesmo elemento. a regra a seguir aplica-se a todos os elementos blockquote que tenham o atributo class de valor igual a quote, e mais o atributo cite (independentemente do seu valor):

1. blockquote[class=quote][cite] { color:#f00; }

Seletores CSS 2.1 - Parte 3 ::

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

44

Esta a terceira e ltima parte da srie de trs artigos sobre os seletores disponveis em CSS 2.1. A Parte 1 trata dos conceitos bsicos tais como; seletor tipo, seletores ID, seletores de classes, seletor universal e seletores simples. Na Parte 2 eu expliquei os elementos de combinao, seletores combinados, grupamento e seletores de atributo

Agora detalharei as pseudo classes e os pseudo-elementos. Assim como os seletores mais avanados que eu apresentei na Parte 2, as pseudo classes e os pseudo-elementos ainda no so plenamente suportados pela maioria dos navegadores, assim, no se esquea de verificar o que ir acontecer se no houver suporte para um determinado seletor que voc tenha usado. Voc no quer que sua pgina seja inacessvel por falta de suporte a uma CSS aqui descrita.

Pseudo classes e pseudo-elementos

Pseudo classes e pseudo-elementos podem ser usados para formatar elementos basedos em informaes que esto disponvel na rvore do documento. Por exemplo, no existe um elemento que marque a primeira linha de um pargrafo ou a primeira letra do texto contido em um elemento.

Pseudo classes
Pseudo classes casam elementos baseadas em caractersticas outras que no; seu nome, seus atributos ou seu contedo.

:first-child
Esta pseudo classe casa com o elemento que o primeiro filho de um outro elemento. Suponha que voc quer estilizar diferenciadamente o primeiro pargrafo de um artigo. Se tal artigo estiver contido dentro de um elemento div ao qual foi atribuido a classe article, a regra a seguir casa com o primeiro elemento pargrafo p no artigo:

1. div.article p:first-child { 2. font-style:italic; 3. }

Para casar com todos os elementos p que sejam filhos de qualquer elemento voc poderia usar o seletor da regra a seguir:

1. p:first-child { 2. font-style:italic; 3. }

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

45

:link e :visited
As pseudo classes link afetam o estado dos links visitados e no visitados. Estes dois estados so mutuamente exclusivos um link no pode ser visitado e no visitado ao mesmo tempo. Estas pseudo classes aplicam-se somente a hyperlinks e ncoras definidas na linguagem de marcao do documento. Em HTML, isto vlido para elementos com o atributo href. Uma vez que outros elementos no so afetados os seletores mostrados abaixo so equivalentes:

1. a:link 2. :link

:hover, :active, e :focus

As pseudo classes dinmicas podem ser usadas para controlar a apresentao de determinados elementos na dependncia de aes do usurio.

:hover
Aplica-se para quando o usurio coloca um dispositivo apontador em um elemento mas no o ativa. O uso mais comum quando da ao de usurio de apontar o cursor do mouse sobre o elemento.

:active
Aplica-se para quando o usurio ativa um elemento. Para ao de mouse, equivale a pressionar o boto e mant-lo pressionado at soltar.

:focus
Aplica-se para quando um elemento recebe foco, ou seja, enquanto aceita eventos de teclado. Um elemento pode ser casado a vrias pseudo classes ao mesmo tempo. Um elemento pode receber foco e ter o cursor do mouse sobre ele ao mesmo tempo, por exemplo:

1. 2. 3. 4. 5.

input[type=text]:focus {
color:#000;

background:#ffe;
}

input[type=text]:focus:hover {

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

46

6. background:#fff; 7. }
A primeira regra casa com o elemento input e tem o foco, a segunda regra casa com o mesmo elemento quando tem o ponteiro do mouse sobre ele.

:lang
A pseudo-class para linguagem (idioma) pode ser usada para estilizar elementos cujo contedo est escrito em uma determinada linguagem (idioma - uma lngua para humanos e no uma linguagem de marcao). A regra a seguir define que tipo de aspas usar para textos inline que esto escritos no idioma da Sucia:

1. q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

A linguagem para humanos (idioma) de um documento, normalmente especificada pelo atributo lang em HTML e pelo atributo xml:lang em XHTML.

Pseudo-elementos
Os pseudo-elementos permitem acessar e formatar partes do documento que no esto disponveis como ns da rvore do documento.

:first-line
O pseudo-elemento :first-line afeta a primeira linha de texto de um pargrafo. Aplica-se somente a elementos nvel de bloco, blocos inline, table-caption ou table-cell. O comprimeiro da primeira linha depende obviamente de uma srie de fatores, ai incluido o tamanho da fonte e a largura do elemento container do texto. A regra a seguir aplica-se primeira linha do texto de um pargrafo:

1. 2. 3. 4.

p:first-line { font-weight:bold; color;#600; }

Notar que existem algumas restries quanto as propriedades aplicveis no pseudoelemento :first-line. Ver The :first-line pseudo-element para uma listagem das propriedades aplicveis.

:first-letter

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

47

Este pseudo-elemento permite casar a primeira letra ou primeiro caractere de um elemento e aplica-se a elementos nvel de bloco, list-item, table-cell, table-caption e bloco inline. A regra a seguir aplica-se ao primeiro caractere de um elemento cuja classe denomina-se preamble:

1. 2. 3. 4.

.preamble:first-letter { font-size:1.5em; font-weight:bold; }

Assim como para o pseudo-elemento :first-line o pseudo-elemento :first-letter tem suas restries com relao as propriedades aplicveis. Ver The :first-letter pseudo-element para uma listagem das propriedades aplicveis.

:before e :after
Entre uma das mais discutidas funcionalidades das CSS os pseudo-elementos :before e :after podem ser usados para gerar contedos antes e depois do contedo de um elemento A seguir uma exemplo de como :before pode ser usado (retirado do meu artigo Custom borders with advanced CSS):

1. 2. 3. 4. 5. 6. 7. 8.

.cbb:before { content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }

Um exemplo do uso de :after para inserir a URL logo aps o texto de um link:

1. a:link:after { 2. content: " (" attr(href) ") "; 3. }

Problemas com o Internet Explorer

Antes de colocar em uso tudo o que voc aprendeu sobre seletores, tenha em mente que o Internet Explorer incluido verso 6 e anteriores do um suporte incompleto para seletores CSS 2.1. Os seguintes seletores no so suportados:

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

48

Child selectors (Seletores filho) Adjacent sibling selectors (Seletores irmos adjacentes) Selectores de atributo Selectores com mltiplas classes Pseudo classe :first-child Pseudo classe language Pseudo-elementos :before e :after Pseudo classe :hover funciona somente para elementos a

Felizmente parece que o Internet Explorer 7 d suporte completo para seletores CSS 2.1.

Voc tem o poder use-o corretamente

E, isto tudo. Agora que voc aprendeu seletores em CSS 2.1, voc armou-se de uma poderosa ferramenta para estilizar seus documentos. Use-a com cuidado para manter sua marcao limpa, para incrementar a acessibilidade e a usabilidade. E lembre-se de pensar no que ir acontecer nos navegadores antigos que no do suporte para os mais avanados seletores CSS.

Extras:
Efeitos CSS em cabealhos :
Introduo
Mostrar o uso das propriedades CSS border e background para incrementar o visual de cabealhos em documentos web. Ao final da leitura deste tutorial voc estar capacitado estilizar os cabealhos (tags <h1> <h2>.....), aplicando efeitos bastante criativos com uso das CSS.

Os efeitos deste tutorial

Na figura abaixo voc tem uma imagem de como um browser renderizou 04 (quatro) cabealhos que serviro de base para o desenvolvimento das tcnicas explicadas neste tutorial.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

49

Consideraes iniciais
Os quatro cabealhos mostrados na figura acima foram todos eles estilizados simplesmente alterando-se o valor das MESMAS propriedades CSS para cada um deles. Isto , as regras CSS de estilizao usam as mesmas propriedades. Alteram-se somente os valores das propriedades. Teste seus conhecimentos de CSS: Voc capaz de identificar quais as propriedades estilizadas? Dica: Foram 06 (seis) propriedades! Veja a resposta Agora que voc j sabe qual a apresentao final de cada um dos quatro cabealhos e quais as propriedades que sero estilizadas fica fcil entender as regras CSS mostradas a seguir

O Cabealho nmero 1
<style type="text/css"> .um { /* Classe para o cabealho */ width:300px; /* Largura total - Se voc omitir ocupar toda a linha */ font: 25px Arial, Helvetica, sans-serif; /* Tamanho e famlia de fontes */ color: #7D2116; /* Cor da fonte */ border-top: 14px solid #7FD991; /* Borda em cima */

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

50

border-left: 2px solid #7FD991; /* Borda a esquerda*/ padding-left:5px; /* Espaamento do texto a esquerda */ } /* Note que no h uma cor de fundo */ </style>

O Cabealho nmero 2
.dois { /* Classe para o cabealho */ width:300px; /* Largura total - Se voc omitir ocupar toda a linha */ font: 25px Arial, Helvetica, sans-serif; /* Tamanho e famlia de fontes */ color: #FF0000; /* Cor da fonte */ background: #8EE481; /* Cor do fundo*/ border-bottom: 2px solid #FF0000; /* Borda em baixo */ border-left: 15px solid #FF0000; /* Borda a esquerda*/ border-top: 2px solid #FF0000; /* Borda em cima */ border-right: 15px solid #FF0000; /* Borda a direita */ padding-left:5px; /* Espaamento do texto a esquerda */ } --> </style>

O Cabealho nmero 3
<style type="text/css"> <!-.tres { /* Classe para o cabealho */ width:300px; /* Largura total - Se voc omitir ocupar toda a linha */ font: 25px Arial, Helvetica, sans-serif; /* Tamanho e famlia de fontes */ color: #003366; /* Cor da fonte */ border-top: 5px dotted #FFCC00; /* Borda em cima */ border-bottom: 15px solid #FFCC00; /* Borda em baixo */ padding-left:5px; /* Espaamento do texto a esquerda */ } /* Note que no h uma cor de fundo */ --> </style>

O Cabealho nmero 4
<style type="text/css"> <!-.quatro { /* Classe para o cabealho */ width:300px; /* Largura total - Se voc omitir ocupar

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

51

toda a linha */ font: 25px Arial, Helvetica, sans-serif; /* Tamanho e famlia de fontes */ color: #F58221; /* Cor da fonte */ background: #ACE0E5 url(logo_im.gif) 5px 0 no-repeat; /*Ver Nota*/ border-top: 2px dotted #F58221; /* Borda em cima */ border-right: 2px dotted #F58221; /* Borda a direita */ border-bottom: 2px dotted #F58221; /* Borda em baixo */ border-left: 2px dotted #F58221; /* Borda a esquerda*/ padding-left:35px; /* Espaamento do texto a esquerda */ } --> </style> Nota: Neste cabealho inserimos uma figura de fundo (o logo do iMasters),obtendo um efeito bem interessante!

O HTML para voc fazer suas experincias

......... <h1 class="um">Cabealho nmero 1</h1> <h1 class="dois">Cabealho nmero 2</h1> <h1 class="tres">Cabealho nmero 3</h1> <h1 class="quatro">Cabealho nmero 4</h1> ........

Barra de rolagem na esquerda da tela

Talvez voc queira (sei l por que razo!) mudar a posio da barra de rolagem vertical, deslocando-a para o lado ESQUERDO. Com CSS, voc pode valer-se da propriedade direction e o valor rtl (right to left ) aplicada no elemento body:

body { direction: rtl;}

Acrescente esta regra no cdigo mostrado acima e veja o resultado no navegador. Nota: Coloque um texto qualquer no documento. Voc ver que a barra de rolagem foi para o lado esquerdo, mas o texto foi para o lado DIREITO. Para voltar o texto para sua posio normal basta acresentar mais uma regra CSS, dizendo para o texto se alinhar a esquerda:

body { text-align:left;}
Experimente este cdigo:

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

52

<html> <head> <style type="text/css"> body { scrollbar-arrow-color:#000000; scrollbar-3dlight-color:#000000; scrollbar-highlight-color:#FF0000; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#0000FF; scrollbar-darkshadow-color:#FFFF00; scrollbar-track-color:#00FF00; direction: rtl; text-align:left; } </style> </head> <body> <p>Aqui um texto qualquer</p> </body> </html>

Agradeo a Deus e a todos que contribuem para que o conhecimento seja difundido.

Isaac E. Batista

Belo Horizonte/ 2010 1 Ed. Verso do Aluno

53

Referncias Bibliogrficas
SILVA, Maurcio S. Folhas de Estilo (CSS) . Disponvem em: <http://www.maujor.com>, Acesso em 01 nov. 2009.