-
Notifications
You must be signed in to change notification settings - Fork 13
/
CSS.txt
327 lines (257 loc) · 7.96 KB
/
CSS.txt
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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
=================
Guía de CSS by dM
=================
¿Qué son las Media Queries?
===========================
Las media queries son una parte fundamental del diseño web adaptable (responsive
design). Permiten aplicar estilos CSS específicos dependiendo de las
características del dispositivo que esté visualizando la página, como el ancho o
la altura de la pantalla, la orientación, la resolución, entre otras.
Las media queries son una característica de CSS3 que permiten aplicar estilos
condicionalmente, basándose en el tipo de dispositivo y sus características.
La sintaxis básica es:
@media (condición) {
/* Reglas CSS */
}
Ejemplos de Media Queries
=========================
Adaptar el Diseño Según el Ancho de la Pantalla
Uno de los usos más comunes es cambiar el diseño de una página web según el
ancho de la pantalla del dispositivo.
/* Estilos para dispositivos con un ancho máximo de 600px (ej. móviles) */
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
/* Estilos para dispositivos con un ancho mínimo de 601px (ej. tabletas y escritorios) */
@media (min-width: 601px) {
body {
background-color: lightgreen;
}
}
Ejemplo html y css:
<!doctype html>
<html lang="en">
<head>
<title>XXX</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Estilos para dispositivos con un ancho máximo de 600px (ej. móviles) */
@media (max-width: 600px) {
.container {
border: ridge 1px red;
background-color: blue;
}
}
/* Estilos para dispositivos con un ancho mínimo de 601px (ej. tabletas y escritorios) */
@media (min-width: 601px) {
.container {
border: ridge 1px red;
background-color: gray;
}
}
</style>
</head>
<body>
<div class="container">
<p>
<b>LVM (Logical Volume Manager)</b>
<br>
En Linux es una tecnología que permite gestionar el almacenamiento de manera más
flexible y dinámica. Con LVM, puedes crear volúmenes lógicos que pueden
expandirse y contraerse fácilmente, independientemente del tamaño físico de los
discos subyacentes. Esto facilita tareas como la creación de particiones
grandes, la gestión de espacio libre entre discos y la realización de copias de
seguridad mientras el sistema está en funcionamiento.
</p>
</div>
</body>
</html>
Adaptar el Diseño Según la Orientación del Dispositivo
======================================================
También puedes aplicar estilos según la orientación del dispositivo (horizontal
o vertical).
/* Estilos para dispositivos en modo vertical */
@media (orientation: portrait) {
body {
background-color: lightcoral;
}
}
/* Estilos para dispositivos en modo horizontal */
@media (orientation: landscape) {
body {
background-color: lightseagreen;
}
}
Usar Media Queries con Varias Condiciones
=========================================
Puedes combinar varias condiciones para crear reglas más específicas.
/* Estilos para dispositivos con un ancho máximo de 800px y en modo vertical */
@media (max-width: 800px) and (orientation: portrait) {
body {
background-color: lightgoldenrodyellow;
}
}
Buenas Prácticas
================
1- Mobile First: Comienza diseñando para dispositivos móviles y luego utiliza
media queries para adaptarlo a pantallas más grandes. Esto generalmente se hace
usando min-width en las media queries.
/* Estilos para móviles */
body {
background-color: white;
}
/* Estilos para pantallas de al menos 600px */
@media (min-width: 600px) {
body {
background-color: lightgreen;
}
}
2- Usa Unidades Relativas: Prefiere unidades relativas como em y % sobre
unidades absolutas como px para mejorar la flexibilidad y adaptabilidad de los
estilos.
3- Testea en Múltiples Dispositivos: Asegúrate de probar tu diseño en diferentes
dispositivos y tamaños de pantalla para garantizar una experiencia de usuario
consistente.
Tamaños de pantallas más comunes
================================
Los tamaños de pantallas más comunes varían, pero aquí hay una lista de los
tamaños más utilizados para diseñar sitios web adaptables. Estos puntos de
ruptura (breakpoints) son una guía y pueden ajustarse según las necesidades
específicas de tu proyecto.
Tamaños de Pantalla Comunes y Breakpoints
Dispositivos Móviles:
Pequeños móviles (teléfonos pequeños)
320px (ancho)
Móviles medianos (teléfonos medianos)
375px (ancho)
Móviles grandes (teléfonos grandes)
425px (ancho)
/* Estilos para dispositivos móviles pequeños */
@media (max-width: 320px) {
/* Reglas CSS */
}
/* Estilos para dispositivos móviles medianos */
@media (max-width: 375px) {
/* Reglas CSS */
}
/* Estilos para dispositivos móviles grandes */
@media (max-width: 425px) {
/* Reglas CSS */
}
Dispositivos Tablet:
Tabletas pequeñas
600px (ancho)
Tabletas medianas a grandes
768px (ancho)
/* Estilos para tabletas pequeñas */
@media (max-width: 600px) {
/* Reglas CSS */
}
/* Estilos para tabletas medianas a grandes */
@media (max-width: 768px) {
/* Reglas CSS */
}
Dispositivos de Escritorio:
Escritorios pequeños
1024px (ancho)
Escritorios medianos
1280px (ancho)
Escritorios grandes
1440px (ancho)
Escritorios muy grandes
1920px (ancho)
/* Estilos para escritorios pequeños */
@media (max-width: 1024px) {
/* Reglas CSS */
}
/* Estilos para escritorios medianos */
@media (max-width: 1280px) {
/* Reglas CSS */
}
/* Estilos para escritorios grandes */
@media (max-width: 1440px) {
/* Reglas CSS */
}
/* Estilos para escritorios muy grandes */
@media (max-width: 1920px) {
/* Reglas CSS */
}
Estos tamaños son una guía y pueden variar según el proyecto. Es importante
probar el diseño en diferentes dispositivos y ajustar los breakpoints según sea
necesario.
Script de JavaScript para mostrar el tamaño de la pantalla en cada momento
==========================================================================
<!doctype html>
<html lang="en">
<head>
<title>XXX</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Tus estilos CSS aquí */
.container {
border: ridge 1px red;
background-color: gray;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div id="screen-size"></div>
</div>
<script>
function updateScreenSize() {
const width = window.innerWidth;
const height = window.innerHeight;
document.getElementById('screen-size').textContent
= `Ancho de pantalla: ${width}px, Alto de pantalla: ${height}px`;
}
// Actualiza el tamaño de la pantalla al cargar la página
updateScreenSize();
// Actualiza el tamaño de la pantalla cuando la ventana cambia de tamaño
window.addEventListener('resize', updateScreenSize);
</script>
</body>
</html>
Fuente
======
ChatGPT
===================================================
Cambiar estilos de la barra de scroll del navegador
===================================================
Nota: Solo funcioan con navegadores que acepten selectores ::-webkit-scrollbar.
como Google Chrome, Firefox no los admite.
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-track {
background: red;
}
::-webkit-scrollbar-thumb {
background: blue;
border-radius: 12px;
border: 3px solid green;
}
Fuente
======
https://www.instagram.com/reel/DCXCIswKhUR/?igsh=MXhtZmlubWp5cHNhOA%3D%3D
======================================
Agregar fuentes personalizadas con css
======================================
@font-face {
font-family: "CustomFont";
src: url("../../fonts/batman.ttf");
}
.batman {
font-family: 'CustomFont', Arial, sans-serif;
font-weight:normal;
font-style:normal;
}
Fuente
======
https://www.pagecloud.com/blog/how-to-add-custom-fonts-to-any-website