Skip to content

Commit 9420857

Browse files
deletidevdeletidev
committed
feat: add Normalize.css and Reset CSS examples with documentation
1 parent 657cf98 commit 9420857

File tree

10 files changed

+831
-6
lines changed

10 files changed

+831
-6
lines changed

‎01-layout/06-normalize-reset/01-normalize-css/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Normalize CSS - Ejemplo
2+
3+
Este es un ejemplo práctico para demostrar el uso de **Normalize.css**.
4+
5+
Este ejemplo muestra:
6+
7+
- Cómo incluir Normalize.css en un proyecto
8+
- La diferencia visual entre usar y no usar normalize
9+
- Los beneficios de normalizar los estilos por defecto del navegador
10+
11+
## Cómo probarlo
12+
13+
1. Abre el archivo HTML en tu navegador
14+
2. Observa cómo se renderizan los elementos con normalize aplicado
15+
3. Compara con una versión sin normalize para ver las diferencias
16+
17+
## Recursos
18+
19+
- [Normalize.css oficial](https://necolas.github.io/normalize.css/)
20+
- [Documentación](https://github.com/necolas/normalize.css)

‎01-layout/06-normalize-reset/01-normalize-css/index.html‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Prueba de Normalize CSS</title>
6+
<!-- Si quieres probar con normalize, agrega este link -->
7+
<!-- <link rel="stylesheet" href="normalize.css" /> -->
8+
<style>
9+
body {
10+
padding: 20px;
11+
font-family: system-ui, -apple-system, sans-serif;
12+
}
13+
section {
14+
border: 1px solid #ccc;
15+
margin-bottom: 20px;
16+
padding: 10px;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<h1>Prueba de elementos que Normalize corrige</h1>
22+
23+
<section>
24+
<h2>1. Títulos dentro de section/article</h2>
25+
<article>
26+
<h1>Encabezado dentro de un article</h1>
27+
<p>
28+
El normalize ajusta el tamaño y márgenes del h1 en estos contextos.
29+
</p>
30+
<p>
31+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet,
32+
culpa iusto? Architecto tempora magni earum. Soluta molestiae mollitia
33+
aliquam ad odio assumenda dignissimos natus numquam quo. Autem soluta
34+
voluptatum nulla nemo distinctio, praesentium natus quidem
35+
consequuntur harum molestias cumque provident vitae exercitationem
36+
temporibus! Itaque iste ad, quae libero quos dolore cum corrupti,
37+
velit quis corporis maiores odio. Illum at voluptatem pariatur
38+
corrupti soluta, nulla iste mollitia velit? Necessitatibus nihil quae
39+
iste perferendis! Minima est cum mollitia eius fugiat eaque pariatur
40+
quisquam vero totam consequuntur facilis quos quis cupiditate optio,
41+
voluptatibus, enim nostrum iure alias maxime praesentium ex nemo,
42+
natus deserunt? Magnam beatae ad non nihil sit deserunt, rerum labore
43+
quam aut molestiae dolorem officia est quibusdam quae saepe adipisci
44+
in quidem fugiat, accusantium aliquid doloribus ipsa. Iusto, ratione
45+
corporis minus temporibus id debitis voluptatem reiciendis ipsam
46+
quaerat quod odio ea aut repudiandae dolor iste laudantium porro quis
47+
dicta assumenda quibusdam magni. Et voluptate doloribus esse facilis
48+
fuga aperiam eos obcaecati aliquam quidem, voluptatum enim magnam,
49+
voluptatibus, distinctio sed reiciendis assumenda! Animi magni quos
50+
voluptatum officia et dolorem laboriosam sint. Nulla quis fuga
51+
necessitatibus labore dolorum veritatis vero velit aliquam facilis
52+
cumque et nam ea accusamus non repudiandae natus, architecto pariatur.
53+
</p>
54+
</article>
55+
</section>
56+
57+
<section>
58+
<h2>2. Texto en línea</h2>
59+
<p>
60+
Texto con <abbr title="Organización de las Naciones Unidas">ONU</abbr>,
61+
<b>negrita</b>, <strong>strong</strong>, <code>código</code>,
62+
<sub>sub</sub> y <sup>sup</sup>.
63+
</p>
64+
<p>
65+
Normalize corrige tamaños, subrayados, herencia de fuentes, y la
66+
alineación de sub/sup.
67+
</p>
68+
</section>
69+
70+
<section>
71+
<h2>3. Formularios</h2>
72+
<form>
73+
<p>
74+
<label>Texto: <input type="text" placeholder="Escribe algo" /></label>
75+
</p>
76+
<p>
77+
<label>Número: <input type="number" value="5" /></label>
78+
</p>
79+
<p>
80+
<label
81+
>Búsqueda: <input type="search" placeholder="Buscar..."
82+
/></label>
83+
</p>
84+
<p>
85+
<label>Archivo: <input type="file" /></label>
86+
</p>
87+
<p>
88+
<label><input type="checkbox" /> Acepto</label>
89+
<label><input type="radio" name="r" /> Opción 1</label>
90+
<label><input type="radio" name="r" /> Opción 2</label>
91+
</p>
92+
<p>
93+
<button type="submit">Botón</button>
94+
<input type="submit" value="Enviar" />
95+
</p>
96+
</form>
97+
<p>Normalize corrige paddings, bordes, herencia de tipografía.</p>
98+
</section>
99+
100+
<section>
101+
<h2>4. Otros</h2>
102+
<hr />
103+
<pre>Texto preformateado</pre>
104+
<details>
105+
<summary>Detalles</summary>
106+
<p>Contenido dentro de details/summary.</p>
107+
</details>
108+
<p>Normalize corrige hr, pre, y el tipo de display de details/summary.</p>
109+
</section>
110+
</body>
111+
</html>

0 commit comments

Comments
 (0)