-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-ejerc15-selectores.html
61 lines (54 loc) · 3.85 KB
/
html-ejerc15-selectores.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html-ejerc15-selectores</title>
<style>
</style>
</head>
<body>
<h1>Tipos de selectores que entran en examen</h1>
<ol>
<li><h2>Clase (class=””)</h2>
<p>Selecciona todos los elementos que hayan sido asignados (en el html) con la misma clase.</p>
<p>Ejemplo de su uso al usar ".ejemplo1" dentro de la etiqueta "style":</p>
<p><p class="ejemplo1"> este texto está seleccionado </p><br>
<p> este texto no está eleccionado </p><br>
<p class="ejemplo1"> este texto está seleccionado </p><br>
<p> este texto no está eleccionado </p></p></li>
<li><h2>Identificador (id=””)</h2>
<p>Es un selector único, selecciona el elemento al que le haya sido asignado (en el html) dicho id.</p>
<p>Ejemplo de su uso al usar "#ejemplo2" dentro de la etiqueta "style":</p>
<p><p> este texto no está eleccionado </p><br>
<p id="ejemplo2"> este texto está seleccionado </p><br>
<p> este texto no está eleccionado </p></p></li>
<li><h2>Todos los elementos (*)</h2>
<p>Selecciona todos los elementos del archivo, permitiendo así cambiar el formato general de este.</p>
<p>Ejemplo de su uso al usar "*" dentro de la etiqueta "style":</p>
<p><h1> este texto está seleccionado </h1><br>
<p> este texto está seleccionado </p><br>
<p> este texto está eleccionado </p></p></li>
<li><h2>Varios elementos ( p, em, h1, h2)</h2>
<p>Selecciona todos los elementos que pertenezcan a alguna de estas etiquetas, las comas tienen una función "o".</p>
<p>Ejemplo de su uso al usar "h2, p" dentro de la etiqueta "style":</p>
<p><h1> este texto no está seleccionado </h1><br>
<h2> este texto está seleccionado </h2><br>
<h3> este texto no está seleccionado </h3><br>
<p> este texto está eleccionado </p> </p></li>
<li><h2>Elementos contenidos en otros elementos (ol li)</h2>
<p>Selecciona todos los elementos que pertenezcan a su vez al elemento anterior, el espacio (al no haber comas) tiene una función "y".</p>
<p>Ejemplo de su uso al usar "p strong" dentro de la etiqueta "style":</p>
<p><h1> no <strong>está</strong> seleccionada ninguna palabra </h1><br>
<p> solo está <strong>seleccionada</strong> la palabra en negrita </p><br>
<h3> no está seleccionada <strong>ninguna</strong> palabra </h3><br>
<p> solo está seleccionada la palabra en <strong>negrita</strong> </p></p></li>
<li><h2>Sobrevuleo (p:hover)</h2>
<p>Se coloca únicamente dentro de la etiqueta style, sobre otras etiquetas o selectores. Sirve para darle un estilo a los elementos seleccionados que solo se aplica cuando pasamos el ratón por encima de ellos.</p>
<p>Ejemplo de su uso al usar "em: hover" dentro de la etiqueta "style":</p>
<p><h1> <em>solo</em> está seleccionada la palabra en cursiva </h1><br>
<h2> solo está <em>seleccionada</em> la palabra en cursiva </h2><br>
<h3> solo está seleccionada la <em>palabra</em> en cursiva </h3><br>
<p> solo está seleccionada la palabra en <em>cursiva</em> </p> </p></li>
</ol>
</body>
</html>