lapzdev.github.io/curso-css.html at gh-pages · lapzdev/lapzdev.github.io · GitHub

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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="/IMG-20260808-WA0003.jpg" title="" type="" />
  <title>CURSO CSS</title>
</head>

<body>
  <h1>CURSO CSS</h1>
  <h2 id="inicio-css">CURSO CSS</h2>
  <h3 id="listado-css">Listado del curso</h3>
  <ul>
    <li><a href="#selectores-basicos">Selectores basicos</a></li>
    <li><a href="#selectores-avanzados">Selectores avanzados</a></li>
    <li><a href="#pseudoclases">Pseudoclases</a></li>
    <li><a href="#pseudoelementos">Pseudoelementos</a></li>
    <li><a href="#">#</a></li>
    <li><a href="#">#</a></li>
    <li><a href="#">#</a></li>

  </ul>
  <br /><br />
  <hr />
  <br />
  <<article id="selectores-basicos">
    <p>Este es un párrafo especial ya que no tiene este programa lorem Ipsum</p>
    <p id="texto">Este es un párrafo especial ya que no tiene este programa lorem Ipsum</p>
    <p class="texto32 bg-blue">Este es un párrafo especial ya que no tiene este programa lorem Ipsum</p>
    <p class="otro">Este es un párrafo <b>negrita</b> <i>Itálica</i><em>enfasis</em>h <sub>2</sub>o,E=m*C <sup>2</sup> especial ya que no tiene este programa lorem Ipsum</p>
    <blockquote>
      Esta es una prueba con blockquote
    </blockquote>
    <cite>Sócrates</cite>
    </article>>
    <article id="selectores-avanzados">
      <h2>Selectores avanzados</h2>
      <h3>Selectores hijos</h3>
      <h4>Hijos directos</h4>
      <ul class="hijos-directos">
        <li><b>Primavera</b></li>
        <li><b>Verano</b></li>
        <li><b>Otoño</b></li>
        <li><b>Invierno</b></li>
      </ul>
      <h4>Hijos descendientes</h4>
      <ul class="hijos-descendientes">
        <li><b>Primavera</b></li>
        <li><b>Verano</b></li>
        <li><b>Otoño</b></li>
        <li><b>Invierno</b></li>
      </ul>
      <!--         los selectores hermanos aplican a los elementos que son hermanos y están por debajo del elemento de referencia
 -->
      <h3>Selectores hermanos</h3>
      <h4>Hermanos generales</h4>
      <ul>
        <li class="hermanos-generales"><b>Primavera</b></li>
        <li><b>Verano</b></li>
        <li><b>Otoño</b></li>
        <li><b>Invierno</b></li>
      </ul>

      <h4>Hermanos adyacentes</h4>
      <ul>
        <li class="hermanos-adyacentes"><b>Primavera</b></li>
        <li><b>Verano</b></li>
        <li><b>Otoño</b></li>
        <li><b>Invierno</b></li>
      </ul><br />
      <a href="#inicio-css">Ir a inicio ☝️</a>
      <br />
      <h3>Selectores de atributos</h3>
      <nav class="selectores-atributos">
        <ul>
          <li><a href="https://jonmircha@gmail.com" target="_blank">Inicio</a></li>
          <li><a href="https://jonmircha@gmail.com/cursos" target="_blank">Cursos</a></li>
          <li><a href="https://jonmircha@gmail.com/blogs" target="_blank">Blogs</a></li>
          <li><a class="horas-dias cursos detalles-medios otros" href="http://jonmircha@gmail.com/cv" target="_blank">Comentarios</a></li>
          <li><a class="horas-dias cursos detalles-medios horas otros" href="https://jonmircha@gmail.com/testimonios" target="_blank">Testimonios</a></li>
          <li><a class="otro nueva-regla" href="http://jonmircha@gmail.com" target="_blank">Sobre nosotros</a></li>
        </ul><br />
        <a href="#inicio-css">Ir a inicio ☝️</a>

      </nav>
      <h3>Selector universal</h3>
      <ul class="selector-universal">
        <li><a href="https://jonmircha@gmail.com">Cursos</a></li>
        <li><a href="">Item 2 </a></li>
        <li><a href="">Item 3 </a></li>
        <li><a href="">Item 4 </a></li>
        <li><a href="">Item 5</a></li>
        <li><a href="">Item 6</a></li>
        <li><a href="">Item 7 </a></li>
      </ul>
      <a href="#inicio-css">Ir a inicio ☝️</a>
    </article>
    <hr />
    <br />
    <!-- Pseudoclases: dan estilo dependiendo del contexto,estado, y posición del elemento-->
    <article id="pseudoclases">
      <h3>Pseudoclases</h3>
      <form class="pseudoclases" action="" method="get" accept-charset="utf-8">
        <p> <label for="usuario">usuario: </label>
          <input type="text" name="" id="usuario " value="" required />
        </p> <label for="cargo">cargo: </label>
        <input type="text" name="" id="cargo " value="" required /></p>

        <input type="submit" name="" id="" value="aceptar">
      </form><br />
      <h3>Lista pseudoclases</h3>
      <ol class="list-pseudoclases">
        <li class="item">Mes Enero</li>
        <li class="item">Mes Febrero</li>
        <li class="item">Mes Marzo</li>
        <li class="item">Mes Abril</li>
        <li class="item">Mes Mayo</li>
        <li class="item">Mes Junio</li>
        <li class="item">Mes Julio</li>
        <li class="item">Mes Agosto</li>
        <li class="item">Mes Septiembre</li>
        <li class="item">Mes Octubre</li>
        <li class="item">Mes Noviembre</li>
        <li class="item">Mes Diciembre</li>
      </ol>
      <article class="article">
        <p>este es un párrafo</p>
        <div>esta es una div</div>
        <p>este es otro párrafo</p>
        <div>esta es otra div</div>
        <section>esto es una section</section>
        <p>este es otro párrafo</p>
        <div>esta es otra div</div>
        <footer>
          este es un footer
        </footer>
            <a href="#inicio-css">Ir a inicio ☝️</a>


      </article>
      <article class="listas-articulo">
        <p>eueefjfjffjffjfjfjfj</p>
        <div>
          ffjffjftkfkfkfkfkfkfkf
        </div>
        <p>eueefjfjffjffjfjfjfj</p>
        <div>
          ffjffjftkfkfkfkfkfkfkf
        </div>
        <p>eueefjfjffjffjfjfjfj</p>
        <div>
          ffjffjftkfkfkfkfkfkfkf
        </div>
        <p>eueefjfjffjffjfjfjfj</p>
        <div>
          ffjffjftkfkfkfkfkfkfkf
        </div>
        <p>eueefjfjffjffjfjfjfj</p>
        <div>
          ffjffjftkfkfkfkfkfkfkf
        </div>
            <a href="#inicio-css">Ir a inicio ☝️</a>

      </article>
      <!-- Los pseudoelementos le dan estilo a partes especificas de un elemento.ejemplo de eso son:
      ::after
      ::before
      ::selection
      ::first-line
      ::first-letter -->
      <a href="#inicio-css">Ir a inicio ☝️</a>

    </article>
          <article id="pseudoelementos" class="pseudoelementos" >
        <h2>Pseudo elementos</h2>
        <p>Este es un <span class="emoji"> nuevo </span> párrafo de prueba de emojis</p>
      </article>
          <article id="pseudoelementos2" class="pseudoelementos2" >

        <p>Este es un <span class="emoji"> nuevo </span> párrafo de prueba de emojis</p>
        <input class="placeholder"  type="text" name="" id="" value="" placeholder="escriba un nombre"/>
      </article>


</html>