Pseudo-elementos CSS ~ .::Acessa Brasil::.

Sintaxe

São usados em CSS, para adicionar efeitos a um seletor, ou a parte de um seletor.
A sintaxe dos pseudo-elementos:

seletor:pseudo-elemento {propriedade: valor;}
As classes em CSS podem também ser usadas com pseudo-elementos.
Esta regra permite que você defina diferentes efeitos para pseudo-elementos localizados em diferentes lugares em uma mesma página.
seletor.classe:pseudo-elemento {propriedade: valor;}

O pseudo-elemento `first-letter`

O pseudo-elemento first-letter é usado para obter um efeito
especial na primeira letra de um texto.

<html>
<head>
<style type="text/css">
p {
font-size: 12pt
}
p:first-letter {
font-size:300%;
}

</style>
</head>
<body>
<p>Este texto destina-se a demonstrar o 
 pseudo-elemento first-letter, bla...bla...bla...
bla... bla...bla...bla...bla...bla... bla...bla...
bla... bla...bla...bla...bla...bla... bla...bla...</p>
</body>
</html>

O código acima produzirá esse efeito

Este texto destina-se a demosnstrar o pseudo-elemento first-letter,
bla...bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla...
bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla...
bla...bla... bla... bla...bla...bla...bla...bla... bla...bla...

O pseudo-elemento first-letter somente pode ser usado com elementos
de bloco.

Propriedades aplicáveis ao pseudo-elemento `first-letter`

font - propriedades de letras
color - propriedades de cores
background - propriedades de fundo
margin - propriedades de margens
padding - propriedades de espaçamentos
border - propriedades de bordas
text-decoration
vertical-align (somente para "float: none)
text-transform
line-height
float
clear

O pseudo-elemento `first-line`

O pseudo-elemento first-line é usado para obter um efeito
especial na primeira linha de um texto.

<html>
<head>
<style type="text/css">
p {
font-size: 12pt
}
p:first-line {
color: #0000FF; 
font-variant: small-caps;
}
</style>
</head>
<body>
<p>Um texto qualquer dentro
 de um pseudo-elemento first-line,
 para um  efeito especial na primeira linha</p>

</body>
</html>

O código acima produzirá esse efeito

Um texto qualquer dentro de um pseudo-elemento first-line,
para um efeito especial na primeira linha. Notar a mudança de cor
e o tipo de letra small-caps na primeira linha.

No exemplo acima toda a primeira linha sofre o efeito da definição
do pseudo-elemento. A "quebra" da linha depente do tamanho da janela
do browser.

O pseudo-elemento first-line somente pode ser usado com elementos
de bloco.

Propriedades aplicáveis ao pseudo-elemento `first-line`

font - propriedades de letras
color - propriedades de cores
background - propriedades de fundo
word-spacing - espaçamento entre palavras
letter-spacing - espaçamento entre letras
text-decoration
vertical-align
text-transform
line-height
clear

Pseudo-elementos em classes CSS

Pseudo-elementos podem ser combinados com classes CSS

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

p.combinado:first-letter { 
color: #FF0000; 
font-size:xx-large; 
}
</style>
</head>
<body> 
<p class="combinado"> Uma frase com efeito
 especial combinado </p>
</body>
</html>

O código acima produzirá esse efeito

Uma frase com efeito especial combinado

0 comentários:

Postar um comentário

Gostou do que encontrou aqui?
Comente este artigo que acabou de ler.
Quer entrar em contato ou tirar alguma dúvida? Formulário de Contato
Nos comentários dos artigos escreva apenas o que for referente ao tema.
Antes de Comentar leia nossa Política para Comentários para saber como interagir com nossos artigos, tirar suas dúvidas e ser respondido(a).

quinta-feira, 18 de março de 2010