-
Notifications
You must be signed in to change notification settings - Fork 0
/
pseudo-elemento.html
116 lines (94 loc) · 4.04 KB
/
pseudo-elemento.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-elemento</title>
<style>
/*
p::first-line {
color: red;
font-variant: small-caps;
}
p::first-letter {
color: blue;
font-size: xx-large;
margin-left: 25px;
}
*/
h3::before {
content: url(img/mao.png);
}
/* Colocar antes do alemento */
h3::after {
content: url(img/mao.png);
}
/* Colocar depois do alemento */
::marker {
color: blueviolet;
}
/* Altera apenas os marcadores da lista */
::selection {
color: rgb(0, 191, 255);
background-color: rgb(255, 0, 191);
/* Altera a marcação feita pelo usuário na viapoint*/
}
</style>
</head>
<body>
<h1>pseudo-elemento</h1>
<p>Um pseudo elemento CSS é usado para estilizar partes especificadas de um elemento.</p>
<p>Por exemplo, pode ser usado para:</p>
<ul>
<li>Estilize a primeira letra ou linha de um elemento</li>
<li>Insira conteúdo antes ou depois do conteúdo de um elemento</li>
</ul>
<h3>Estilizando a primeira linha </h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cupiditate at dolorum eveniet libero ea nesciunt amet
eos quod sint molestiae enim, dolore perferendis illum voluptas tenetur, optio asperiores vel ex? Lorem ipsum
dolor sit amet consectetur adipisicing elit. Deserunt temporibus et deleniti voluptates quam inventore quaerat
totam, optio amet hic enim! Enim laboriosam veritatis cum, culpa voluptate omnis incidunt. Molestiae?</p>
<p><strong>Nota</strong> O ::first-linepseudoelemento só pode ser aplicado a elementos de nível de bloco. As
seguintes propriedades se aplicam ao ::first-line pseudoelemento:</p>
<ul>
<li>propriedades da fonte</li>
<li>propriedades de cor</li>
<li> propriedades de fundo</li>
<li> espaçamento entre palavras</li>
<li>espaçamento entre letras</li>
<li> decoração de texto</li>
<li>alinhamento vertical</li>
<li>transformação de texto</li>
<li>altura da linha</li>
</ul>
<h3>O ::pseudoelemento da primeira letra</h3>
<p>O ::first-letter pseudoelemento é usado para adicionar um estilo especial à primeira letra de um texto.</p>
<h3>Múltiplos Pseudoelementos</h3>
<p>Vários pseudoelementos também podem ser combinados.</p>
<p>No exemplo a seguir, a primeira letra de um parágrafo será verde, em tamanho de fonte xx grande. O restante da
primeira linha será rosa e em versalete. O restante do parágrafo terá o tamanho e a cor da fonte padrão:</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam nemo nisi eaque facilis obcaecati. Nobis
repellendus aliquam harum, dolore fugiat esse expedita, assumenda eaque voluptate, ipsa ex! Exercitationem,
possimus molestias.</p>
<h3>CSS - O pseudo-elemento ::before</h3>
<p>O ::before pseudoelemento pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento.</p>
<h3>CSS - O pseudo-elemento ::after</h3>
<p>O ::after pseudoelemento pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.</p>
<h3>CSS - O pseudoelemento ::marker</h3>
<p>O ::marker pseudoelemento seleciona os marcadores dos itens da lista.</p>
<p>Exemplo:</p>
<ul>
<li>Café</li>
<li>Chá</li>
<li>Leite</li>
</ul>
<ol>
<li>Primeiro</li>
<li>Segundo</li>
<li>Terceiro</li>
</ol>
<h3>CSS - O pseudoelemento ::selection</h3>
<p>O ::selectionpseudoelemento corresponde à parte de um elemento selecionado por um usuário.<br>As seguintes
propriedades CSS podem ser aplicadas a ::selection: color, background, cursore outline.</p>
</body>
</html>