-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathclase4.html
200 lines (159 loc) · 7.96 KB
/
clase4.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
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
189
190
191
192
193
194
195
196
197
198
199
200
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Presentación CSS</title>
<!-- Importa Bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body{
background-image: url(simagenes/fondotecno.jpg);
background-size: cover; /* Para que la imagen cubra toda la pantalla */
background-attachment: fixed; /* Hace que el fondo permanezca fijo al desplazarse */
background-position: center; /* Centra la imagen */
background-repeat: no-repeat; /* Evita que la imagen se repita */
}
/* Estilos adicionales si los necesitas */
.section-title {
margin-top: 20px;
margin-bottom: 10px;
}
.custom-section {
padding: 20px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 5px;
}
.code-example {
background-color: #e9ecef;
padding: 10px;
border-radius: 10px;
}
.text-center{
color: rgb(202, 41, 41);
}
.imagenes-selectores {
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}
.img-selector {
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}
.imagen-jerarquia{
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}
.jerarquia-css{
justify-content: center;
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}
.containerIMG{
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}
.contenedorIMG{
justify-content: center;
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}
.imagenesCaja{
display: flex;
gap: 15px; /* Espacio entre las imágenes */
justify-content: center; /* Centra las imágenes horizontalmente */
margin-top: 10px; /* Espacio por encima de las imágenes */
}
.cajacodigo {
width: 45%; /* Ajusta el ancho de las imágenes */
height: auto; /* Mantén la proporción de la imagen */
border-radius: 5%;
}
</style>
</head>
<body>
<div class="container">
<header class="text-center mt-4 p-4 bg-primary text-white rounded shadow-lg">
<h1>Presentación de CSS</h1>
<img src="simagenes/Css.png" alt="Imagen CSS" style="height: 100%; margin-left: 15px; margin-top: 2%;
margin-bottom: 3%;">
</header>
<!-- Sección de Selectores CSS -->
<section id="selectores" class="custom-section">
<h2 class="section-title">Selectores CSS</h2>
<p>En CSS, los selectores son patrones que se utilizan para seleccionar los elementos que desea diseñar como por ejemplo:</p>
<div class="imagenes-selectores">
<img src="simagenes/selector1.png" alt="Imagen Selector 1" class="img-selector">
<img src="simagenes/selector2.png" alt="Imagen Selector 2" class="img-selector">
</div>
</section>
<!-- ===================== Sección de Jerarquía CSS ====================-->
<section id="jerarquia-css" class="custom-section">
<h2 class="section-title">Jerarquía en CSS</h2>
<ul>
<li>CSS en línea (aplicado directamente en la etiqueta)</li>
<li>CSS interno (aplicado entre etiquetas <code><style></code> en la misma página)</li>
<li>CSS externo (aplicado externamente con la etiqueta <code><link></code>)</li>
<li>Clases y IDs</li>
<li><code>!important</code></li>
</ul>
<div class="imagen-jerarquia">
<img src="simagenes/jerarquiacss.png" alt="Imagen Css" class="jerarquia-css">
</div>
</section>
<!--=========================== Sección de Etiqueta Div==================-->
<section id="div" class="custom-section">
<h2 class="section-title">Etiqueta <code><div></code></h2>
<p>El elemento <code><div></code> es el contenedor genérico para el contenido, sin efecto en el diseño hasta que se le aplica un estilo usando CSS.</p>
<div class="containerIMG">
<img src="simagenes/container.png" alt="imagen contenedor" class="contenedorIMG">
</div>
</section>
<!--=========================== Sección de Modelo de Caja ===============================-->
<section id="modelo-caja" class="custom-section">
<h2 class="section-title">Modelo de Caja</h2>
<p>El modelo de caja define cómo se verá un sitio web a través de propiedades como <code>box-sizing</code>, <code>border</code>, <code>padding</code> y <code>margin</code>.</p>
<div class="code-example">
<code>box-sizing: border-box;</code><br>
<code>border: 1px solid black;</code><br>
<code>padding: 10px;</code><br>
<code>margin: 20px;</code>
</div>
<div class="imagenesCaja">
<img src="simagenes/cajacodigo.png" alt="Codigo de caja" class="cajacodigo">
<img src="simagenes/cajaa.png" alt="Caja" class="cajacodigo">
</div>
</section>
<!-- Sección de Display Flex -->
<section id="display-flex" class="custom-section">
<h2 class="section-title">Display Flex</h2>
<p>El módulo de caja flexible permite crear diseños flexibles y responsivos sin flotación ni posicionamiento. Para empezar, definimos un contenedor flexible.</p>
<div class="displayfleximg" style="display: flex; justify-content: center;">
<img src="simagenes/displayflex.png" alt="display-flex" style="height: 100%; margin-top: 2%; border-radius: 3%;
margin-bottom: 3%">
</div>
</section>
<!-- Sección de Display Grid -->
<section id="display-grid" class="custom-section">
<h2 class="section-title">Display Grid</h2>
<p>El diseño de cuadrícula en CSS permite un sistema de diseño basado en filas y columnas, facilitando el diseño de páginas web.</p>
<div class="displayfleximg" style="display: flex; justify-content: center;">
<img src="simagenes/displaygrid.png" alt="display-flex" style="height: 100%; margin-top: 2%; border-radius: 3%;
margin-bottom: 3%">
</div>
</section>
</div>
<!-- Script Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>