Machine Translated by Google

CSS

Notas para profesionales CSS

Notas para profesionales

más de 200 páginas

de consejos y trucos profesionales

GolKicker.com Libros Descargo

de responsabilidad Este es un libro gratuito no oficial creado con fines educativos
de Programación Gratis y no está asociado con grupos o compañías oficiales de CSS.
Todas las marcas comerciales y marcas registradas
son propiedad de sus respectivos dueños
Machine Translated by Google

Contenido
Sobre .................................................... .................................................... .................................................... ............................. 1

Capítulo 1: Primeros pasos con CSS .................................................... .................................................... ................ 2

Sección 1.1: Hoja de estilo externa ............................................... .................................................... ...................................... 2

Sección 1.2: Estilos Internos ............................................. .................................................... ............................................. 3
Sección 1.3: regla @import de CSS (una de las reglas at de CSS) .................................. .................................................... .............. 4
Sección 1.4: Estilos en línea ............................................... .................................................... .................................................... 4
Sección 1.5: Cambiar CSS con JavaScript ........................................... .................................................... .................... 4
Sección 1.6: Diseñar listas con CSS .................................................... .................................................... ............................. 5

Capítulo 2: Estructura y formato de una regla CSS .................................................... ................................ 7

Sección 2.1: Listas de .................................................... .................................................... ............................................. 7

propiedades Sección 2.2: Selectores .................................................... .................................................... .................................... 7

múltiples Sección 2.3: Reglas, selectores y bloques de declaración .................................................... ............................................. 7

Capítulo 3: Comentarios .................................................... .................................................... ............................................. 8

Sección 3.1: Línea única .................................................... .................................................... .......................................................... 8
Sección 3.2: Línea múltiple .................................................... .................................................... .......................................... 8

Capítulo 4: Selectores .................................................... .................................................... .......................................................... 9

Sección 4.1: Selectores básicos .................................................... .................................................... ............................................. 9

Sección 4.2: Selectores de atributos .................................................... .................................................... ................................ 9
Sección 4.3: Combinadores .................................................... .................................................... ........................................ 12
Sección 4.4: Pseudo-clases .................................................... .................................................... .................................... 13
Sección 4.5: Pseudo Clase Infantil .................................................... .................................................... ............................. 15
Sección 4.6: Selectores de nombre de clase .................................................... .................................................... ........................ dieciséis

Sección 4.7: Seleccione un elemento usando su ID sin la alta especificidad del selector de ID Sección 4.8: El ............................................. 17
....................................................
selector :last-of-type Sección 4.9: CSS3 :ejemplo de selector dentro del .................................................... .................. 17

rango ............. .................................................... .......................................... 17

Sección 4.10: A. El ejemplo de :not pseudo-clase & B. :focus-within CSS pseudo-class .......................... ............. 18
Sección 4.11: Booleano global con checkbox:checked y ~ (combinador general de hermanos) .................................. 19
Sección 4.12: Selectores de ID .................................................... .................................................... ........................................ 20

Sección 4.13: Cómo aplicar estilo a una entrada de rango ............................... .................................................... ....................... 21
Sección 4.14: El ejemplo del selector de pseudo-clase :only-child .................................. ............................................. 21
Capítulo 5: Antecedentes .............................................. .................................................... ............................................. 22

Sección 5.1: Color de fondo Sección .................................................... .................................................... ............................... 22

5.2: Gradientes de fondo Sección 5.3: Imagen .................................................... .................................................... ....................... 24

de fondo .................................. .................................................... ............................................. 25

Sección 5.4: Taquigrafía del fondo Sección .................................................... .................................................... ...................... 26
.................................................... .................................................... ..................................
5.5: Tamaño del fondo Sección 5.6: Posición 27

del fondo Sección 5.7: La propiedad .................................................... .................................................... .......................... 31

background-origin ........... .................................................... ............................. 32

Sección 5.8: Imagen de fondo múltiple ........................................... .................................................... ..................... 34
Sección 5.9: Archivo adjunto de fondo Sección .................................................... .................................................... ................... 35

5.10: Clip de fondo ........................................... .................................................... .......................................... 36

Sección 5.11: Repetición de fondo ............................................... .................................................... .......................... 37
Sección 5.12: Propiedad del modo de mezcla de fondo .................................. .................................................... .......... 37
Sección 5.13: Color de fondo con opacidad ............................................... .................................................... ............. 38
Capítulo 6: Centrado .............................................. .................................................... .......................................................... 39
Sección 6.1: Uso de Flexbox .................................................... .................................................... ............................................. 39

Sección 6.2: Uso de la transformación CSS .................................................... .................................................... .......................... 40

Machine Translated by Google

Sección 6.3: Uso de margen: 0 auto; .................................................... .................................................... ......................... 41

Sección 6.4: Uso de alineación de texto ........................................... .................................................... .......................................... 42
Sección 6.5: Uso de posición: absoluta Sección .................................................... .................................................... ..................... 42

6.6: Uso de calc() .................................... .................................................... .................................................... ..... 43

Sección 6.7: Uso de altura de línea ........................................... .................................................... .......................................... 43
Sección 6.8: Alineación vertical de cualquier cosa con 3 líneas de código .................................................... ............................................. 44

Sección 6.9: Centrado en relación con otro elemento Sección 6.10:.................................................... .......................................................... 44

Técnica del elemento fantasma (truco de Michaÿ Czernow) ................... .................................................... ...... 45
Sección 6.11: Centrado vertical y horizontalmente sin preocuparse por la altura o el ancho Sección 6.12: Alineación ............................... 46

vertical de una imagen dentro de div Sección 6.13: Centrado con ....................................................
tamaño fijo Sección 6.14: Alineación ....................................................
vertical de . 47
....................................................
elementos dinámicos de altura Sección 6.15: Centrado horizontal y vertical usando diseño ....................................................
de ................... 47

tabla ... .................................................... ................... 49 .................................................... ........................................ 49

Capítulo 7: El modelo de caja .................................................... .................................................... .................................... 51

Sección 7.1: ¿Qué es el modelo de caja? .................................................... .................................................... ...................... 51

Sección 7.2: tamaño de caja ............................................. .................................................... .................................................... 52

Capítulo 8: Márgenes .............................................. .................................................... .................................................... .. 55

Sección 8.1: Colapso de margen ............................................... .................................................... ..................................... 55

Sección 8.2: Aplicar margen en un lado dado Sección .................................................... .................................................... ........... 57

8.3: Simplificación de la propiedad de margen .................................. .................................................... ......................... 58

Sección 8.4: Centrar horizontalmente los elementos en una página usando el margen ....................................... ............................... 58
Sección 8.5: Ejemplo 1: .................................................... .................................................... ............................................ 59

Sección 8.6: Márgenes negativos ....................................... .................................................... .......................................... 59

Capítulo 9: Relleno .............................................. .................................................... .................................................... .. 61

Sección 9.1: Relleno abreviado Sección .................................................... .................................................... ............................. 61

9.2: Relleno en un lado dado .................................................... .................................................... ..................... 62

Capítulo 10: Frontera .................................................... .................................................... .......................................................... 63

Sección 10.1: borde-radio .................................................... .................................................... ..................................... 63

Sección 10.2: estilo de borde ............................................. .................................................... ............................................. 64

Sección 10.3: Múltiples Bordes .................................................... .................................................... ................................ sesenta y cinco

Sección 10.4: borde (abreviaturas) ........................................... .................................................... ..................................... 66

Sección 10.5: borde colapsado .................................................. .................................................... ............................................. 66
Sección 10.6: borde-imagen ............................................. .................................................... .......................................... 67
Sección 10.7: Creando un borde multicolor usando border-image ........................................... ............................. 67
Sección 10.8: borde-[izquierda|derecha|arriba|abajo] .................................... .................................................... ........................ 68
Capítulo 11: Esquemas .................................................... .................................................... .......................................................... 69

Sección 11.1: Resumen .................................................... .................................................... ............................................................. 69

Sección 11.2: estilo de esquema ............................................... .................................................... ............................................. 69

Capítulo 12: Desbordamiento.................................................... .................................................... ............................................ 71

Sección 12.1: desbordamiento-envoltura .................................. .................................................... .......................................... 71

Sección 12.2: desbordamiento-x y desbordamiento-y .................................. .................................................... ......................... 72
Sección 12.3: desbordamiento: desplazamiento .................................................... .................................................... .................................... 73
Sección 12.4: desbordamiento: visible .................................................... .................................................... .................................. 73

Sección 12.5: Contexto de formato de bloque creado con desbordamiento .................................................... .......................... 74

Capítulo 13: Consultas de medios ............................................. .................................................... ............................................. 76

Sección 13.1: Terminología y estructura Sección .................................................... .................................................... ............... 76

13.2: Ejemplo básico ....................................... .................................................... ............................................... 77

Sección 13.3: tipo de medio ............................................... .................................................... ............................................. 77
Sección 13.4: Consultas de medios para pantallas retina y no retina .................................................... ......................... 78
Machine Translated by Google

Sección 13.5: Ancho vs ventana gráfica ........................................... .................................................... .................................... 79

Sección 13.6: Uso de Consultas de medios para apuntar a diferentes tamaños de .................................................... ................... 79

pantalla Sección 13.7: Uso en la etiqueta de enlace ............... .................................................... .................................................... ..... 80
Sección 13.8: consultas de medios e IE8 .................................................... .................................................... ....................... 80

Capítulo 14: Flotadores.................................................... .................................................... .................................................... 81

Sección 14.1: Hacer flotar una imagen dentro del .................................................... .................................................... ............... 81

texto Sección 14.2: propiedad clara .................................. .................................................... .................................................. 82

Sección 14.3: Clearfix .................................................... .................................................... ................................................ 83

Sección 14.4: DIV en línea usando float .................................................... .................................................... ........................ 84

Sección 14.5: Uso de la propiedad de desbordamiento para borrar .................................................... .......................................... 86

floats Sección 14.6: Diseño simple de dos columnas de ancho fijo ........... .................................................... ..................... 86
Sección 14.7: Diseño simple de tres columnas de ancho fijo .................................. .................................................. 87
Sección 14.8: Diseño perezoso/codicioso de dos columnas .................................. .................................................... ............ 88

Capítulo 15: Tipografía ............................................... .................................................... ............................................. 89

Sección 15.1: La fuente abreviada .................................................... .................................................... .......................... 89

Sección 15.2: Cotizaciones ............................................... .................................................... .................................................... .. 90

Sección 15.3: Tamaño de fuente .................................................... .................................................... ............................................. 90
Sección 15.4: Dirección del texto .................................................... .................................................... ..................................... 90
Sección 15.5: Pilas de fuentes .................................................... .................................................... ........................................ 91
Sección 15.6: Desbordamiento de texto .................................................... .................................................... ..................................... 91
Sección 15.7: Sombra de texto .................................................... .................................................... ...................................... 91
Sección 15.8: Transformación de texto .................................................... .................................................... .................................... 92

Sección 15.9: Espaciado entre letras ............................................... .................................................... .......................................... 92

Sección 15.10: Sangría de texto .................................................... .................................................... ........................................ 93
Sección 15.11: Decoración de texto .................................................... .................................................... .................................. 93

Sección 15.12: Espaciado entre palabras ............................................. .................................................... .......................................... 94

Sección 15.13: Variante de fuente .................................................... .................................................... ...................................... 94

Capítulo 16: Diseño de caja flexible (Flexbox) ........................................... .................................................... .......... 96

Sección 16.1: Centrado dinámico vertical y horizontal (alinear elementos, justificar contenido) .................................. ..... 96
Sección 16.2: Pie de página adhesivo de altura variable .................................................... .................................................... ....... 102

Sección 16.3: Ajuste óptimo de elementos a su contenedor Sección .................................................... ........................................ 103
.................................................... .................................................... ....
16.4: Diseño del Santo Grial con Flexbox Sección 16.5: Botones 104

perfectamente alineados dentro de tarjetas con flexbox Sección 16.6: Misma altura .................................................... ...................... 105

en contenedores anidados Capítulo 17: Cascada y .................................................... .................................................... 107

especificidad . .................................................... .................................................... ..... 109

Sección 17.1: Cálculo de la especificidad del selector ........................................... .................................................... ............. 109
Sección 17.2: La declaración !importante Sección .................................................... .................................................... ............. 111

17.3: Cascada ....................................... .................................................... .................................................... .. 112

Sección 17.4: Ejemplo de especificidad más compleja ........................................... .................................................... ....... 113

Capítulo 18: Colores Sección .................................................... .................................................... ................................................ 115

18.1: color actual .................................................... .................................................... ...................................... 115

Sección 18.2: Palabras clave de color ............................................. .................................................... .................................. 116

Sección 18.3: Valor Hexadecimal .................................................... .................................................... ......................... 122

Sección 18.4: Notación rgb() .................................................... .................................................... .................................... 122

Sección 18.5: Notación rgba() .................................................... .................................................... ............................... 123

Sección 18.6: Notación hsl() Sección.................................................... .................................................... .................................... 123

18.7: Notación hsla() .................................................... .................................................... .................................. 124

Capítulo 19: Opacidad ............................................... .................................................... .......................................................... 126

Sección 19.1: Propiedad de opacidad ............................................. .................................................... .................................... 126

Sección 19.2: Compatibilidad de IE para `opacidad` ........................................... .................................................... ................... 126
Machine Translated by Google

Capítulo 20: Unidades de longitud

.................................................... .................................................... .................................... 127

Sección 20.1: Creación de elementos escalables usando rems y ems .................................................... ......................... 127
Sección 20.2: Tamaño de fuente con rem .................................................... .................................................... .......................... 128
Sección 20.3: vmin y vmax .................................................... .................................................... ............................... 129
Sección 20.4: vh y vw .................................................... .................................................... ........................................ 129

Sección 20.5: usando porcentaje % .................................................... .................................................... ............................... 129

Capítulo 21: Pseudo-Elementos .................................................... .................................................... ......................... 131

Sección 21.1: Pseudo-Elementos .................................................... .................................................... ............................. 131

Sección 21.2: Pseudo-Elementos en Listas .................................................... .................................................... ................ 131

Capítulo 22: Posicionamiento ............................................. .................................................... ..........................................133

Sección 22.1: Elementos superpuestos con índice z Sección .................................................... .......................................................... 133
22.2: Posición absoluta .................................................... .................................................... ............................ 134

Sección 22.3: Posición fija ............................................... .................................................... .......................................... 135

Sección 22.4: Posición Relativa .................................................... .................................................... ............................. 135

Sección 22.5: Posicionamiento estático ............................................. .................................................... .................................. 135

Capítulo 23: Control de diseño .................................................... .................................................... ............................. 137

Sección 23.1: La propiedad de visualización ........................................... .................................................... ............................. 137

Sección 23.2: Para obtener la estructura de una tabla antigua .................................................... .......................................................... 139

....................................................
usando div Capítulo 24: Cuadrícula Sección 24.1: Ejemplo .................................................... .................................................... .. 141

básico .............................. .................................................... .................................................... .. 141

Capítulo 25: Tablas .................................................... .................................................... .......................................................... 143

Sección 25.1: diseño de la tabla ........................................... .................................................... .......................................... 143

Sección 25.2: celdas vacías ............................................. .................................................... .......................................... 143

Sección 25.3: borde-colapso ............................................... .................................................... ..................................... 143

Sección 25.4: espaciado de bordes ............................................. .................................................... ..................................... 144

Sección 25.5: lado de la leyenda ........................................... .................................................... .......................................... 144

Capítulo 26: Transiciones .................................................... .................................................... ..................................... 145

Sección 26.1: Transición abreviada .................................................... .................................................... ....................... 145

Sección 26.2: cubic-bezier .................................................... .................................................... ..................................... 145

Sección 26.3: Transición (manual) ............................................... .................................................... .......................... 147

Capítulo 27: Animaciones .................................................... .................................................... ..................................... 148

Sección 27.1: Animaciones con fotogramas clave ........................................... .................................................... .................... 148
Sección 27.2: Animaciones con la propiedad de transición ........................................... ................................................ 149

Sección 27.3: Ejemplos de sintaxis ............................................. .................................................... .................................. 150

Sección 27.4: Aumento del rendimiento de la animación utilizando el atributo `will-change` .......................................... 151

Capítulo 28: Transformaciones 2D .................................................... .................................................... ............................. 152

Sección 28.1: Rotar .................................................... .................................................... .......................................................... 152

Sección 28.2: Escala .................................................... .................................................... ................................................ 153
Sección 28.3: Sesgo .................................................... .................................................... .......................................................... 153

Sección 28.4: Transformadas múltiples .................................................... .................................................... ........................ 153

Sección 28.5: Traducir .................................................... .................................................... ............................................. 154

Sección 28.6: Transformar Origen ................................................ .................................................... ............................. 155

Capítulo 29: Transformaciones 3D .................................................... .................................................... ............................. 156

Sección 29.1: Puntero de compás o forma de aguja usando transformaciones 3D Sección .................................................... .............. 156
29.2: Efecto de texto 3D con sombra .................................................... .................................................... ............ 157

Sección 29.3: cara posterior-visibilidad ........................................... .................................................... ............................. 158

Sección 29.4: Cubo 3D .................................................... .................................................... .......................................... 159

Capítulo 30: Propiedad de filtro ............................................. .................................................... .................................... 161

Sección 30.1: Desenfoque .................................................... .................................................... .................................................... .. 161
Machine Translated by Google

Sección 30.2: Sombra paralela (utilice box-shadow en su lugar si es posible) .................................. .................................... 161
Sección 30.3: Rotación de matiz .................................................... .................................................... ...................................... 162

Sección 30.4: Valores de filtros múltiples .................................................... .................................................... ...................... 162

Sección 30.5: Invertir color .................................................... .................................................... ..................................... 163

Capítulo 31: Estilo del cursor ............................................. .................................................... ..................................... 164

Sección 31.1: Cambiar el tipo de cursor ............................................... .................................................... ............................. 164

Sección 31.2: puntero-eventos ............................................. .................................................... .......................................... 164
Sección 31.3: color de intercalación .................................................... .................................................... ........................................ 165

Capítulo 32: box-shadow Sección .................................................... .................................................... .................................... 166

32.1: sombra paralela solo desde abajo usando un pseudo-elemento .................................. .......................................... 166
Sección 32.2: sombra paralela .................................................... .................................................... .................................... 167

Sección 32.3: sombra paralela interna .................................................... .................................................... ......................... 167

Sección 32.4: sombras múltiples Capítulo.................................................... .................................................... ............................ 168

33: Formas para flotadores .................................................... .................................................... ....................... 170

Sección 33.1: Forma exterior con forma básica – círculo() .................................. .................................................... 170
Sección 33.2: Margen de forma ............................................... .................................................... .......................................... 171

Capítulo 34: Estilos de lista ............................................. .................................................... ............................................ 173

Sección 34.1: Posición de la viñeta .................................................... .................................................... .................................... 173

Sección 34.2: Eliminación de viñetas/números Sección .................................................... .................................................... ........ 173

34.3: Tipo de viñetas o numeración .................................. .................................................... .......................... 173

Capítulo 35: Contadores.................................................... .................................................... .......................................... 175

Sección 35.1: Aplicación de estilo de números romanos a la salida del contador .................................. ........................ 175

Sección 35.2: Numeración de cada elemento mediante el contador .................................................... .......................................... 175

CSS Sección 35.3: Implementación de la numeración multinivel mediante contadores CSS .................................................... ........... 176

Capítulo 36: Funciones .................................................... .................................................... ............................................. 178

Sección 36.1: función calc() Sección .................................................... .................................................... .................................... 178

36.2: función attr() Sección 36.3: .................................................... .................................................... .................................... 178

función var() Sección 36.4: función .................................................... .................................................... .................................... 178

radial-gradient() Sección 36.5: función linear- .................................................... .................................................... .............. 179

gradient() .................................................... .................................................... .............. 179

Capítulo 37: Propiedades personalizadas (variables) ....................................... .................................................... .... 180

Sección 37.1: Color variable .................................................... .................................................... .................................... 180

Sección 37.2: Dimensiones Variables .................................................... .................................................... ...................... 180

Sección 37.3: Cascada Variable ............................................... .................................................... ............................. 180

Sección 37.4: Válidos/Inválidos ............................................... .................................................... ........................................ 181

Sección 37.5: Con consultas de medios ........................................... .................................................... ............................... 182

Capítulo 38: Formas de un solo elemento ........................................ .................................................... .................... 184

Sección 38.1: Trapezoide ............................................... .................................................... ............................................. 184

Sección 38.2: Triángulos ............................................... .................................................... ............................................. 184
Sección 38.3: Círculos y Elipses .................................................. .................................................... ............................... 187
Sección 38.4: Ráfagas .................................................... .................................................... .......................................................... 188

Sección 38.5: Cuadrado ............................................... .................................................... .................................................. 190

Sección 38.6: Cubo .................................................... .................................................... .......................................................... 190

Sección 38.7: Pirámide ............................................... .................................................... ............................................... 191

Capítulo 39: Columnas .................................................... .................................................... .......................................... 193

Sección 39.1: Ejemplo simple (recuento de columnas) .................................. .................................................... ............. 193
Sección 39.2: Ancho de columna .................................................... .................................................... .................................. 193

Capítulo 40: Múltiples columnas .................................................... .................................................... ........................ 195

Sección 40.1: Crear varias columnas .................................................... .................................................... ................ 195

Machine Translated by Google

Sección 40.2: Ejemplo básico ............................................... .................................................... ..................................... 195

Capítulo 41: Diseño de bloque en línea ........................................... .................................................... .......................... 196

Sección 41.1: Barra de navegación .................................................... .................................................... .................. 196
....................................................
justificada Capítulo 42: Herencia Sección 42.1: .................................................... ..................................... 197
Herencia automática .................................................... .................................................... ..................... 197
Artículo 42.2: Sucesión forzosa .................................................... .................................................... ...................... 197

Capítulo 43: Sprites de imágenes CSS .................................. .................................................... .......................... 198

Sección 43.1: Una Implementación Básica ............................................... .................................................... ........................ 198

Capítulo 44: Recorte y enmascaramiento ............................................... .................................................... ..................... 199

Sección 44.1: Recorte y enmascaramiento: Descripción general y .................................................... .......................... 199
diferencia Sección 44.2: Máscara simple que desvanece una imagen de sólida a transparente ........... ............................. 201
Sección 44.3: Recorte (Círculo) ............................................... .................................................... ..................................... 201
Sección 44.4: Recorte (Polígono) ............................................... .................................................... ............................. 202
Sección 44.5: Uso de máscaras para cortar un agujero en medio de una imagen .................................. ............................. 203
Sección 44.6: Uso de máscaras para crear imágenes con formas irregulares ....................................... ............................. 204

Capítulo 45: Fragmentación ............................................... .................................................... .......................... 206

Sección 45.1: Salto de página de impresión de medios .................................. .................................................... ......................... 206

Capítulo 46: Modelo de objetos CSS (CSSOM) ....................................... .................................................... ............ 207

Sección 46.1: Adición de una regla de imagen de fondo a través de .................................................... ......................... 207
CSSOM Sección 46.2: Introducción
.................................................... .................................................... ..................................... 207

Capítulo 47: Consultas de funciones ............................................. .................................................... ............................... 208

Sección 47.1: Uso básico de @supports ........................................... .................................................... ......................... 208

Sección 47.2: Encadenamiento de detecciones de características .................................................... .................................................... .......... 208

Capítulo 48: Contexto de apilamiento .................................................... .................................................... ....................... 209

Sección 48.1: Contexto de .................................................... .................................................... ............................. 209
.................................................... .................................................... ...
apilamiento Capítulo 49: Contextos de formato de bloque 212

Sección 49.1: Uso de la propiedad de desbordamiento con un valor diferente a visible .................................................... ...... 212

Capítulo 50: Centrado vertical ............................................... .................................................... .......................... 213

Sección 50.1: Centrado con pantalla: tabla .................................................... .................................................... .......... 213
Sección 50.2: Centrado con Flexbox Sección.................................................... .................................................... .................. 213
50.3: Centrado con Transform Sección 50.4: .................................................... .................................................... ............. 214
Centrado de texto con altura de línea ........... .................................................... ............................. 214
Sección 50.5: Centrado con Posición: absoluta Sección .................................................... .................................................... . 214
50.6: Centrado con pseudo elemento .................................................... .................................................... .... 215

Capítulo 51: Ajuste y colocación de objetos .................................................... .................................................... ....... 217

Sección 51.1: ajuste de objeto ............................................. .................................................... .................................................... 217

Capítulo 52: Patrones de diseño CSS ........................................... .................................................... ....................... 220

Sección 52.1: BEM .................................................... .................................................... .................................................... . 220
.................................................... .................................................... ..
Capítulo 53: Compatibilidad y prefijos del navegador 222
Sección 53.1: Transiciones .................................................... .................................................... ........................................ 222
Sección 53.2: Transformar .................................................... .................................................... ............................................. 222

Capítulo 54: Normalización de los estilos del navegador .................................. .................................................... ....... 223
Sección 54.1: normalize.css .................................................... .................................................... .................................... 223
Sección 54.2: Enfoques y ejemplos ............................................... .................................................... .......... 223

Capítulo 55: Hacks de Internet Explorer Sección .................................................... .................................................... .......... 226

55.1: Adición de soporte de bloque en línea a IE6 e IE7 Sección .................................................... ..................................... 226
55.2: Modo de alto contraste en Internet Explorer 10 y superior ........... .......................................... 226
Sección 55.3: Internet Explorer 6 e Internet Explorer 7 únicamente .................................. .......................................... 227
Machine Translated by Google

Sección 55.4: solo Internet Explorer 8 ........................................... .................................................... .......................... 227

Capítulo 56: Rendimiento .................................................... .................................................... .................................. 228

Sección 56.1: Use la transformación y la opacidad para evitar el diseño del disparador .................................. ............................... 228
Créditos .................................................... .................................................... .................................................... ...................... 231

También te puede interesar.................................................... .................................................... .................................................... 236

Machine Translated by Google

Sobre

No dude en compartir este PDF con cualquier persona de forma

gratuita, la última versión de este libro se puede descargar desde:
https://goalkicker.com/CSSBook

Este libro de Notas de CSS para profesionales está compilado a partir de la documentación
de desbordamiento de pila , el contenido está escrito por la hermosa gente de Stack Overflow.
El contenido del texto se publica bajo Creative Commons BY-SA, vea los créditos al final de este libro

que contribuyeron a los diversos capítulos. Las imágenes pueden ser propiedad de sus respectivos
propietarios a menos que se especifique lo contrario

Este es un libro gratuito no oficial creado con fines educativos y no está afiliado a grupos o
empresas oficiales de CSS ni a Stack Overflow. Todas las marcas comerciales y marcas
comerciales registradas son propiedad de sus respectivos
dueños de la empresa

No se garantiza que la información presentada en este libro sea correcta ni precisa, utilícela bajo
su propio riesgo.

Envíe comentarios y correcciones a [email protected]

GoalKicker.com – Notas CSS para profesionales 1

Machine Translated by Google

Capítulo 1: Primeros pasos con CSS

Versión Fecha de lanzamiento
1 1996-12-17

2 1998-05-12

3 2015-10-13

Sección 1.1: Hoja de estilo externa

Se puede aplicar una hoja de estilo CSS externa a cualquier número de documentos HTML colocando un elemento <link> en cada documento HTML.

El atributo rel de la etiqueta <link> debe establecerse en "hoja de estilo" y el atributo href en la ruta relativa o absoluta a la hoja de estilo. Si bien el
uso de rutas URL relativas generalmente se considera una buena práctica, también se pueden usar rutas absolutas. En HTML5, el atributo de tipo se
puede omitir.

Se recomienda colocar la etiqueta <link> en la etiqueta <head> del archivo HTML para que los estilos se carguen antes que los elementos a los que
aplican estilo. De lo contrario, los usuarios verán un destello de contenido sin estilo.

Ejemplo

hola-mundo.html

<!DOCTYPE html>
<html> <head>
<meta
charset="utf-8" /> <link rel="hoja
de estilo" type="text/css" href="style.css"> </head> <cuerpo > <h1>¡Hola
mundo!</h1>

<p>Yo ÿ CSS</
p> </body> </html>

estilo.css

h1
{ color: verde;
decoración de texto: subrayado;
}

pag {
tamaño de fuente:
25px; familia de fuentes: 'Trebuchet MS', sans-serif;
}

Asegúrese de incluir la ruta correcta a su archivo CSS en el href. Si el archivo CSS está en la misma carpeta que su archivo HTML, no se requiere una
ruta (como en el ejemplo anterior), pero si está guardado en una carpeta, especifíquelo así href="nombrecarpeta/estilo.css".

<enlace rel="hoja de estilo" type="texto/css" href="nombre de carpeta/estilo.css">

Las hojas de estilo externas se consideran la mejor manera de manejar su CSS. Hay una razón muy simple para esto: cuando administra un sitio
de, digamos, 100 páginas, todas controladas por una sola hoja de estilo, y desea cambiar su enlace

GoalKicker.com – Notas CSS para profesionales 2

Machine Translated by Google

colores de azul a verde, es mucho más fácil hacer el cambio en su archivo CSS y dejar que los cambios "caigan en cascada" a lo largo de
las 100 páginas que ir a 100 páginas separadas y hacer el mismo cambio 100 veces. Nuevamente, si desea cambiar completamente el aspecto de
su sitio web, solo necesita actualizar este archivo.

Puede cargar tantos archivos CSS en su página HTML como necesite.

<enlace rel="hoja de estilo" type="text/css" href="main.css"> <enlace

rel="hoja de estilo" type="text/css" href="override.css">

Las reglas de CSS se aplican con algunas reglas básicas y el orden sí importa. Por ejemplo, si tiene un archivo main.css con
algo de código en él:

p.verde { color: #00FF00; }

Todos sus párrafos con la clase 'verde' se escribirán en verde claro, pero puede anular esto con otro archivo .css simplemente incluyéndolo después
de main.css. Puede tener override.css con el siguiente código después de main.css, por ejemplo:

p.verde { color: #006600; }

Ahora todos sus párrafos con la clase 'verde' se escribirán en verde más oscuro en lugar de verde claro.

Se aplican otros principios, como la regla '!importante', la especificidad y la herencia.

Cuando alguien visita su sitio web por primera vez, su navegador descarga el HTML de la página actual más el archivo CSS vinculado. Luego, cuando
navegan a otra página, su navegador solo necesita descargar el HTML de esa página; el archivo CSS se almacena en caché, por lo que no es necesario
volver a descargarlo. Dado que los navegadores almacenan en caché la hoja de estilo externa, sus páginas se cargan más rápido.

Sección 1.2: Estilos Internos

El CSS encerrado en las etiquetas <style></style> dentro de un documento HTML funciona como una hoja de estilo externa, excepto que vive en el
documento HTML al que aplica estilo en lugar de en un archivo separado y, por lo tanto, solo se puede aplicar al documento en el que se encuentra.
vive. Tenga en cuenta que este elemento debe estar dentro del elemento <head> para la validación de HTML (aunque funcionará en todos los
navegadores actuales si se coloca en el cuerpo).

<cabeza>

<estilo> h1 { color:
verde; decoración de texto: subrayado;
}

pags {

tamaño de fuente:
25px; familia de fuentes: 'Trebuchet MS', sans-serif;

} </style>
</head>
<body>
<h1>¡Hola mundo!</h1>
<p>Yo ÿ CSS</
p> </body>

GoalKicker.com – Notas CSS para profesionales 3

Machine Translated by Google

Sección 1.3: regla @import de CSS (una de las reglas at de CSS)

La regla @import CSS se utiliza para importar reglas de estilo de otras hojas de estilo. Estas reglas deben preceder a todos los demás tipos
de reglas, excepto las reglas de @charset; como no es una declaración anidada, @import no se puede usar dentro de las reglas arroba del
grupo condicional. @importar.

Cómo usar @importar

Puede usar la regla @import de las siguientes maneras:

A. Con etiqueta de estilo interna

<estilo>
@import url('/css/estilos.css'); </estilo>

B. Con hoja de estilo externa

La siguiente línea importa un archivo CSS llamado adicional-styles.css en el directorio raíz al archivo CSS en el que se encuentra.
aparece:

@import '/estilos-adicionales.css';

También es posible importar CSS externo. Un caso de uso común son los archivos de fuentes.

@import 'https://fonts.googleapis.com/css?family=Lato';

Un segundo argumento opcional para la regla @import es una lista de consultas de medios:

@import '/imprimir-estilos.css' imprimir;

@import url('paisaje.css') pantalla y (orientación:paisaje);

Sección 1.4: Estilos en línea

Use estilos en línea para aplicar estilo a un elemento específico. Tenga en cuenta que esto no es óptimo. Se recomienda colocar reglas de estilo en
una etiqueta <style> o en un archivo CSS externo para mantener una distinción entre el contenido y la presentación.

Los estilos en línea anulan cualquier CSS en una etiqueta <style> o en una hoja de estilo externa. Si bien esto puede ser útil en
algunas circunstancias, este hecho a menudo reduce la capacidad de mantenimiento de un proyecto.

Los estilos del siguiente ejemplo se aplican directamente a los elementos a los que están adjuntos.

<h1 style="color: green; text-decoration: underline;">¡Hola , mundo!</h1> <p style="font-size:

25px; font-family: 'Trebuchet MS';">I ÿ CSS< /p>

Los estilos en línea son generalmente la forma más segura de garantizar la compatibilidad de representación entre varios clientes de correo
electrónico, programas y dispositivos, pero pueden llevar mucho tiempo escribirlos y un poco difíciles de administrar.

Sección 1.5: Cambiar CSS con JavaScript

JavaScript puro

Es posible agregar, eliminar o cambiar los valores de propiedad CSS con JavaScript a través de la propiedad de estilo de un elemento .

GoalKicker.com – Notas CSS para profesionales 4

Machine Translated by Google

var el = documento.getElementById("elemento"); el.estilo.opacidad

= 0.5; el.style.fontFamily = 'sans-serif';

Tenga en cuenta que las propiedades de estilo se nombran en minúsculas. En el ejemplo, puede ver que la familia de fuentes de la propiedad css se convierte

en fontFamily en javascript.

Como alternativa a trabajar directamente en los elementos, puede crear un elemento <style> o <link> en JavaScript y agregarlo al <body> o <head> del

documento HTML.

jQuery

Modificar las propiedades de CSS con jQuery es aún más simple.

$('#elemento').css('margen', '5px');

Si necesita cambiar más de una regla de estilo:

$('#elemento').css({ margen:
"5px", relleno: "10px",
color: "negro"

});

jQuery incluye dos formas de cambiar las reglas css que tienen guiones (es decir , tamaño de fuente). Puede ponerlos entre comillas o en mayúsculas y

minúsculas el nombre de la regla de estilo.

$('.clase de ejemplo').css({ "color de

fondo": "azul", tamaño de fuente: "10px"

});
Ver también

Documentación de JavaScript: lectura y cambio de estilo CSS. Documentación de

jQuery: manipulación de CSS

Sección 1.6: Diseñar listas con CSS

Hay tres propiedades diferentes para diseñar elementos de lista: tipo de estilo de lista, imagen de estilo de lista y posición de estilo de lista, que
deben declararse en ese orden. Los valores predeterminados son disco, exterior y ninguno, respectivamente. Cada propiedad se puede declarar por
separado o usando la propiedad abreviada de estilo de lista .

list-style-type define la forma o el tipo de viñeta utilizada para cada elemento de la lista.

Algunos de los valores aceptables para list-style-type:

desct

circulo

decimal
cuadrado

bajo-romano

romano superior
ninguna

(Para obtener una lista exhaustiva, consulte la wiki de especificaciones W3C)

GoalKicker.com – Notas CSS para profesionales 5

Machine Translated by Google

Para usar viñetas cuadradas para cada elemento de la lista, por ejemplo, usaría el siguiente par propiedad-valor:

li
{ tipo de estilo de lista: cuadrado;
}

La propiedad list-style-image determina si el ícono del elemento de la lista está configurado con una imagen y acepta un valor
de none o una URL que apunta a una imagen.

li
{ imagen-estilo-lista: url(images/ bullet.png);
}

La propiedad list-style-position define dónde colocar el marcador de elemento de lista y acepta uno de dos valores:
"dentro o fuera".

li
{ posición de estilo de lista: dentro;
}

GoalKicker.com – Notas CSS para profesionales 6

Machine Translated by Google

Capítulo 2: Estructura y formato de un

Regla CSS

Sección 2.1: Listas de propiedades

Algunas propiedades pueden tomar múltiples valores, conocidos colectivamente como una lista de propiedades.

/ * Dos valores en esta lista de propiedades */

span { text-shadow: yellow 0 0 3px, green 4px
4px 10px;
}

/ * Formato alternativo */ span

{ text-shadow: yellow 0 0 3px,
green 4px 4px 10px;

Sección 2.2: Selectores múltiples

Cuando agrupa los selectores de CSS, aplica los mismos estilos a varios elementos diferentes sin repetir los estilos en su hoja de estilo. Utilice una coma para

separar varios selectores agrupados.

div, p { color: azul }

Entonces, el color azul se aplica a todos los elementos <div> y a todos los elementos <p> . Sin la coma, solo los elementos <p> que son hijos de un <div> serían
rojos.

Esto también se aplica a todos los tipos de selectores.

p, .blue, #first, div span{ color : blue }

Esta regla se aplica a:

<p>
elementos de la clase azul

elemento con el ID primero

cada <span> dentro de un <div>

Sección 2.3: Reglas, selectores y bloques de declaración

Una regla CSS consta de un selector (por ejemplo, h1) y un bloque de declaración ({}).

h1 {}

GoalKicker.com – Notas CSS para profesionales 7

Machine Translated by Google

Capítulo 3: Comentarios

Sección 3.1: Línea única

/ * Este es un comentario CSS */
div { color: red; /* Este es un
comentario CSS */
}

Sección 3.2: Línea Múltiple

/*
Este
es
a
CSS
comentario
*/
div
{ color: rojo;
}

GoalKicker.com – Notas CSS para profesionales 8

Machine Translated by Google

Capítulo 4: Selectores
Los selectores de CSS identifican elementos HTML específicos como objetivos para estilos CSS. Este tema cubre cómo los selectores de CSS apuntan
elementos HTML. Los selectores utilizan una amplia gama de más de 50 métodos de selección que ofrece el lenguaje CSS, incluidos
elementos, clases, ID, pseudo-elementos y pseudo-clases, y patrones.

Sección 4.1: Selectores básicos

Selector Descripción
* Selector universal (todos los elementos)
división
Selector de etiquetas (todos los elementos <div> )

.azul Selector de clase (todos los elementos con clase azul)

.azul rojo Todos los elementos con clase azul y rojo (un tipo de selector compuesto)
#titular Selector de ID (el elemento con el atributo "id" establecido en título)

:pseudo-clase Todos los elementos con pseudoclase.

::pseudo-elemento Elemento que coincide con pseudo-elemento

:lang(es) Elemento que coincide con la declaración :lang, por ejemplo <span lang="en">
div > pag selector de niños

Nota: El valor de un ID debe ser único en una página web. Es una violación del estándar HTML. usar el
valor de un ID más de una vez en el mismo árbol de documentos.

Puede encontrar una lista completa de selectores en la especificación CSS Selectors Level 3.

Sección 4.2: Selectores de atributos

Visión general

Los selectores de atributos se pueden usar con varios tipos de operadores que cambian los criterios de selección en consecuencia. Ellos
seleccionar un elemento usando la presencia de un atributo o valor de atributo dado.

Selector(1) elemento emparejado Selecciona elementos... Versión CSS

[atributo] <atributo div > Con atributo attr 2

[atributo='valor'] <div atributo="valor"> Donde el atributo attr tiene valor val 2

Donde val aparece en el 2

[atributo~='valor'] <div atributo="valor val2 val3">
lista de atributos separados por espacios en blanco

[atributo^='val'] <div atributo="val1 val2"> Donde el valor de attr comienza con val 3

[attr$='val'] <div attr="sth aval"> Donde el valor de attr termina con val 3

[attr*='val'] <div attr="somevalhere"> Donde attr contiene val en cualquier lugar 3

Donde el valor de attr es exactamente val,

[attr|='val'] <div attr="val-sth etc"> o comienza con val e inmediatamente 2
seguido de - (U+002D)

Donde attr tiene valor val,

[atributo='valor' i] <div atributo="valor"> 4(2)
ignorando la cubierta de la carta de val .

Notas:

1. El valor del atributo puede estar entre comillas simples o dobles. Sin comillas en absoluto también puede
funciona, pero no es válido de acuerdo con el estándar CSS y se desaconseja.

GoalKicker.com – Notas CSS para profesionales 9

Machine Translated by Google

2. No existe una única especificación CSS4 integrada, porque se divide en módulos separados. Sin embargo, hay
Módulos de "nivel 4". Ver soporte del navegador.

Detalles
[atributo]

Selecciona elementos con el atributo dado.

div[color de datos] { color:

rojo;
}

<div data-color="red">Esto será rojo</div> <div data-

color="green">Esto será rojo</div> <div data-background="red">Esto
NO será rojo</div>

Demostración en vivo en JSBin

[atributo="valor"]

Selecciona elementos con el atributo y el valor dados.

div[datos-color="rojo"] {
color: rojo;
}

<div data-color="red">Esto será rojo</div> <div data-

color="green">Esto NO será rojo</div> <div data-color="blue">Esto NO
será ser rojo</div>

Demostración en vivo en JSBin

[atributo*="valor"]

Selecciona elementos con el atributo y el valor dados donde el atributo dado contiene el valor dado en cualquier lugar (como una subcadena).

[clase*="foo"] { color:
rojo;
}

<div class="foo-123">Esto será rojo</div> <div

class="foo123">Esto será rojo</div> <div class="bar123foo">Esto
será rojo</div> <div class="barfooo123">Esto será rojo</div>
<div class="barfo0">Esto NO será rojo</div>

Demostración en vivo en JSBin

[atributo~="valor"]

Selecciona elementos con el atributo y el valor dados donde el valor dado aparece en una lista separada por espacios en blanco.

[clase~="color-rojo"] { color: rojo;

<div class="color-red foo-bar the-div">Esto será rojo</div> <div class="color-blue foo-bar

the-div">Esto NO será rojo</div>

GoalKicker.com – Notas CSS para profesionales 10

Machine Translated by Google

Demostración en vivo en JSBin

[atributo^="valor"]

Selecciona elementos con el atributo y el valor dados donde el atributo dado comienza con el valor.

[clase^="foo-"] { color:
rojo;
}

<div class="foo-123">Esto será rojo</div> <div

class="foo-234">Esto será rojo</div> <div class="bar-123">Esto
NO será rojo</div>

Demostración en vivo en JSBin

[atributo$="valor"]

Selecciona elementos con el atributo y el valor dados donde el atributo dado termina con el valor dado.

[clase$="archivo"] { color:
rojo;
}

<div class="foobar-file">Esto será rojo</div> <div class="foobar-

file">Esto será rojo</div> <div class="foobar-input">Esto NO será
rojo</div>

Demostración en vivo en JSBin

[atributo|="valor"]

Selecciona elementos con un atributo y valor dados donde el valor del atributo es exactamente el valor dado o es exactamente el valor
dado seguido de - (U+002D)

[lang|="ES"] { color:
rojo;
}

<div lang="EN-us">Esto será rojo</div> <div lang="EN-

gb">Esto será rojo</div> <div lang="PT-pt">Esto NO será
rojo</div>

Demostración en vivo en JSBin

[atributo="valor" i]

Selecciona elementos con un atributo y valor determinados donde el valor del atributo se puede representar como Valor, VALOR, VALOR o cualquier
otra posibilidad que no distinga entre mayúsculas y minúsculas.

[lang="ES" i] { color:
rojo;
}

<div lang="EN">Esto será rojo</div> <div

lang="en">Esto será rojo</div> <div lang="PT">Esto
NO será rojo</div>

Demostración en vivo en JSBin

GoalKicker.com – Notas CSS para profesionales 11

Machine Translated by Google

Especificidad de los selectores de

atributos 0-1-0

Igual que el selector de clase y la pseudoclase.

*[tipo=casilla] // 0-1-0

Tenga en cuenta que esto significa que se puede usar un selector de atributo para seleccionar un elemento por su ID con un nivel de especificidad
más bajo que si se seleccionara con un selector de ID: [id="my-ID"] tiene como objetivo el mismo elemento que #my- ID pero con menor
especificidad.

Vea la Sección de Sintaxis para más detalles.

Sección 4.3: Combinadores

Visión general
Selector Descripción
div span Selector de descendientes (todos los <span> que son descendientes de un <div>) div
> span Selector de hijos (todos los <span> que son hijos directos de un <div>) a ~ span

Selector general de hermanos (todos los < span>s que son hermanos después de <a>) a +
span Selector de hermanos adyacentes (todos los <span>s que están inmediatamente después de <a>)

Nota: Los selectores relacionados se dirigen a elementos que vienen después de ellos en el documento de origen. CSS, por su
naturaleza (en cascada), no puede apuntar a elementos anteriores o principales . Sin embargo, al usar la propiedad de orden flexible ,
se puede simular un selector de hermanos anterior en medios visuales.

Combinador de descendientes: selector selector

Un combinador descendiente, representado por al menos un carácter de espacio (), selecciona elementos que son descendientes del elemento
definido. Este combinador selecciona todos los descendientes del elemento (desde los elementos secundarios hacia abajo).

div p
{ color: rojo;
}

<div>
<p>Mi texto es rojo</p>
<section> <p>Mi texto es
rojo</p> </section> </div>

<p>Mi texto no es rojo</p>

Demostración en vivo en JSBin

En el ejemplo anterior, se seleccionan los dos primeros elementos <p> ya que ambos son descendientes de <div>.

Combinador hijo: selector > selector

El combinador secundario (>) se utiliza para seleccionar elementos que son secundarios o descendientes directos del elemento
especificado.

GoalKicker.com – Notas CSS para profesionales 12

Machine Translated by Google

div > p
{ color:rojo;
}

<div>
<p>Mi texto es rojo</p>
<section>
<p>Mi texto no es rojo</p> </
section> </div>

Demostración en vivo en JSBin

El CSS anterior selecciona solo el primer elemento <p> , ya que es el único párrafo que desciende directamente de un <div>.

El segundo elemento <p> no está seleccionado porque no es un elemento secundario directo del <div>.

Combinador de hermanos adyacentes: selector + selector

El combinador hermano (+) adyacente selecciona un elemento hermano que sigue inmediatamente a un elemento especificado.

p+p
{ color:rojo;
}

<p>Mi texto no es rojo</p> <p>Mi

texto es rojo</p> <p>Mi texto es
rojo</p> <hr>

<p>Mi texto no es rojo</p>

Demostración en vivo en JSBin

El ejemplo anterior selecciona solo aquellos elementos <p> que están directamente precedidos por otro elemento <p> .

Combinador general de hermanos: selector ~ selector

El combinador general de hermanos (~) selecciona todos los hermanos que siguen al elemento especificado.

p~p
{ color: rojo;
}

<p>Mi texto no es rojo</p> <p>Mi

texto es rojo</p> <hr> <h1>Y ahora
un título</h1> <p>Mi texto es rojo</
p>

Demostración en vivo en JSBin

El ejemplo anterior selecciona todos los elementos <p> que están precedidos por otro elemento <p> , estén o no inmediatamente adyacentes.

Sección 4.4: Pseudo-clases

Pseudo-clases son palabras clave que permiten la selección basada en información que se encuentra fuera del árbol del documento o

GoalKicker.com – Notas CSS para profesionales 13

Machine Translated by Google

que no puede ser expresado por otros selectores o combinadores. Esta información se puede asociar a un determinado estado

(estado y dinámico pseudo-clases), a ubicaciones (estructurales y objetivo pseudo-clases), a las negaciones de las primeras

(negación pseudo-clase) o a idiomas (lang pseudoclase). Los ejemplos incluyen si un enlace ha sido o no
seguido (:visited), el mouse está sobre un elemento (:hover), una casilla de verificación está marcada (:checked), etc.

Sintaxis

selector:pseudo-clase {
propiedad: VALOR;
}

Lista de pseudo-clases:
Nombre Descripción
:activo Se aplica a cualquier elemento activado (es decir, en el que se haga clic) por parte del usuario.

Le permite crear conjuntos de selectores relacionados mediante la creación de grupos que el

:ningún
los elementos incluidos coincidirán. Esta es una alternativa a repetir un selector completo.

Selecciona el elemento #noticias activo actual (haciendo clic en una URL

:objetivo
que contiene ese nombre de anclaje)

Se aplica a los elementos de radio, casilla de verificación u opción que están marcados
:comprobado
o cambia a un estado "encendido".

:defecto Representa cualquier elemento de la interfaz de usuario que sea el predeterminado entre un grupo de
elementos similares.

:desactivado Se aplica a cualquier elemento de la interfaz de usuario que se encuentre en un estado deshabilitado.

:vacío Se aplica a cualquier elemento que no tenga hijos.

:activado Se aplica a cualquier elemento de la interfaz de usuario que se encuentre en un estado habilitado.

Usado junto con la regla @page , esto selecciona la primera página en un

:primero
documento impreso.

:primer hijo Representa cualquier elemento que sea el primer elemento secundario de su principal.

Se aplica cuando un elemento es el primero del tipo de elemento seleccionado

:primero de tipo
dentro de su padre. Este puede o no ser el primer hijo.

Se aplica a cualquier elemento que tenga el foco del usuario. Esto puede ser dado por el
:enfoque
teclado del usuario, eventos del mouse u otras formas de entrada.

:foco-dentro Se puede usar para resaltar una sección completa cuando se enfoca un elemento dentro de ella. Concuerda
cualquier elemento con el que coincida la pseudoclase :focus o que tenga un descendiente enfocado.

Se aplica a cualquier elemento que se muestre en modo de pantalla completa. Selecciona toda la pila.
:pantalla completa
de elementos y no solo el elemento de nivel superior.

Se aplica a cualquier elemento sobre el que se cierne el dispositivo señalador del usuario, pero
:flotar
no esta activado.

Aplica elementos de interfaz de usuario de radio o casilla de verificación que no están marcados ni
:indeterminado sin control, pero se encuentran en un estado indeterminado. Esto puede deberse a un
atributo del elemento o manipulación DOM.

La pseudoclase CSS :in-range coincide cuando un elemento tiene

su atributo de valor dentro de las limitaciones de rango especificadas para este elemento.
:en el rango
Permite que la página brinde una retroalimentación de que el valor definido actualmente
usar el elemento está dentro de los límites del rango.

Se aplica a los elementos <input> cuyos valores no son válidos según

:inválido
el tipo especificado en el atributo type= .

Se aplica a cualquier elemento que envuelva el elemento <body> tiene un

:lang atributo lang= designado . Para que la pseudoclase sea válida, debe
contienen un código de idioma válido de dos o tres letras.

:último niño Representa cualquier elemento que sea el último elemento secundario de su principal.

Se aplica cuando un elemento es el último del tipo de elemento seleccionado dentro

:último-de-tipo
su padre Este puede o no ser el último hijo.

GoalKicker.com – Notas CSS para profesionales 14

Machine Translated by Google

Usado junto con la regla @page , esto selecciona todas las páginas restantes
:izquierda
en un documento impreso.
:Enlace Se aplica a cualquier enlace que no haya sido visitado por el usuario.

Se aplica a todos los elementos que no coinciden con el valor pasado a (:not(p)
o :not(.class-name) por ejemplo. Debe tener un valor para ser válido y solo puede contener
:no()
un selector. Sin embargo, puede encadenar múltiples : no selectores juntos.

Se aplica cuando un elemento es el n-ésimo elemento de su padre, donde n

:nth-child puede ser un número entero, una expresión matemática (p. ej ., n+3) o las palabras
clave par o impar .

Se aplica cuando un elemento es el n-ésimo elemento de su padre del

:nth-of-type mismo tipo de elemento, donde n puede ser un número entero, una
expresión matemática (p. ej ., n+3) o las palabras clave par o impar .
La pseudoclase CSS :only-child representa cualquier elemento que sea el
único hijo de su padre. Es lo mismo que :first-child:last-child o :nth-child(1):nth-
:hijo único
last-child(1), pero con una especificidad menor.

La pseudoclase :opcional CSS representa cualquier elemento que no

:opcional tenga el atributo requerido establecido. Esto permite que los formularios indiquen
fácilmente campos opcionales y les den estilo en consecuencia.

La pseudoclase de CSS :out-of-range coincide cuando un elemento tiene su atributo de valor

fuera de las limitaciones de rango especificadas para este elemento.
:fuera de rango Permite que la página brinde una retroalimentación de que el valor definido actualmente usando
el elemento está fuera de los límites del rango. Un valor puede estar fuera de un rango si es
más pequeño o más grande que los valores establecidos máximo y mínimo.
:marcador de posición mostrado Experimental. Se aplica a cualquier elemento de formulario que actualmente muestre texto de marcador
de posición. :solo lectura Se aplica a cualquier elemento que no sea editable por el usuario.
:leer escribir Se aplica a cualquier elemento que pueda editar un usuario, como los elementos <input> .
Usado junto con la regla @page , esto selecciona todas las páginas correctas en un documento
:Correcto
impreso. coincide con el elemento raíz de un árbol que representa el documento.
:raíz

La pseudoclase CSS coincide con los elementos que son un punto de

:alcance
referencia para que coincidan los selectores.
Selecciona el elemento #noticias activo actual (haciendo clic en una URL
:objetivo
que contiene ese nombre de anclaje)
:visitado Se aplica a cualquier enlace que haya sido visitado por el usuario.

La pseudoclase :visited ya no se puede usar para la mayoría de los estilos en muchos navegadores modernos porque es un
agujero de seguridad. Ver este enlace para referencia.

Sección 4.5: Pseudo Clase Infantil

"La pseudoclase de CSS :nth-child(an+b) coincide con un elemento que tiene hermanos an+b-1 antes que él en el árbol del
documento, para un valor positivo o cero dado para n" - MDN :nth-child

pseudo-selector 1 2 3 4 5 6 7 8 9 10 :primer hijo

ÿ

:nésimo ÿ

hijo(3) :nésimo ÿÿÿÿÿÿÿÿ

hijo(n+3) :nésimo hijo(3n) ÿÿÿ

GoalKicker.com – Notas CSS para profesionales 15

Machine Translated by Google

:nth-child(3n+1) ÿ ÿ ÿ ÿ

:nésimo hijo(-n+3) ÿ ÿ ÿ :nésimo

hijo(impar) ÿ ÿ ÿ ÿ ÿ :nésimo hijo(par) ÿ ÿ ÿ ÿ ÿ

:último niño ÿ

:nésimo-último-hijo(3) ÿ

Sección 4.6: Selectores de nombre de clase

El selector de nombre de clase selecciona todos los elementos con el nombre de clase de destino. Por ejemplo, el nombre de clase .warning
seleccionaría el siguiente elemento <div> :

<div class="warning"> <p>Esta

sería una copia de advertencia.</p> </div>

También puede combinar nombres de clase para elementos de destino más específicamente. Construyamos sobre el ejemplo anterior
para mostrar una selección de clases más complicada.

CSS

.importante
{ color: naranja;

} .advertencia
{ color: azul;

} .advertencia.importante
{ color: rojo;
}

HTML

<div class="warning"> <p>Esta

sería una copia de advertencia.</p> </div>

<div class="advertencia importante">

<p class="important">Esta es una copia de advertencia realmente importante.</p> </div>

En este ejemplo, todos los elementos con la clase .warning tendrán un texto de color azul, los elementos con la clase .important tendrán un
texto de color naranja y todos los elementos que tengan los nombres de clase .important y .warning tendrán un texto rojo. color.

Tenga en cuenta que dentro del CSS, la declaración .warning.important no tenía espacios entre los dos nombres de clase. Esto significa
que solo encontrará elementos que contengan nombres de clase de advertencia e importantes en su atributo de clase . Esos nombres de clase
pueden estar en cualquier orden en el elemento.

Si se incluyera un espacio entre las dos clases en la declaración CSS, solo seleccionaría elementos que tienen elementos principales con
nombres de clase .warning y elementos secundarios con nombres de clase .important .

GoalKicker.com – Notas CSS para profesionales dieciséis

Machine Translated by Google

Sección 4.7: Seleccionar elemento usando su ID sin la alta

especificidad del selector de ID
Este truco lo ayuda a seleccionar un elemento usando la ID como valor para un selector de atributos para evitar la alta especificidad de
el selector de identificación.

HTML:

<div id="elemento">...</div>

CSS

#element { ... } /* La alta especificidad anulará muchos selectores */

[id="element"] { ... } /* Baja especificidad, se puede anular fácilmente */

Sección 4.8: El selector :last-of-type

El :last-of-type selecciona el elemento que es el último hijo, de un tipo particular, de su padre. En el ejemplo a continuación, el css selecciona el último
párrafo y el último encabezado h1.

p:último tipo { fondo:

#C5CAE9;

} h1:último tipo { fondo:

#CDDC39;
}

<div class="contenedor">
<p>Primer párrafo</p> <p>Segundo
párrafo</p> <p>Último párrafo</p>
<h1>Título 1</h1> <h2>Primer
encabezado 2</h2> <h2>Último
encabezado 2</h2> </div>

jsviolín

Sección 4.9: CSS3: ejemplo de selector dentro del rango

<style>
input:in-range { border:
1px solid blue;

} </estilo>

< tipo de entrada="número" min="10" max="20" valor="15">

GoalKicker.com – Notas CSS para profesionales 17

Machine Translated by Google

<p>El borde de este valor será azul</p>

La pseudoclase CSS :in-range coincide cuando un elemento tiene su atributo de valor dentro de las limitaciones de rango especificadas
para este elemento. Permite que la página brinde una retroalimentación de que el valor definido actualmente usando el elemento está dentro
de los límites del rango.[1]

Sección 4.10: A. El ejemplo :not pseudo-class & B. :focus

dentro de la pseudo-clase CSS
A. La sintaxis se presenta arriba.

El siguiente selector coincide con todos los elementos <input> en un documento HTML que no están deshabilitados y no tienen la clase .example:

HTML:

<formulario>

Teléfono: <input type="tel" class="example">

Correo electrónico: <input type="email" disabled="disabled">
Contraseña: < tipo de entrada="contraseña">
</formulario>

CSS:

input:not([disabled]):not(.example){ background-color:
#ccc;
}

La pseudoclase :not() también admitirá selectores separados por comas en el nivel 4 de selectores:

CSS:

entrada: no ([deshabilitado], .ejemplo){ color de

fondo: #ccc;
}

Demostración en vivo en JSBin

Vea la sintaxis de fondo aquí.

B. La pseudoclase :focus-within CSS

HTML:

<h3>El fondo es azul si la entrada está enfocada .</p> <div> <input

type="text">

</div>

CSS:

div
{ altura: 80px;

}
entrada{ margen:30px;

GoalKicker.com – Notas CSS para profesionales 18

Machine Translated by Google

} div:focus-within
{ background-color: #1565C0;
}

Sección 4.11: booleano global con casilla de verificación: marcada

y ~ (combinador general de hermanos)
Con el selector ~, puede implementar fácilmente un booleano accesible global sin usar JavaScript.

Agregar booleano como casilla de verificación

Al comienzo de su documento, agregue tantos valores booleanos como desee con una identificación única y la oculta
conjunto de atributos:

<input type="checkbox" id="sidebarShown" hidden /> <input

type="checkbox" id="darkThemeUsed" hidden />

<!-- aquí comienza el contenido real, por ejemplo: --> <div id="container">

<div id="barra lateral">

<!-- Menú, Buscar, ... </div> -->

<!-- Más contenido... </div> -->

<div id="pie de página">

<!-- ... -->
</div>

GoalKicker.com – Notas CSS para profesionales 19

Machine Translated by Google

Cambiar el valor del booleano

Puede alternar el valor booleano agregando una etiqueta con el conjunto de atributos for :

<label for="sidebarShown">¡Mostrar/Ocultar la barra lateral!</label>

Accediendo al valor booleano con CSS

El selector normal (como .color-red) especifica las propiedades predeterminadas. Se pueden anular siguiendo los selectores verdadero / falso :

/ * verdadero: */
<casilla de verificación>: marcado ~ [hermano de la casilla de verificación y principal del objetivo] <objetivo>

/ * falso: */ <casilla
de verificación>: no (: marcada) ~ [hermano de la casilla de verificación y padre del objetivo] <objetivo>

Tenga en cuenta que <casilla de verificación>, [hermano...] y <objetivo> deben reemplazarse por los selectores adecuados. [hermano...]
puede ser un selector específico, (a menudo si es perezoso) simplemente * o nada si el objetivo ya es un hermano de la casilla de verificación.

Ejemplos de la estructura HTML anterior serían:

#sidebarMostrado:marcado ~ #contenedor #sidebar { margen

izquierdo: 300px;
}

#darkThemeUsed:marcado ~ #container,
#darkThemeUsed:marcado ~ #footer { background:
#333;
}
En acción

ver este violín para una implementación de estos valores booleanos globales.

Sección 4.12: Selectores de ID

Los selectores de ID seleccionan elementos DOM con el ID de destino. Para seleccionar un elemento por una ID específica en CSS, se usa el
prefijo # .

Por ejemplo, el siguiente elemento HTML div ...

<div id="ID de ejemplo">

<p>Ejemplo</p> </div>

…puede ser seleccionado por #exampleID en CSS como se muestra a continuación:

#ejemploID
{ ancho: 20px;
}

Nota: las especificaciones de HTML no permiten varios elementos con el mismo ID

GoalKicker.com – Notas CSS para profesionales 20

Machine Translated by Google

Sección 4.13: Cómo diseñar una entrada de rango

HTML

< tipo de entrada="rango"></entrada>

CSS

Efecto Pseudoselector
entrada[tipo=rango]::-webkit-slider-thumb, entrada[tipo=rango]::-moz-rango-thumb,
Pulgar
entrada[tipo=rango]::-ms-thumb entrada[tipo=rango]:: -webkit-slider-runnable-track, input[type=range]::-
moz-range-track, input[type=range]::-ms-track input[type=range]:focus
Pista

Enfocado

Parte inferior de input[type=range]::-moz-range-progress, input[type=range]::-ms-fill-lower (no es posible la pista en los navegadores WebKit
actualmente - se necesita JS)

Sección 4.14: El ejemplo del selector de pseudoclase :only-child

La pseudoclase CSS :only-child representa cualquier elemento que sea el único hijo de su padre.

HTML:

<div>
<p>Este párrafo es el único hijo del div, tendrá el color azul</p>
</div>

<div>
<p>Este párrafo es uno de los dos hijos del div</p> <p>Este párrafo es uno
de los dos hijos de su padre</p>
</div>

CSS:

p: hijo único
{ color: azul;
}

El ejemplo anterior selecciona el elemento <p> que es el hijo único de su padre, en este caso un <div>.

Demostración en vivo en JSBin

GoalKicker.com – Notas CSS para profesionales 21

Machine Translated by Google

Capítulo 5: Fondos
Con CSS puede establecer colores, degradados e imágenes como fondo de un elemento.

Es posible especificar varias combinaciones de imágenes, colores y degradados, y ajustar el tamaño, el posicionamiento y la repetición (entre otros) de estos.

Sección 5.1: Color de fondo

La propiedad background-color establece el color de fondo de un elemento utilizando un valor de color o mediante palabras clave,
como transparente, heredado o inicial.

transparente, especifica que el color de fondo debe ser transparente. Esto es predeterminado.

heredar, hereda esta propiedad de su elemento padre.

initial, establece esta propiedad en su valor predeterminado.

Esto se puede aplicar a todos los elementos, y pseudo-elementos ::first-letter/::first-line .

Los colores en CSS se pueden especificar por diferentes métodos.

nombres de colores

CSS

div
{ color de fondo: rojo; /* rojo */
}

HTML

<div>Esto tendrá un fondo rojo</div>

El ejemplo utilizado anteriormente es una de las varias formas en que CSS tiene que representar un solo color.

códigos de colores hexadecimales

El código hexadecimal se utiliza para indicar los componentes RGB de un color en notación hexadecimal de base 16. #ff0000, por ejemplo, es rojo brillante, donde el

componente rojo del color es 256 bits (ff) y las partes verde y azul correspondientes del color son 0 (00).

Si ambos valores en cada uno de los tres pares RGB (R, G y B) son iguales, entonces el código de color se puede acortar a tres caracteres (el primer dígito de cada

par). #ff0000 se puede acortar a #f00 y #ffffff se puede acortar a #fff.

La notación hexadecimal no distingue entre mayúsculas y minúsculas.

cuerpo
{ color de fondo: #de1205; /* rojo */
}

.principal {

GoalKicker.com – Notas CSS para profesionales 22

Machine Translated by Google

color de fondo: #00f; /* azul */

}

RGB / RGBa

Otra forma de declarar un color es usar RGB o RGBa.

RGB significa rojo, verde y azul, y requiere tres valores separados entre 0 y 255, entre paréntesis, que se correspondan con los
valores de color decimales para rojo, verde y azul, respectivamente.

RGBa le permite agregar un parámetro alfa adicional entre 0.0 y 1.0 para definir la opacidad.

encabezado
{ color de fondo: rgb (0, 0, 0); /* negro */
}

pie de
página { color de fondo: rgba(0, 0, 0, 0.5); /* negro con 50% de opacidad */
}

HSL / HSLa

Otra forma de declarar un color es usar HSL o HSLa y es similar a RGB y RGBa.

HSL significa matiz, saturación y luminosidad, y también suele llamarse HLS:

Hue es un grado en la rueda de colores (de 0 a 360).

La saturación es un porcentaje entre 0% y 100%.
La luminosidad es también un porcentaje entre 0% y 100%.

HSLa le permite agregar un parámetro alfa adicional entre 0.0 y 1.0 para definir la opacidad.

li a
{ color de fondo: hsl (120, 100%, 50%); /* verde */
}

#p1
{ color de fondo: hsla(120, 100%, 50%, .3); /* verde con 30% de opacidad */
}

Interacción con la imagen de fondo

Las siguientes declaraciones son todas equivalentes:

cuerpo
{ fondo: rojo; imagen
de fondo: url (imagen parcialmente transparente.png);
}

cuerpo
{ color de fondo: rojo; imagen
de fondo: url (imagen parcialmente transparente.png);
}

cuerpo
{ imagen de fondo: url (imagen parcialmente transparente.png); color de
fondo: rojo;

GoalKicker.com – Notas CSS para profesionales 23

Machine Translated by Google

cuerpo
{ fondo: URL roja (imagen parcialmente transparente.png);
}

Todos conducirán a que se muestre el color rojo debajo de la imagen, donde las partes de la imagen son transparentes, o la imagen no se muestra
(tal vez como resultado de la repetición del fondo).

Tenga en cuenta que lo siguiente no es equivalente:

cuerpo
{ imagen de fondo: url (imagen parcialmente transparente.png); fondo: rojo;

Aquí, el valor de background anula su imagen de fondo.

Para obtener más información sobre la propiedad de fondo , consulte Taquigrafía de fondo

Sección 5.2: Gradientes de fondo

Los degradados son nuevos tipos de imágenes, agregados en CSS3. Como imagen, los degradados se establecen con la propiedad de imagen de
fondo o la abreviatura de fondo .

Hay dos tipos de funciones de gradiente, lineales y radiales. Cada tipo tiene una variante no repetitiva y otra repetitiva.
variante:

gradiente -lineal()
gradiente-lineal-repetido() gradiente-
radial() gradiente -radial-repetido()

gradiente lineal()

Un degradado lineal tiene la siguiente sintaxis

background: linear-gradient( <dirección>?, <color-stop-1>, <color-stop-2>, ...);

Valor Significado
Podría ser un argumento como arriba , abajo, a la derecha oa la izquierda; o un ángulo como 0 grados, el
<dirección> grados, graduado,
ángulo comienza
rad, 90 grados...
desde arriba
. o girar.
y gira
Si se
enomite,
el sentido
el degradado
de las agujas
fluyedel
dereloj.
arribaSe
hacia
puede
abajo.
especificar
Lista deen
colores, opcionalmente seguida cada uno por un porcentaje o longitud . para mostrarlo en. Para el ejemplo de
<color-stop-list> , amarillo 10%, rgba(0,0,0,.5) 40px, #fff 100%...

Por ejemplo, esto crea un degradado lineal que comienza desde la derecha y cambia de rojo a azul.

.linear-gradiente {
fondo: degradado lineal (a la izquierda, rojo, azul); /* también puedes usar 270 grados */
}

Puede crear un degradado diagonal declarando una posición inicial tanto horizontal como vertical.

.diagonal-lineal-degradado {
fondo: degradado lineal ( arriba a la izquierda, rojo, amarillo 10%);

GoalKicker.com – Notas CSS para profesionales 24

Machine Translated by Google

Es posible especificar cualquier cantidad de paradas de color en un degradado separándolas con comas. Los siguientes ejemplos crearán un
degradado con 8 paradas de color

.linear-gradient-rainbow {
fondo: degradado lineal (a la izquierda, rojo, naranja, amarillo, verde, azul, índigo, violeta)
}

gradiente radial()
.radial-gradient-simple { fondo: radial-
gradient(rojo, azul);
}

.gradiente radial {
fondo: degradado radial (círculo en la esquina más alejada en la parte superior izquierda, rojo, azul);
}

Valor Significado
circulo Forma de gradiente. Los valores son círculo o elipse, el valor predeterminado es elipse.
Palabras
lado de la esquina más alejada, la clave quemás
esquina describen qué
cercana, la tan grande
esquina debe
más ser la forma final. Los valores son el lado más cercano, el más lejano, el
lejana

arriba a la izquierda Establece la posición del centro del degradado, de la misma forma que la posición del fondo.

Gradientes repetitivos

Las funciones de degradado repetido toman los mismos argumentos que los ejemplos anteriores, pero el degradado se coloca en mosaico
sobre el fondo del elemento.

.bullseye
{ fondo: gradiente radial repetido (rojo, rojo 10%, blanco 10%, blanco 20%);

} .advertencia
{ fondo: repetición-lineal-gradiente (-45 grados, amarillo, amarillo 10%, negro 10%, negro 20% );
}

Valor Significado
Unidad angular. El ángulo comienza desde arriba y gira en el sentido de las agujas del reloj. Se puede especificar en grados, graduado, Radiante, o
-45 grados
giro.

a la izquierda Dirección del degradado, el valor predeterminado es hacia abajo. Sintaxis: a [eje y (arriba O abajo)] [eje x (izquierda O
derecha)], es decir , arriba a la derecha

amarillo 10% Color, opcionalmente seguido de un porcentaje o longitud para mostrarlo. Repetido dos o más veces.

Tenga en cuenta que se pueden usar códigos de color HEX, RGB, RGBa, HSL y HSLa en lugar de nombres de colores. Los nombres de los colores se
usaron con fines ilustrativos. También tenga en cuenta que la sintaxis de gradiente radial es mucho más compleja que la de gradiente lineal, y aquí se
muestra una versión simplificada. Para obtener una explicación completa y especificaciones, consulte los documentos de MDN .

Sección 5.3: Imagen de fondo

La propiedad background-image se utiliza para especificar una imagen de fondo que se aplicará a todos los elementos coincidentes. De forma
predeterminada, esta imagen está dividida en mosaicos para cubrir todo el elemento, sin incluir el margen.

.myClass
{ imagen de fondo: url('/ruta/a/imagen.jpg');
}

GoalKicker.com – Notas CSS para profesionales 25

Machine Translated by Google

Para usar varias imágenes como imagen de fondo, defina url() separadas por comas

.miClase {
imagen de fondo: url('/ruta/a/imagen.jpg'),
url('/ruta/a/imagen2.jpg');
}

Las imágenes se apilarán según su orden con la primera imagen declarada encima de las demás y así sucesivamente.

Valor Resultado

url('/ruta/a/imagen.jpg') Especifique la(s) ruta(s) de la imagen de fondo o un recurso de imagen especificado con URI de datos
esquema (se pueden omitir los apóstrofes), separe los múltiplos con comas
ninguna
Sin imagen de fondo
inicial Valor por defecto
heredar
Heredar el valor de los padres

Más CSS para la imagen de fondo

Los siguientes atributos son muy útiles y casi esenciales también.

tamaño de fondo: xpx ypx | x% y%;

repetición de fondo: sin repetición | repetir | repetir-x | repetir-y;
posición de fondo: desplazamiento a la izquierda (px/%) desplazamiento a la derecha (px/%) | centro centro | arriba a la izquierda | Correcto
abajo;

Sección 5.4: Taquigrafía de fondo

La propiedad de fondo se puede utilizar para establecer una o más propiedades relacionadas con el fondo:

Imagen Descripción Versión CSS.

de fondo del valor Imagen de fondo a utilizar 1+

color de fondo Color de fondo a aplicar 1+

background-position Posición de la imagen de fondo background- 1+

size Tamaño de la imagen de fondo 3+

background-repeat Cómo repetir la imagen de fondo 1+

fondo-origen Cómo se coloca el fondo (se ignora cuando se activa el archivo adjunto de fondo). 3+
fijado)

clip de fondo Cómo se pinta el fondo en relación con el cuadro de contenido, el cuadro de borde o el 3+
caja de relleno

Cómo se comporta la imagen de fondo, si se desplaza junto con su contenido 1+

bloque adjunto de fondo o
tiene una posición fija dentro de la ventana gráfica
inicial 3+
Establece la propiedad en valor por defecto
heredar 2+
Hereda el valor de la propiedad del padre

El orden de los valores no importa y cada valor es opcional

Sintaxis

La sintaxis de la declaración abreviada de fondo es:

fondo: [<imagen-de-fondo>] [<color-de-fondo>] [<posición-de-fondo>]/[<tamaño-de-fondo>]

[<background-repeat>] [<background-origin>] [<background-clip>] [<background-attachment>]
[<inicial|heredar>];

GoalKicker.com – Notas CSS para profesionales 26

Machine Translated by Google

Ejemplos

fondo: rojo;

Simplemente configurando un color de fondo con el valor rojo.

fondo: cuadro de borde rojo;

Establecer un clip de fondo en un cuadro de borde y un color de fondo en rojo.

fondo: URL del centro sin repetición ("somepng.jpg");

Establece una repetición de fondo en no repetición, un origen de fondo en el centro y una imagen de fondo en una imagen.

fondo: url('patrón.png') verde;

En este ejemplo, el color de fondo del elemento se establecería en verde con pattern.png, si está disponible, superpuesto al color,
repitiendo tantas veces como sea necesario para llenar el elemento. Si pattern.png incluye alguna transparencia, el color verde será
visible detrás.

fondo: #000000 url("imagen.png") arriba a la izquierda / 600px sin repetición automática;

En este ejemplo, tenemos un fondo negro con una imagen 'imagen.png' en la parte superior, la imagen no se repite en ninguno de los ejes y
se coloca en la esquina superior izquierda. El / después de la posición es para poder incluir el tamaño de la imagen de fondo que en este caso
se establece en 600 px de ancho y automático para la altura. Este ejemplo podría funcionar bien con una imagen característica que puede
desvanecerse en un color sólido.

NOTA: El uso de la propiedad de fondo abreviada restablece todos los valores de propiedad de fondo establecidos previamente,
incluso si no se proporciona un valor. Si solo desea modificar un valor de propiedad de fondo establecido previamente, use una
propiedad de mano en su lugar.

Sección 5.5: Tamaño de fondo

Visión general

El tamaño de fondo La propiedad permite controlar la escala de la imagen de fondo. Toma hasta dos valores, que determinan la escala/
tamaño de la imagen resultante en dirección vertical y horizontal. Si falta la propiedad, se considera automática tanto en ancho como en alto.

auto mantendrá la relación de aspecto de la imagen, si se puede determinar. La altura es opcional y se puede considerar automática.
Por lo tanto, en una imagen de 256 px × 256 px, todas las siguientes configuraciones de tamaño de fondo generarían una imagen con una
altura y un ancho de 50 px:

tamaño de fondo: 50px; tamaño

de fondo: 50px automático; /* igual que arriba */ background-size:
auto 50px; tamaño de fondo: 50px 50px;

Entonces, si comenzamos con la siguiente imagen (que tiene el tamaño mencionado de 256 px × 256 px),

GoalKicker.com – Notas CSS para profesionales 27

Machine Translated by Google

terminaremos con 50 px × 50 px en la pantalla del usuario, contenido en el fondo de nuestro elemento:

También se pueden usar valores porcentuales para escalar la imagen con respecto al elemento. El siguiente ejemplo produciría una imagen dibujada de
200 px × 133 px:

#withbackground
{ background-image: url(to/ some/ background.png);

tamaño de fondo: 100% 66%;

ancho: 200px;
altura: 200px;

relleno: 0;
margen: 0;
}

El comportamiento depende del origen del fondo.

Manteniendo la relación de aspecto

El último ejemplo de la sección anterior perdió su relación de aspecto original. El círculo se convirtió en una elipse, el cuadrado en un rectángulo, el
triángulo en otro triángulo.

El enfoque de longitud o porcentaje no es lo suficientemente flexible para mantener la relación de aspecto en todo momento. auto no ayuda, ya que es
posible que no sepa qué dimensión de su elemento será más grande. Sin embargo, para cubrir ciertas áreas con un

GoalKicker.com – Notas CSS para profesionales 28

Machine Translated by Google

imagen (y la relación de aspecto correcta) por completo o para contener una imagen con la relación de aspecto correcta por
completo en un área de fondo, los valores, contener y cubrir proporcionan la funcionalidad adicional.

Eggsplanation para contener y cubrir

Perdón por el mal juego de palabras, pero vamos a usar una foto del día de Biswarup Ganguly para demostración Digamos que esta es su
pantalla y el área gris está fuera de su pantalla visible. Para la demostración, vamos a suponer una proporción de 16 × 9.

Queremos usar la imagen del día antes mencionada como fondo. Sin embargo, recortamos la imagen a 4x3 por alguna razón. Podríamos
establecer la propiedad de tamaño de fondo en una longitud fija, pero nos centraremos en contener y cubrir. Tenga en cuenta que también
asumo que no alteramos el ancho y/o la altura del cuerpo.

contener

contener

Escale la imagen, conservando su relación de aspecto intrínseca (si la hay), al tamaño más grande, de modo que tanto su
ancho como su altura puedan caber dentro del área de posicionamiento del fondo.

Esto asegura que la imagen de fondo siempre esté completamente contenida en el área de posicionamiento del fondo, sin embargo,
podría haber algún espacio vacío lleno con su color de fondo en este caso:

GoalKicker.com – Notas CSS para profesionales 29

Machine Translated by Google
cubrir

cubrir

Escale la imagen, conservando su relación de aspecto intrínseca (si la hay), al tamaño más pequeño posible, de modo que tanto
su ancho como su altura puedan cubrir completamente el área de posicionamiento del fondo.

Esto asegura que la imagen de fondo cubra todo. No habrá color de fondo visible, sin embargo, dependiendo de la proporción de la pantalla,
una gran parte de su imagen podría quedar cortada:

Demostración con código real

div > div

{ imagen de fondo: url(http:// i.stack.imgur.com/ r5CAq.jpg); repetición de fondo: sin
repetición; posición de fondo: centro centro; color de fondo: #ccc; borde: 1px
sólido; ancho: 20em; altura: 10em;

} div.contain {
tamaño de fondo: contener;

} div.cover
{ tamaño de fondo: cover;

} /************************************************
Estilos adicionales para los cuadros de explicación
******************************************** */

div > div

{ margen: 0 1ex 1ex 0;
flotador: izquierda;

} div + div
{ claro: ambos;
borde superior: 1px plateado punteado;
parte superior acolchada: 1ex;

} div > div::después { color

de fondo: #000; color: #fefefe;

GoalKicker.com – Notas CSS para profesionales 30

Machine Translated by Google

margen: 1ex;
relleno: 1ex;
opacidad: 0,8;
pantalla: bloque;
ancho: 10ex; tamaño
de fuente: 0,7 em;
contenido: attr(clase);
}

<div>
<div class="contain"></div> <p>Observe
el fondo gris. La imagen no cubre toda la región, pero es totalmente
<em>contenida</em>. </p>
</div> <div>

<div class="cover"></div> <p>Observe

los patos/gansos en la parte inferior de la imagen. Se corta la mayor parte del agua, así como una parte del cielo. Ya no ves la imagen
completa, pero tampoco ves ningún color de fondo; la imagen <em>cubre</em> todo el <code>&lt;div&gt;</code>.</p> </div>

Sección 5.6: Posición de fondo

La posición de fondo La propiedad se utiliza para especificar la posición inicial de una imagen de fondo o degradado.

.myClass
{ background-image: url('ruta/a/imagen.jpg'); posición de
fondo: 50% 50%;
}

La posición se establece mediante una coordenada X e Y y se establece mediante cualquiera de las unidades utilizadas en CSS.

Unidad Descripción

GoalKicker.com – Notas CSS para profesionales 31

Machine Translated by Google

Un porcentaje para el desplazamiento horizontal es relativo a (ancho del área de posicionamiento de fondo - ancho de la
imagen de fondo).
valor% valor% Un porcentaje para el desplazamiento vertical es relativo a (altura del área de posicionamiento de fondo - altura de la imagen
de fondo)
El tamaño de la imagen es el tamaño dado por background-size.

Compensa la imagen de fondo por una longitud dada en píxeles en relación con la parte superior izquierda del área de
posicionamiento valuepx valuepx del fondo

Las unidades en CSS se pueden especificar por diferentes métodos (ver aquí).

Propiedades de posición de fondo manuscrita

Además de la propiedad abreviada anterior, también se pueden usar las propiedades de fondo abreviadas background position-x y background-
position-y. Estos le permiten controlar las posiciones x o y por separado.

NOTA: Esto es compatible con todos los navegadores excepto Firefox (versiones 31-48) 2. Firefox 49, que se lanzará en
septiembre de 2016, admitirá estas propiedades. Hasta entonces, hay un truco de Firefox dentro de esta pila .
Respuesta de desbordamiento.

Sección 5.7: La propiedad background-origin

La propiedad background-origin especifica dónde se coloca la imagen de fondo.

Nota: si la propiedad background-attachment se establece en fixed, esta propiedad no tiene efecto.

Valor predeterminado: padding-box

Valores posibles:

padding-box : la posición es relativa al cuadro de relleno border-box : la

posición es relativa al cuadro de borde content-box : la posición es relativa
al contenido del cuadro
inicial
heredar

CSS

.ejemplo
{ ancho: 300px;
borde: 20px negro sólido;
relleno: 50px; fondo: url(https://
static.pexels.com/ photos/ 6440/ magazines-desk-work-workspace-medium.jpg); repetición de fondo: sin repetición;

.ejemplo1 {}

.ejemplo2 { origen de fondo: cuadro de borde; }

.ejemplo3 { origen-fondo: cuadro-contenido; }

HTML

<p>Sin origen de fondo (el cuadro de relleno es el predeterminado):</p>

GoalKicker.com – Notas CSS para profesionales 32

Machine Translated by Google

<div class="example example1"> <h2>Lorem

Ipsum Dolor</h2> <p>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

<p>background-origin: border-box:</p> <div

class="example example2"> <h2>Lorem Ipsum Dolor</
h2> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

<p>background-origin: content-box:</p> <div

class="example example3"> <h2>Lorem Ipsum Dolor</
h2> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

Resultado:

GoalKicker.com – Notas CSS para profesionales 33

Machine Translated by Google

Más:

https://www.w3.org/TR/css3-background/#the-background-origin

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin

Sección 5.8: Imagen de fondo múltiple

En CSS3, podemos apilar varios fondos en el mismo elemento.

#mydiv
{ imagen de fondo: url(img_1.png), /* imagen superior */
url(img_2.png), /* imagen del medio */
url(img_3.png); /* imagen inferior */
posición de fondo: abajo a la derecha, arriba a
la izquierda, arriba
a la derecha;
repetición de fondo: sin repetición, repetición,
sin repetición;

Las imágenes se apilarán una encima de la otra con el primer fondo en la parte superior y el último fondo en la parte posterior.
img_1 estará en la parte superior, img_2 e img_3 en la parte inferior.

GoalKicker.com – Notas CSS para profesionales 34

Machine Translated by Google

También podemos usar la propiedad abreviada de fondo para esto:

#mydiv
{ background: url(img_1.png) inferior derecha sin repetición, url(img_2.png)
superior izquierda repetida, url(img_3.png) superior
derecha sin repetición;
}

También podemos apilar imágenes y degradados:

#mydiv
{ background: url(image.png) abajo a la derecha sin repetición, gradiente
lineal (hacia abajo, #fff 0%,#000 100%);
}

Manifestación

Sección 5.9: Anexo de antecedentes

La propiedad background-attachment establece si una imagen de fondo es fija o se desplaza con el resto de la página.

cuerpo
{ imagen de fondo: url('img.jpg'); archivo
adjunto de fondo: fijo;
}
Valor Descripción scroll El fondo se desplaza junto con

el elemento. Esto es predeterminado. fijo El fondo es fijo con respecto a la ventana gráfica.

local El fondo se desplaza junto con el contenido del elemento. initial Establece esta

propiedad en su valor predeterminado. heredar Hereda esta propiedad de su elemento

principal.

Ejemplos
de archivo adjunto de fondo: desplazamiento

El comportamiento predeterminado, cuando se desplaza el cuerpo, el fondo se desplaza con él:

cuerpo
{ imagen de fondo: url('imagen.jpg'); archivo
adjunto de fondo: desplazamiento;
}

archivo adjunto de fondo: fijo

La imagen de fondo será fija y no se moverá cuando se desplace el cuerpo:

cuerpo
{ imagen de fondo: url('imagen.jpg'); archivo
adjunto de fondo: fijo;
}

archivo adjunto de fondo: local

La imagen de fondo del div se desplazará cuando se desplace el contenido del div.

división {

GoalKicker.com – Notas CSS para profesionales 35

Machine Translated by Google

imagen de fondo: url('imagen.jpg'); adjunto de

fondo: local;
}

Sección 5.10: Clip de fondo

Definición y uso: la propiedad background-clip especifica el área de pintura del fondo.

Valor predeterminado: cuadro de borde

Valores

border-box es el valor predeterminado. Esto permite que el fondo se extienda hasta el borde exterior del borde del elemento.

padding-box recorta el fondo en el borde exterior del relleno del elemento y no permite que se extienda hacia el borde; content-box recorta
el fondo en el borde del cuadro de contenido. heredar aplica la configuración del padre al elemento seleccionado.

CSS

.ejemplo
{ ancho: 300px;
borde: 20px negro sólido; relleno:
50px; fondo: url(https://
static.pexels.com/ photos/ 6440/ magazines-desk-work-workspace-medium.jpg); repetición de fondo: sin repetición;

.ejemplo1 {}

.ejemplo2 { origen de fondo: cuadro de borde; }

.ejemplo3 { origen-fondo: cuadro-contenido; }

HTML

<p>Sin origen de fondo (el cuadro de relleno es el predeterminado):</p>

<div class="example example1"> <h2>Lorem

Ipsum Dolor</h2> <p>Lorem ipsum dolor
sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

<p>background-origin: border-box:</p> <div

class="example example2"> <h2>Lorem Ipsum Dolor</
h2> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

<p>background-origin: content-box:</p> <div

class="example example3"> <h2>Lorem Ipsum Dolor</
h2>

GoalKicker.com – Notas CSS para profesionales 36

Machine Translated by Google

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </div>

Sección 5.11: Repetición de fondo

La propiedad background-repeat establece si/cómo se repetirá una imagen de fondo.

Por defecto, una imagen de fondo se repite tanto vertical como horizontalmente.

div
{ imagen de fondo: url("img.jpg"); fondo-repetir:
repetir-y;
}

Así es como se ve una repetición de fondo: repetir-y :

Sección 5.12: Propiedad background-blend-mode

.mi-div
{ ancho: 300px;
altura: 200px;
tamaño de fondo: 100%;
repetición de fondo: sin repetición;
imagen de fondo: degradado lineal (a la derecha, negro 0 %, blanco 100 %), url ('https://
static.pexels.com/photos/54624/strawberry-fruit-red-sweet-54624-medium.jpeg ');
modo de mezcla de fondo: saturación;
}

<div class="mi-div">Lorem ipsum</div>

GoalKicker.com – Notas CSS para profesionales 37

Machine Translated by Google

Vea el resultado aquí: https://jsfiddle.net/MadalinaTn/y69d28Lb/

Sintaxis CSS: background-blend-mode: normal | multiplicar | pantalla | superposición | oscurecer | aligerar | esquivar el color | saturación |
color | luminosidad;

Sección 5.13: Color de fondo con opacidad

Si establece la opacidad en un elemento, afectará a todos sus elementos secundarios. Para establecer una opacidad solo en el fondo de un
elemento, deberá usar colores RGBA. El siguiente ejemplo tendrá un fondo negro con una opacidad de 0,6.

/ * Alternativa para navegadores web que no admiten RGBa */

background-color: rgb(0, 0, 0);

/ * RGBa con 0.6 de opacidad */

background-color: rgba(0, 0, 0, 0.6);

/ * Para IE 5.5 - 7*/

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

/ * Para IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,
endColorstr=#99000000)";

GoalKicker.com – Notas CSS para profesionales 38

Machine Translated by Google

Capítulo 6: Centrado
Sección 6.1: Uso de Flexbox
HTML:

<div class="contenedor">
<img src="http://lorepixel.com/400/200" />
</div>

CSS:

html, cuerpo, .contenedor { altura:

100%;

} .container
{ pantalla: flex;
justificar-contenido: centro; /* centro horizontal */

} img
{ align-self: centro; /* centro vertical */
}

Ver resultado

HTML:

<img src="http://lorepixel.com/400/200" />

CSS:

html, cuerpo
{ altura: 100%;

} cuerpo
{ pantalla: flex;
justificar-contenido: centro; /* centro horizontal */ align-items: centro; /
* centro vertical */
}

Ver resultado

Consulte Centrado dinámico vertical y horizontal en la documentación de Flexbox para obtener más detalles sobre flexbox y el significado de los estilos.

Compatibilidad con navegador

Flexbox es compatible con todos los principales navegadores, excepto las versiones de IE anteriores a la 10.

Algunas versiones recientes del navegador, como Safari 8 e IE10, requieren prefijos de proveedores.

Para una forma rápida de generar prefijos existe Autoprefixer, una herramienta de terceros.

Para navegadores más antiguos (como IE 8 y 9) está disponible un Polyfill.

Para obtener una visión más detallada de la compatibilidad con el navegador flexbox, consulte esta respuesta.

GoalKicker.com – Notas CSS para profesionales 39

Machine Translated by Google

Sección 6.2: Uso de la transformación CSS

Las transformaciones de CSS se basan en el tamaño de los elementos, por lo que si no sabe qué tan alto o ancho es su elemento, puede colocarlo
absolutamente en un 50 % desde la parte superior e izquierda de un contenedor relativo y traducirlo en un 50 % hacia la izquierda y hacia arriba.
para centrarlo vertical y horizontalmente.

Tenga en cuenta que con esta técnica, el elemento podría terminar renderizándose en un límite de píxel no entero, haciendo que se vea
borroso. Ver esta respuesta en SO para una solución.

HTML

<div class="contenedor">
<div clase="elemento"></div>
</div>

CSS

.container
{ posición: relativa;
}

.element
{ posición: absoluta; arriba:
50%; izquierda: 50%;
transformar: traducir (-50%,
-50%);
}

Ver ejemplo en JSFiddle

COMPATIBILIDAD CON NAVEGADORES CRUZADOS

La propiedad de transformación necesita prefijos para ser compatible con navegadores más antiguos. Se necesitan prefijos para Chrome<=35,
Safari<=8, Opera<=22, Android Browser<=4.4.4 e IE9. Las transformaciones CSS no son compatibles con IE8 y versiones anteriores.

Aquí hay una declaración de transformación común para el ejemplo anterior:

-webkit-transform: traducir (-50%, -50%); /* Chrome, Safari, Opera, Android */ -ms-transform: translate(-50%, -50%); /
* IE 9 */ transformar: traducir (-50%, -50%);

Para obtener más información, consulte canIuse.

MÁS INFORMACIÓN

El elemento se posiciona de acuerdo con el primer padre no estático (posición: relativa, absoluta o fija). Explora más en este violín y
este tema de documentación.

Para el centrado solo horizontal, use izquierda: 50 % y transforme: translateX(-50 %). Lo mismo ocurre con el centrado solo vertical: centre
with top: 50% and transform: translateY(-50%).

El uso de elementos de ancho/alto no estáticos con este método de centrado puede hacer que el elemento centrado parezca aplastado.
Esto sucede principalmente con elementos que contienen texto y se puede solucionar agregando: margen derecho: -50%; y margen
inferior: -50%;. Ver este violín para más información.

GoalKicker.com – Notas CSS para profesionales 40

Machine Translated by Google

Sección 6.3: Uso de margen: 0 auto;

Los objetos se pueden centrar usando margin: 0 auto; si son elementos de bloque y tienen un ancho definido.

HTML

<div class="containerDiv">
<div id="centeredDiv"></div> </div>

<div class="containerDiv">
<p id="centeredParagraph">Este es un párrafo centrado.</p> </div>

<div class="containerDiv">
<img id="Imagencentrada"
src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_ 800/qqyvc3bkpyl3mfhr8all.jpg" /
> </div>

CSS

.containerDiv
{ ancho: 100%;
altura: 100px;
parte inferior del relleno: 40px;
}

#centeredDiv
{ margen: 0
automático; ancho:
200px; altura:
100px; borde: 1px sólido #000;
}

#centeredParagraph
{ ancho: 200px;
margen: 0 automático;
}

#imagencentrada
{ pantalla: bloque;
ancho: 200px;
margen: 0 automático;
}

Resultado:

GoalKicker.com – Notas CSS para profesionales 41

Machine Translated by Google

Ejemplo JSFiddle: Centrar objetos con margen: 0 auto;

Sección 6.4: Uso de alineación de texto

El tipo de centrado más común y sencillo es el de líneas de texto en un elemento. CSS tiene la regla text-align: center para este propósito:

HTML

<p>Lorem ipsum</p>

CSS

pag {
alineación de texto: centro;
}

Esto no funciona para centrar elementos de bloque enteros. text-align controla solo la alineación del contenido en línea como el texto en su
elemento de bloque principal.

Vea más sobre alineación de texto en la sección Tipografía.

Sección 6.5: Posición de uso: absoluta

Trabajar en navegadores antiguos (IE >= 8)

Los márgenes automáticos, combinados con valores de cero para los desplazamientos izquierdo y derecho o superior e inferior , centrarán
los elementos absolutamente posicionados dentro de su padre.

Ver resultado

HTML

GoalKicker.com – Notas CSS para profesionales 42

Machine Translated by Google

<div clase="padre">
<img class="centro" src="http://lorepixel.com/400/200/" />
</div>

CSS

.parent
{ posición: relativa; altura:
500px;
}

.center
{ posición: absoluta;
margen: automático;
superior: 0; derecha: 0;
inferior: 0; izquierda: 0;

Los elementos que no tienen su propio ancho y alto implícitos como las imágenes, necesitarán esos valores definidos.

Otros recursos: Centrado absoluto en CSS

Sección 6.6: Uso de calc()

La función calc() es parte de una nueva sintaxis en CSS3 en la que puede calcular (matemáticamente) qué tamaño/posición ocupa su elemento
usando una variedad de valores como píxeles, porcentajes, etc. Nota: siempre que use esta función, siempre tenga cuidado con el espacio entre dos
valores calc (100% - 80px).

CSS

.center
{ posición: absoluta; altura:
50px; ancho: 50px; fondo:
rojo; arriba: calc(50% -
50px / 2); /* altura dividida
por 2*/ izquierda: calc(50% - 50px / 2); /* ancho dividido por 2*/

HTML

<div clase="centro"></div>

Sección 6.7: Uso de altura de línea

También puede usar line-height para centrar verticalmente una sola línea de texto dentro de un contenedor:

CSS

div
{ altura: 200px; altura
de línea: 200px;
}

GoalKicker.com – Notas CSS para profesionales 43

Machine Translated by Google

Eso es bastante feo, pero puede ser útil dentro de un elemento <input /> . La propiedad line-height solo funciona cuando el texto que se va a centrar
ocupa una sola línea. Si el texto se ajusta a varias líneas, la salida resultante no se centrará.

Sección 6.8: Alinear verticalmente cualquier cosa con 3 líneas de código

Compatible con IE11+

Ver resultado

Usa estas 3 líneas para alinear verticalmente prácticamente todo. Solo asegúrese de que el div/imagen al que aplica el código tenga un padre con una
altura.

CSS

div.vertical
{ posición: relativa; arriba:
50%; transformar:
traducirY(-50%);
}

HTML

<div class="vertical"> ¡Texto alineado verticalmente !</div>

Sección 6.9: Centrado en relación con otro artículo

Veremos cómo centrar el contenido en función de la altura de un elemento cercano.

Compatibilidad: IE8+, todos los demás navegadores modernos.

HTML

<div clase="contenido">
<div class="posición-contenedor"> <div
class="thumb">
<img src="http://lorepixel.com/400/200/"> </div> <div
class="detalles"> <p class="banner-title">texto 1</p> <p
class ="banner-text">contenido contenido contenido
contenido contenido contenido contenido contenido

contenido contenido contenido contenido contenido contenido</p>

<botón clase="btn">botón</botón>
</div>
</div>
</div>

CSS

.contenido * {
tamaño de caja: caja de borde;

} .content .posición-contenedor {
pantalla: mesa;

} .contenido .detalles {
pantalla: tabla-celda;
alineación vertical: medio;

GoalKicker.com – Notas CSS para profesionales 44

Machine Translated by Google

ancho: 33,333333%;
relleno: 30px; tamaño de
fuente: 17px; alineación
de texto: centro;

} .content .thumb { ancho:

100%;

} .content .thumb img { ancho:

100%;
}

Enlace a JSFiddle

Los puntos principales son los 3 contenedores .thumb, .details y .position- container:

El .position-container debe tener display: table.

Los .detalles deben tener el ancho real establecido ancho: .... y mostrar: table-cell, vertical-align:
medio.

El .thumb debe tener ancho: 100% si desea que ocupe todo el espacio restante y se verá afectado por el ancho de .details .

La imagen (si tiene una imagen) dentro de .thumb debe tener ancho: 100%, pero no es necesario si tiene las proporciones correctas.

Sección 6.10: Técnica del elemento fantasma (truco de Michaÿ Czernow)

Esta técnica funciona incluso cuando se desconocen las dimensiones del recipiente.

Configure un elemento "fantasma" dentro del contenedor para que se centre y tenga una altura del 100%, luego use vertical-align: middle
tanto en eso como en el elemento que se centrará.

CSS

/ * Este padre puede tener cualquier ancho y alto */ .block { text-

align: center;

/ * Puede querer hacer esto si existe el riesgo de que el contenedor sea más angosto que el elemento interior */ white-space: nowrap;

/ * El elemento fantasma
*/ .block:before { content: '';
pantalla: bloque en línea;
altura: 100%; alineación
vertical: medio;

/ * Hay un espacio entre el elemento fantasma y .centrado, causado por el

carácter de espacio representado. Podría eliminarse empujando .centered (la distancia
de empuje depende de la familia de fuentes), o poniendo a cero el tamaño de fuente
en .parent y restableciéndolo (probablemente a 1rem) en .centered. */ margen
derecho: -0.25em;

GoalKicker.com – Notas CSS para profesionales 45

Machine Translated by Google

/ * El elemento a centrar, también puede ser de cualquier ancho y alto */ .centered { display: inline-block;
alineación vertical: medio; ancho: 300px; espacio en blanco: normal; /* Restablecimiento del
comportamiento heredado de nowrap */

HTML

<div class="bloque"> <div

class="centrado"></div>
</div>

Sección 6.11: Centrar vertical y horizontalmente sin

preocuparse por la altura o el ancho
La siguiente técnica le permite agregar su contenido a un elemento HTML y centrarlo tanto horizontal como verticalmente sin preocuparse por
su altura o ancho.

El contenedor exterior

debe tener pantalla: mesa;

El contenedor interior

debería tener display: table-cell; debe tener

alineación vertical: medio; debe tener alineación
de texto: centro;

el cuadro de contenido

debe tener pantalla: bloque en línea; debe

reajustar la alineación horizontal del texto, por ejemplo. alineación de texto: izquierda; o text-align: right;, a menos que desee que el texto esté
centrado

Manifestación

HTML

<div class="contenedor-externo">
<div class="contenedor-interno">
<div class="contenido-centrado">
¡Puedes poner cualquier cosa acá! </
div>
</div> </
div>

CSS

cuerpo
{ margen : 0;
}

.outer-container { posición :
absoluta; pantalla: mesa;
ancho: 100%; /* Esto podría
ser de CUALQUIER ancho */

GoalKicker.com – Notas CSS para profesionales 46

Machine Translated by Google

altura: 100%; /* Esto podría ser CUALQUIER altura */

background: #ccc;
}

.inner-container { pantalla:
table-cell; alineación vertical:
medio; alineación de texto:
centro;
}

.centered-content { display:
inline-block; alineación de
texto: izquierda; fondo: #fff;
relleno: 20px; borde: 1px sólido
#000;

¡ Vea también este violín!

Sección 6.12: Alinear verticalmente una imagen dentro de div

HTML

<div class="wrap"> <img

src="http://lorepixel.com/400/200/" /> </div>

CSS

.wrap
{ altura: 50px;/* altura máxima de la imagen */
anchura: 100px; borde: 1px azul sólido; alineación
de texto: centro;

} .wrap:before
{ contenido:"";
pantalla: bloque en línea; altura:
100%; alineación vertical:
medio; ancho: 1px;

img
{ alineación vertical: medio;
}

Sección 6.13: Centrado con tamaño fijo

Si el tamaño de su contenido es fijo, puede usar el posicionamiento absoluto al 50% con un margen que reduce la mitad del ancho y la altura
de su contenido:

HTML

<div clase="centro">
Centrar vertical y horizontalmente </div>

GoalKicker.com – Notas CSS para profesionales 47

Machine Translated by Google

CSS

.center
{ posición: absoluta;
fondo: #ccc;

izquierda:
50%; ancho:
150px; margen izquierdo: -75px; /* ancho * -0.5 */

arriba:
50%; altura:
200px; margen superior: -100px; /* altura * -0.5 */
}

Centrado horizontal con solo ancho fijo

Puede centrar el elemento horizontalmente incluso si no conoce la altura del contenido:

HTML

<div clase="centro">
Centrar solo horizontalmente </
div>

CSS

.center
{ posición: absoluta;
fondo: #ccc;

izquierda:
50%; ancho:
150px; margen izquierdo: -75px; /* ancho * -0.5 */
}

Centrado vertical con altura fija

Puede centrar el elemento verticalmente si conoce la altura del elemento:

HTML

<div clase="centro">
Centrar solo verticalmente </
div>

CSS

.center
{ posición: absoluta;
fondo: #ccc;

arriba:
50%; altura:
200px; margen superior: -100px; /* ancho * -0.5 */
}

GoalKicker.com – Notas CSS para profesionales 48

Machine Translated by Google

Sección 6.14: Alinear verticalmente elementos de altura dinámica

Aplicar css intuitivamente no produce los resultados deseados porque

alineación vertical: medio no lo es aplicable a elementos a nivel de bloque Los

valores margin-top:auto y margin-bottom:auto utilizados se calcularían como cero margin-top:-50%
los valores de margen basados en porcentajes se calculan en relación con el ancho de bloque contenedor

Para una mayor compatibilidad con navegadores, una solución alternativa con elementos auxiliares:

HTML

<div class="vcenter--container"> <div

class="vcenter--helper">
<div class="vcenter--contenido">
<!--cosas-->
</div>
</div>
</div>

CSS

.vcenter--container { pantalla:
tabla; altura: 100%;
posición: absoluta;
desbordamiento: oculto;
ancho: 100%;

} .vcenter--ayudante {
pantalla: tabla-celda;
alineación vertical: medio;

} .vcenter--content { margen:
0 auto; ancho: 200px;

jsfiddle de la pregunta original. Este enfoque

funciona con elementos de altura dinámica

respeta el flujo de contenido es compatible con
navegadores heredados

Sección 6.15: Centrado horizontal y vertical utilizando el diseño

de la tabla
Uno podría centrar fácilmente un elemento secundario usando la propiedad de visualización de tabla .

HTML

<div class="envoltorio">
<div clase="padre"> <div
clase="hijo"></div> </div> </div>

GoalKicker.com – Notas CSS para profesionales 49

Machine Translated by Google

CSS

.envoltura
{ pantalla: tabla;
alineación vertical: centro;
ancho: 200px; altura: 200px;
color de fondo: #9e9e9e;

} .parent
{ pantalla: tabla-celda;
alineación vertical: medio;
alineación de texto: centro;

} .child
{ pantalla: bloque en línea;
alineación vertical: medio;
alineación de texto: centro;
ancho: 100px; altura: 100px;
color de fondo: verde
azulado;
}

GoalKicker.com – Notas CSS para profesionales 50

Machine Translated by Google

Capítulo 7: El modelo de caja

Parámetro Detalle
content-box El ancho y alto del elemento solo incluye el área de contenido. padding-box El

ancho y la altura del elemento incluyen el contenido y el relleno. border-box El ancho y la altura

del elemento incluyen el contenido, el relleno y el borde.

inicial Establece el modelo de caja en su estado predeterminado.

heredar Hereda el modelo de caja del elemento padre.

Sección 7.1: ¿Qué es el modelo de caja?

Los bordes

El navegador crea un rectángulo para cada elemento del documento HTML. El modelo de caja describe cómo se agregan el relleno, el
borde y el margen al contenido para crear este rectángulo.

Diagrama del borrador de trabajo de CSS2.2

El perímetro de cada una de las cuatro áreas se llama borde. Cada borde define un cuadro.

El rectángulo más interior es el cuadro de contenido. El ancho y alto de esto depende del contenido representado del
elemento (texto, imágenes y cualquier elemento secundario que pueda tener).
El siguiente es el cuadro de relleno, como lo define la propiedad de relleno . Si no hay un ancho de relleno definido, el borde
del relleno es igual al borde del contenido.
Luego tenemos el cuadro de borde, como lo define la propiedad de borde . Si no hay un ancho de borde definido, el borde del
borde es igual al borde del relleno.
El rectángulo más exterior es el cuadro de margen, tal como lo define la propiedad de margen . Si no hay un ancho de margen
definido, el borde del margen es igual al borde del borde.

Ejemplo
div
{ borde: 5px rojo sólido;
margen: 50px; relleno:
20px;

GoalKicker.com – Notas CSS para profesionales 51

Machine Translated by Google

Este CSS diseña todos los elementos div para que tengan un borde superior, derecho, inferior e izquierdo de 5px de ancho; un margen superior, derecho, inferior e

izquierdo de 50px; y un relleno superior, derecho, inferior e izquierdo de 20px. Ignorando el contenido, nuestro cuadro generado se verá así:

Captura de pantalla del panel Estilos de elementos de Google Chrome

Como no hay contenido, la región de contenido (el cuadro azul en el medio) no tiene alto ni ancho (0px por 0px).

El cuadro de relleno por defecto tiene el mismo tamaño que el cuadro de contenido, más el ancho de 20 px en los cuatro bordes que estamos definiendo

arriba con la propiedad de relleno (40 px por 40 px).

El cuadro de borde tiene el mismo tamaño que el cuadro de relleno, más el ancho de 5 px que estamos definiendo arriba con la propiedad de borde (50 px

por 50 px).

Finalmente, el cuadro de margen tiene el mismo tamaño que el cuadro de borde, más el ancho de 50 px que estamos definiendo arriba con la propiedad

de margen (dando a nuestro elemento un tamaño total de 150 px por 150 px).

Ahora vamos a darle a nuestro elemento un hermano con el mismo estilo. El navegador mira el modelo de caja de ambos elementos para determinar dónde

debe colocarse el nuevo elemento en relación con el contenido del elemento anterior:

El contenido de cada elemento está separado por un espacio de 150 px, pero las cajas de los dos elementos se tocan entre sí.

Si luego modificamos nuestro primer elemento para que no tenga margen derecho, el borde del margen derecho estaría en la misma posición que el borde del borde

derecho, y nuestros dos elementos ahora se verían así:

Sección 7.2: tamaño de caja

El modelo de cuadro predeterminado (cuadro de contenido) puede ser contrario a la intuición, ya que el ancho / alto de un elemento no representará su ancho

o alto real en la pantalla tan pronto como comience a agregar relleno y estilos de borde al

GoalKicker.com – Notas CSS para profesionales 52

Machine Translated by Google

elemento.

El siguiente ejemplo demuestra este problema potencial con content-box:

área de texto
{ ancho: 100%;
relleno: 3px;
tamaño de caja: caja de contenido; /* valor por defecto */
}

Dado que el relleno se agregará al ancho del área de texto, el elemento resultante es un área de texto que es más ancho que
100%.

Afortunadamente, CSS nos permite cambiar el modelo de caja con la propiedad de tamaño de caja para un elemento. Hay tres valores
diferentes para la propiedad disponible:

caja de contenido: el modelo de caja común: el ancho y la altura solo incluyen el contenido, no el relleno ni el borde

padding-box: el ancho y la altura incluyen el contenido y el relleno, pero no el borde

cuadro de borde: el ancho y la altura incluyen el contenido, el relleno y el borde

Para resolver el problema del área de texto anterior, simplemente puede cambiar la propiedad de tamaño de cuadro a cuadro de relleno
o cuadro de borde. border-box es el más utilizado.

área de texto
{ ancho: 100%;
relleno: 3px;
tamaño de caja: caja de borde;
}

Para aplicar un modelo de cuadro específico a cada elemento de la página, use el siguiente fragmento:

html
{ tamaño del cuadro: cuadro de borde;
}

*, *:antes, *:después {

GoalKicker.com – Notas CSS para profesionales 53

Machine Translated by Google

tamaño de caja: heredar;

}

En esta codificación box-sizing:border-box; no se aplica directamente a *, por lo que puede sobrescribir fácilmente esta propiedad en
elementos individuales.

GoalKicker.com – Notas CSS para profesionales 54

Machine Translated by Google

Capítulo 8: Márgenes
Parámetro Detalles
0 establezca el margen en
auto ninguno usado para centrar, estableciendo valores uniformemente en cada lado

unidades (por ejemplo, px) consulte la sección de parámetros en Unidades para obtener una lista de unidades

válidas heredar heredar el valor del margen del elemento principal

inicial restaurar al valor inicial

Sección 8.1: Colapso de márgenes

Cuando dos márgenes se tocan verticalmente, se colapsan. Cuando dos márgenes se tocan horizontalmente, no se colapsan.

Ejemplo de márgenes verticales adyacentes:

Considere los siguientes estilos y marcas:

div{ margen: 10px;

}

<div>
algo de contenido
</div>
<div>
un poco más de contenido
</div>

Estarán a 10px de distancia ya que los márgenes verticales colapsan sobre uno y otro. (El espaciado no será la suma de dos márgenes).

Ejemplo de márgenes horizontales adyacentes:

Considere los siguientes estilos y marcas:

span{ margen: 10px;

}

<span>algo<span>contenido

Estarán separados 20px ya que los márgenes horizontales no colapsan sobre uno y otro. (El espaciado será la suma de dos márgenes).

Superposición con diferentes tamaños.

.superior{ margen: 10px;

} .bottom{ margen: 15px;

}

<div class="top"> algo

de contenido

GoalKicker.com – Notas CSS para profesionales 55

Machine Translated by Google
</div>
<div clase="abajo">
un poco más de contenido
</div>

Estos elementos estarán separados 15px verticalmente. Los márgenes se superponen tanto como sea posible, pero el
margen más grande determinará el espacio entre los elementos.

Margen superpuesto gotcha

.outer-
top{ margen: 10px;

} .inner-
top{ margen: 15px;

} .outer-
bottom{ margen: 20px;

} .inner-
bottom{ margen: 25px;
}

<div class="superior-exterior">
<div class="parte superior interna">
algo de contenido
</div> </
div> <div
class="parte inferior exterior">
<div class="inner-bottom">
un poco más de contenido
</div> </
div>

¿Cuál será el espacio entre los dos textos? (pase el cursor para ver la respuesta)

El espaciado será de 25px. Dado que los cuatro márgenes se tocan entre sí, colapsarán, utilizando así el margen más
grande de los cuatro.

Ahora, ¿qué tal si agregamos algunos bordes al marcado anterior?

div{ borde: 1px rojo sólido;

}

¿Cuál será el espacio entre los dos textos? (pase el cursor para ver la respuesta)

¡El espacio será de 59px! Ahora solo los márgenes de .outer-top y .outer-bottom se tocan entre sí y son los únicos
márgenes contraídos. Los márgenes restantes están separados por los bordes. Entonces tenemos 1px + 10px + 1px +
15px + 20px + 1px + 25px + 1px. (Los 1px son los bordes...)

Colapsar márgenes entre elementos primarios y secundarios:

HTML:

GoalKicker.com – Notas CSS para profesionales 56

Machine Translated by Google

<h1>Título</h1>
<div>
<p>Párrafo</p> </div>

CSS

h1
{ margen: 0;
fondo: #cff;

} div
{ margen: 50px 0 0 0;
fondo: #cfc;

}p
{ margen: 25px 0 0 0;
fondo: #cf9;
}

En el ejemplo anterior, solo se aplica el margen más grande. Es posible que haya esperado que el párrafo se ubicara a 60 px del h1 (ya que el
elemento div tiene un margen superior de 40 px y la p tiene un margen superior de 20 px). Esto no sucede porque los márgenes colapsan para
formar un solo margen.

Sección 8.2: Aplicar margen en un lado determinado

Propiedades específicas de dirección

CSS le permite especificar un lado determinado para aplicar el margen. Las cuatro propiedades proporcionadas para este propósito son:

margen izquierdo
margen derecho
margen superior

margen inferior

El siguiente código aplicaría un margen de 30 píxeles al lado izquierdo del div seleccionado. Ver resultado

HTML

<div id="miDiv"></div>

CSS

#myDiv
{ margen izquierdo: 30px;
altura: 40px; ancho:
40px; color de fondo: rojo;

}
Parámetro Detalles
margin-left La dirección en la que se debe aplicar el margen. 30px

El ancho del margen.

Especificación de la dirección usando la propiedad abreviada

La propiedad de margen estándar se puede expandir para especificar diferentes anchos a cada lado de los elementos seleccionados.
La sintaxis para hacer esto es la siguiente:

GoalKicker.com – Notas CSS para profesionales 57

Machine Translated by Google

margen: <arriba> <derecha> <abajo> <izquierda>;

El siguiente ejemplo aplica un margen de ancho cero en la parte superior del div, un margen de 10 px en el lado derecho, un margen
de 50 px en el lado izquierdo y un margen de 100 px en el lado izquierdo. Ver resultado

HTML

<div id="miDiv"></div>

CSS

#myDiv
{ margen: 0 10px 50px 100px; altura:
40px; ancho: 40px; color de fondo:
rojo;

Sección 8.3: Simplificación de la propiedad de margen

pag {
margen: 1px; / * margen de 1px en todas las direcciones */

/ *igual a:*/

margen:1px 1px;

/ *igual a:*/

margen:1px 1px 1px;

/ *igual a:*/

margen:1px 1px 1px 1px;

}

Otro ejemplo:

pags{

margen:10px 15px; / * 10px de margen superior e inferior y 15px de margen derecho e izquierdo*/

/ *igual a:*/

margen:10px 15px 10px 15px;

/ *igual a:*/

margen:10px 15px 10px; /* el

margen izquierdo se calculará a partir del valor del margen derecho (=15px) */
}

Sección 8.4: Centrar horizontalmente los elementos en una página

usando el margen
Siempre que el elemento sea un bloque y tenga un valor de ancho establecido explícitamente, los márgenes se pueden usar para centrar
elementos de bloque en una página horizontalmente.

GoalKicker.com – Notas CSS para profesionales 58

Machine Translated by Google

Agregamos un valor de ancho que es más bajo que el ancho de la ventana y la propiedad automática de margen luego distribuye el espacio
restante a la izquierda y a la derecha:

#miDiv
{ ancho:80%;
margen: 0
automático; }

En el ejemplo anterior, usamos la declaración de margen abreviada para establecer primero 0 en los valores de margen superior e inferior
(aunque podría ser cualquier valor) y luego usamos auto para permitir que el navegador asigne el espacio automáticamente a los valores de
margen izquierdo y derecho.

En el ejemplo anterior, el elemento #myDiv se establece en un 80 % de ancho, lo que deja un 20 % restante. El navegador distribuye
este valor a los lados restantes de modo que:

(100% - 80%) / 2 = 10%

Sección 8.5: Ejemplo 1:

Es obvio suponer que el valor porcentual de margin to margin-left y margin-right sería relativo a su elemento principal.

.parent
{ ancho : 500px;
altura: 300px;
}

.niño
{ ancho : 100px;
altura: 100px;
margen izquierdo: 10%; /* (ancho de padre * 10/100) => 50px */
}

Pero ese no es el caso, cuando se trata de margin-top y margin-bottom. Ambas propiedades, en porcentajes, no son relativas a la altura del
contenedor principal sino al ancho del contenedor principal.

Asi que,

.parent
{ ancho : 500px;
altura: 300px;
}

.niño
{ ancho : 100px;
altura: 100px;
margen izquierdo: 10%; /* (parentWidth * 10/100) => 50px */ margin-
top: 20%; /* (ancho de padre * 20/100) => 100px */
}

Sección 8.6: Márgenes negativos

El margen es una de las pocas propiedades de CSS que se pueden establecer en valores negativos. Esta propiedad se puede utilizar para
superponer elementos sin posicionamiento absoluto.

div{

GoalKicker.com – Notas CSS para profesionales 59

Machine Translated by Google

pantalla: en línea;
}

#sobre{ margen izquierdo: -20px;

}

<div> div base</div> <div

id="sobre">div superpuesto</div>

GoalKicker.com – Notas CSS para profesionales 60

Machine Translated by Google

Capítulo 9: Relleno
Sección 9.1: Taquigrafía de relleno
La propiedad de relleno establece el espacio de relleno en todos los lados de un elemento. El área de relleno es el espacio entre el contenido del
elemento y su borde. No se permiten valores negativos.

Para guardar la adición de relleno a cada lado individualmente (usando padding-top, padding-left, etc.), puede escribirlo de forma abreviada, como
se muestra a continuación:

Cuatro valores:

<estilo> .myDiv
{ relleno: 25px 50px 75px 100px; /* arriba a la derecha abajo a la izquierda; */

} </estilo>
<div clase="miDiv"></div>

Tres valores:

<estilo> .myDiv
{ relleno: 25px 50px 75px; /* arriba a la izquierda/abajo a la derecha */

} </estilo>
<div clase="miDiv"></div>

Dos valores:

<estilo> .myDiv
{ relleno: 25px 50px; /* arriba/abajo izquierda/derecha */

} </estilo>
<div clase="miDiv"></div>

Un valor:

<estilo> .myDiv {

GoalKicker.com – Notas CSS para profesionales 61

Machine Translated by Google

relleno: 25px; /* arriba/derecha/abajo/izquierda */

} </estilo>
<div clase="miDiv"></div>

Sección 9.2: Acolchado en un lado determinado

La propiedad de relleno establece el espacio de relleno en todos los lados de un elemento. El área de relleno es el espacio entre el contenido
del elemento y su borde. No se permiten valores negativos.

Puede especificar un lado individualmente:

relleno superior
relleno derecho
relleno inferior relleno
izquierdo

El siguiente código agregaría un relleno de 5px en la parte superior del div:

<estilo> .myClass { padding-top: 5px;

} </estilo>

<div class="miClase"></div>

GoalKicker.com – Notas CSS para profesionales 62

Machine Translated by Google

Capítulo 10: Frontera

Sección 10.1: borde-radio
La propiedad border-radius le permite cambiar la forma del modelo de caja básico.

Cada esquina de un elemento puede tener hasta dos valores, para el radio vertical y horizontal de esa esquina (para un máximo de 8
valores).

El primer conjunto de valores define el radio horizontal. El segundo conjunto opcional de valores, precedido por un radio vertical , define el
'/'. Si solo se proporciona un conjunto de valores, se utiliza tanto para el radio vertical como para el horizontal.

borde-radio: 10px 5% / 20px 25em 30px 35em;

El 10px es el radio horizontal de la parte superior izquierda y la parte inferior derecha. Y el 5% es el radio horizontal de la parte superior derecha e
inferior izquierda. Los otros cuatro valores después de '/' son los radios verticales para arriba a la izquierda, arriba a la derecha, abajo a la derecha y
abajo a la izquierda.

Al igual que con muchas propiedades de CSS, se pueden usar abreviaturas para cualquiera o todos los valores posibles. Por lo tanto,
puede especificar de uno a ocho valores. La siguiente abreviatura le permite establecer el radio horizontal y vertical de cada esquina en el
mismo valor:

HTML:

<div class='caja'></div>

CSS:

.box
{ ancho: 250px;
altura: 250px; color
de fondo: negro; borde-radio: 10px;

Border-radius se usa más comúnmente para convertir elementos de cuadro en círculos. Al establecer el radio del borde en la mitad de la
longitud de un elemento cuadrado, se crea un elemento circular:

.círculo
{ ancho: 200px;
altura: 200px; borde-
radio: 100px;
}

GoalKicker.com – Notas CSS para profesionales 63

Machine Translated by Google

Debido a que border-radius acepta porcentajes, es común usar 50% para evitar calcular manualmente el valor del radio del borde:

.círculo
{ ancho: 150px;
altura: 150px;
borde-radio: 50%;
}

Si las propiedades de ancho y alto no son iguales, la forma resultante será un óvalo en lugar de un círculo.

Ejemplo de radio de borde específico del navegador:

-webkit-border-superior-derecho-radio: 4px;
-webkit-border-bottom-right-radius: 4px; -webkit-
border-bottom-left-radius: 0; -webkit-border-top-left-
radius: 0; -moz-border-radio-superior derecho: 4px;
-moz-border-radius-bottomright: 4px; -moz-border-
radius-bottomleft: 0; -moz-border-radio-superior
izquierda: 0; borde-superior-derecho-radio: 4px;
borde-inferior-derecho-radio: 4px; borde-inferior-
izquierda-radio: 0; borde-superior-izquierda-
radio: 0;

Sección 10.2: estilo de borde

La propiedad border-style establece el estilo del borde de un elemento. Esta propiedad puede tener de uno a cuatro valores (por cada lado del
elemento un valor).

Ejemplos:

estilo de borde: punteado;

estilo de borde: punteado sólido doble punteado;

border-style también puede tener los valores none y hidden. Tienen el mismo efecto, excepto trabajos ocultos para resolución de conflictos
de borde para elementos <table> . En una <tabla> con múltiples bordes, ninguno tiene la prioridad más baja (es decir, en un conflicto, el borde
se mostraría) y oculto tiene la prioridad más alta (es decir, en un conflicto, el borde no se mostraría).

GoalKicker.com – Notas CSS para profesionales 64

Machine Translated by Google

Sección 10.3: Bordes Múltiples

Usando esquema:

.div1{ borde: 3px negro sólido ;

contorno: 6px azul sólido; ancho:
100px; altura: 100px; margen:
20px;

Usando box-shadow:

.div2{ borde: 5px verde sólido;

sombra de caja: 0px 0px 0px 4px #000; ancho:
100px; altura: 100px; margen: 20px;

Usando un pseudo elemento:

.div3
{ posición: relativo; borde:
5px sólido #000; ancho: 100px;
altura: 100px; margen: 20px;

} .div3:antes de { "
contenido: ";
posición: absoluta; borde:
5px azul sólido; índice z: -1;
arriba: 5px; izquierda: 5px;
derecha: 5px; abajo: 5px;

GoalKicker.com – Notas CSS para profesionales sesenta y cinco

Machine Translated by Google

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Sección 10.4: borde (abreviaturas)

En la mayoría de los casos, querrá definir varias propiedades de borde (ancho de borde, estilo de borde y color de borde) para todos los lados de un
elemento.

En lugar de escribir:

ancho del borde: 1px;

estilo de borde: sólido;
color del borde: #000;

Simplemente puede escribir:

borde: 1px sólido #000;

Estas abreviaturas también están disponibles para cada lado de un elemento: borde superior, borde izquierdo, borde derecho y
borde inferior. Entonces puedes hacer:

borde superior: 2px doble #aaaaaa;

Sección 10.5: borde colapsado

La propiedad border-collapse se aplica solo a las tablas (y los elementos que se muestran como visualización: tabla o tabla en línea) y establece
si los bordes de la tabla se contraen en un solo borde o se separan como en HTML estándar.

tabla
{ borde-colapso: separado; /* predeterminado */
espacio entre bordes: 2px; /* Solo funciona si border-collapse está separado */
}

Consulte también Tablas: entrada de documentación de colapso de borde

GoalKicker.com – Notas CSS para profesionales 66

Machine Translated by Google

Sección 10.6: imagen de borde

Con la propiedad border-image , tiene la posibilidad de configurar una imagen para usar en lugar de los estilos de borde normales.

Una imagen de borde consiste esencialmente en una

border-image-source: la ruta a la imagen que se usará border-image-

slice: especifica el desplazamiento que se usa para dividir la imagen en nueve regiones (cuatro esquinas, cuatro bordes y un
centro) border-image-repeat: especifica cómo se escalan las imágenes de los lados y el centro de la imagen del borde

Considere el siguiente ejemplo donde border.png es una imagen de 90x90 píxeles:

borde-imagen: url("border.png") 30 estirar;

La imagen se dividirá en nueve regiones con 30x30 píxeles. Los bordes se usarán como esquinas del borde, mientras que el lado se usará en el
medio. Si el elemento es más alto o más ancho que 30 px, esta parte de la imagen se estirará .
La parte media de la imagen por defecto es transparente.

Sección 10.7: Creación de un borde multicolor usando una imagen de

borde
CSS

.bordeado {
imagen de borde: degradado lineal (a la derecha, rojo 20 %, verde 20 %, verde 40 %, azul 40 %, azul 60 %, granate 60 %,
granate 80 %, chocolate 80 %); /* degradado con los colores requeridos */
borde-imagen-segmento: 1;
}
HTML

<div class='bordered'>Borde en todos los lados</div>

El ejemplo anterior produciría un borde que se compone de 5 colores diferentes. Los colores se definen a través de un degradado lineal (puede
encontrar más información sobre degradados en los documentos). Puede encontrar más información sobre la propiedad border-image-slice en
el ejemplo de border-image en la misma página.

(Nota: se agregaron propiedades adicionales al elemento con fines de presentación).

Habría notado que el borde izquierdo tiene un solo color (el color inicial del degradado) mientras que el borde derecho también tiene un solo
color (el color final del degradado). Esto se debe a la forma en que funciona la propiedad de imagen de borde.
Es como si el degradado se aplicara a todo el cuadro y luego los colores se enmascararan en las áreas de relleno y contenido, lo que
hace que parezca que solo el borde tiene el degradado.

Los bordes que tienen un solo color dependen de la definición del degradado. Si el degradado es un degradado a la derecha ,
el borde izquierdo sería el color inicial del degradado y el borde derecho sería el color final. Si fuera un degradado hacia abajo ,
el borde superior sería el color inicial del degradado y el borde inferior sería el color final. A continuación es

GoalKicker.com – Notas CSS para profesionales 67

Machine Translated by Google

la salida de un degradado de 5 colores al fondo .

Si el borde se requiere solo en lados específicos del elemento, entonces la propiedad border-width se puede usar como con cualquier
otro borde normal. Por ejemplo, agregar el siguiente código produciría un borde solo en la parte superior del elemento.

ancho del borde: 5px 0px 0px 0px;

Tenga en cuenta que cualquier elemento que tenga la propiedad border-image no respetará el border-radius (es decir, el borde no se
curvará). Esto se basa en la siguiente declaración en la especificación:

Los fondos de un cuadro, pero no su imagen de borde, se recortan en la curva apropiada (según lo determinado por
'background-clip').

Sección 10.8: borde-[izquierda|derecha|arriba|abajo]

La propiedad border-[left|right|top|bottom] se usa para agregar un borde a un lado específico de un elemento.

Por ejemplo, si quisiera agregar un borde al lado izquierdo de un elemento, podría hacerlo:

#elemento
{ borde izquierdo: 1px negro sólido;
}

GoalKicker.com – Notas CSS para profesionales 68

Machine Translated by Google

Capítulo 11: Esquemas

Parámetro Detalles
punteado contorno punteado

punteado contorno discontinuo

sólido contorno sólido

doble doble contorno

ranura Contorno acanalado 3D, depende del valor del color del contorno

cresta Contorno estriado en 3D, depende del valor del color del contorno
recuadro Contorno insertado 3D, depende del valor del color del contorno
comienzo Contorno inicial 3D, depende del valor del color del contorno
ninguna sin contorno

oculto contorno oculto

Sección 11.1: Resumen

El contorno es una línea que rodea el elemento, fuera del borde. A diferencia del borde, los contornos no toman ninguna

espacio en el modelo de caja. Por lo tanto, agregar un contorno a un elemento no afecta la posición del elemento u otros
elementos.

Además, los contornos pueden no ser rectangulares en algunos navegadores. Esto puede suceder si el contorno se aplica en un lapso

elemento que tiene texto con diferentes propiedades de tamaño de fuente en su interior. A diferencia de los bordes, los contornos no se pueden haber redondeado
esquinas

Las partes esenciales del contorno son el color del contorno, el estilo del contorno y el ancho del contorno.

La definición de contorno es equivalente a la definición de borde:

Un contorno es una línea alrededor de un elemento. Se muestra alrededor del margen del elemento. Sin embargo lo és

diferente de la propiedad fronteriza.

contorno: 1px negro sólido;

Sección 11.2: estilo de esquema

La propiedad de estilo de contorno se utiliza para establecer el estilo del contorno de un elemento.

pag {
borde: 1px negro sólido;
contorno-color:azul;
altura de línea: 30px;
}
.p1{
estilo de esquema: punteado;
}
.p2{
estilo de contorno: discontinuo;
}
.p3{
estilo de esquema: sólido;
}

GoalKicker.com – Notas CSS para profesionales 69

Machine Translated by Google

.p4{ estilo de contorno: doble;

} .p5{ estilo de contorno: groove;

} .p6{ estilo de contorno: cresta;

} .p7{ estilo de contorno: inserción;

} .p8{ estilo de contorno: inicio;

}

HTML

<p class="p1">Un contorno punteado</p> <p

class="p2">Un contorno discontinuo</p> <p
class="p3">Un contorno sólido</p> <p class="
p4">Un contorno doble</p> <p class="p5">Un
contorno de ranura</p> <p class="p6">Un contorno
de cresta</p> <p class="p7">Un recuadro
esquema</p> <p class="p8">Un esquema inicial</
p>

GoalKicker.com – Notas CSS para profesionales 70

Machine Translated by Google

Capítulo 12: Desbordamiento

Valor de desbordamiento Detalles
visible Muestra todo el contenido desbordado fuera del elemento
Desplazarse Oculta el contenido desbordado y agrega una barra de desplazamiento
oculto Oculta el contenido desbordado, ambas barras de desplazamiento desaparecen y la página se vuelve fija
auto Igual que el desplazamiento si el contenido se desborda, pero no agrega la barra de desplazamiento si el contenido cabe

heredar Heredar el valor del elemento padre para esta propiedad

Sección 12.1: desbordamiento-envoltura

overflow-wrap le dice a un navegador que puede dividir una línea de texto dentro de un elemento de destino en varias líneas en un
lugar que de otro modo sería irrompible. Útil para evitar que una larga cadena de texto cause problemas de diseño debido al
desbordamiento de su contenedor.

CSS

div
{ ancho: 100px;
contorno: 1px punteado #bbb;
}

#div1
{ desbordamiento-envoltura:normal;
}

#div2
{ overflow-wrap:romper-palabra;
}

HTML

<div id="div1">
<strong>#div1</strong>: las palabras pequeñas se muestran normalmente, pero una palabra larga como <span
style="red;">supercalifragilisticexpialidocious es demasiado larga, por lo que se desbordará más allá del borde del salto de línea. </
div>

<div id="div2">
<strong>#div2</strong>: las palabras pequeñas se muestran normalmente, pero una palabra larga como <span
style="red;">supercalifragilisticexpialidocious se dividirá en el salto de línea y continuará en la línea siguiente.

</div>

GoalKicker.com – Notas CSS para profesionales 71

Machine Translated by Google

overflow-wrap – Valor Detalles

normal Permite que una palabra se desborde si es más larga que la línea
romper-palabra Dividirá una palabra en varias líneas, si es necesario
heredar Hereda el valor del elemento padre para esta propiedad

Sección 12.2: desbordamiento-x y desbordamiento-y

Estas dos propiedades funcionan de manera similar a la propiedad de desbordamiento y aceptan los mismos valores. El parámetro
overflow-x solo funciona en el eje x o de izquierda a derecha. El desbordamiento-y funciona en el eje y o de arriba a abajo.

HTML

<div id="div-x"> Si
este div es demasiado pequeño para mostrar su contenido, el
contenido de la izquierda y la derecha se recortará. </div>

<div id="div-y"> Si
este div es demasiado pequeño para mostrar su contenido, se
recortará el contenido de la parte superior e inferior. </div>

CSS

div
{ ancho: 200px;
altura: 200px;
}

#div-x
{ desbordamiento-x: oculto;
}

GoalKicker.com – Notas CSS para profesionales 72

Machine Translated by Google

#div-y
{ desbordamiento-y: oculto;
}

Sección 12.3: desbordamiento: desplazamiento

HTML

<div>
Este div es demasiado pequeño para mostrar su contenido para mostrar los efectos de la propiedad de desbordamiento. </div>

CSS

div
{ ancho: 100px;
altura: 100px;
desbordamiento: desplazamiento;
}

Resultado

El contenido de arriba está recortado en un cuadro de 100 px por 100 px, con desplazamiento disponible para ver el contenido desbordado.

La mayoría de los navegadores de escritorio mostrarán barras de desplazamiento horizontales y verticales, ya sea que el contenido esté recortado o no.

Esto puede evitar problemas con las barras de desplazamiento que aparecen y desaparecen en un entorno dinámico. Las impresoras pueden imprimir contenido desbordado.

Sección 12.4: desbordamiento: visible

HTML

<div>
Incluso si este div es demasiado pequeño para mostrar su contenido, el contenido no se recorta.
</div>

CSS

div
{ ancho: 50px;
altura: 50px;
desbordamiento: visible;
}

Resultado

GoalKicker.com – Notas CSS para profesionales 73

Machine Translated by Google

El contenido no se recorta y se representará fuera del cuadro de contenido si supera el tamaño de su contenedor.

Sección 12.5: Contexto de formato de bloque creado con desbordamiento

El uso de la propiedad de desbordamiento con un valor diferente al visible creará un nuevo contexto de formato de bloque. Esto es útil para
alinear un elemento de bloque al lado de un elemento flotante.

CSS

img
{ flotador:
izquierda; margen derecho: 10px;

} div
{ desbordamiento: oculto; /* crea contexto de formato de bloque */
}

HTML

<img src="http://placehold.it/100x100"> <div>

<p>Lorem ipsum dolor sit amet, cum no paulo mollis
pertinacia.</p> <p>Ad case omnis nam, mutat deseruisse persequeris eos anuncio, en tollit
debitis mar.</p>
</div>

Resultado

GoalKicker.com – Notas CSS para profesionales 74

Machine Translated by Google

Este ejemplo muestra cómo los párrafos dentro de un div con el conjunto de propiedades de desbordamiento interactuarán con una imagen flotante.

GoalKicker.com – Notas CSS para profesionales 75

Machine Translated by Google

Capítulo 13: Consultas de medios

Parámetro Detalles

tipo de medio (Opcional) Este es el tipo de medio. Podría ser cualquier cosa en el rango de todos a la pantalla.

(Opcional) No aplica el CSS para este tipo de medio en particular y se aplica a todo
no
más.

característica de los medios Lógica para identificar el caso de uso de CSS. Opciones descritas a continuación.
Función de medios Detalles

relación de aspecto Describe la relación de aspecto del área de visualización de destino del dispositivo de salida.

Indica el número de bits por componente de color del dispositivo de salida. Si el dispositivo no es un
color
dispositivo de color, este valor es cero.

Indice de color Indica el número de entradas en la tabla de búsqueda de colores para el dispositivo de salida.

cuadrícula Determina si el dispositivo de salida es un dispositivo de cuadrícula o un dispositivo de mapa de bits.

altura La función de medios de altura describe la altura de la superficie de representación del dispositivo de salida.

anchura máxima CSS no se aplicará en un ancho de pantalla más ancho que el especificado.

ancho mínimo CSS no se aplicará en un ancho de pantalla más estrecho que el especificado.

Altura máxima CSS no se aplicará en una altura de pantalla más alta que la especificada.

min-altura CSS no se aplicará en una altura de pantalla más corta que la especificada.

monocromo Indica el número de bits por píxel en un dispositivo monocromo (escala de grises).

orientación CSS solo se mostrará si el dispositivo está utilizando la orientación especificada. Ver comentarios para más detalles.

resolución Indica la resolución (densidad de píxeles) del dispositivo de salida.

escanear Describe el proceso de escaneo de los dispositivos de salida de televisión.

La función de ancho de medios describe el ancho de la superficie de representación del dispositivo de salida
ancho
(como el ancho de la ventana del documento o el ancho del cuadro de página en una impresora).

Detalles de características obsoletas

El CSS en desuso solo se mostrará en dispositivos cuya relación alto/ancho coincida con el especificado
relación de relación de aspecto
del dispositivo . Esta es una característica desaprobada y no se garantiza que funcione.

En desuso Igual que max-width pero mide el ancho físico de la pantalla, en lugar del
ancho máximo del dispositivo
ancho de visualización del navegador.

En desuso Igual que min-width pero mide el ancho físico de la pantalla, en lugar del
min-dispositivo-ancho
ancho de visualización del navegador.

En desuso Igual que max-height pero mide el ancho físico de la pantalla, en lugar del
altura máxima del dispositivo
ancho de visualización del navegador.

En desuso Igual que min-height pero mide el ancho físico de la pantalla, en lugar del
altura mínima del dispositivo
ancho de visualización del navegador.

Sección 13.1: Terminología y Estructura

Las consultas de medios permiten aplicar reglas CSS según el tipo de dispositivo/medio (p. ej., pantalla, impresión o dispositivo portátil)

llamado tipo de medio, se describen aspectos adicionales del dispositivo con características de medios como la disponibilidad de

color o dimensiones de la ventana gráfica.

Estructura general de una consulta de medios

@medios [...] {
/ * Una o más reglas CSS para aplicar cuando se satisface la consulta */
}

Una consulta de medios que contiene un tipo de medio

@media imprimir {
/ * Una o más reglas CSS para aplicar cuando se satisface la consulta */

GoalKicker.com – Notas CSS para profesionales 76

Machine Translated by Google

Una consulta de medios que contiene un tipo de medio y una función de medios

Pantalla @media y (ancho máximo: 600 px) {

/ * Una o más reglas CSS para aplicar cuando se satisface la consulta */
}

Una consulta de medios que contiene una función de medios (y un tipo de medios implícito de "todos")

@media (orientación: retrato) {

/ * Una o más reglas CSS para aplicar cuando se satisface la consulta */
}

Sección 13.2: Ejemplo básico

pantalla @media y (ancho mínimo: 720 px) { cuerpo
{ color de fondo : azul cielo ;

}
}

La consulta de medios anterior especifica dos condiciones:

1. La página debe verse en una pantalla normal (no una página impresa, proyector, etc.).
2. El ancho del puerto de visualización del usuario debe ser de al menos 720 píxeles.

Si se cumplen estas condiciones, los estilos dentro de la consulta de medios estarán activos y el color de fondo de la página será azul cielo.

Las consultas de medios se aplican dinámicamente. Si en la carga de la página se cumplen las condiciones especificadas en la consulta de medios, se
aplicará el CSS, pero se desactivará inmediatamente si las condiciones dejan de cumplirse. Por el contrario, si inicialmente no se cumplen las condiciones,
el CSS no se aplicará hasta que se cumplan las condiciones especificadas.

En nuestro ejemplo, si el ancho del puerto de visualización del usuario es inicialmente mayor a 720 píxeles, pero el usuario reduce el ancho del
navegador, el color de fondo dejará de ser azul cielo tan pronto como el usuario haya cambiado el tamaño del puerto de visualización a menos de 720
píxeles en ancho.

Sección 13.3: tipo de medio

Las consultas de medios tienen un parámetro de tipo de medio opcional . Este parámetro se coloca directamente después de la
declaración @media (@media mediatype), por ejemplo:

@media print { html

{ color de
fondo: blanco;
}
}

El código CSS anterior le dará al elemento DOM HTML un color de fondo blanco cuando se imprima.

El parámetro mediatype tiene un prefijo not o only opcional que aplicará los estilos a todo excepto al tipo de medio especificado o solo al tipo de
medio especificado, respectivamente. Por ejemplo, el siguiente ejemplo de código aplicará el estilo a todos los tipos de medios, excepto a los impresos.

@media no imprime { html

{ color de fondo:
verde;
}

GoalKicker.com – Notas CSS para profesionales 77

Machine Translated by Google

Y de igual manera, para solo mostrarlo solo en pantalla, se puede usar esto:

@media solo pantalla

{ .fadeInEffects
{ pantalla: bloque;
}
}

La lista de tipos de medios se puede entender mejor con la siguiente tabla:

Media Type all Descripción

Aplicar a todos los dispositivos Equipos

pantalla predeterminados

impresión Impresoras en general. Se utiliza para diseñar versiones impresas de sitios web.

PDA portátiles , teléfonos móviles y dispositivos portátiles con proyección en pantalla pequeña

Para presentaciones proyectadas, por ejemplo, proyectores

auditivo Sistemas de voz
braille Dispositivos táctiles Braille

impresoras braille paginadas en relieve

televisión
Dispositivos tipo televisión

tty Dispositivos con una cuadrícula de caracteres de paso fijo. Terminales, portátiles.

Sección 13.4: Consultas de medios para pantallas

retina y no retina
Aunque esto solo funciona para navegadores basados en WebKit, es útil:

/ * ----------- Pantallas no Retina ----------- */ Pantalla @media y (ancho

mínimo: 1200 px) y (ancho máximo: 1600 px) y (-webkit-min-device-
pixel-ratio: 1) {

/ * ----------- Pantallas Retina ----------- */ Pantalla @media

y (ancho mínimo: 1200 px ) y

(ancho máximo: 1600 px ) y (-
webkit-min-device-pixel-ratio: 2) y (resolución mínima: 192
ppp) {
}

Información de contexto

Hay dos tipos de píxeles en la pantalla. Uno son los píxeles lógicos y el otro son los píxeles físicos. En su mayoría, los píxeles físicos siempre
permanecen iguales, porque es el mismo para todos los dispositivos de visualización. Los píxeles lógicos cambian según la resolución de los
dispositivos para mostrar píxeles de mayor calidad. La relación de píxeles del dispositivo es la relación entre los píxeles físicos y los píxeles
lógicos. Por ejemplo, el MacBook Pro Retina, iPhone 4 y superior informan una proporción de píxeles del dispositivo de 2, porque la resolución
lineal física es el doble de la resolución lógica.

La razón por la que esto funciona solo con navegadores basados en WebKit es por:

GoalKicker.com – Notas CSS para profesionales 78

Machine Translated by Google

El prefijo del proveedor -webkit- antes de la regla.

Esto no se ha implementado en motores que no sean WebKit y Blink.

Sección 13.5: Ancho vs ventana gráfica

Cuando usamos "ancho" con consultas de medios, es importante configurar la etiqueta meta correctamente. La metaetiqueta básica tiene este aspecto
y debe colocarse dentro de la etiqueta <head> .

<meta name="viewport" content="width=device-width,initial-scale=1">

¿Por qué esto es importante?

Según la definición de MDN, "ancho" es

La función de ancho de medios describe el ancho de la superficie de representación del dispositivo de salida (como el ancho de la
ventana del documento o el ancho del cuadro de página en una impresora).

¿Qué significa eso?

View-port es el ancho del propio dispositivo. Si la resolución de su pantalla dice que la resolución es 1280 x 720, el ancho de su puerto de visualización
es "1280px".

Más a menudo, muchos dispositivos asignan diferentes cantidades de píxeles para mostrar un píxel. Por ejemplo, el iPhone 6 Plus tiene una
resolución de 1242 x 2208. Pero el ancho real de la ventana gráfica y la altura de la ventana gráfica son 414 x 736. Eso significa que se usan 3
píxeles para crear 1 píxel.

Pero si no configuró la etiqueta meta correctamente, intentará mostrar su página web con su resolución nativa, lo que da como resultado una vista
alejada (textos e imágenes más pequeños).

Sección 13.6: Uso de Media Queries para orientar diferentes tamaños

de pantalla

A menudo, el diseño web receptivo implica consultas de medios, que son bloques CSS que solo se ejecutan si se cumple una condición.
Esto es útil para el diseño web receptivo porque puede usar consultas de medios para especificar diferentes estilos CSS para la versión
móvil de su sitio web en comparación con la versión de escritorio.

Pantalla @media only y (ancho mínimo: 300 px) y (ancho máximo: 767 px) { .site-
title { font-size: 80%;

/ * Los estilos en este bloque solo se aplican si el tamaño de la pantalla es de al menos 300 px de ancho, pero no más
que 767px */ }

Pantalla @media only y (ancho mínimo: 768 px) y (ancho máximo: 1023 px) { .site-
title { font-size: 90%;

/ * Los estilos en este bloque solo se aplican si el tamaño de la pantalla es de al menos 768 px de ancho, pero no más
de 1023 px */ }

@media solo pantalla y (ancho mínimo: 1024px) {

GoalKicker.com – Notas CSS para profesionales 79

Machine Translated by Google

.sitio-título { tamaño
de fuente: 120%;
}

/ * Los estilos en este bloque solo se aplican si el tamaño de la pantalla tiene más de 1024 px de ancho. */
}

Sección 13.7: Uso en etiqueta de enlace

<enlace rel="hoja de estilo" media="ancho mínimo: 600px" href="ejemplo.css" />

Esta hoja de estilo aún se descarga, pero se aplica solo en dispositivos con un ancho de pantalla superior a 600 px.

Sección 13.8: consultas de medios e IE8

Preguntas de los medios no son compatibles en absoluto en IE8 y versiones anteriores.

Una solución basada en Javascript

Para agregar soporte para IE8, puede usar una de varias soluciones JS. Por ejemplo, Responder se puede agregar para agregar
compatibilidad con consultas de medios para IE8 solo con el siguiente código:

<!--[si es IE 9]> <script

src="respond.min.js"> </
script> <![endif]-->

Mediaconsultas CSS es otra biblioteca que hace lo mismo. El código para agregar esa biblioteca a su HTML sería idéntico:

<!--[si es IE 9]> <script

src="css3-mediaqueries.js">

</script> <!
[finalizar]-->

La alternativa

Si no le gusta una solución basada en JS, también debería considerar agregar una hoja de estilo solo para IE<9 donde ajuste su estilo
específico para IE<9. Para eso, debe agregar el siguiente HTML a su código:

<!--[si es IE 9]> <link

rel="hoja de estilo" type="text/css" media="all" href="style-ielt9.css"/> <![endif]-->

Nota :

Técnicamente es una alternativa más: usar hacks CSS para apuntar a IE<9. Tiene el mismo impacto que una hoja de estilo solo de
IE<9, pero no necesita una hoja de estilo separada para eso. Sin embargo, no recomiendo esta opción, ya que producen un código CSS
no válido (que es solo una de las varias razones por las que el uso de hacks CSS generalmente está mal visto hoy en día).

GoalKicker.com – Notas CSS para profesionales 80

Machine Translated by Google

Capítulo 14: Flotadores

Sección 14.1: Hacer flotar una imagen dentro del texto

El uso más básico de un flotante es hacer que el texto se ajuste alrededor de una imagen. El siguiente código producirá dos párrafos y una
imagen, con el segundo párrafo fluyendo alrededor de la imagen. Tenga en cuenta que siempre está contenido después del elemento
flotante que fluye alrededor del elemento flotante.

HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue sempre porta.
mauri masa. Vestíbulo lacinia arcu eget nulla. </p>

<img src="http://lorepixel.com/200/100/" />

<p>Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula en libero. Sed dignissim lacinia nunc. Tortor de Curabitur. Plumilla pellentesca. Aenean quam. In
scelerisque sem at dolor. Mecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p>

CSS:

img
{ flotador:
izquierda; margen derecho: 1 rem;
}

Esta sera la salida

GoalKicker.com – Notas CSS para profesionales 81

Machine Translated by Google

Enlace de código abierto

Sección 14.2: propiedad clara

La propiedad clara está directamente relacionada con los flotadores. Valores de propiedad:

ninguno: predeterminado. Permite elementos flotantes en ambos lados

izquierdo: no se permiten elementos flotantes en el lado izquierdo derecho: no

se permiten elementos flotantes en el lado derecho ambos: no se permiten

elementos flotantes en el lado izquierdo o derecho inicial: establece esta propiedad en su valor

predeterminado. Lea acerca de la herencia inicial: hereda esta propiedad de su elemento principal.

Leer sobre heredar

<html>
<cabeza>
<estilo>
img { float:
izquierda;

GoalKicker.com – Notas CSS para profesionales 82

Machine Translated by Google

p.claro
{ claro: ambos;

} </estilo>
</cabeza>
<cuerpo>

<img src="https://static.pexels.com/photos/69372/pexels-photo-69372-medium.jpeg" width="100"> <p>Lorem ipsoum Lorem

ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
Lorem ipsoum Lorem ipsoum Lorem ipsoum </p> <p class="clear">Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum
Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum Lorem ipsoum </ p>

</
cuerpo> </html>

Sección 14.3: Clearfix

El truco clearfix es una forma popular de contener flotadores (N. Gallagher, también conocido como @necolas)

No debe confundirse con la propiedad clear , clearfix es un concepto (que también está relacionado con los flotantes, de ahí la posible confusión). Para

contener flotantes, debe agregar la clase .cf o .clearfix en el contenedor (el padre) y diseñar esta clase con algunas reglas que se describen a continuación.

3 versiones con efectos ligeramente diferentes (fuentes : un nuevo truco micro clearfix por N. Gallagher y clearfix recargado por TJ Koblentz):

Clearfix (con el colapso del margen superior de los flotadores contenidos aún ocurriendo)

.cf:después de {
contenido: "";
pantalla: mesa;
}

.cf:después de {
claro: ambos;
}
Clearfix también previene el colapso del margen superior de los flotadores contenidos

/ **
* Para navegadores modernos
* 1. El contenido del espacio es una forma de evitar un error de Opera cuando el
* El atributo contenteditable se incluye en cualquier otra parte del documento.
* De lo contrario, hace que aparezca un espacio en la parte superior e inferior de los
* elementos que están fijados.
* 2. El uso de `table` en lugar de `block` solo es necesario si se usa
* `:before` para contener los márgenes superiores de los elementos secundarios.

*/ .cf:antes, .cf:después
{ contenido: " "; /* 1 */ mostrar: tabla; /* 2 */
}

.cf:después de {
claro: ambos;

83
GoalKicker.com – Notas CSS para profesionales
Machine Translated by Google

Clearfix con soporte de navegadores obsoletos IE6 e IE7

.cf:antes, .cf:después
" ";{ contenido:
pantalla: mesa;
}

.cf:después de {
claro: ambos;
}

/ **
* Solo para IE 6/7 *
Incluya esta regla para activar hasLayout y contener flotantes. */ .cf { *zoom: 1;

Codepen mostrando efecto clearfix

Otro recurso: todo lo que sabe sobre clearfix es incorrecto (clearfix y BFC - Contexto de formato de bloque mientras que
hasLayout se relaciona con navegadores obsoletos IE6 tal vez 7)

Sección 14.4: DIV en línea usando flotador

El div es un elemento a nivel de bloque, es decir, ocupa todo el ancho de la página y los hermanos se colocan uno debajo del otro
independientemente de su ancho.

<div>
<p>Este es el DIV 1</p> </
div> <div>

<p>Este es el DIV 2</p> </

div>

La salida del siguiente código será

GoalKicker.com – Notas CSS para profesionales 84

Machine Translated by Google

Podemos hacerlos en línea agregando una propiedad css flotante al div.

HTML:

<div class="exterior-div">
<div class="inner-div1">
<p>Este es el DIV 1</p>
</div> <div class="inner-div2">

<p>Este es el DIV 2</p>

</div> </div>

CSS

.inner-div1
{ ancho: 50%;
margen derecho:
0px; flotador izquierdo;
fondo : #337ab7; relleno:
50px 0px;
}

.inner-div2
{ ancho: 50%;
margen derecho:
0px; flotador izquierdo;
fondo : #dd2c00; relleno:
50px 0px;
}

pag {
alineación de texto: centro;
}

GoalKicker.com – Notas CSS para profesionales 85

Machine Translated by Google

Enlace de código abierto

Sección 14.5: Uso de la propiedad de desbordamiento para borrar flotantes

Establecer el valor de desbordamiento en oculto, automático o desplazarse a un elemento borrará todos los flotadores dentro de ese elemento.

Nota: usar overflow:scroll siempre mostrará el cuadro de desplazamiento

Sección 14.6: Diseño simple de dos columnas de ancho fijo

Un diseño simple de dos columnas consta de dos elementos flotantes de ancho fijo. Tenga en cuenta que la barra lateral y el área de contenido no
tienen la misma altura en este ejemplo. Esta es una de las partes complicadas con los diseños de varias columnas que usan flotadores y requiere
soluciones alternativas para que varias columnas parezcan tener la misma altura.

HTML:

<div class="envoltorio">

<div class="barra lateral">

<h2>Barra lateral</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero nec odio.</p> </div>

<div clase="contenido">
<h1>Contenido</h1>

<p>Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula en libero. Sed dignissim lacinia nunc. Tortor de Curabitur. Plumilla pellentesca. Aenean quam. In
scelerisque sem at dolor. Mecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> </div>

</div>

CSS:

.envoltorio
{ ancho:600px;
relleno: 20px;
color de fondo: rosa;

/ * Los elementos flotantes no usan ninguna altura. Agregar "desbordamiento: oculto;" obliga a la
elemento principal que se expandirá para contener sus elementos secundarios flotantes. */
desbordamiento: oculto;
}

.barra lateral
{ ancho: 150px;
flotador
izquierdo; color de fondo: azul;

GoalKicker.com – Notas CSS para profesionales 86

Machine Translated by Google

.contenido
{ ancho:450px;
flotar derecho;
color de fondo: amarillo;
}

Sección 14.7: Diseño simple de tres columnas de ancho fijo

HTML:

<div class="wrapper"> <div

class="left-sidebar"> <h1>Barra lateral
izquierda</h1> <p>Lorem ipsum
dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div clase="contenido">
<h1>Contenido</h1>
<p>Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula en libero. Sed dignissim lacinia nunc. Tortor de Curabitur. Plumilla pellentesca. Aenean quam. In scelerisque sem at
dolor. Mecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non,
massa. </p> </div> <div class="right-sidebar"> <h1>Barra lateral derecha</h1> <p>Fusce ac turpis quis ligula lacinia aliquet.</p>

</div>
</div>

CSS:

.envoltorio
{ ancho:600px;
color de fondo: rosa; relleno:
20px;

/ * Los elementos flotantes no usan ninguna altura. Agregar "desbordamiento: oculto;" obliga a la
elemento principal que se expandirá para contener sus elementos secundarios flotantes. */
desbordamiento: oculto;
}

.barra lateral izquierda

{ ancho: 150px;
color de fondo: azul; flotador
izquierdo;
}

.contenido
{ ancho: 300px;
color de fondo: amarillo; flotador
izquierdo;
}

.barra lateral derecha

{ ancho: 150px;
color de fondo: verde; flotar
derecho;
}

GoalKicker.com – Notas CSS para profesionales 87

Machine Translated by Google

Sección 14.8: Diseño perezoso/codicioso de dos columnas

Este diseño utiliza una columna flotante para crear un diseño de dos columnas sin anchos definidos. En este ejemplo, la barra lateral izquierda es
"perezosa", ya que solo ocupa el espacio que necesita. Otra forma de decir esto es que la barra lateral izquierda está "retractilada". La columna de
contenido de la derecha es "voraz", ya que ocupa todo el espacio restante.

HTML:

<div class="barra lateral">

<h1>Barra lateral</
h1> <img src="http://lorepixel.com/150/200/" /> </div>

<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed
nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue sempre porta.
mauri masa. Vestíbulo lacinia arcu eget nulla. </p> <p>Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.

Curabitur sodales ligula en libero. Sed dignissim lacinia nunc. Tortor de Curabitur. Plumilla pellentesca. Aenean quam. In
scelerisque sem at dolor. Mecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus,
iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Maurisipsum. Nulla metus metus, ullamcorper
vel, tincidunt sed, euismod in, nibh. </p> </div>

CSS:

.sidebar { /*
`display:table;` reduce la columna */ display:table; flotador
izquierdo; color de fondo: azul;

.content { /*
`overflow:hidden;` evita que `.content` fluya bajo `.sidebar` */ overflow:hidden; color de fondo:
amarillo;

Violín

GoalKicker.com – Notas CSS para profesionales 88

Machine Translated by Google

Capítulo 15: Tipografía

Parámetro font- Detalles

style font-variant cursiva u oblicua

normal o small-caps

peso de fuente normal, negrita o numérico de 100 a 900.

tamaño de fuente El tamaño de fuente dado en %, px, em o cualquier otra medida CSS válida

altura de línea La altura de la línea dada en %, px, em o cualquier otra medida CSS válida

familia de fuentes Esto es para definir el nombre de la familia.

color Cualquier representación de color CSS válida, como rojo, #00FF00, hsl(240, 100 %, 50 %) , etc.

Si se debe usar o no una cara confinada o expandida de la fuente. Los valores válidos son normal, ultracondensado,
estiramiento de fuente extracondensado, condensado , semicondensado , semiexpandido, expandido, extraexpandido o ultraexpandido

inicio de alineación de texto , final, izquierda, derecha, centro, justificar, emparejar padre

decoración de texto ninguno, subrayado, sobrerrayado, línea directa, inicial, herencia;

Sección 15.1: La fuente abreviada

Con la sintaxis:

elemento {
fuente: [estilo de fuente] [variante de fuente] [peso de fuente] [tamaño de fuente/alto de línea] [familia de fuentes];
}

Puede tener todos sus estilos relacionados con fuentes en una sola declaración con la abreviatura de fuente . Simplemente use la propiedad de fuente ,

y ponga sus valores en el orden correcto.

Por ejemplo, para hacer que todos los elementos p estén en negrita con un tamaño de fuente de 20 px y usando Arial como la familia de fuentes, normalmente
lo codificaría de la siguiente manera:

pag {
fuente-peso: negrita;
tamaño de fuente: 20px;
familia tipográfica: Arial, sans-serif;
}

Sin embargo, con la abreviatura de fuente se puede condensar de la siguiente manera:

pag {
fuente: negrita 20px Arial, sans-serif;
}

Nota: dado que font-style, font-variant, font-weight y line-height son opcionales, los tres son

omitido en este ejemplo. Es importante tener en cuenta que el uso del atajo restablece los otros atributos no proporcionados.

Otro punto importante es que los dos atributos necesarios para que funcione el atajo de fuente son tamaño de fuente y familia de fuentes. Si no se incluyen ambos,

se ignora el acceso directo.

Valor inicial para cada una de las propiedades:

estilo de fuente: normal;

variante de fuente: normal;
peso de fuente: normal;

GoalKicker.com – Notas CSS para profesionales 89

Machine Translated by Google

estiramiento de fuente: normal;

tamaño de fuente: mediano;
altura de línea: normal;
familia de fuentes : depende del agente de usuario

Sección 15.2: Cotizaciones

La propiedad de comillas se utiliza para personalizar las comillas de apertura y cierre de la etiqueta <q> .

q{
comillas: "«" "»";
}

Sección 15.3: Tamaño de fuente

HTML:

<div id="element-one">Hola , soy un texto.</div> <div id="element-

two">Hola , soy un texto más pequeño.</div>

CSS:

#elemento-uno
{ tamaño de fuente: 30px;
}

#elemento-dos
{ tamaño de fuente: 10px;
}

El texto dentro de #element-one tendrá un tamaño de 30 px , mientras que el texto en #element-two tendrá un tamaño de 10 px .

Sección 15.4: Dirección del texto

div
{ dirección: ltr; /* Predeterminado, lectura de texto de izquierda a derecha */

} .ex
{ dirección: rtl; /* texto leído de derecha a izquierda */

} .horizontal-tb { modo-
escritura: horizontal-tb; /* Por defecto, el texto se lee de izquierda a derecha y de arriba a abajo. */

} .vertical-rtl { modo de
escritura: vertical-rl; /* texto leído de derecha a izquierda y de arriba a abajo */

} .vertical-ltr { modo de
escritura: vertical-rl; /* texto leído de izquierda a derecha y de arriba abajo */
}

La propiedad de dirección se utiliza para cambiar la dirección del texto horizontal de un elemento.

Sintaxis: dirección: ltr | rtl | inicial | heredar;

La propiedad de modo de escritura cambia la alineación del texto para que pueda leerse de arriba a abajo o de izquierda a derecha, según el idioma.

GoalKicker.com – Notas CSS para profesionales 90

Machine Translated by Google

Sintaxis: dirección: horizontal-tb | vertical-rl | vertical-lr;

Sección 15.5: Pilas de fuentes

familia de fuentes: 'Segoe UI', Tahoma, sans-serif;

El navegador intentará aplicar la fuente "Segoe UI" a los caracteres dentro de los elementos a los que apunta la propiedad anterior. Si esta
fuente no está disponible, o la fuente no contiene un glifo para el carácter requerido, el navegador recurrirá a Tahoma y, si es necesario, a
cualquier fuente sans-serif en la computadora del usuario. Tenga en cuenta que cualquier nombre de fuente con más de una palabra, como
"Segoe UI", debe tener comillas simples o dobles.

familia tipográfica: Consolas, 'Courier New', monoespacio;

El navegador intentará aplicar el tipo de letra "Consolas" a los caracteres dentro de los elementos a los que apunta la propiedad anterior. Si
esta fuente no está disponible, o la fuente no contiene un glifo para el carácter requerido, el navegador volverá a "Courier New" y, si es
necesario, a cualquier fuente monoespaciada en la computadora del usuario.

Sección 15.6: Desbordamiento de texto

La propiedad de desbordamiento de texto se ocupa de cómo se debe señalar a los usuarios el contenido desbordado. En este ejemplo, los
puntos suspensivos representan texto recortado.

.text
{ desbordamiento: oculto;
desbordamiento de texto: puntos suspensivos;
}

Desafortunadamente, text-overflow: ellipsis solo funciona en una sola línea de texto. No hay forma de admitir puntos suspensivos en la última
línea en CSS estándar, pero se puede lograr con la implementación de flexboxes solo para webkit no estándar.

.giveMeEllipsis {
desbordamiento: oculto;
desbordamiento de texto: puntos
suspensivos; pantalla: -webkit-caja;
-webkit-caja-orientar: vertical; -webkit-línea-
abrazadera: N; /* numero de lineas a mostrar */ line-height: X; /* reserva */
max-height: X*N; /* retroceder */

Ejemplo (abrir en Chrome o Safari):

http://jsfiddle.net/csYjC/1131/

Recursos:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Sección 15.7: Sombra de texto

Para agregar sombras al texto, use la propiedad text-shadow . La sintaxis es la siguiente:

sombra de texto: color de desenfoque de desplazamiento vertical de desplazamiento horizontal;

Sombra sin radio de desenfoque

GoalKicker.com – Notas CSS para profesionales 91

Machine Translated by Google

h1
{ texto-sombra: 2px 2px #0000FF;
}

Esto crea un efecto de sombra azul alrededor de un encabezado.

Sombra con radio de desenfoque

Para agregar un efecto de desenfoque, agregue un argumento de radio de desenfoque de opción

h1
{ texto-sombra: 2px 2px 10px #0000FF;
}

Múltiples Sombras

Para dar múltiples sombras a un elemento, sepárelas con comas

h1
{ texto-sombra: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Sección 15.8: Transformación de texto

La propiedad de transformación de texto le permite cambiar las mayúsculas del texto. Los valores válidos son: mayúscula, mayúscula,
minúscula, inicial, heredar y ninguno

CSS

.ejemplo1
{ transformación de texto: mayúsculas;

} .example2
{ texto-transformar: capitalizar;

} .ejemplo3
{ transformación de texto: minúsculas;
}

HTML

<p class="example1"> todas

las letras en mayúsculas <!-- "TODAS LAS LETRAS EN MAYÚSCULAS" --> </p> <p
class="example2"> todas las letras en mayúsculas <!-- "Todas las letras en mayúsculas (Casual
de oración)" --> </p> <p class="example3"> todas las letras en minúsculas <!-- "todas las letras
en minúsculas" -->

</p>

Sección 15.9: Espaciado entre letras

h2 { /
* agrega un espacio de 1px horizontalmente entre cada letra;
también conocido como seguimiento
*/ espacio entre letras: 1px;

GoalKicker.com – Notas CSS para profesionales 92

Machine Translated by Google

La propiedad letter-spacing se utiliza para especificar el espacio entre los caracteres de un texto.

! el espaciado entre letras también admite valores negativos:

p
{ espacio entre letras : -1px;
}

Recursos: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Sección 15.10: Sangría de texto

pag {
sangría de texto: 50px;
}

La propiedad text-indent especifica cuánto espacio horizontal debe moverse el texto antes del comienzo de la primera línea del contenido de texto de
un elemento.

Recursos:

¿Indentar solo la primera línea de texto en un párrafo? https://

www.w3.org/TR/CSS21/text.html#propdef-text-indent https://developer.mozilla.org/
en-US/docs/Web/CSS/text-indent

Sección 15.11: Decoración de texto

La propiedad text-decoration se utiliza para establecer o eliminar decoraciones del texto.

h1 { texto-decoración: ninguno; } h2 { texto-

decoración: overline; } h3 { decoración de texto:
paso de línea; } h4 { texto-decoración: subrayado; }

text-decoration se puede usar en combinación con text-decoration-style y text-decoration-color como una propiedad abreviada:

.title { texto-decoración: subrayado azul punteado; }

Esta es una versión abreviada de

.title { texto-
decoración-estilo: punteado; texto-
decoración-línea: subrayado; texto-decoración-
color: azul;
}

Cabe señalar que las siguientes propiedades solo son compatibles con Firefox

texto-decoración-color
texto-decoración-línea

texto-decoración-estilo
texto-decoración-saltar

GoalKicker.com – Notas CSS para profesionales 93

Machine Translated by Google

Sección 15.12: Espaciado entre palabras

La propiedad word-spacing especifica el comportamiento de espaciado entre etiquetas y palabras.

Valores posibles

una longitud positiva o negativa (usando em px vh cm , etc.) o porcentaje (usando %) la

palabra clave normal usa el espaciado entre palabras predeterminado de la fuente la palabra
clave heritage toma el valor del elemento principal

CSS

.normal { espacio entre palabras:

.angosto normal; } { espacio entre palabras :
-3px; } .extensivo { espacio entre palabras : 10px; }

HTML

<p>
<span class="normal">Este es un ejemplo que muestra el efecto del "espaciado entre palabras".<br> <span
class="narrow">Este es un ejemplo que muestra el efecto de "espacio entre palabras".<br> <span class="extensive">Este
es un ejemplo que muestra el efecto del "espacio entre palabras".<br> </p>

Demostración en línea

Inténtalo tú mismo

Otras lecturas:

espacio entre palabras – MDN

espacio entre palabras – w3.org

Sección 15.13: Variante de fuente

Atributos:

normal

Atributo predeterminado de las fuentes.

letras minúsculas

Establece cada letra en mayúsculas, pero hace que las letras minúsculas (del texto original) sean más pequeñas que las letras que
originalmente estaban en mayúsculas.

CSS:

.smallcaps{ variante de fuente: versalitas;

}

HTML:

<p class="smallcaps">
Documentación sobre fuentes CSS

GoalKicker.com – Notas CSS para profesionales 94

Machine Translated by Google
<br>
Y EJEMPLO
</p>

Producción:

Nota: La propiedad font-variant es una forma abreviada de las propiedades: font-variant-caps, font-variant-numeric, font variant-alternates, font-variant-

ligatures y font-variant-east-asian.

GoalKicker.com – Notas CSS para profesionales 95

Machine Translated by Google

Capítulo 16: Diseño de caja flexible (Flexbox)

El módulo Caja flexible, o simplemente 'flexbox' para abreviar, es un modelo de caja diseñado para interfaces de usuario y permite a los usuarios alinear y
distribuir el espacio entre los elementos en un contenedor de manera que los elementos se comporten de manera predecible cuando el diseño de la página
deba adaptarse a diferentes elementos desconocidos. tamaños de pantalla Un contenedor flexible expande los elementos para llenar el espacio disponible
y los reduce para evitar el desbordamiento.

Sección 16.1: Centrado dinámico vertical y horizontal (alinear

elementos, justificar contenido)
Ejemplo simple (centrar un solo elemento)
HTML

<div class="alineador"> <div

class="elemento-alineador">…</div>
</div>

CSS

.aligner
{ pantalla: flex;
alinear elementos: centro;
justificar-contenido: centro;
}

.elemento alineador
{ ancho máximo: 50%; /*para demostración. Utilice el ancho real en su lugar.*/
}

Aquí hay una demostración.

Razonamiento
Propiedad Valor Descripción
Centra los elementos a lo largo del eje que no sea el especificado por dirección flexible, es decir, centrado vertical
alinear elementos centro para un flexbox horizontal y centrado horizontal para un flexbox vertical.

Esto centra los elementos a lo largo del eje especificado por la dirección de flexión. Es decir, para
un centro de contenido justificado horizontal
vertical (dirección
(dirección flexible:
flexible: fila) flexbox,
columna) flexbox,esto
estose
secentra
centrahorizontalmente,
verticalmente) y para un flexbox

Ejemplos de propiedades individuales

Todos los estilos a continuación se aplican a este diseño simple:

<div id="contenedor">
<div></div>
<div></div>
<div></div> </
div>

donde #container es la caja flexible.

Ejemplo: justificar contenido: centrar en un flexbox horizontal

CSS:

GoalKicker.com – Notas CSS para profesionales 96

Machine Translated by Google

div#contenedor
{ pantalla: flex;
dirección de flexión: fila;
justificar-contenido: centro;
}

Salir:

Aquí hay una demostración.

Ejemplo: justificar contenido: centrar en un flexbox vertical

CSS:

div#contenedor
{ pantalla: flex;
dirección de flexión: columna;
justificar-contenido: centro;
}

Salir:

GoalKicker.com – Notas CSS para profesionales 97

Machine Translated by Google

Aquí hay una demostración.

Ejemplo: alinear contenido: centrar en un flexbox horizontal

CSS:

div#contenedor
{ pantalla: flex;
dirección de flexión:
fila; alinear elementos: centro;
}

Salir:

GoalKicker.com – Notas CSS para profesionales 98

Machine Translated by Google

Aquí hay una demostración.

Ejemplo: alinear contenido: centrar en un flexbox vertical

CSS:

div#contenedor
{ pantalla: flex;
dirección de flexión:
columna; alinear elementos: centro;
}

Salir:

GoalKicker.com – Notas CSS para profesionales 99

Machine Translated by Google

Aquí hay una demostración.

Ejemplo: Combinación para centrar ambos en flexbox horizontal

div#contenedor
{ pantalla: flex;
dirección de flexión:
fila; justificar-contenido:
centro; alinear elementos: centro;
}

Salir:

GoalKicker.com – Notas CSS para profesionales 100

Machine Translated by Google

Aquí hay una demostración.

Ejemplo: Combinación para centrar ambos en flexbox vertical

div#contenedor
{ pantalla: flex;
dirección de flexión:
columna; justificar-contenido:
centro; alinear elementos: centro;
}

Salir:

GoalKicker.com – Notas CSS para profesionales 101

Machine Translated by Google

Aquí hay una demostración.

Sección 16.2: Pie de página adhesivo de altura variable

Este código crea un pie de página adhesivo. Cuando el contenido no llega al final de la ventana gráfica, el pie de página se pega a la parte inferior
de la ventana gráfica. Cuando el contenido se extiende más allá de la parte inferior de la ventana gráfica, el pie de página también se empuja fuera de
la ventana gráfica. Ver resultado

HTML:

<div class="encabezado">
<h2>Encabezado</h2> </
div>

<div clase="contenido">
<h1>Contenido</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero nec odio. Praesent libero.
Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue
sempre porta. mauri masa. Vestíbulo lacinia arcu eget nulla. Clase aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Curabitur sodales ligula en libero. </p> </div>

<div clase="pie de página">

GoalKicker.com – Notas CSS para profesionales 102

Machine Translated by Google

<h4>Pie de página</
h4> </div>

CSS:

html, cuerpo
{ altura: 100%;
}

cuerpo
{ pantalla: flexionar;
dirección de flexión: columna;
}

.content { /*
Incluye `0 auto` para una mejor compatibilidad con el navegador. */ flexible: 1
0 automático;
}

.header, .footer { color de

fondo: gris; color: blanco;
flexión: ninguno;

Sección 16.3: Ajuste óptimo de los elementos a su contenedor

Una de las mejores características de flexbox es permitir que los contenedores se ajusten de manera óptima a su elemento principal.

Demo en vivo.

HTML:

<div class="contenedor flexible">

<div class="elemento flexible">1</div> <div
class="elemento flexible">2</div> <div
class="elemento flexible">3</div> <div
class=" elemento flexible">4</div> <div
class="elemento flexible">5</div>
</div>

CSS:

.flex-container { color de
fondo: #000; altura: 100%;
pantalla:flex; dirección de
flexión: fila; envoltura flexible:
envoltura; justificar-contenido:
inicio flexible; alinear-contenido:
estirar; alinear elementos: estirar;

.flex-item { color
de fondo: #ccf; margen: 0,1 em;
crecimiento flexible: 1;
contracción flexible: 0;

GoalKicker.com – Notas CSS para profesionales 103

Machine Translated by Google

base flexible: 200px; /* o % podría usarse para garantizar un diseño específico */

}

Salir:

Las columnas se adaptan a medida que se cambia el tamaño de la pantalla.

Sección 16.4: Diseño del Santo Grial usando Flexbox

Diseño del Santo Grial es un diseño con un encabezado y pie de página de altura fija, y un centro con 3 columnas. Las 3 columnas incluyen
una navegación lateral de ancho fijo, un centro fluido y una columna para otro contenido como anuncios (el centro fluido aparece primero en el
marcado). CSS Flexbox se puede usar para lograr esto con un marcado muy simple:

Marcado HTML:

<div class="container"> <header

class="header">Encabezado</header> <div
class="content-body"> <main class="content">Contenido</
main> <nav class="sidenav ">Nav</nav> <aside
class="ads">Anuncios</aside> </div> <footer
class="footer">Pie de página</footer>

</div>

CSS:

cuerpo
{ margen: 0;
relleno: 0;
}

.contenedor
{ pantalla: flex;
dirección de flexión: columna;
altura: 100vh;
}

.encabezado
{ flex: 0 0 50px;

GoalKicker.com – Notas CSS para profesionales 104

Machine Translated by Google

.content-cuerpo { flex:
1 1 auto;

pantalla: flexible;
dirección de flexión: fila;
}

.content-body .content { flex: 1 1

auto; desbordamiento:
automático;

.content-body .sidenav { orden: -1;

flexión: 0 0 100px;
desbordamiento: automático;

.content-body .ads { flex: 0 0

100px; desbordamiento:
automático;
}

.pie de
página { flex: 0 0 50px;
}

Manifestación

Sección 16.5: Botones perfectamente alineados dentro de

tarjetas con flexbox

Es un patrón regular en el diseño en estos días para alinear verticalmente las llamadas a la acción dentro de sus tarjetas contenedoras como esta:

Esto se puede lograr usando un truco especial con flexbox

HTML

GoalKicker.com – Notas CSS para profesionales 105

Machine Translated by Google

<div clase="cartas">
<div clase="tarjeta">
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p><button>Acción</button></p>
</div>
<div clase="tarjeta">
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p>Lorem ipsum Magna proident ex anim dolor ullamco pariatur reprehenderit culpa esse enim
mollit labore dolore voluptate ullamco et ut sed qui minim.</p>
<p><button>Acción</button></p> </div> </div>

En primer lugar, usamos CSS para aplicar display: flex; al contenedor. Esto creará 2 columnas de igual altura con el contenido fluyendo naturalmente dentro de

ellas.

CSS

.tarjetas
{ pantalla: flex;

} .tarjeta
{ borde: 1px sólido #ccc; margen:
10px 10px; relleno: 0 20px;

} botón
{ altura: 40px;
fondo: #fff; relleno: 0
40px; borde: 1px sólido
#000;

} p:último hijo { text-

align: center;
}

El diseño cambiará y se volverá así:

GoalKicker.com – Notas CSS para profesionales 106

Machine Translated by Google

Para mover los botones al final del bloque, necesitamos aplicar display: flex; a la propia tarjeta con la dirección establecida en columna. Después
de eso, debemos seleccionar el último elemento dentro de la tarjeta y establecer el margen superior en automático. Esto empujará el último párrafo al
final de la tarjeta y logrará el resultado requerido.

CSS final:

.tarjetas
{ pantalla: flex;

} .tarjeta
{ borde: 1px sólido #ccc; margen:
10px 10px; relleno: 0 20px;
pantalla: flexible; dirección de
flexión: columna;

} botón
{ altura: 40px;
fondo: #fff; relleno: 0
40px; borde: 1px sólido
#000;

} p:último hijo { text-

align: center; margen
superior: automático;
}

Sección 16.6: Misma altura en contenedores anidados

Este código se asegura de que todos los contenedores anidados tengan siempre la misma altura. Esto se hace asegurándose de que todos los elementos
anidados tengan la misma altura que el div principal que los contiene. Ver ejemplo de trabajo: https://jsfiddle.net/3wwh7ewp/

Este efecto se logra debido a que la propiedad align-items está configurada para estirarse de forma predeterminada.

HTML

<div class="contenedor">
<div style="color-de-fondo: rojo">
Algunos <br />
datos <br />
para hacer<br />

GoalKicker.com – Notas CSS para profesionales 107

Machine Translated by Google

una altura <br /> </

div> <div style="background-
color: blue">
Menos <br />
líneas <br /> </
div> </div>

CSS

.contenedor {
pantalla: flexible;
alinear elementos: estirar; // valor por defecto
}

Nota: no funciona en versiones de IE menores a 10

GoalKicker.com – Notas CSS para profesionales 108

Machine Translated by Google

Capítulo 17: Cascada y especificidad

Sección 17.1: Cálculo de la especificidad del selector
Cada Selector de CSS individual tiene su propio valor de especificidad. Cada selector en una secuencia aumenta la secuencia
especificidad global. Los selectores caen en uno de tres grupos de especificidad diferentes: A, B y c. Cuando el selector múltiple
secuencias seleccionan un elemento determinado, el navegador utiliza los estilos aplicados por la secuencia con la mayor
especificidad

Grupo Compuesto por Ejemplos

Selectores de ID de ayuda #foo
selectores de clase .bar
B selectores de atributos [título], [colspan="2"]
pseudo-clases :flotar, :nth-child(2)

C
selectores de tipo div, li
pseudo-elementos ::antes, ::primera-letra

El grupo A es el más específico, seguido del grupo B y finalmente el grupo c.

El selector universal (*) y los combinadores (como > y ~) no tienen especificidad.

Ejemplo 1: Especificidad de varias secuencias selectoras

#foo #baz {} / * a=2, b=0, c=0 */

#foo.bar {} / * a=1, b=1, c=0 */

#foo {} / * a=1, b=0, c=0 */

.bar: pasar el cursor {} / * a=0, b=2, c=0 */

div.bar {} / * a=0, b=1, c=1 */

:flotar {} / * a=0, b=1, c=0 */

[título] {} / * a=0, b=1, c=0 */

.bar {} / * a=0, b=1, c=0 */

div ul + li {} / * a=0, b=0, c=3 */

p::después de {} / * a=0, b=0, c=2 */

*::antes de {} / * a=0, b=0, c=1 */

::antes {} / * a=0, b=0, c=1 */

división {} / * a=0, b=0, c=1 */

* {} / * a=0, b=0, c=0 */

Ejemplo 2: Cómo utiliza el navegador la especificidad

Imagine la siguiente implementación de CSS:

#foo {
color: azul;
}

GoalKicker.com – Notas CSS para profesionales 109

Machine Translated by Google

.bar
{ color: rojo;
fondo: negro;
}

Aquí tenemos un selector de ID que declara el color como azul y un selector de clase que declara el color como rojo y el fondo como negro.

Ambas declaraciones seleccionarán un elemento con un ID de #foo y una clase de .bar . Los selectores de ID tienen una especificidad de Grupo A y los
selectores de clase tienen una especificidad de Grupo B. Un selector de ID supera cualquier número de selectores de clase.
Debido a esto, color: azul; desde el selector #foo y el background:black; del selector .bar se aplicará al elemento. La mayor especificidad del
selector de ID hará que el navegador ignore la declaración de color del selector .bar .

Ahora imagine una implementación de CSS diferente:

.bar
{ color: rojo;
fondo: negro;
}

.baz
{ fondo: blanco;
}

Aquí tenemos dos selectores de clase; uno de los cuales declara el color como rojo y el fondo como negro, y el otro declara el fondo como
blanco.

Un elemento con las clases .bar y .baz se verá afectado por ambas declaraciones, sin embargo, el problema que tenemos ahora es que
tanto .bar como .baz tienen una especificidad de Grupo B idéntica . La naturaleza en cascada de CSS resuelve esto para nosotros: como .baz se define
después de .bar, nuestro elemento termina con el color rojo de .bar pero el fondo blanco de .baz.

Ejemplo 3: Cómo manipular la especificidad

El último fragmento del Ejemplo 2 anterior se puede manipular para garantizar que se use la declaración de color de nuestro selector de clase .bar en
lugar del selector de clase .baz .

.bar / * a=0, b=1, c=0 */ / *

{} .baz {} a=0, b=1, c=0 */

La forma más común de lograr esto sería averiguar qué otros selectores se pueden aplicar a la secuencia del selector .bar . Por ejemplo, si la clase .bar
solo se aplicó alguna vez a los elementos span , podríamos modificar el selector .bar a span.bar . Esto le daría una nueva especificidad del Grupo C , que
anularía la falta de ella del selector .baz :

span.bar / * a=0, b=1, c=1 */ / *

{} .baz {} a=0, b=1, c=0 */

Sin embargo, no siempre es posible encontrar otro selector común que se comparta entre cualquier elemento que use la clase .bar . Por eso, CSS nos
permite duplicar selectores para aumentar la especificidad. En lugar de solo .bar, podemos usar .bar.bar en su lugar (consulte La gramática de los
selectores, recomendación W3C). Esto todavía selecciona cualquier elemento con una clase de .bar, pero ahora tiene el doble de especificidad del Grupo
B:

.bar.bar / * a=0, b=2, c=0 */ / *

{} .baz {} a=0, b=1, c=0 */

GoalKicker.com – Notas CSS para profesionales 110

Machine Translated by Google

!important y declaraciones de estilo en línea

Se considera que el indicador !important en una declaración de estilo y los estilos declarados por el atributo de estilo HTML tienen una mayor
especificidad que cualquier selector. Si existen, la declaración de estilo a la que afectan prevalecerá sobre otras declaraciones independientemente de
su especificidad. Es decir, a menos que tenga más de una declaración que contenga un indicador importante para la misma propiedad que se aplica al
mismo elemento. Entonces, las reglas de especificidad normales se aplicarán a esas propiedades en referencia entre sí.

Debido a que anulan por completo la especificidad, el uso de !important está mal visto en la mayoría de los casos de uso. Uno
debe usarlo lo menos posible. Para mantener el código CSS eficiente y mantenible a largo plazo, casi siempre es mejor aumentar
la especificidad del selector circundante que usar !important.

Una de esas raras excepciones en las que !important no está mal visto, es cuando se implementan clases auxiliares genéricas como .hidden
o .background-yellow class que se supone que siempre anulan una o más propiedades dondequiera que se encuentren. E incluso entonces, necesitas
saber lo que estás haciendo. Lo último que desea, al escribir CSS mantenible, es tener indicadores importantes en todo su CSS.

una nota final

Un concepto erróneo común sobre la especificidad de CSS es que los valores de los grupos A, B y c deben combinarse entre sí (a=1, b=5, c=1 =>
151). Este no es el caso. Si este fuera el caso, tener 20 de un selector del Grupo B o c sería suficiente para anular un solo selector del Grupo A o B
respectivamente. Los tres grupos deben considerarse como niveles individuales de especificidad. La especificidad no puede ser representada por un
solo valor.

Al crear su hoja de estilo CSS, debe mantener la menor especificidad posible. Si necesita hacer que la especificidad sea un poco más alta para
sobrescribir otro método, hágalo más alto pero lo más bajo posible para que sea más alto. No debería necesitar tener un selector como este:

cuerpo.página encabezado.contenedor nav div#main-nav li a {}

Esto hace que los cambios futuros sean más difíciles y contamina esa página css.

Puedes calcular la especificidad de tu selector aquí

Sección 17.2: La declaración importante

La declaración !important se utiliza para anular la especificidad habitual en una hoja de estilo al otorgar una mayor prioridad a
una regla. Su uso es: propiedad : valor !importante;

#mydiv
{ font-weight: bold !important; / * Esta propiedad no será anulada por la
siguiente regla */
}

#outerdiv #mydiv { font-

weight: normal; / * #mydiv font-weight no se establecerá en normal
incluso si tiene una especificidad más alta debido a la
declaración !important anterior */
}

Se recomienda encarecidamente evitar el uso de !important (a menos que sea absolutamente necesario), ya que alterará el flujo natural de las reglas
css, lo que puede generar incertidumbre en su hoja de estilo. También es importante tener en cuenta que cuando se aplican varias declaraciones !
important a la misma regla sobre un elemento determinado, la que tenga la mayor especificidad será la que se aplique.

GoalKicker.com – Notas CSS para profesionales 111

Machine Translated by Google

Estos son algunos ejemplos en los que se puede justificar el uso de la declaración !important :

Si sus reglas no deben ser anuladas por ningún estilo en línea del elemento que esté escrito dentro del atributo de estilo del elemento html.

Para darle al usuario más control sobre la accesibilidad web, como aumentar o disminuir el tamaño de la fuente, anulando el estilo del autor usando !

importante.

Para probar y depurar usando el elemento de inspección.

Ver también:

W3C - 6 Asignación de valores de propiedad, cascada y herencia -- 6.4.2 Reglas importantes

Sección 17.3: Cascada

La cascada y la especificidad se usan juntas para determinar el valor final de una propiedad de estilo CSS. También definen los mecanismos para resolver

conflictos en los conjuntos de reglas de CSS.

Orden de carga de CSS

Los estilos se leen de las siguientes fuentes, en este orden:

1. Hoja de estilo del agente de usuario (los estilos proporcionados por el proveedor del navegador)

2. Hoja de estilo del usuario (el estilo adicional que un usuario ha establecido en su navegador)

3. Hoja de estilo del autor (Autor aquí significa el creador de la página web/sitio web)

Tal vez uno o más archivos .css En el

elemento <style> del documento HTML 4. Estilos en línea (En el

atributo de estilo en un elemento HTML)

El navegador buscará los estilos correspondientes al renderizar un elemento.

¿Cómo se resuelven los conflictos?

Cuando solo un conjunto de reglas CSS intenta establecer un estilo para un elemento, entonces no hay conflicto y se usa ese conjunto de reglas.

Cuando se encuentran varios conjuntos de reglas con configuraciones en conflicto, primero se usan las reglas de especificidad y luego las reglas en cascada

para determinar qué estilo usar.

Ejemplo 1 - Reglas de especificidad

.mi estilo { color: azul; } /* especificidad: 0, 0, 1, 0 */ div { color: rojo; } /* especificidad:

0, 0, 0, 1 */

<div class="miestilo">Hola Mundo</div>

¿De qué color será el texto? (pase el cursor para ver la respuesta)

azul

Primero se aplican las reglas de especificidad, y el que tiene la especificidad más alta "gana".

Ejemplo 2: reglas en cascada con selectores idénticos

archivo css externo

.clase {

GoalKicker.com – Notas CSS para profesionales 112

Machine Translated by Google

fondo: #FFF;
}

css interno (en archivo HTML)

<estilo> .clase {fondo: #000;

} <estilo>

En este caso, donde tiene selectores idénticos, la cascada se activa y determina que el último cargado "gana".

Ejemplo 3: reglas en cascada después de las reglas de especificidad

cuerpo > .mystyle { color de fondo: azul; } /* especificidad: 0, 0, 1, 1 */ .otherstyle > div { background-color:
red; } /* especificidad: 0, 0, 1, 1 */

<body class="otroestilo"> <div

class="miestilo">Hola Mundo</div> </body>

¿De qué color será el fondo?

rojo

Después de aplicar las reglas de especificidad, aún existe un conflicto entre el azul y el rojo, por lo que las reglas en cascada se aplican sobre las
reglas de especificidad. Cascading analiza el orden de carga de las reglas, ya sea dentro del mismo archivo .css o en la colección de fuentes de
estilo. El último cargado anula los anteriores. En este caso, la regla .otherstyle > div "gana".

una nota final

La especificidad del selector siempre tiene prioridad.

El orden de las hojas de estilo rompe vínculos.

Los estilos en línea triunfan sobre todo.

Sección 17.4: Ejemplo de especificidad más compleja

div
{ tamaño de fuente:
7px; borde: 3px punteado rosa;
color de fondo: amarillo; color:
morado;
}

cuerpo.miestilo > div.miotroestilo { tamaño de

fuente: 11px; color de fondo: verde;

#elmnt1
{ tamaño de fuente:
24px; borde-color: rojo;
}

GoalKicker.com – Notas CSS para profesionales 113

Machine Translated by Google

.miestilo .miotroestilo { tamaño de

fuente: 16px; color de fondo:
negro; color: rojo;

<body class="miestilo">
<div id="elmnt1" class="myotherstyle"> ¡Hola, mundo! </
div> </cuerpo>

¿Qué bordes, colores y tamaños de fuente tendrá el texto?

tamaño de fuente:

font-size: 24;, dado que el conjunto de reglas #elmnt1 tiene la mayor especificidad para el <div> en cuestión, aquí se
establecen todas las propiedades.

borde:

borde: 3px con puntos rojos;. El color del borde rojo se toma del conjunto de reglas #elmnt1 , ya que tiene la especificidad más alta.
Las otras propiedades del borde, grosor del borde y estilo del borde son de la regla div
establecer.

color de fondo:

color de fondo: verde;. El color de fondo se establece en los conjuntos de reglas div, body.mystyle > div.myotherstyle
y .mystyle .myotherstyle . Las especificidades son (0, 0, 1) frente a (0, 2, 2) frente a (0, 2, 0), por lo que el del medio "gana".

color:

color: rojo;. El color se establece en los conjuntos de reglas div y .mystyle .myotherstyle . Este último tiene la mayor especificidad de
(0, 2, 0) y "gana".

GoalKicker.com – Notas CSS para profesionales 114

Machine Translated by Google

Capítulo 18: Colores

Sección 18.1: color actual
currentColor devuelve el valor de color calculado del elemento actual.

Usar en el mismo elemento

Aquí currentColor se evalúa como rojo ya que la propiedad de color está establecida en rojo:

div
{ color: rojo;
borde: 5px color actual sólido; caja-
sombra: 0 0 5px color actual;
}

En este caso, especificar currentColor para el borde probablemente sea redundante porque omitirlo debería producir resultados
idénticos. Solo use currentColor dentro de la propiedad de borde dentro del mismo elemento si se sobrescribiría debido a un selector
más específico.

Dado que es el color calculado, el borde será verde en el siguiente ejemplo debido a que la segunda regla anula la primera:

div
{ color: azul;
borde: 3px solid currentColor; color:
verde;
}

Heredado del elemento principal

El color del padre se hereda, aquí currentColor se evalúa como 'azul', lo que hace que el color del borde del elemento secundario sea azul.

.parent-class
{ color: azul;
}

.clase-padre .clase-hijo {
color del borde: color actual;
}

currentColor también puede ser utilizado por otras reglas que normalmente no heredarían de la propiedad color, como background-
color. El siguiente ejemplo muestra a los niños usando el conjunto de colores en el padre como fondo:

.parent-class
{ color: azul;
}

.clase-padre .clase-hijo {
color de fondo: color actual;
}

Posible resultado:

GoalKicker.com – Notas CSS para profesionales 115

Machine Translated by Google

Sección 18.2: Palabras clave de color

La mayoría de los navegadores admiten el uso de palabras clave de color para especificar un color. Por ejemplo, para establecer el color de un elemento en azul,

use la palabra clave azul :

.alguna-clase {
color: azul;
}

Las palabras clave de CSS no distinguen entre mayúsculas y minúsculas: azul, azul y AZUL darán como resultado #0000FF.

Palabras clave de color

Nombre del color Valor hexadecimal Valores RGB Color

Alice azul #F0F8FF rgb(240,248,255)

Blanco antiguo #FAEBD7 rgb(250,235,215)

Agua #00FFFFrgb(0,255,255)

Aguamarina #7FFFD4rgb(127,255,212)

Azur #F0FFFF rgb(240,255,255)

Beige #F5F5DC rgb(245,245,220)

Sopa de mariscos #FFE4C4 rgb(255.228.196)

Negro #000000 RGB(0,0,0)

BlanqueadoAlmendra #FFEBCD rgb(255,235,205)

Azul #0000FF RGB(0,0,255)

Violeta Azul #8A2BE2rgb(138,43,226)

Marrón #A52A2A rgb(165,42,42)

GoalKicker.com – Notas CSS para profesionales 116

Machine Translated by Google

madera corpulenta #DEB887 rgb(222,184,135)

cadeteazul #5F9EA0 RGB(95,158,160)

Monasterio #7FFF00 rgb(127,255,0)

Chocolate #D2691E rgb(210,105,30)

Coral #FF7F50 rgb(255,127,80)

AcianoAzul #6495ED rgb(100,149,237)

Seda de maiz #FFF8DC rgb(255,248,220)

carmesí #DC143C rgb(220,20,60)

cian #00FFFFrgb(0,255,255)

Azul oscuro #00008B rgb(0,0,139)

cian oscuro #008B8B rgb(0,139,139)

DarkGoldenRod #B8860B rgb(184,134,11)

Gris oscuro #A9A9A9 rgb(169,169,169)

Gris oscuro #A9A9A9 rgb(169,169,169)

Verde oscuro #006400 rgb(0,100,0)

caqui oscuro #BDB76B rgb(189,183,107)

Magenta oscuro #8B008B RGB(139,0,139)

OscuroOlivaVerde #556B2F rgb(85,107,47)

Naranja oscuro #FF8C00 RGB(255,140,0)

Orquídea Oscura #9932CC rgb(153,50,204)

Rojo oscuro #8B0000 RGB(139,0,0)

salmón oscuro #E9967A rgb(233,150,122)

oscuromarverde #8FBC8F rgb(143,188,143)

DarkSlateBlue #483D8B rgb(72,61,139)

oscurogris pizarra #2F4F4F rgb(47,79,79)

DarkSlateGrey #2F4F4F rgb(47,79,79)

turquesa oscuro #00CED1 rgb(0,206,209)

Violeta oscuro #9400D3 rgb(148,0,211)

GoalKicker.com – Notas CSS para profesionales 117

Machine Translated by Google

Rosa profundo #FF1493 rgb(255,20,147)

azul cieloprofundo #00BFFFrgb(0,191,255)

DimGray #696969 rgb(105,105,105)

Gris tenue #696969 rgb(105,105,105)

DodgerBlue #1E90FF rgb(30,144,255)

Ladrillo refractario #B22222 rgb(178,34,34)

FloralBlanco #FFFAF0 rgb(255,250,240)

Bosque verde #228B22 rgb(34,139,34)

Fucsia #FF00FF RGB(255,0,255)

Gainsboro #DCDCDC rgb(220,220,220)

FantasmaBlanco #F8F8FF rgb(248,248,255)

Oro #FFD700 rgb(255,215,0)

vara de oro #DAA520 rgb(218,165,32)

Gris #808080 rgb(128,128,128)

Gris #808080 rgb(128,128,128)

Verde #008000 RGB(0,128,0)

Verde amarillo #ADFF2F rgb(173,255,47)

Gotas de miel #F0FFF0 rgb(240,255,240)

Rosa caliente #FF69B4 RGB (255.105.180)

IndioRojo #CD5C5Crgb(205,92,92)

Índigo #4B0082 rgb(75,0,130)

Marfil #FFFFF0 rgb(255,255,240)

Caqui #F0E68C rgb(240,230,140)

Lavanda #E6E6FA rgb(230,230,250)

lavandarubor #FFF0F5 rgb(255,240,245)

CéspedVerde #7CFC00rgb(124,252,0)

limóngasa #FFFACDrgb(255,250,205)

Azul claro #ADD8E6 rgb(173,216,230)

GoalKicker.com – Notas CSS para profesionales 118

Machine Translated by Google

coral claro #F08080 rgb(240,128,128)

Cian claro #E0FFFF rgb(224,255,255)

LightGoldenRodYellow #FAFAD2 rgb(250,250,210)

Gris claro #D3D3D3 rgb(211,211,211)

gris claro #D3D3D3 rgb(211,211,211)

Verde claro #90EE90 rgb(144,238,144)

Rosa claro #FFB6C1 rgb(255.182.193)

Salmón claro #FFA07A rgb(255.160.122)

luzmarverde #20B2AA rgb(32,178,170)

LuzCieloAzul #87CEFA rgb(135,206,250)

Gris Pizarra Claro #778899 rgb(119,136,153)

gris pizarra claro #778899 rgb(119,136,153)

LightSteelAzul #B0C4DE rgb(176.196.222)

Amarillo claro #FFFFE0 rgb(255,255,224)

Lima #00FF00 RGB(0,255,0)

Verde lima #32CD32 rgb(50,205,50)

Lino #FAF0E6 rgb(250,240,230)

Magenta #FF00FF RGB(255,0,255)

Granate #800000rgb(128,0,0)

MedioAquaMarine #66CDAA rgb(102,205,170)

Azul medio #0000CD rgb(0,0,205)

MedianaOrquídea #BA55D3rgb(186,85,211)

Púrpura Medio #9370DB rgb(147,112,219)

MedioMarVerde #3CB371 rgb(60,179,113)

MedioPizarraAzul #7B68EE rgb(123,104,238)

MedioPrimaveraVerde #00FA9A rgb(0,250,154)

Turquesa medio #48D1CC rgb (72,209,204)

MedioVioletaRojo #C71585 rgb(199,21,133)

GoalKicker.com – Notas CSS para profesionales 119

Machine Translated by Google

azul medianoche #191970 rgb(25,25,112)

mentacrema #F5FFFArgb(245,255,250)

MistyRose #FFE4E1 RGB(255.228.225)

Mocasín #FFE4B5 rgb(255.228.181)

NavajoBlanco #FFDEAD rgb(255,222,173)

Armada #000080 rgb(0,0,128)

AntiguoEncaje #FDF5E6 rgb(253,245,230)

Aceituna #808000rgb(128,128,0)

Verde oliva #6B8E23 rgb(107,142,35)

Naranja #FFA500 rgb(255,165,0)

Rojo naranja #FF4500 rgb(255,69,0)

Orquídea #DA70D6 rgb(218,112,214)

PaleGoldenRod #EEE8AA rgb(238,232,170)

Verde pálido #98FB98 rgb(152,251,152)

Turquesa pálido #AFEEEErgb(175,238,238)

PálidoVioletaRojo #DB7093 rgb(219,112,147)

PapayaLátigo #FFEFD5 rgb(255,239,213)

PeachPuff #FFDAB9 rgb(255,218,185)

Perú #CD853F rgb(205,133,63)

Rosado #FFC0CB rgb(255.192.203)

Ciruela #DDA0DDrgb(221,160,221)

Azul pálido #B0E0E6 RGB(176,224,230)

Violeta #800080 rgb(128,0,128)

RebeccaPúrpura #663399 rgb(102,51,153)

Rojo #FF0000 RGB(255,0,0)

RosyBrown #BC8F8F rgb(188.143.143)

Azul real #4169E1 rgb(65,105,225)

SillínMarrón #8B4513 rgb(139,69,19)

GoalKicker.com – Notas CSS para profesionales 120

Machine Translated by Google

Salmón #FA8072 rgb(250.128.114)

SandyBrown #F4A460 rgb(244,164,96)

Mar verde #2E8B57 rgb(46,139,87)

Concha #FFF5EE rgb(255,245,238)

Tierra de siena
#A0522D rgb(160,82,45)

Plata #C0C0C0 rgb(192,192,192)

Cielo azul #87CEEBrgb(135,206,235)

PizarraAzul #6A5ACD rgb(106,90,205)

Gris Pizarra #708090 rgb(112,128,144)

Pizarra gris #708090 rgb(112,128,144)

Nieve #FFFAFArgb(255,250,250)

Primavera verde #00FF7F rgb(0,255,127)

Azul acero #4682B4 rgb(70,130,180)

Broncearse
#D2B48C rgb(210,180,140)

verde azulado
#008080 rgb(0,128,128)

Cardo #D8BFD8rgb(216,191,216)

Tomate #FF6347 rgb(255,99,71)

Turquesa #40E0D0 rgb(64,224,208)

Violeta #EE82EE rgb(238,130,238)

Trigo #F5DEB3 rgb(245,222,179)

Blanco #FFFFFF rgb(255,255,255)

Humo blanco #F5F5F5 rgb(245,245,245)

Amarillo #FFFF00 RGB(255,255,0)

Amarillo verde #9ACD32rgb(154,205,50)

Además de los colores nombrados, también existe la palabra clave transparente, que representa un negro completamente transparente:
rgba(0,0,0,0)

GoalKicker.com – Notas CSS para profesionales 121

Machine Translated by Google

Sección 18.3: Valor Hexadecimal

Fondo

Los colores CSS también se pueden representar como un triplete hexadecimal, donde los miembros representan los componentes
rojo, verde y azul de un color. Cada uno de estos valores representa un número en el rango de 00 a FF, o de 0 a 255 en notación decimal.
Se pueden utilizar valores hexadecimales en mayúsculas y/o minúsculas (es decir , #3fc = #3FC = #33ffCC). El navegador interpreta #369
como #336699. Si eso no es lo que pretendía sino que quería #306090, debe especificarlo explícitamente.

El número total de colores que se pueden representar con notación hexadecimal es 256^3 o 16.777.216.

Sintaxis

color: #rrggbb; color:

#rgb
Valor Descripción
rr 00 - FF por la cantidad de rojo

g 00 - FF por la cantidad de verde

cama y desayuno 00 - FF por la cantidad de azul

.some-class { /*
Esto es equivalente a usar la palabra clave de color 'azul' */ color: #0000FF;

.also-blue { /* Si
desea especificar cada valor de rango con un solo número, ¡puede hacerlo!
Esto es equivalente a '#0000FF' (y 'azul') */ color: #00F;

notación hexadecimal se utiliza para especificar valores de color en el formato de color RGB, según los ' Valores numéricos de color'
del W3C .

Hay muchas herramientas disponibles en Internet para buscar valores de color hexadecimales (o simplemente hexadecimales).

Busque "paleta de colores hexadecimales" o "selector de colores hexadecimales" con su navegador web favorito para encontrar un montón de opciones.

Los valores hexadecimales siempre comienzan con un signo de libra (#), tienen hasta seis "dígitos" y no distinguen entre mayúsculas y
minúsculas: es decir, no les importan las mayúsculas. #FFC125 y #ffc125 son del mismo color.

Sección 18.4: Notación rgb()

RGB es un modelo de color aditivo que representa los colores como mezclas de luz roja, verde y azul. En esencia, la representación RGB
es el equivalente decimal de la notación hexadecimal. En Hexadecimal cada número va de 00-FF que es equivalente a 0-255 en decimal
y 0%-100% en porcentajes.

.some-class { /*
Escalar RGB, equivalente a 'azul'*/ color: rgb(0, 0,
255);
}

.también-azul {
/ * Valores percentiles RGB*/ color:
rgb(0%, 0%, 100%);
}

GoalKicker.com – Notas CSS para profesionales 122

Machine Translated by Google

Sintaxis
rgb(<rojo>, <verde>, <azul>)
Valor Descripción
<rojo> un número entero de 0 a 255 o un porcentaje de 0 a 100 %
<verde> un número entero de 0 a 255 o un porcentaje de 0 a 100 %
<azul> un número entero de 0 a 255 o un porcentaje de 0 a 100 %

Sección 18.5: Notación rgba()

Similar a la notación rgb(), pero con un valor alfa adicional (opacidad).

.red { /
* Rojo opaco */
color: rgba(255, 0, 0, 1);
}

.red-50p {
/ * Rojo semitranslúcido. */ color:
rgba(255, 0, 0, .5);
}

Sintaxis
rgba(<rojo>, <verde>, <azul>, <alfa>);
Valor Descripción
<rojo> un número entero de 0 a 255 o un porcentaje de 0 a 100 %
<verde> un número entero de 0 a 255 o un porcentaje de 0 a 100 %
<azul> un número entero de 0 a 255 o un porcentaje de 0 a 100 % <
alfa> un número de 0 - 1, donde 0.0 es completamente transparente y 1.0 es completamente opaco

Sección 18.6: Notación hsl()

HSL significa matiz ("qué color"), saturación ("cuánto color") y luminosidad ("cuánto blanco").

El tono se representa como un ángulo de 0° a 360° (sin unidades), mientras que la saturación y la luminosidad se representan como
porcentajes.

pag {
color: hsl (240, 100%, 50%); /* Azul */
}

GoalKicker.com – Notas CSS para profesionales 123

Machine Translated by Google

Sintaxis
color: hsl(<tono>, <saturación>%, <luminosidad>%);

Valor Descripción

<tono> especificada en grados alrededor de la rueda de color (sin unidades), donde 0° es rojo, 60° es amarillo, 120° es verde, 180° es
cian, 240° es azul, 300° es magenta y 360° es rojo especificado en porcentaje donde el 0 % está completamente desaturado

(escala de grises) y el 100 % está completamente saturado ( colores vívidos de <saturación> )

<luminosidad> especificado en porcentaje donde 0% es completamente negro y 100% es completamente blanco

notas

Una saturación del 0% siempre produce un color en escala de grises; cambiar el tono no tiene ningún efecto.

Una luminosidad de 0% siempre produce negro y 100% siempre produce blanco; cambiar el tono o la saturación no tiene ningún efecto.

Sección 18.7: Notación hsla()

Similar a la notación hsl(), pero con un valor alfa (opacidad) agregado.

hsla(240, 100%, 50%, 0) /* transparente */ hsla(240, 100%,

50%, 0.5) /* azul semitranslúcido */ hsla(240, 100%, 50%, 1) / * azul totalmente
opaco */

Sintaxis

GoalKicker.com – Notas CSS para profesionales 124

Machine Translated by Google

hsla(<tono>, <saturación>%, <luminosidad>%, <alfa>);

Valor Descripción

<tono> especificado en grados alrededor de la rueda de color (sin unidades), donde 0° es rojo, 60° es amarillo, 120° es
verde, 180° es cian, 240° es azul, 300° es magenta y 360° es rojo

<saturación> porcentaje donde 0% está completamente desaturado (escala de grises) y 100% está completamente saturado (colores vivos)

Porcentaje de <luminosidad> donde 0 % es completamente negro y 100 % es completamente blanco

<alfa> un número del 0 al 1, donde 0 es completamente transparente y 1 es completamente opaco

GoalKicker.com – Notas CSS para profesionales 125

Machine Translated by Google

Capítulo 19: Opacidad

Sección 19.1: Propiedad de opacidad
La opacidad de un elemento se puede establecer mediante la propiedad de opacidad . Los valores pueden estar entre 0,0 (transparente) y 1,0 (opaco).

Ejemplo de uso

<div estilo="opacidad:0.8;">
Este es un elemento parcialmente transparente </
div>

Opacidad de la transparencia del valor de

la propiedad : 1,0; Opacidad opaca : 0,75;
25% transparente (75% opaco) opacidad: 0,5; 50%
transparente (50% opaco) opacidad: 0,25; 75%
transparente (25% opaco) opacidad: 0,0; Transparente

Sección 19.2: Compatibilidad de IE para `opacidad`

Para usar la opacidad en todas las versiones de IE, el orden es:

.transparent-element { /*
para IE 8 y 9 */ -ms-
filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // IE8 /* también funciona en
IE 8 y 9, pero también en 5, 6, 7 */ filter: alpha(opacity=60); // IE 5-7 /* Navegadores modernos
*/ opacidad: 0.6;

GoalKicker.com – Notas CSS para profesionales 126

Machine Translated by Google

Capítulo 20: Unidades de longitud

Unidad Descripción
% Definir tamaños en términos de objetos primarios u objeto actual dependiendo de la propiedad em Relativo al tamaño

de fuente del elemento (2em significa 2 veces el tamaño de la fuente actual)

rem Relativo al tamaño de fuente del elemento raíz

vw Relativo al 1% del ancho de la ventana gráfica* vh Relativo al 1%

de la altura de la ventana gráfica* vmin Relativo al 1% de la dimensión

menor de la ventana gráfica* vmax Relativo al 1% de la dimensión mayor de

la ventana gráfica* cm centímetros

mm milímetros

en pulgadas (1in = 96px = 2,54 cm)

px píxeles (1px = 1/96th de 1in) puntos (1pt =

segundos1/72
(usado
de 1in)
paraptanimaciones
picas (1pc = y12 pt)

ordenador personal transiciones)

s

ms milisegundos (utilizado para animaciones y transiciones) ex Relativo a la

altura x de la fuente actual ch Basado en el ancho del carácter cero (0)

es unidad fraccionaria (utilizada para el diseño de cuadrícula CSS)

Una medida de distancia CSS es un número seguido inmediatamente por una unidad de longitud (px, em, pc, in, …)

CSS admite varias unidades de medida de longitud. Son absolutos o relativos.

Sección 20.1: Creación de elementos escalables usando rems y ems

Versión ÿ 3

Puede usar rem definido por el tamaño de fuente de su etiqueta html para diseñar elementos configurando su tamaño de fuente en un valor de rem y usar em dentro

del elemento para crear elementos que se escalan con su tamaño de fuente global.

HTML:

< tipo de entrada="botón" valor="Botón"> < tipo de

entrada="rango"> < tipo de entrada="texto"
valor="Texto">

CSS relevante:

html
{ tamaño de fuente: 16px;
}

input[type="button"] { tamaño
de fuente: 1rem; relleno:
0.5em 2em;
}

entrada[tipo="rango"] { tamaño
de fuente: 1rem;

GoalKicker.com – Notas CSS para profesionales 127

Machine Translated by Google

ancho: 10em;
}

entrada[tipo=texto]
{ tamaño de fuente:
1rem; relleno: 0,5 em;
}

Posible resultado:

Sección 20.2: Tamaño de fuente con rem

CSS3 presenta algunas unidades nuevas, incluido el rem unidad, que significa "root em". Veamos cómo funciona rem .

Primero, veamos las diferencias entre em y rem.

em: Relativo al tamaño de fuente del padre. Esto provoca el problema de composición rem:
Relativo al tamaño de fuente del elemento raíz o <html> . Esto significa que es posible declarar un solo tamaño de fuente para el
elemento html y definir todas las unidades rem para que sean un porcentaje de eso.

El principal problema con el uso de rem para el tamaño de fuente es que los valores son algo difíciles de usar. Aquí hay un ejemplo de
algunos tamaños de fuente comunes expresados en unidades rem , asumiendo que el tamaño base es 16px:

10px = 0.625rem
12px = 0.75rem
14px = 0.875rem
16px = 1rem (base)
18px = 1.125rem 20px
= 1.25rem 24px =
1.5rem 30px = 1.875rem
32px = 2rem

CÓDIGO:

Versión ÿ 3

html
{ tamaño de fuente: 16px;
}

GoalKicker.com – Notas CSS para profesionales 128

Machine Translated by Google

h1
{ tamaño de fuente: 2rem; / * 32 píxeles */
}

p
{ tamaño de fuente: 1rem; / * 16 píxeles */
}

li
{ tamaño de fuente: 1,5 em; / * 24 píxeles */
}

Sección 20.3: vmin y vmax

vmin: relativo al 1 por ciento de la dimensión más pequeña de la ventana gráfica

vmax: relativo al 1 por ciento de la dimensión más grande de la ventana gráfica

En otras palabras, 1 vmin es igual al menor de 1 vh y 1 vw

1 vmax es igual al mayor de 1 vh y 1 vw

Nota: vmax no es compatible en:

cualquier versión de Internet Explorer

Safari anterior a la versión 6.1

Sección 20.4: vh y vw

CSS3 introdujo dos unidades para representar el tamaño.

vh, que significa altura de la ventana gráfica es relativa al 1 % de la altura de la ventana gráfica vw,
que significa ancho de la ventana gráfica es relativo al 1 % del ancho de la ventana gráfica

Versión ÿ 3

div
{ ancho: 20vw;
altura: 20vh;
}

Arriba, el tamaño del div ocupa el 20 % del ancho y el alto de la ventana gráfica.

Sección 20.5: usando porcentaje %

Una de las unidades útiles al crear una aplicación receptiva.

Su tamaño depende de su contenedor principal.

Ecuación:

*
(Ancho del contenedor principal) ( Porcentaje (%) ) = Salida

Por ejemplo:

El padre tiene un ancho de 100 px mientras que el hijo tiene un 50 %.

GoalKicker.com – Notas CSS para profesionales 129

Machine Translated by Google

En la salida, el ancho del Niño será la mitad (50%) del del Padre, que es 50px.

HTML

<div clase="padre">
PADRE
<div class="child">
NIÑO
</div>
</div>

CSS

<estilo>

*{ color: #CCC;
}

.parent{ color de fondo: azul;

ancho: 100px;
}

.child{ color de fondo: verde;

ancho: 50%;
}

</estilo>

PRODUCCIÓN

GoalKicker.com – Notas CSS para profesionales 130

Machine Translated by Google

Capítulo 21: Pseudo-Elementos

pseudo- Descripción
elemento ::después Insertar contenido después del contenido de un elemento

::antes de Insertar contenido antes del contenido de un elemento

::first-letter Selecciona la primera letra de cada elemento

::primera linea Selecciona la primera línea de cada elemento.

::selección Coincide con la parte de un elemento que ha seleccionado un usuario

Se utiliza para crear un fondo que oculta el documento subyacente de un elemento en la pila de la capa superior
::fondo

:: marcador de posición Le permite diseñar el texto del marcador de posición de un elemento de formulario (Experimental)
::marcador Para aplicar atributos de estilo de lista en un elemento determinado (Experimental) :: error

ortográfico Representa un segmento de texto que el navegador ha marcado como incorrectamente escrito (Experimental)

Representa un segmento de texto que el navegador ha marcado como gramaticalmente incorrecto

:: error gramatical
(Experimental)

Los pseudoelementos, al igual que las pseudoclases, se agregan a los selectores de CSS, pero en lugar de describir un estado especial, le permiten
definir el alcance y el estilo de ciertas partes de un elemento html.

Por ejemplo, el pseudoelemento ::first-letter apunta solo a la primera letra de un elemento de bloque especificado por el selector.

Sección 21.1: Pseudo-Elementos

Los pseudoelementos se agregan a los selectores, pero en lugar de describir un estado especial, le permiten diseñar ciertas partes de un documento.

El atributo de contenido es necesario para que se representen los pseudoelementos; sin embargo, el atributo puede tener un valor vacío (por ejemplo ,
contenido: "").

div::después
{ contenido: 'después';
color: rojo; borde: 1px
rojo sólido;
}

div
{ color: negro;
borde: 1px negro sólido; relleno:
1px;
}

div::antes
{ contenido: 'antes'; color:
verde; borde: 1px verde
sólido;
}

Sección 21.2: Pseudo-Elementos en Listas

Los pseudoelementos se usan a menudo para cambiar el aspecto de las listas (principalmente para listas desordenadas, ul).

GoalKicker.com – Notas CSS para profesionales 131

Machine Translated by Google

El primer paso es eliminar las viñetas de lista predeterminadas:

ul
{ tipo de estilo de lista: ninguno;
}

Luego agrega el estilo personalizado. En este ejemplo, crearemos cuadros de degradado para viñetas.

li:antes
{ contenido: "";
pantalla: bloque en línea;
margen derecho: 10px;
altura: 10px; ancho: 10px;
fondo: degradado lineal
(rojo, azul);
}

HTML

<ul>
<li>Prueba I</li>
<li>Prueba II</li>
</ul>

Resultado

GoalKicker.com – Notas CSS para profesionales 132

Machine Translated by Google

Capítulo 22: Posicionamiento

Parámetro Detalles

Valor por defecto. Los elementos se representan en orden, tal como aparecen en el flujo del documento. Las propiedades top, right, bottom, left y
estático
z-index no se aplican.

El elemento se coloca en relación con su posición normal, por lo que left:20px agrega 20 píxeles a la posición IZQUIERDA del elemento. El
pariente
elemento se coloca en relación con la ventana del navegador.
fijado

absoluto El elemento se coloca en relación con su primer elemento antecesor posicionado (no estático)
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Característica experimental. Se comporta como position: static dentro de su padre hasta que se alcanza un umbral de
pegajoso
compensación dado, luego actúa como position: fixed.
desarmar
Combinación de inicial y herencia. Más información aquí.

Sección 22.1: Elementos superpuestos con índice z

Para cambiar el orden de pila predeterminado elementos posicionados ( propiedad de posición establecida en relativa, absoluta o fija), use la propiedad de índice z .

Cuanto mayor sea el índice z, más arriba en el contexto de apilamiento (en el eje z) se coloca.

Ejemplo

En el siguiente ejemplo, un valor de índice z de 3 coloca el verde en la parte superior, un índice z de 2 coloca el rojo justo debajo y un índice z de 1 coloca el azul

debajo.

HTML

<div id="div1"></div> <div

id="div2"></div> <div
id="div3"></div>

CSS

div
{ posición: absoluta; altura:
200px; ancho: 200px;

} div#div1
{ índice z: 1;
izquierda:
0px; arriba:
0px; color de fondo: azul;

} div#div2
{ índice z: 3;
izquierda:
100px; arriba:
100px; color de fondo: verde;

} div#div3
{ índice z: 2;
izquierda: 50px;

GoalKicker.com – Notas CSS para profesionales 133

Machine Translated by Google

arriba: 150px;
color de fondo: rojo;
}

Esto crea el siguiente efecto:

Vea un ejemplo de trabajo en JSFiddle.

Sintaxis

índice z: [ número ] | auto;

Parámetro Detalles

número Un valor entero. Un número más alto es más alto en la pila del índice z . 0 es el valor predeterminado. Se permiten valores negativos.

auto Da al elemento el mismo contexto de apilamiento que su padre. (Defecto)

Observaciones

Todos los elementos se disponen en un eje 3D en CSS, incluido un eje de profundidad, medido por la propiedad del índice z . z-index solo
funciona en elementos posicionados: (consulte: ¿Por qué z-index necesita una posición definida para funcionar?). El único valor donde se ignora es
el valor predeterminado, estático.

Lea sobre la propiedad z-index y los contextos de apilamiento en la especificación CSS en presentación en capas y en Mozilla Developer Network.

Sección 22.2: Posición Absoluta

Cuando se utiliza el posicionamiento absoluto, la casilla del elemento deseado se saca del Flujo normal y ya no afecta la posición de los otros elementos en la

página. Propiedades de desplazamiento:

1. arriba

2. izquierda

3. derecho

GoalKicker.com – Notas CSS para profesionales 134

Machine Translated by Google

4. fondo

especificar el elemento que debe aparecer en relación con su próximo elemento contenedor no estático.

.abspos{ posición:absoluta;
superior: 0px; izquierda:
500px;
}

Este código moverá el cuadro que contiene el elemento con el atributo class="abspos" hacia abajo 0px y hacia la derecha 500px en relación con su elemento
contenedor.

Sección 22.3: Posición fija

Al definir la posición como fija, podemos eliminar un elemento del flujo del documento y establecer su posición en relación con la ventana del navegador.
Un uso obvio es cuando queremos que algo sea visible cuando nos desplazamos hasta el final de un largo
página.

#stickyDiv
{ posición: fija; arriba:
10px; izquierda: 10px;

Sección 22.4: Posición Relativa

El posicionamiento relativo mueve el elemento en relación a donde habría estado en flujo normal . Propiedades de compensación:

1. arriba

2. izquierda

3. derecha
4. abajo

se utilizan para indicar qué tan lejos mover el elemento desde donde habría estado en el flujo normal.

.relpos{ posición:relativa; arriba:

20px; izquierda: 30px;

Este código moverá el cuadro que contiene el elemento con el atributo class="relpos" 20 px hacia abajo y 30 px hacia la derecha desde donde habría estado
en el flujo normal.

Sección 22.5: Posicionamiento estático

La posición por defecto de un elemento es estática. Para citar MDN:

Esta palabra clave permite que el elemento use el comportamiento normal, es decir, se presenta en su posición actual en el flujo. Las
propiedades top, right, bottom, left y z-index no se aplican.

.element{ posición:estática;

GoalKicker.com – Notas CSS para profesionales 135

Machine Translated by Google

GoalKicker.com – Notas CSS para profesionales 136

Machine Translated by Google

Capítulo 23: Control de diseño

Valor Efecto

ninguno Oculta el elemento y evita que ocupe espacio.

bloquear Bloquear elemento, ocupar el 100% del ancho disponible, romper tras elemento. en línea Elemento

en línea, no ocupa ancho, no se rompe después del elemento.

inline-block Tomando propiedades especiales tanto de elementos en línea como de bloque, sin interrupción, pero puede tener ancho.

inline-flex Muestra un elemento como un contenedor flexible de nivel en línea.

inline-table El elemento se muestra como una tabla de nivel en línea. grid Se comporta

como un elemento de bloque y presenta su contenido de acuerdo con el modelo de cuadrícula. flex Se comporta como

un elemento de bloque y presenta su contenido de acuerdo con el modelo flexbox. heredar Hereda el valor del elemento

padre.

hoja de estiloRestablezca el valor

predeterminada delalnavegador/usuario.
valor predeterminado tomado de los comportamientos descritos en las especificaciones HTML o inicial de la

table Se comporta como el elemento de tabla HTML .

table-cell Deje que el elemento se comporte como un elemento <td>

table-column Deja que el elemento se comporte como un elemento <col>

table-row Deja que el elemento se comporte como un elemento <tr>

list-item Deje que el elemento se comporte como un elemento <li> .

Sección 23.1: La propiedad de visualización

La propiedad display CSS es fundamental para controlar el diseño y el flujo de un documento HTML. La mayoría de los elementos tienen un valor de
visualización predeterminado de bloque o en línea (aunque algunos elementos tienen otros valores predeterminados).

En línea

Un elemento en línea ocupa solo el ancho necesario. Se apila horizontalmente con otros elementos del mismo tipo y no puede contener otros elementos
que no estén en línea.

<span>¡Este es un texto <b>en negrita</b> !

Como se demostró anteriormente, dos elementos en línea , <span> y <b>, están en línea (de ahí el nombre) y no rompen el
flujo del texto.

Bloquear

Un elemento de bloque ocupa el ancho máximo disponible de su elemento principal. Comienza con una nueva línea y, a diferencia de los elementos
en línea , no restringe el tipo de elementos que puede contener.

<div>¡Hola mundo!</div><div>¡Este es un ejemplo!</div>

El elemento div está a nivel de bloque de forma predeterminada y, como se muestra arriba, los dos elementos de bloque están apilados verticalmente y, a
diferencia de los elementos en línea , el flujo del texto se interrumpe.

GoalKicker.com – Notas CSS para profesionales 137

Machine Translated by Google

Bloque en línea

El valor de bloque en línea nos brinda lo mejor de ambos mundos: combina el elemento con el flujo del texto y nos permite usar relleno, margen, altura
y propiedades similares que no tienen un efecto visible en los elementos en línea .

Los elementos con este valor de visualización actúan como si fueran texto normal y, como resultado, se ven afectados por las reglas que controlan
el flujo de texto, como la alineación de texto. De forma predeterminada, también se reducen al tamaño más pequeño posible para acomodar su
contenido.

<!--En línea: lista desordenada-->

<estilo> li
{ pantalla :
en línea; fondo: azul claro;
relleno: 10px;

ancho de borde: 2px;

color del borde: negro; estilo
de borde: sólido; } </estilo>

<ul>
<li>Primer Elemento </li>
<li>Segundo Elemento </li> <li>Tercer
Elemento </li> </ul>

<!--block: lista desordenada--> <style> li

{ display : block; fondo: azul claro; relleno:
10px;

ancho de borde: 2px;

color del borde: negro; estilo
de borde: sólido; } </estilo>

<ul>
<li>Primer Elemento </li>
<li>Segundo Elemento </li> <li>Tercer
Elemento </li> </ul>

GoalKicker.com – Notas CSS para profesionales 138

Machine Translated by Google

<!--Inline-block: lista desordenada--> <estilo> li

{ display : inline-block; fondo: azul claro; relleno:
10px;

ancho de borde: 2px;

color del borde: negro; estilo
de borde: sólido; }

</estilo>

<ul>
<li>Primer Elemento </li>
<li>Segundo Elemento </li> <li>Tercer
Elemento </li> </ul>

ninguna

Un elemento al que se le asigna el valor none en su propiedad de visualización no se mostrará en absoluto.

Por ejemplo, creemos un elemento div que tenga una identificación de myDiv:

<div id="miDiv"></div>

Esto ahora se puede marcar como no mostrado por la siguiente regla CSS:

#myDiv
{ pantalla: ninguno;
}

Cuando se ha configurado un elemento para que se muestre: ninguno; el navegador ignora todas las demás propiedades de
diseño para ese elemento específico (tanto posición como flotante). No se representará ningún cuadro para ese elemento y su existencia
en html no afecta la posición de los siguientes elementos.

Tenga en cuenta que esto es diferente de establecer la propiedad de visibilidad en oculta. Configuración de visibilidad: oculta; porque un
elemento no mostraría el elemento en la página, pero el elemento aún ocuparía el espacio en el proceso de representación como si fuera visible.
Por lo tanto, esto afectará la forma en que se muestran los siguientes elementos en la página.

El valor none para la propiedad de visualización se usa comúnmente junto con JavaScript para mostrar u ocultar elementos a voluntad,
eliminando la necesidad de eliminarlos y volver a crearlos.

Sección 23.2: Para obtener la estructura de la tabla antigua usando div

Esta es la estructura normal de la tabla HTML

<estilo>
tabla
{ ancho: 100%;
}

GoalKicker.com – Notas CSS para profesionales 139

Machine Translated by Google

</estilo>

<tabla>
<tr>
<td>
soy una mesa
</td>
</tr> </
tabla>

Puedes hacer la misma implementación como esta

<estilo> .table-div
{ pantalla: tabla;

} .tabla-fila-div { pantalla:
tabla-fila;

} .table-cell-div { pantalla:
table-cell;

} </estilo>

<div class="tabla-div">
<div class="tabla-fila-div">
<div class="table-cell-div">
Me comporto como una mesa ahora
</div>
</div>
</div>

GoalKicker.com – Notas CSS para profesionales 140

Machine Translated by Google

Capítulo 24: Cuadrícula

El diseño de cuadrícula es un nuevo y poderoso sistema de diseño de CSS que permite dividir el contenido de una página web en filas y columnas de una

manera fácil.

Sección 24.1: Ejemplo básico

Propiedad Valores posibles display
grid / inline-grid

La cuadrícula CSS se define como una propiedad de visualización. Se aplica únicamente a un elemento principal y sus elementos secundarios inmediatos.

Considere el siguiente marcado:

<sección clase="contenedor">
<div class="item1">item1</div> <div
class ="item2">item2</div> < div
class="item3">item3</ div> <div
class="item4">item4</ div> </sección>

La forma más fácil de definir la estructura de marcado anterior como una cuadrícula es simplemente establecer su propiedad de visualización en cuadrícula:

.container
{ pantalla: cuadrícula;
}

Sin embargo, hacer esto invariablemente hará que todos los elementos secundarios colapsen uno encima del otro. Esto se debe a que los niños actualmente no

saben cómo ubicarse dentro de la cuadrícula. Pero podemos decirles explícitamente.

Primero, debemos decirle al elemento de cuadrícula .container cuántas filas y columnas formarán su estructura y podemos hacerlo usando las propiedades grid-

columns y grid-rows (tenga en cuenta la pluralización):

.container
{ pantalla:
cuadrícula; columnas de cuadrícula:
50px 50px 50px; filas de cuadrícula: 50px 50px;
}

Sin embargo, eso todavía no nos ayuda mucho porque necesitamos dar un orden a cada elemento hijo. Podemos hacer esto especificando los valores de fila de

cuadrícula y columna de cuadrícula que le indicarán dónde se encuentra en la cuadrícula:

.container .item1 { grid-

column: 1; fila de
cuadrícula: 1;

} .container .item2 { grid-

column: 2; fila de
cuadrícula: 1;

} .container .item3 { grid-

column: 1; fila de
cuadrícula: 2;

} .container .item4 { grid-

column: 2;

GoalKicker.com – Notas CSS para profesionales 141

Machine Translated by Google

fila de cuadrícula: 2;
}

Al dar a cada artículo un valor de columna y fila, identifica el orden de los artículos dentro del contenedor.

Vea un ejemplo de trabajo en JSFiddle. Deberá ver esto en IE10, IE11 o Edge para que funcione, ya que estos son
actualmente los únicos navegadores que admiten el diseño de cuadrícula (con el prefijo del proveedor -ms-) o habilitar una bandera
en Chrome, Opera y Firefox según caniuse para probar con ellos.

GoalKicker.com – Notas CSS para profesionales 142

Machine Translated by Google

Capítulo 25: Tablas

Sección 25.1: disposición de la tabla
La propiedad table-layout cambia el algoritmo que se utiliza para el diseño de una tabla.

A continuación, se muestra un ejemplo de dos tablas, ambas configuradas con ancho: 150px:

La tabla de la izquierda tiene table-layout: auto mientras que la de la derecha tiene table-layout: fixed. El primero es más ancho que el
ancho especificado (210 px en lugar de 150 px) pero el contenido encaja. Este último toma el ancho definido de 150px, sin importar si el
contenido se desborda o no.

Valor Descripción
auto Este es el valor predeterminado. Define el diseño de la tabla que será determinado por el contenido de sus celdas.

fijado Este valor establece que el diseño de la tabla esté determinado por la propiedad de ancho proporcionada a la tabla. Si el contenido de
una celda excede este ancho, la celda no cambiará de tamaño, sino que dejará que el contenido se desborde.

Sección 25.2: celdas vacías

La propiedad de celdas vacías determina si las celdas sin contenido deben mostrarse o no. Esto no tiene efecto a menos que border-collapse esté
configurado para separar.

A continuación, un ejemplo con dos tablas con diferentes valores establecidos en la propiedad de celdas vacías :

La tabla de la izquierda tiene celdas vacías: mostrar mientras que la de la derecha tiene celdas vacías: ocultar. El primero muestra las
celdas vacías mientras que el segundo no.

Valor Descripción show Este es el valor predeterminado.

Muestra celdas incluso si están vacías. ocultar Este valor oculta una celda por completo

si no hay contenido en la celda.

Más información:

https://www.w3.org/TR/CSS21/tables.html#empty-cells https://
developer.mozilla.org/en-US/docs/Web/CSS/empty-cells http://codepen. io/
SitePoint/pen/yfhtq https://css-tricks.com/almanac/properties/e/empty-cells/

Sección 25.3: borde colapsado

La propiedad border-collapse determina si los bordes de una tabla deben separarse o fusionarse.

GoalKicker.com – Notas CSS para profesionales 143

Machine Translated by Google

A continuación, un ejemplo de dos tablas con diferentes valores para la propiedad border-collapse :

La tabla de la izquierda tiene borde colapsado: separado mientras que la de la derecha tiene borde colapsado: colapsado.

Valor Descripción
separado Este es el valor predeterminado. Hace que los bordes de la mesa se separen entre sí.

colapsar Este valor establece que los bordes de la tabla se fusionen, en lugar de ser distintos.

Sección 25.4: espaciado de bordes

La propiedad border-spacing determina el espacio entre celdas. Esto no tiene efecto a menos que border-collapse sea
configurado para separar.

A continuación, un ejemplo de dos tablas con diferentes valores para la propiedad border-spacing :

La tabla de la izquierda tiene un espaciado de borde: 2px (predeterminado) mientras que la de la derecha tiene un espaciado de borde: 8px.

Valor Descripción
<longitud> Este es el comportamiento predeterminado, aunque el valor exacto puede variar entre navegadores.

<longitud> <longitud> Esta sintaxis permite especificar valores horizontales y verticales separados respectivamente.

Sección 25.5: lado del título

La propiedad caption-side determina la posición vertical del elemento <caption> dentro de una tabla. esto no tiene
efecto si tal elemento no existe.

A continuación, un ejemplo con dos tablas con diferentes valores establecidos en la propiedad del lado del título :

La tabla de la izquierda tiene caption-side: top mientras que la de la derecha tiene caption-side: bottom.

Valor Descripción
top Este es el valor predeterminado. Coloca el título encima de la tabla.

bottom Este valor coloca el título debajo de la tabla.

GoalKicker.com – Notas CSS para profesionales 144

Machine Translated by Google

Capítulo 26: Transiciones

Parámetro Detalles

La propiedad CSS específica cuyo cambio de valor debe cambiarse (o) todas, si es necesario cambiar todas las
propiedad de transición
propiedades transicionales.

duración de la transición La duración (o período) en segundos (s) o milisegundos (ms) durante los cuales debe tener lugar la
transición.

Una función que describe cómo se calculan los valores intermedios durante la transición. Los
valores comúnmente utilizados son facilidad, facilidad de entrada, facilidad de salida, facilidad de entrada,
lineal, función de tiempo de transición cubic-bezier(), pasos(). Puede encontrar más información sobre las diversas funciones de
temporización en las especificaciones del W3C.

La cantidad de tiempo que debe haber transcurrido antes de que pueda comenzar la transición. Se puede
transición-retraso
especificar en segundos (s) o milisegundos (ms)

Sección 26.1: Transición abreviada

CSS

div{ ancho: 150px;

altura: 150px;
color de fondo: rojo;
transición: color de fondo 1s;

} div:
hover{ color de fondo: verde;
}

HTML

<div></div>

Este ejemplo cambiará el color de fondo cuando se desplace el div, el cambio de color de fondo durará 1 segundo.

Sección 26.2: cubic-bezier

La función cubic-bezier es una función de temporización de transición que a menudo se usa para transiciones suaves y personalizadas.

función de temporización de transición: cubic-bezier (0.1, 0.7, 1.0, 0.1);

La función toma cuatro parámetros:

cúbica-bezier(P1_x, P1_y, P2_x, P2_y)

GoalKicker.com – Notas CSS para profesionales 145

Machine Translated by Google

Estos parámetros se asignarán a puntos que forman parte de una curva de Bézier:

Para CSS Bézier Curves, P0 y P3 siempre están en el mismo lugar. P0 está en (0,0) y P3 está en (1,1), lo que significa que los
parámetros pasados a la función cubic-bezier solo pueden estar entre 0 y 1.

Si pasa parámetros que no están en este intervalo, la función tendrá una transición lineal predeterminada.

Dado que cubic-bezier es la transición más flexible en CSS, puede traducir todas las demás funciones de tiempo de transición
a funciones cubic-bezier:

lineal: cúbico-bezier (0,0,1,1)

facilidad de entrada: cubic-bezier (0.42, 0.0, 1.0, 1.0)

facilidad de salida: cubic-bezier (0.0, 0.0, 0.58, 1.0)

facilidad de entrada y salida: cubic-bezier (0.42, 0.0, 0.58, 1.0)

GoalKicker.com – Notas CSS para profesionales 146

Machine Translated by Google

Sección 26.3: Transición (a mano)

CSS

div
{ altura: 100px;
ancho: 100px;
borde: 1px sólido;
propiedad de transición: alto, ancho;
transición-duración: 1s, 500ms; función
de temporización de transición: lineal;
transición-retardo: 0s, 1s;

} div: hover
{ altura: 200px;
ancho: 200px;
}
HTML

<div></div>

propiedad de transición: especifica las propiedades CSS para las que es el efecto de transición. En este caso, el div se expandirá
tanto horizontal como verticalmente cuando se desplace. transición-duración: especifica el tiempo que tarda en completarse una
transición. En el ejemplo anterior, las transiciones de alto y ancho tomarán 1 segundo y 500 milisegundos respectivamente. Transition-
timing-function: especifica la curva de velocidad del efecto de transición. Un valor lineal indica que la transición tendrá la misma
velocidad de principio a fin. transición-retraso: especifica la cantidad de tiempo necesario para esperar antes de que comience el
efecto de transición. En este caso, la altura comenzará a cambiar de inmediato, mientras que el ancho esperará 1 segundo.

GoalKicker.com – Notas CSS para profesionales 147

Machine Translated by Google

Capítulo 27: Animaciones

Transición
Parámetro Detalles

Ya sea la propiedad CSS para la transición, o all, que especifica todos los transicionales
propiedad
propiedades.
duración Tiempo de transición, ya sea en segundos o milisegundos.

Especifica una función para definir cómo se calculan los valores intermedios de las propiedades.
función de temporización Los valores comunes son facilidad, lineal y paso a paso. Consulte la hoja de trucos de la función de aceleración para más.

demora Cantidad de tiempo, en segundos o milisegundos, que se debe esperar antes de reproducir la animación.

@fotogramas clave

Puede especificar un tiempo establecido con un valor porcentual o dos valores porcentuales, es decir
[ de | a | <porcentaje> ] 10%, 20%,
durante un período de tiempo en el que se establecen los atributos establecidos del fotograma clave.

bloquear Cualquier cantidad de atributos CSS para el fotograma clave.

Sección 27.1: Animaciones con fotogramas clave

Para animaciones CSS de varias etapas, puede crear CSS @keyframes. Los fotogramas clave le permiten definir varias animaciones

puntos, denominados fotogramas clave, para definir animaciones más complejas.

Ejemplo básico

En este ejemplo, crearemos una animación de fondo básica que alterna entre todos los colores.

@keyframes fondo del arco iris {

{ color de fondo: #ff0000; }
0% 8.333% { color de fondo: #ff8000; }
16.667% { color de fondo: #ffff00; }
25.000% { color de fondo: #80ff00; }
33.333% { color de fondo: #00ff00; }
41.667% { color de fondo: #00ff80; }
50.000% { color de fondo: #00ffff; }
58.333% { color de fondo: #0080ff; }
66.667% { color de fondo: #0000ff; }
75.000% { color de fondo: #8000ff; }
83.333% { color de fondo: #ff00ff; }
91.667% { color de fondo: #ff0080; }
100,00% { color de fondo: #ff0000; }
}

.RainbowBackground {
animación: arco iris-fondo 5s infinito;
}

Ver resultado

Hay algunas cosas diferentes a tener en cuenta aquí. Primero, la sintaxis actual de @keyframes .

@keyframes arcoiris-fondo{

Esto establece el nombre de la animación en fondo de arco iris.

GoalKicker.com – Notas CSS para profesionales 148

Machine Translated by Google

0% { color de fondo: #ff0000; }

Esta es la definición de un fotograma clave dentro de la animación. La primera parte, el 0% en el caso, define dónde está el
fotograma clave durante la animación. El 0% implica que es el 0% del tiempo total de animación desde el principio.

La animación cambiará automáticamente entre fotogramas clave. Por lo tanto, al establecer el siguiente color de fondo en 8,333 %, la
animación tardará suavemente el 8,333 % del tiempo en hacer la transición entre esos fotogramas clave.

.RainbowBackground
{ animación: rainbow-background 5s infinite;
}

Este código adjunta nuestra animación a todos los elementos que tienen la clase .RainbowBackground .

La propiedad de animación real toma los siguientes argumentos.

animation-name: El nombre de nuestra animación. En este caso, rainbow-background

animation-duration: cuánto tiempo tardará la animación, en este caso 5 segundos. animation-
iteration-count (opcional): el número de veces que se repetirá la animación. En este caso, la animación continuará
indefinidamente. De forma predeterminada, la animación se reproducirá una vez. animation-delay (Opcional):
especifica cuánto tiempo esperar antes de que comience la animación. El valor predeterminado es 0 segundos y puede tomar
valores negativos. Por ejemplo, -2s iniciaría la animación 2 segundos después de su ciclo. animation-timing-function
(Opcional): especifica la curva de velocidad de la animación. Por defecto es fácil, donde la animación comienza lenta, se
vuelve más rápida y termina lenta.

En este ejemplo particular, los fotogramas clave de 0 % y 100 % especifican { background-color: #ff0000; }. Siempre que dos o más fotogramas
clave compartan un estado, uno puede especificarlos en una sola declaración. En este caso, las dos líneas 0% y 100% podrían reemplazarse con
esta única línea:

0%, 100% { color de fondo: #ff0000; }

Compatibilidad entre navegadores

Para navegadores antiguos basados en WebKit, deberá usar el prefijo del proveedor tanto en la declaración de @keyframes como en
la propiedad de animación , así:

@-webkit-keyframes{}

-webkit-animación: ...

Sección 27.2: Animaciones con la propiedad de transición

Útil para animaciones simples, la propiedad de transición CSS permite que las propiedades CSS basadas en números se
animen entre estados.

Ejemplo

.Ejemplo{ altura: 100px;

fondo: #fff;
}

.Ejemplo: hover{ altura:

120px;

GoalKicker.com – Notas CSS para profesionales 149

Machine Translated by Google

fondo: #ff0000;
}

Ver resultado

De forma predeterminada, al pasar el cursor sobre un elemento con la clase .Example , la altura del elemento cambiaría inmediatamente.
salta a 120px y su color de fondo a rojo (#ff0000).

Al agregar la propiedad de transición , podemos hacer que estos cambios ocurran con el tiempo:

.Ejemplo{
...
transición: todos los 400 ms de facilidad;
}

Ver resultado

El valor all aplica la transición a todas las propiedades compatibles (basadas en números). Cualquier nombre de propiedad compatible
(como altura o parte superior) se puede sustituir por esta palabra clave.

400ms especifica la cantidad de tiempo que toma la transición. En este caso, el cambio de altura del elemento tomará 400
milisegundos para completar.

Finalmente, el valor de facilidad es la función de animación, que determina cómo se reproduce la animación. facilidad significa empezar
lento, acelerar, luego terminar lento de nuevo. Otros valores son lineales, de salida y de entrada.

Compatibilidad entre navegadores

La propiedad de transición generalmente es compatible con todos los principales navegadores, excepto IE 9. Para versiones anteriores
de navegadores basados en Firefox y Webkit, use prefijos de proveedores como este:

.Ejemplo{
transición: todos los 400 ms de facilidad;
-moz-transition: todos los 400 ms de facilidad;
-webkit-transition: toda la facilidad de 400ms ;
}

Nota: La propiedad de transición puede animar cambios entre dos valores numéricos cualesquiera, independientemente de la unidad. Puede
también transición entre unidades, como 100px a 50vh. Sin embargo, no puede hacer la transición entre un número y un valor predeterminado.

o valor automático, como la transición de la altura de un elemento de 100 px a automático.

Sección 27.3: Ejemplos de sintaxis

Nuestro primer ejemplo de sintaxis muestra la propiedad abreviada de animación usando todas las propiedades/parámetros disponibles:

animación: 3s facilidad en 1s 2 reverso ambas cosas

en pausa
en este lado;
/* duración | función de temporización | retraso | recuento de iteraciones | dirección | modo de relleno | estado de juego |
nombre */

Nuestro segundo ejemplo es un poco más simple y muestra que se pueden omitir algunas propiedades:

animación: 3s lineal 1s en este lado;

/* duración | función de temporización | retraso | nombre */

GoalKicker.com – Notas CSS para profesionales 150

Machine Translated by Google

Nuestro tercer ejemplo muestra la declaración más mínima. Tenga en cuenta que el nombre de la animación y la duración de la animación
deben declararse:

animación: 3s en este
/* lado; duración | nombre */

También vale la pena mencionar que cuando se usa la abreviatura de animación, el orden de las propiedades marca la diferencia.
Evidentemente el navegador puede confundir tu duración con tu retraso.

Si la brevedad no es lo tuyo, también puedes omitir la propiedad abreviada y escribir cada propiedad individualmente:

animación-duración: 3s;
función de temporización de animación:
facilidad de entrada; animación-retraso: 1s;
número de iteraciones de animación: 2;
animación-dirección: inversa; modo de
relleno de animación: ambos; animación-
reproducir-estado: en pausa; nombre-
animación: slidein;

Sección 27.4: Aumento del rendimiento de la animación

utilizando el atributo `will-change`
Al crear animaciones y otras acciones que requieren mucha GPU, es importante comprender el atributo will-change .

Tanto los fotogramas clave de CSS como la propiedad de transición utilizan la aceleración de GPU. El rendimiento aumenta al descargar los
cálculos a la GPU del dispositivo. Esto se hace mediante la creación de capas de pintura (partes de la página que se procesan individualmente)
que se descargan en la GPU para su cálculo. La propiedad will-change le dice al navegador qué se animará, lo que le permite crear áreas de
pintura más pequeñas, lo que aumenta el rendimiento.

La propiedad will-change acepta una lista de propiedades separadas por comas para ser animadas. Por ejemplo, si planea transformar un objeto
y cambiar su opacidad, debe especificar:

.Ejemplo{
...
voluntad-cambio: transformar, opacidad;
}

Nota: Use will-change con moderación. La configuración de cambio para cada elemento de una página puede causar problemas de
rendimiento, ya que el navegador puede intentar crear capas de pintura para cada elemento, lo que aumenta significativamente la cantidad de
procesamiento realizado por la GPU.

GoalKicker.com – Notas CSS para profesionales 151

Machine Translated by Google

Capítulo 28: Transformaciones 2D

Función/Parámetro Detalles
rotar(x) traducir(x,y) Define una transformación que mueve el elemento alrededor de un punto fijo en el eje Z
traducirX(x) Mueve la posición del elemento en los ejes X e Y

Mueve la posición del elemento en el eje X

traducirY(y) Mueve la posición del elemento en el eje Y
escala(x,y) Modifica el tamaño del elemento en los ejes X e Y

escalaX(x) Modifica el tamaño del elemento en el eje X

escalaY(y) Modifica el tamaño del elemento en el eje Y

Mapeo de corte, o transvección, distorsionando cada punto de un elemento por un cierto ángulo en cada
sesgo (x, y)
dirección

Mapeo de corte horizontal distorsionando cada punto de un elemento por un cierto ángulo en la dirección
sesgarX(x)
horizontal

Mapeo de corte vertical distorsionando cada punto de un elemento por un cierto ángulo en la dirección vertical
sesgado Y (y)

matriz() Define una transformación 2D en forma de matriz de transformación.

El ángulo en el que se debe girar o sesgar el elemento (según la función con la que se utilice). El ángulo se
puede proporcionar en grados (deg), gradianes (grad), radianes (rad) o giros (turn). En la función skew() , el
ángulo
segundo ángulo es opcional. Si no se proporciona, no habrá (0) sesgo en el eje Y.

La distancia expresada como una longitud o un porcentaje por el cual el elemento debe traducirse en
longitud o porcentaje. En la habría
función(0)
translate()
traslación
, la
ensegunda
el eje Y.longitud o porcentaje es opcional. Si no se proporciona, entonces no

Un número que define cuántas veces se debe escalar el elemento en el eje especificado.
factor de escala En la función scale() , el segundo factor de escala es opcional. Si no se proporciona, el primer factor de escala
también se aplicará al eje Y.

Sección 28.1: Rotar

HTML

<div clase="rotar"></div>

CSS

.rotar
{ ancho: 100px;
altura: 100px;
fondo: verde azulado;
transformar: rotar (45 grados);
}

Este ejemplo rotará el div 45 grados en el sentido de las agujas del reloj. El centro de rotación está en el centro del div, 50% desde la izquierda
y 50% desde arriba. Puede cambiar el centro de rotación configurando la propiedad transform-origin .

transformar-origen: 100% 50%;

El ejemplo anterior establecerá el centro de rotación en el medio del extremo del lado derecho.

GoalKicker.com – Notas CSS para profesionales 152

Machine Translated by Google

Sección 28.2: Escala

HTML

<div class="escala"></div>

CSS

.escala
{ ancho: 100px;
altura: 100px; fondo:
verde azulado;
transformar: escala (0.5, 1.3);
}

Este ejemplo escalará el div a 100 px * 0,5 = 50 px en el eje X y a 100 px * 1,3 = 130 px en el eje Y.

El centro de la transformación está en el centro del div, 50 % desde la izquierda y 50 % desde arriba.

Sección 28.3: Sesgo

HTML

<div class="sesgo"></div>

CSS

.sesgo
{ ancho: 100px;
altura: 100px; fondo:
verde azulado;
transformar: sesgar (20 grados, -30 grados);
}

Este ejemplo sesgará el div en 20 grados en el eje X y en -30 grados en el eje Y.

El centro de la transformación está en el centro del div, 50 % desde la izquierda y 50 % desde arriba.

Vea el resultado aquí.

Sección 28.4: Transformadas múltiples

Se pueden aplicar múltiples transformaciones a un elemento en una propiedad como esta:

transformar: rotar (15 grados) traducir X (200 px);

Esto rotará el elemento 15 grados en el sentido de las agujas del reloj y luego lo trasladará 200px a la derecha.

En las transformaciones encadenadas, el sistema de coordenadas se mueve con el elemento. Esto significa que la traslación no será horizontal
sino que en un eje rotará 15 grados en el sentido de las agujas del reloj como se muestra en la siguiente imagen:

GoalKicker.com – Notas CSS para profesionales 153

Machine Translated by Google

Cambiar el orden de las transformaciones cambiará la salida. El primer ejemplo será diferente a

transformar: traducirX(200px) rotar(15grados);

<div class="transformar"></div>

.transformar
{ transformar: rotar (15 grados) traducirX (200px);
}

Como se muestra en esta imagen:

Sección 28.5: Traducir

HTML

<div class="traducir"></div>

CSS

.translate
{ ancho: 100px;
altura: 100px;
fondo: verde azulado;
transformar: traducir (200px, 50%);

GoalKicker.com – Notas CSS para profesionales 154

Machine Translated by Google

Este ejemplo moverá el div 200 px en el eje X y 100 px * 50 % = 50 px en el eje Y.

También puede especificar traducciones en un solo eje.

En el eje X:

.translate
{ transformar: translateX(200px);
}

En el eje Y:

.traducir {
transformar: traducir Y (50%);
}

Sección 28.6: Transformar origen

Las transformaciones se realizan con respecto a un punto que está definido por la propiedad transform-origin .

La propiedad toma 2 valores: transform-origin: X Y;

En el siguiente ejemplo, el primer div (.tl) gira alrededor de la esquina superior izquierda con transform-origin: 0 0; y el segundo (.tr) se transforma
alrededor de su esquina superior derecha con transform-origin: 100% 0. La rotación se aplica al pasar el mouse :

HTML:

<div class="transformar origenl"></div> <div

class="transformar origen2"></div>

CSS:

.transform
{ pantalla: bloque en línea;
ancho: 200px; altura: 100px;
fondo: verde azulado;
transición: transformar 1s;

.origin1
{ transformar-origen: 0 0;
}

.origin2
{ transformar-origen: 100% 0;
}

.transformar: hover
{ transformar: rotar (30 grados);
}

El valor predeterminado para la propiedad transform-origin es 50% 50% , que es el centro del elemento.

GoalKicker.com – Notas CSS para profesionales 155

Machine Translated by Google

Capítulo 29: Transformaciones 3D

Sección 29.1: Puntero de la brújula o forma de aguja usando transformaciones

3D

CSS

div.aguja { margen:
100px; altura: 150px;
ancho: 150px;
transformar: rotar Y
(85 grados) rotar Z (45 grados); /* presentación */ background-
image: linear-gradient( arriba a la izquierda, #555 0%, #555
40%, #444 50%, #333 97%); box-shadow: recuadro 6px 6px 22px 8px #272727;

HTML

<div class='aguja'></div>

En el ejemplo anterior, se crea una forma de puntero de aguja o brújula mediante transformaciones 3D. Generalmente, cuando aplicamos la
transformación de rotación en un elemento, la rotación ocurre solo en el eje Z y, en el mejor de los casos, terminaremos solo con formas de
diamante. Pero cuando se agrega una transformación de rotación Y encima, el elemento se aprieta en el eje Y y, por lo tanto, termina
pareciéndose a una aguja. Cuanto mayor es la rotación del eje Y, más apretado se ve el elemento.

El resultado del ejemplo anterior sería una aguja apoyada en su punta. Para crear una aguja que descanse sobre su base, la rotación debe ser a lo
largo del eje X en lugar de a lo largo del eje Y. Por lo tanto , el valor de la propiedad de transformación tendría que ser algo como "rotateX(85deg)
"rotateZ(45deg);".

Este bolígrafo utiliza un enfoque similar para crear algo que se asemeje al logotipo de Safari o al dial de una brújula.

Captura de pantalla del elemento sin transformación:

Captura de pantalla del elemento con solo transformación 2D:

GoalKicker.com – Notas CSS para profesionales 156

Machine Translated by Google

Captura de pantalla del elemento con transformación 3D:

Sección 29.2: Efecto de texto 3D con sombra

HTML:

<div id="título">
<h1 contenido de datos="HOVER">HOVER</h1>
</div>

CSS:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{ position:absolute; arriba: 50%; izquierda: 50%; transformar: traducir (-50%, -50%);
perspectiva-origen: 50% 50%; perspectiva: 300px;

}
h1{ texto-alinear:centro;
tamaño de fuente:
12vmin; familia de fuentes: 'Open Sans', sans-
serif; color:rgba(0,0,0,0.8); altura de línea: 1em;
transformar: rotar Y (50 grados); perspectiva:
150px; perspectiva-origen:0% 50%;

GoalKicker.com – Notas CSS para profesionales 157

Machine Translated by Google

}
h1:después{ content:attr(datos-contenido);
posición:absoluta; izquierda:0;superior:0;
transformar-origen: 50% 100%;
transformar: rotar X (-90 grados);
color:#0099CC;

#título:antes{ contenido:'';
posición:absoluta; arriba:-150%;
izquierda:-25%; ancho: 180%;
altura: 328%; fondo:rgba(255,255,255,0.7);
transformar-origen: 0 100%; transformar:
traducir (-200 px) rotar (40 grados) sesgar X (35 grados); borde-radio:0 0 100% 0;

Ver ejemplo con efecto de desplazamiento adicional

En este ejemplo, el texto se transforma para que parezca que va a la pantalla lejos del usuario.

La sombra se transforma en consecuencia para que siga el texto. Como está hecho con un pseudo elemento y el atributo de datos ,
hereda las transformaciones de su padre (la etiqueta H1).

La "luz" blanca está hecha con un pseudo elemento en el elemento #title . Está sesgado y usa border-radius para la esquina redondeada.

Sección 29.3: cara posterior-visibilidad

La propiedad backface-visibility se relaciona con las transformaciones 3D.

Con las transformaciones 3D y la propiedad backface-visibility , puede rotar un elemento de modo que el frente original de un elemento ya
no mire hacia la pantalla.

GoalKicker.com – Notas CSS para profesionales 158

Machine Translated by Google

Por ejemplo, esto alejaría un elemento de la pantalla:

JSFDDLE

<div class="flip">Loren ipsum</div> <div

class="flip back">Lorem ipsum</div>

.flip { -
webkit-transform: rotar Y (180 grados);
-transformar moz : rotar Y (180 grados); -ms-
transformar: rotar Y (180 grados); -webkit-
backface-visibilidad: visible; -moz-backface-
visibilidad: visible; -ms-backface-visibilidad:
visible;

.flip.back { -
webkit-backface-visibility: oculto; -moz-
backface-visibility: oculto; -ms-backface-
visibilidad: oculto;
}

Firefox 10+ e IE 10+ admiten la visibilidad de la cara posterior sin un prefijo. Opera, Chrome, Safari, iOS y Android necesitan -webkit-backface-visibility.

Tiene 4 valores:

1. visible (predeterminado): el elemento siempre estará visible incluso cuando no esté frente a la pantalla. 2.
oculto : el elemento no es visible cuando no está frente a la pantalla. 3. heredar : la propiedad obtendrá su valor
de su elemento principal 4. initial : establece la propiedad en su valor predeterminado, que es visible

Sección 29.4: Cubo 3D

Las transformaciones 3D se pueden utilizar para crear muchas formas 3D. Aquí hay un ejemplo simple de cubo CSS 3D:

HTML:

<div clase="cubo">
<div clase="caracubo"></div> <div
clase="caracubo cara2"></div>
</div>

CSS:

cuerpo
{ perspectiva-origen: 50% 100%;
perspectiva: 1500px;
desbordamiento: oculto;

} .cube
{ posición: relativa;
fondo acolchado: 20%;
estilo de transformación:
preserve-3d; transforma-origen:
50% 100%; transformar: rotar Y (45 grados) rotar X (0);

} .caracubo {

GoalKicker.com – Notas CSS para profesionales 159

Machine Translated by Google

posición: absoluta;
superior: 0; izquierda:
40%; ancho: 20%; altura:
100%; margen: 0 automático;
estilo de transformación:
heredar; fondo: #C52329;
sombra de caja: recuadro 0 0 0 5px
#333; transforma-origen: 50% 50%;
transformar: rotarX(90grados); visibilidad de la
cara posterior: oculta;

} .face2
{ transformar-origen: 50% 50%;
transformar: rotar (90 grados) traducir X (100%) rotar Y (90 grados);

} .cubeFace:antes, .cubeFace:después {
contenido: '';
posición: absoluta; ancho:
100%; altura: 100%;
transformar-origen: 0 0;
fondo: heredar; box-shadow:
heredar; backface-visibilidad:
heredar;

} .cubeFace:antes { arriba:
100%; izquierda: 0;
transformar: rotarX
(-90 grados);

} .cubeFace:después
{ arriba: 0; izquierda:
100%; transformar:
rotar Y (90 grados);
}

Ver este ejemplo Se

agrega un estilo adicional en la demostración y se aplica una transformación al pasar el mouse para ver las 6 caras del cubo.

Cabe señalar que:

Se hacen 4 caras con pseudo elementos se

aplican transformaciones encadenadas

GoalKicker.com – Notas CSS para profesionales 160

Machine Translated by Google

Capítulo 30: Propiedad de filtro

Valor Descripción
desenfoque (x) Desenfoca la imagen en x píxeles.

Ilumina la imagen en cualquier valor por encima de 1,0 o 100%. Debajo de eso, la imagen será
brillo(x) oscurecido

Brinda más contraste a la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, el
contraste(x)
la imagen se saturará menos.

drop-shadow(h, v, x, y, z) Da a la imagen una sombra paralela. h y v pueden tener valores negativos. x, y y z son opcionales.

escala de grises Muestra la imagen en escala de grises, con un valor máximo de 1,0 o 100%.
(x) rotación de tono (x) Aplica una rotación de tono a la imagen.
invertir(x) Invierte el color de la imagen con un valor máximo de 1,0 o 100%.

opacidad(x) Establece cuán opaca/transparente es la imagen con un valor máximo de 1.0 o 100%.

Satura la imagen en cualquier valor por encima de 1,0 o 100%. Debajo de eso, la imagen comenzará a
saturar(x)
desaturar.

sepia(x) Convierte la imagen a sepia con un valor máximo de 1,0 o 100%.

Sección 30.1: Desenfoque

HTML

<img src='pato-donald.png' alt='Pato Donald' title='Pato Donald' />

CSS

imagen {
-filtro webkit: desenfoque (1px);
filtro: desenfoque (1px);
}

Resultado

Te dan ganas de frotarte las gafas.

Sección 30.2: Sombra paralela (utilice box-shadow en su lugar si

GoalKicker.com – Notas CSS para profesionales 161

Machine Translated by Google

posible)
HTML

<p>Mi sombra siempre me sigue.</p>

CSS

pag {
-webkit-filter: sombra paralela (10px 10px 1px verde); filtro:
sombra paralela (10px 10px 1px verde);
}

Resultado

Sección 30.3: Rotación de matiz

HTML

<img src='pato-donald.png' alt='Pato Donald' title='Pato Donald' />

CSS

img { -
webkit-filter: hue-rotate(120deg); filtro: matiz-
rotar (120 grados);
}

Resultado

Sección 30.4: Valores de filtros múltiples

Para usar varios filtros, separe cada valor con un espacio.

HTML

GoalKicker.com – Notas CSS para profesionales 162

Machine Translated by Google

<img src='pato-donald.png' alt='Pato Donald' title='Pato Donald' />

CSS

img { -
webkit-filter: brillo (200 %) escala de grises (100 %) sepia (100 %) invertir (100 %); filtro: brillo (200 %) escala
de grises (100 %) sepia (100 %) invertir (100 %);
}

Resultado

Sección 30.5: Color Invertido

HTML

<div></div>

CSS

div
{ ancho: 100px;
altura: 100px; color
de fondo: blanco; -filtro webkit:
invertir (100%); filtro: invertir (100%);

Resultado

Cambia de blanco a negro.

GoalKicker.com – Notas CSS para profesionales 163

Machine Translated by Google

Capítulo 31: Estilo del cursor

Sección 31.1: Cambiar el tipo de cursor
cursor: valor;

Ejemplos:

Valor Descripción
ninguno No se representa ningún cursor para el elemento

predeterminado automático. El navegador establece un cursor.

ayuda El cursor indica que hay ayuda disponible esperar El

cursor indica que el programa está ocupado mover El cursor indica

que se debe mover algo puntero El cursor es un puntero e indica un

enlace

Sección 31.2: puntero-eventos

La propiedad pointer-events permite controlar cómo los elementos HTML responden a los eventos táctiles o del mouse.

.deshabilitado {
puntero-eventos: ninguno;
}

En este ejemplo,

'ninguno' evita todas las opciones de clic, estado y cursor en el elemento HTML especificado [[1]]

Otros valores válidos para los elementos HTMl son:

auto;
heredar.

1. https://css-tricks.com/almanac/properties/p/pointer-events/

Otros recursos:

GoalKicker.com – Notas CSS para profesionales 164

Machine Translated by Google

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

https://davidwalsh.name/pointer-events

Sección 31.3: color de intercalación

La propiedad CSS caret-color especifica el color del símbolo de intercalación, el indicador visible del punto de inserción en un elemento
donde el texto y otro contenido se insertan mediante la escritura o la edición del usuario.

HTML

< identificación de entrada="ejemplo" />

CSS

#ejemplo
{ color de intercalación: rojo;
}

Recursos:

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

GoalKicker.com – Notas CSS para profesionales 165

Machine Translated by Google

Capítulo 32: sombra de caja

Parámetros Detalles

recuadro
de forma predeterminada, la sombra se trata como una sombra paralela. la palabra clave inserta dibuja la sombra dentro del
marco/borde.

desplazamiento-x la distancia horizontal

desplazamiento-y
la distancia vertical

radio de desenfoque
0 por defecto. El valor no puede ser negativo. cuanto mayor sea el valor, más grande y clara se vuelve la sombra.

0 por defecto. los valores positivos harán que la sombra se expanda. los valores negativos harán que el radio de propagación de
la sombra se reduzca.

color puede tener varias notaciones: una palabra clave de color, hexadecimal, rgb(), rgba(), hsl(), hsla()

Sección 32.1: sombra paralela solo desde abajo usando un

pseudo elemento
JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/2/

HTML

<div class="box_shadow"></div>

CSS

.caja_sombra {
color de fondo: #1C90F3; ancho:
200px; altura: 100px; margen:
50px;

.box_shadow:después de
{ contenido: ""; ancho:
190px; altura: 1px;
margen superior:
98px; margen
izquierdo: 5px;
pantalla: bloque;
posición: absoluta;
índice z: -1; -webkit-caja-
sombra: 0px 0px 8px 2px #444444; -moz-caja-sombra: 0px
0px 8px 2px #444444; sombra de cuadro: 0px 0px 8px
2px #444444;
}

GoalKicker.com – Notas CSS para profesionales 166

Machine Translated by Google

Sección 32.2: sombra paralela

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/

HTML

<div class="box_shadow"></div>

CSS

.box_shadow { -
webkit-caja-sombra: 0px 0px 10px -1px #444444; -moz-caja-
sombra: 0px 0px 10px -1px #444444; sombra de caja: 0px
0px 10px -1px #444444;
}

Sección 32.3: sombra paralela interna

HTML

<div class="box_shadow"></div>

CSS

.caja_sombra {
color de fondo: #1C90F3; ancho:
200px; altura: 100px; margen:
50px; -webkit-box-shadow: recuadro
0px 0px 10px 0px #444444; -moz-
box-shadow: inserción 0px 0px 10px 0px #444444; box-shadow:
recuadro 0px 0px 10px 0px #444444;

Resultado:

GoalKicker.com – Notas CSS para profesionales 167

Machine Translated by Google

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/1/

Sección 32.4: múltiples sombras

JSFiddle: https://jsfiddle.net/UnsungHero97/80qod7aL/5/

HTML

<div class="box_shadow"></div>

CSS

.caja_sombra {
ancho: 100px;
altura: 100px;
margen: 100px;
sombra de la caja:
-52px -52px 0px 0px #f65314, 52px
-52px 0px 0px #7cbb00, -52px 52px
0px 0px #00a1f1, 52px 52px 0px 0px
#ffbb00;
}

GoalKicker.com – Notas CSS para profesionales 168

Machine Translated by Google

GoalKicker.com – Notas CSS para profesionales 169

Machine Translated by Google

Capítulo 33: Formas para flotadores

Parámetro Detalles

ninguna
Un valor de ninguno significa que el área flotante (el área que se usa para envolver contenido alrededor de un elemento flotante)
no se ve afectada. Este es el valor predeterminado/inicial.

Se refiere a uno entre recuadro(), círculo(), elipse() o polígono(). Usando una de estas funciones y sus valores básicos
de forma, se define la forma.

Se refiere a uno entre margin-box, border-box, padding-box, content-box. Cuando solo se proporciona <shape-box> (sin <basic-
caja de forma shape>), este cuadro es la forma. Cuando se usa junto con <basic-shape>, actúa como cuadro de referencia.

Cuando se proporciona una imagen como valor, la forma se calcula en función del canal alfa de la imagen especificada.
imagen

Sección 33.1: Forma exterior con forma básica – círculo()

Con la propiedad CSS de forma exterior , se pueden definir valores de forma para el área flotante de modo que el contenido en línea se ajuste
alrededor de la forma en lugar del cuadro flotante.

CSS

img:nth-of-type(1) {
forma exterior: círculo (80px al 50% 50%);
flotador: izquierda; ancho: 200px;

} img:nth-of-type(2) {
forma exterior: círculo (80px al 50% 50%);
flotador: derecho; ancho: 200px;

}p
{ texto-alinear: centro;
altura de línea: 30px; /* puramente para demostración */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg"> <img src="http://

images.clipartpanda.com/circle-clip-art-circlergb.jpg "> <p>Algunos párrafos cuyo contenido de
texto debe ajustarse de manera que siga la curva del círculo a ambos lados. Y luego hay un texto de relleno solo para hacer que
el texto sea lo suficientemente largo.
Lorem Ipsum Dolor Siéntate Amet....</p>

En el ejemplo anterior, ambas imágenes son en realidad imágenes cuadradas y cuando el texto se coloca sin la propiedad de forma exterior , no
fluirá alrededor del círculo en ninguno de los lados. Fluirá alrededor del cuadro contenedor de la imagen solamente. Con shape-outside, el área flotante
se redefine como un círculo y se hace que el contenido fluya alrededor de este círculo imaginario que se crea usando shape-outside.

El círculo imaginario que se usa para redefinir el área flotante es un círculo con un radio de 80 px dibujado desde el punto medio central del cuadro
de referencia de la imagen.

A continuación hay un par de capturas de pantalla para ilustrar cómo se envolvería el contenido cuando se usa la forma externa y cuando no se usa.

Salida con forma exterior

GoalKicker.com – Notas CSS para profesionales 170

Machine Translated by Google

Salida sin forma exterior

Sección 33.2: Margen de forma

La propiedad CSS shape-margin agrega un margen a shape-outside.

CSS

img:nth-of-type(1) {
forma exterior: círculo (80px al 50% 50%); margen
de forma: 10px; flotador: izquierda; ancho: 200px;

} img:nth-of-type(2) {
forma exterior: círculo (80px al 50% 50%); margen
de forma: 10px; flotador: derecha; ancho: 200px;

}p
{ texto-alinear: centro;
altura de línea: 30px; /* puramente para demostración */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg"> <img src="http://

images.clipartpanda.com/circle-clip-art-circlergb.jpg "> <p>Algunos párrafos cuyo contenido de
texto debe ajustarse de manera que siga la curva del círculo a ambos lados. Y luego hay un texto de relleno solo para hacer que
el texto sea lo suficientemente largo.
Lorem Ipsum Dolor Siéntate Amet....</p>

En este ejemplo, se agrega un margen de 10 px alrededor de la forma usando el margen de forma. Esto crea un poco más de espacio entre el
círculo imaginario que define el área flotante y el contenido real que fluye.

Producción:

GoalKicker.com – Notas CSS para profesionales 171

Machine Translated by Google

GoalKicker.com – Notas CSS para profesionales 172

Machine Translated by Google

Capítulo 34: Estilos de lista

Valor Descripción
list-style-type list- del tipo de marcador de elemento de lista.

style-position especifica dónde colocar el marcador list-style-image

especifica el tipo de marcador de elemento de lista initial establece esta

propiedad a su valor predeterminado hereda esta propiedad de su
elemento principal
heredar

Sección 34.1: Posición de la viñeta

Una lista consta de elementos <li> dentro de un elemento contenedor (<ul> o <ol>). Tanto los elementos de la lista como el contenedor pueden tener
márgenes y rellenos que influyen en la posición exacta del contenido del elemento de la lista en el documento. Los valores predeterminados para el margen
y el relleno pueden ser diferentes para cada navegador. Para obtener el mismo diseño en todos los navegadores, estos deben configurarse específicamente.

Cada elemento de la lista obtiene un 'cuadro de marcador', que contiene el marcador de viñeta. Este cuadro se puede colocar dentro o fuera del cuadro del
elemento de lista.

posición-estilo-lista: dentro;

coloca la viñeta dentro del elemento <li> , empujando el contenido hacia la derecha según sea necesario.

posición-estilo-lista: fuera;

coloca la viñeta a la izquierda del elemento <li> . Si no hay suficiente espacio en el relleno del elemento contenedor, el cuadro de marcador se extenderá
hacia la izquierda incluso si se cae de la página.

Mostrando el resultado del posicionamiento interior y exterior : jsfiddle

Sección 34.2: Eliminación de viñetas/números

A veces, una lista simplemente no debe mostrar viñetas o números. En ese caso, recuerde especificar el margen y el relleno.

<ul>
<li>primer elemento</li>
<li>segundo elemento</li>
</ul>

CSS

ul
{ tipo de estilo de lista: ninguno;

} li
{ margen: 0;
relleno: 0;
}

Sección 34.3: Tipo de Viñeta o Numeración

Específico para etiquetas <li> dentro de una lista desordenada (<ul>):

GoalKicker.com – Notas CSS para profesionales 173

Machine Translated by Google

estilo de lista: disco; / * Un círculo relleno (predeterminado) */

estilo de lista: círculo; / * Un círculo hueco */
estilo de lista: cuadrado; / * Un cuadrado relleno */
estilo de lista: '-'; / * cualquier cadena */

Específico para etiquetas <li> dentro de una lista ordenada (<ol>):

estilo de lista: decimal; / * Números decimales que comienzan con 1 (predeterminado) */

estilo de lista: cero decimal inicial;/* Números decimales rellenados con ceros iniciales (01, 02, 03, … 10) */
estilo de lista: bajo romano; estilo / * Números romanos en minúsculas (i., ii., iii., iv., ...) */
de lista: romano superior; tipo- / * Números romanos en mayúsculas (I., II., III., IV., ...) */
estilo-lista: griego inferior; tipo de estilo / * Letras romanas minúsculas (ÿ., ÿ., ÿ., ÿ., ...) */
de lista: alfa inferior; tipo-estilo-lista: latín / * Letras minúsculas (a., b., c., d., ...) */
inferior; tipo-estilo-lista: alfa-superior; tipo- / * Letras minúsculas (a., b., c., d., ...) */
estilo-lista: latín superior; / * Letras mayúsculas (A., B., C., D., ...) */
/ * Letras mayúsculas (A., B., C., D., ...) */

No específico:

estilo de lista: ninguno; / * Sin marcador de lista visible */

estilo de lista: heredar; / * Hereda del padre */

GoalKicker.com – Notas CSS para profesionales 174

Machine Translated by Google

Capítulo 35: Contadores

Parámetro Detalles

contranombre Este es el nombre del contador que debe crearse, incrementarse o imprimirse. Puede ser cualquier nombre personalizado
que desee el desarrollador.
Este entero es un valor opcional que, cuando se proporciona junto al nombre del contador, representará el valor
entero inicial del contador (en las propiedades de configuración de contador, restablecimiento de contador ) o el valor por
el cual se debe incrementar el contador (en incremento de contador).

Este es el valor inicial para las 3 propiedades contador-* . Cuando este valor se utiliza para el incremento del
ninguna contador, el valor de ninguno de los contadores se ve afectado. Cuando se usa para los otros dos, no se crea ningún
contador.

Esto especifica el estilo en el que se debe mostrar el valor del contador. Admite todos los valores admitidos por la
contra-estilo propiedad list-style-type . Si no se utiliza ninguno, el valor del contador no se imprime en absoluto.

Esto representa la cadena que debe colocarse entre los valores de dos niveles de contador diferentes conector-cadena
(como el "." en "2.1.1").

Sección 35.1: Aplicación de estilo de números romanos a la salida

del contador
CSS

cuerpo
{ contador-restablecer: elemento-contador;
}

.item
{ contador-incremento: item-counter;
}

.item:antes de {
content: counter(item-counter, upper-roman) ". "; /* al especificar el estilo romano superior como estilo, la salida sería en números
romanos */ }

HTML
<div class='item'> Número de artículo: 1</div>
<div class='item'> Número de artículo: 2</div>
<div class='item'> Número de artículo: 3</div>

En el ejemplo anterior, la salida del contador se mostraría como I, II, III (números romanos) en lugar de los habituales 1, 2, 3, ya que el
desarrollador especificó explícitamente el estilo del contador.

Sección 35.2: Numerar cada elemento usando CSS Counter

CSS

cuerpo
{ contador-restablecer: elemento-contador; /* crea el contador */

} .item
{ contador-incremento: item-counter; /* incrementa el contador cada vez que un elemento con clase "item"
se encuentra */ } .item-
header:before {

contenido: contador(elemento-contador) ". "; /* imprime el valor del contador antes del encabezado y
agregar un "." a eso */ }

GoalKicker.com – Notas CSS para profesionales 175

Machine Translated by Google

/ * solo para demostración */

.item
{ borde: 1px sólido; altura:
100px; margen inferior:
10px;

} .item-header
{ borde inferior: 1px sólido; altura:
40px; altura de línea: 40px; relleno:
5px;

} .elemento-contenido
{ relleno: 8px;
}

HTML
<div class='elemento'>
<div class='item-header'>Encabezado del artículo 1 </div> <div
class='item-content'>Lorem Ipsum Dolor Sit Amet....</div> </div> <div class='item '> <div
class='item-header'>Encabezado del artículo 2 </div> <div class='item-content'>Lorem Ipsum
Dolor Sit Amet....</div>

</div>
<div class='item'> <div
class='item-header'>Encabezado del artículo 3 </div> <div
class='item-content'>Lorem Ipsum Dolor Sit Amet....</ div>
</div>

El ejemplo anterior enumera cada "elemento" en la página y agrega el número del elemento antes de su encabezado (usando la propiedad de
contenido del elemento .item-header :before pseudo). Una demostración en vivo de este código está disponible aquí.

Sección 35.3: Implementación de numeración multinivel usando

contadores CSS
CSS

ul
{ estilo de lista: ninguno;
contador-restablecimiento: lista-elemento-número; /* el contador de anidamiento automático ya que el nombre es el mismo para todos los niveles */

} li
{ contador-incremento: lista-elemento-número;

} li:before
{ content: counters(list-item-number, ".") " "; /* el uso de la función counters() significa el valor de
los contadores en todos los niveles superiores se combinan antes de imprimir */ }

HTML
<ul>
<li>Nivel 1 <ul>
<li>Nivel 1.1

<ul>
<li>Nivel 1.1.1</li> </ul> </
li> </ul>

GoalKicker.com – Notas CSS para profesionales 176

Machine Translated by Google

</li>
<li>Nivel 2 <ul>
<li>Nivel 2.1

<ul>
<li>Nivel 2.1.1</li> <li>Nivel
2.1.2</li> </ul> </li> </ul> </
li> <li>Nivel 3</li> </ul>

Lo anterior es un ejemplo de numeración multinivel usando contadores CSS. Hace uso del concepto de anidamiento automático de los
contadores. El anidamiento automático es un concepto en el que si un elemento ya tiene un contador con el nombre dado pero tiene que
crear otro, lo crea como un elemento secundario del contador existente. Aquí, el segundo nivel ul ya hereda el contador de número de
elemento de lista de su padre, pero luego tiene que crear su propio número de elemento de lista (para sus hijos li) y, por lo tanto, crea el
número de elemento de lista [1] (contador para segundo nivel) y lo anida bajo list-item-number[0] (contador para primer nivel). Por lo tanto,
logra la numeración de varios niveles.

La salida se imprime utilizando la función counters() en lugar de la función counter() porque la función counters() está diseñada para
prefijar el valor de todos los contadores de nivel superior (principal) al imprimir la salida.

GoalKicker.com – Notas CSS para profesionales 177

Machine Translated by Google

Capítulo 36: Funciones

Sección 36.1: función calc()
Acepta una expresión matemática y devuelve un valor numérico.

Es especialmente útil cuando se trabaja con diferentes tipos de unidades (p. ej. restando un valor de px de un porcentaje) para calcular
el valor de un atributo.

Se pueden usar los operadores +, -, / y * , y se pueden agregar paréntesis para especificar el orden de las operaciones si
necesario.

Usa calc() para calcular el ancho de un elemento div:

#div1
{ posición: absoluta;
izquierda: 50px; ancho:
calc(100% - 100px); borde: 1px
negro sólido; color de fondo:
amarillo; relleno: 5px; alineación
de texto: centro;

Use calc() para determinar la posición de una imagen de fondo:

posición de fondo: calc(50% + 17px) calc(50% + 10px), 50% 50%;

Usa calc() para determinar la altura de un elemento:

altura: calc(100% - 20px);

Sección 36.2: función attr()

Devuelve el valor de un atributo del elemento seleccionado.

A continuación se muestra un elemento blockquote que contiene un carácter dentro de un atributo data-* que CSS puede usar (por
ejemplo, dentro del pseudoelemento ::before y ::after ) usando esta función.

<blockquote data-mark='"'></blockquote>

En el siguiente bloque CSS, el carácter se agrega antes y después del texto dentro del elemento:

blockquote[data-mark]::antes,
blockquote[data-mark]::after { content:
attr(data-mark);
}

Sección 36.3: función var()

La función var() permite acceder a las variables CSS.

/ * establece una variable

*/ :root {

GoalKicker.com – Notas CSS para profesionales 178

Machine Translated by Google

--color primario: azul;

}

/ * variable de acceso */ selector

{ color: var(--primary-color);

Esta característica esta actualmente en desarrollo. Visita caniuse.com para obtener la compatibilidad con el navegador más reciente.

Sección 36.4: función radial-gradient()

Crea una imagen que representa un degradado de colores que irradian desde el centro del degradado

radial-gradiente(rojo, naranja, amarillo) /*Un degradado que sale del medio del degradado, rojo en el centro, luego naranja,
hasta que finalmente es amarillo en los bordes*/

Sección 36.5: función gradiente lineal()

Crea una imagen que representa un degradado lineal de colores.

gradiente lineal ( 0 grados, rojo, amarillo 50%, azul);

Esto crea un degradado que va de abajo hacia arriba, con colores que comienzan en rojo, luego en amarillo al 50 % y terminan en azul.

GoalKicker.com – Notas CSS para profesionales 179

Machine Translated by Google

Capítulo 37: Propiedades personalizadas (variables)

Las variables CSS permiten a los autores crear valores reutilizables que se pueden usar en un documento CSS.

Por ejemplo, es común en CSS reutilizar un solo color en un documento. Antes de las variables CSS, esto significaba reutilizar el mismo valor de color

muchas veces en un documento. Con las variables CSS, el valor del color se puede asignar a una variable y hacer referencia en varios lugares. Esto facilita el

cambio de valores y es más semántico que el uso de valores CSS tradicionales.

Sección 37.1: Color variable

:raíz { --
rojo: #b00; --azul:
#4679bd; --gris: #ddd;

}
.Bx1
{ color: var(--rojo); fondo:
var(--gris); borde: 1px solid var(--
red);
}

Sección 37.2: Dimensiones Variables

:raíz {
--W200: 200 píxeles ;
--W10: 10 píxeles;
}
.Bx2
{ ancho: var(--W200); altura:
var(--W200); margen: var(--
W10);
}

Sección 37.3: Cascada Variable

Las variables CSS se conectan en cascada de la misma manera que otras propiedades y se pueden reformular de forma segura.

Puede definir variables varias veces y solo la definición con la mayor especificidad se aplicará al elemento seleccionado.

Asumiendo este HTML:

<a class="button">Botón verde</a> <a class="button

button_red">Botón rojo</a> <a class="button"> Botón sobrevolado
</a>

Podemos escribir este CSS:

.botón { --
color: verde;
acolchado: 0,5 rem;
borde: 1px var sólido (--color); color: var(--
color);
}

GoalKicker.com – Notas CSS para profesionales 180

Machine Translated by Google

.button: hover { --
color: azul;
}

.boton_rojo {
--color: rojo;
}

Y obtener este resultado:

Sección 37.4: Válido/Inválido

Nombrar Al nombrar variables CSS, solo contiene letras y guiones, al igual que otras propiedades CSS (p. ej., altura de línea, -moz-box-sizing),
pero debe comenzar con guiones dobles (--)

//Estos son nombres de variables no válidos

--123color: blue; --#color: rojo; --bg_color: amarillo --
$ancho: 100px;

//Nombres de variables válidos --

color: rojo; --bg-color: amarillo --
ancho: 100px ;

Las variables CSS distinguen entre mayúsculas y minúsculas.

/ * Los nombres de variables a continuación son todas variables diferentes */ --pcolor: ;

--Pcolor: ; --
pColor: ;

Vacío contra espacio

/ * Inválido */ --
color:;

/ * Válido */ --
color: ; /* se asigna espacio */

concatenaciones

/ * Inválido: CSS no admite la concatenación*/ .logo{ --logo-url: 'logo';

fondo: url('activos/img/' var(--logo-url) '.png');

/ * Inválido: error de CSS */ .logo{ --

logo-url: 'assets/img/logo.png';
fondo: url(var(--logo-url));

GoalKicker.com – Notas CSS para profesionales 181

Machine Translated by Google
/ * Válido
*/ .logo{ --logo-
url: url('assets/img/logo.png'); fondo: var(--logotipo-url);

Cuidado al usar Unidades

/ * Inválido */ --
ancho: 10; ancho:
var(--ancho)px;

/ * Válido */ --
width: 10px; ancho:
var(--ancho);

/ * Válido */ --
ancho: 10;
ancho: calc(1px * var(--ancho)); /* multiplicar por 1 unidad para convertir */ ancho: calc(1em * var(--
ancho));

Sección 37.5: Con consultas de medios

Puede restablecer las variables dentro de las consultas de medios y hacer que esos nuevos valores caigan en cascada donde sea que se usen,
algo que no es posible con las variables de preprocesador.

Aquí, una consulta de medios cambia las variables utilizadas para configurar una cuadrícula muy simple:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:raíz{ --
ancho: 25%; --
content: 'Esto es escritorio';

} Pantalla @media only y (ancho máximo: 767px){ :root{ --

width:50%; --content: 'Esto es móvil';

} Pantalla @media only y (ancho máximo: 480px){ :root{ --

width:100%;

}
}

div{ ancho: calc(var(--ancho) - 20px); altura: 100px;

} div:antes{
contenido: var(--contenido);

GoalKicker.com – Notas CSS para profesionales 182

Machine Translated by Google

/ * Otros estilos */ body

{ padding: 10px;

div{ pantalla: flexionar;

alinear elementos: centro;
justificar-contenido: centro;
fuente-peso:negrita; flotador
izquierdo; margen: 10px; borde:
4px negro sólido; fondo: rojo;

Puede intentar cambiar el tamaño de la ventana en esta demostración de CodePen

Aquí hay una captura de pantalla animada del cambio de tamaño en acción:

GoalKicker.com – Notas CSS para profesionales 183

Machine Translated by Google

Capítulo 38: Formas de un solo elemento

Sección 38.1: Trapezoide
Un trapezoide puede estar formado por un elemento de bloque con altura cero (altura de 0px), un ancho mayor que cero y un
borde, que es transparente excepto por un lado:

HTML:

<div class="trapezoidal"></div>

CSS:

.trapezoidal
{ ancho: 50px;
altura: 0;
borde izquierdo: 50px sólido transparente;
borde derecho: 50px sólido transparente; borde
inferior: 100 px negro sólido ;
}

Al cambiar los lados del borde, se puede ajustar la orientación del trapezoide.

Sección 38.2: Triángulos

Para crear un triángulo CSS, defina un elemento con un ancho y alto de 0 píxeles. La forma del triángulo se formará utilizando las
propiedades del borde. Para un elemento con 0 altura y ancho, los 4 bordes (superior, derecho, inferior, izquierdo) forman cada uno un
triángulo. Aquí hay un elemento con 0 alto/ancho y 4 bordes de diferentes colores.

Al establecer algunos bordes en transparentes y otros en un color, podemos crear varios triángulos. Por ejemplo, en el triángulo hacia
arriba, establecemos el borde inferior en el color deseado, luego establecemos los bordes izquierdo y derecho en transparentes. Aquí hay
una imagen con los bordes izquierdo y derecho ligeramente sombreados para mostrar cómo se forma el triángulo.

GoalKicker.com – Notas CSS para profesionales 184

Machine Translated by Google

Las dimensiones del triángulo se pueden modificar cambiando los diferentes anchos de los bordes: más alto, más corto, torcido, etc.

Todos los ejemplos a continuación muestran un triángulo de 50x50 píxeles.

Triángulo - Apuntando hacia arriba

<div class="triángulo-arriba"></div>

.triángulo arriba
{ ancho: 0;
altura: 0; borde
izquierdo: 25px sólido transparente; borde
derecho: 25px sólido transparente; borde
inferior: 50px rgb sólido (246, 156, 85);
}

Triángulo - Apuntando hacia abajo

<div class="triángulo-abajo"></div>

.triángulo hacia
abajo { ancho: 0;
altura: 0; borde
izquierdo: 25px sólido transparente; borde
derecho: 25px sólido transparente; borde
superior: 50px rgb sólido (246, 156, 85);
}

Triángulo - Apuntando a la derecha

GoalKicker.com – Notas CSS para profesionales 185

Machine Translated by Google

<div class="triángulo-derecho"></div>

.triángulo-derecho
{ ancho: 0; altura: 0;
borde superior: 25px
sólido transparente; borde inferior: 25px sólido
transparente; borde izquierdo: 50px rgb sólido (246,
156, 85);
}

Triángulo - Apuntando a la izquierda

<div class="triángulo-izquierda"></div>

.triángulo-izquierda
{ ancho: 0; altura: 0;
borde superior:
25px sólido transparente; borde inferior: 25px
sólido transparente; borde derecho: 50px rgb sólido
(246, 156, 85);
}

Triángulo: apuntando hacia arriba/a la derecha

<div class="triángulo-arriba-a-la-derecha"></div>

.triángulo arriba a la derecha

{ ancho: 0; altura: 0; borde
superior: 50px rgb sólido
(246, 156, 85); borde izquierdo: 50px sólido transparente;

Triángulo: apuntando hacia arriba/izquierda

<div class="triángulo-arriba-izquierda"></div>

.triángulo-arriba-izquierda {

GoalKicker.com – Notas CSS para profesionales 186

Machine Translated by Google

ancho: 0;
altura: 0;
borde superior: 50px rgb sólido (246, 156, 85); borde
derecho: 50px sólido transparente;
}

Triángulo: apuntando hacia abajo/derecha

<div class="triángulo-abajo-derecha"></div>

.triángulo-abajo-derecha { ancho:
0; altura: 0; borde inferior:
50px rgb sólido (246, 156,
85); borde izquierdo: 50px sólido transparente;

Triángulo: apuntando hacia abajo/izquierda

<div class="triángulo-abajo-izquierda"></div>

.triángulo-abajo-izquierda
{ ancho: 0; altura: 0; borde
inferior: 50px rgb sólido
(246, 156, 85); borde derecho: 50px sólido transparente;

Sección 38.3: Círculos y Elipses

Circulo

Para crear un círculo, defina un elemento con el mismo ancho y alto (un cuadrado) y luego establezca la propiedad border-radius de este elemento en

50%.

HTML

GoalKicker.com – Notas CSS para profesionales 187

Machine Translated by Google

<div clase="círculo"></div>

CSS

.círculo
{ ancho: 50px;
altura: 50px;
fondo: rgb (246, 156, 85); borde-radio: 50%;

Elipse

Una elipse es similar a un círculo, pero con diferentes valores de ancho y alto.

HTML

<div class="oval"></div>

CSS

.oval
{ ancho: 50px;
altura: 80px;
fondo: rgb (246, 156, 85); borde-radio: 50%;

Sección 38.4: Ráfagas

Un estallido es similar a una estrella pero con las puntas extendiéndose a menos distancia del cuerpo. Piense en una forma de explosión como un
cuadrado con cuadrados adicionales, ligeramente rotados, en capas en la parte superior.

Los cuadrados adicionales se crean utilizando los pseudoelementos ::before y ::after .

Ráfaga de 8 puntos

Una explosión de 8 puntos son cuadrados de 2 capas. El cuadrado inferior es el elemento en sí, el cuadrado adicional se crea usando el pseudo-
elemento :before . La parte inferior se gira 20°, el cuadrado superior se gira 135°.

<div class="burst-8"></div>

.burst-8
{ fondo: rgb(246, 156, 85); ancho: 40px;

GoalKicker.com – Notas CSS para profesionales 188

Machine Translated by Google

altura: 40px;
posición: relativa; alineación
de texto: centro; -ms-
transform: rotar (20 grados); transformar:
rotar (20eg);
}

.burst-8::before { contenido:
""; posición: absoluta;
superior: 0; izquierda: 0;
altura: 40px; ancho: 40px;
fondo: rgb (246, 156, 85);
-ms-transform: rotar (135
grados); transformar: rotar
(135 grados);

Ráfaga de 12 puntos

Una explosión de 12 puntos son cuadrados de 3 capas. El cuadrado inferior es el elemento en sí, los cuadrados adicionales se crean usando los pseudo-

elementos :before y :after . La parte inferior se gira 0°, el siguiente cuadrado se gira 30° y la parte superior se gira 60°.

<div class="burst-12"></div>

.burst-12
{ ancho: 40px;
altura: 40px;
posición: relativa; alineación
de texto: centro; fondo: rgb
(246, 156, 85);
}

.ráfaga-12::antes, .ráfaga-12::después {
contenido: "";
posición: absoluta; superior:
0; izquierda: 0; altura: 40px;
ancho: 40px; fondo: rgb
(246, 156, 85);

.burst-12::before { -ms-
transform: rotar (30 grados); transformar:
rotar (30 grados);
}

.burst-12::después { -ms-
transform: rotar (60 grados); transformar:
rotar (60 grados);

GoalKicker.com – Notas CSS para profesionales 189

Machine Translated by Google

Sección 38.5: Cuadrado

Para crear un cuadrado, defina un elemento con ancho y alto. En el siguiente ejemplo, tenemos un elemento con un ancho y un alto
de 100 píxeles cada uno.

<div clase="cuadrado"></div>

.cuadrado
{ ancho: 100px;
altura: 100px;
fondo: rgb (246, 156, 85);
}

Sección 38.6: Cubo

Este ejemplo muestra cómo crear un cubo utilizando los métodos de transformación 2D skewX() y skewY() en pseudoelementos.

HTML:

<div clase="cubo"></div>

CSS:

.cubo
{ fondo: #dc2e2e; ancho:
100px; altura: 100px;
posición: relativa; margen:
50px;

.cubo::antes
{ contenido: '';

GoalKicker.com – Notas CSS para profesionales 190

Machine Translated by Google

pantalla: bloque en línea;

fondo: #f15757; ancho: 100px;
altura: 20px; transformar:
skewX(-40deg); posición:
absoluta; arriba: -20px; izquierda:
8px;

.cubo::después
{ contenido: '';
pantalla: bloque en línea;
fondo: #9e1515; ancho: 16px;
altura: 100px; transformar:
sesgado Y (-50 grados);
posición: absoluta; arriba: -10px;
izquierda: 100%;

Ver demostración

Sección 38.7: Pirámide

Este ejemplo muestra cómo crear una pirámide usando bordes y métodos de transformación 2D skewY() y giratorio( ) en pseudo
elementos.

HTML:

<div class="pirámide"></div>

CSS:

.pirámide
{ ancho: 100px;
altura: 200px;
posición: relativa; margen:
50px;
}

.piramide::antes,.piramide::despues {
contenido: '';
pantalla: bloque en línea;
ancho: 0; altura: 0; borde: 50px
sólido;

GoalKicker.com – Notas CSS para profesionales 191

Machine Translated by Google

posición: absoluta;
}

.piramide::antes de {
border-color: transparente transparente #ff5656 transparente; transformar: scaleY(2)
skewY(-40deg) rotar(45deg);
}

.pyramid::after { border-
color: transparente transparente #d64444 transparente; transformar: scaleY(2)
skewY(40deg) rotar(-45deg);
}

GoalKicker.com – Notas CSS para profesionales 192

Machine Translated by Google

Capítulo 39: Columnas

Sección 39.1: Ejemplo simple (recuento de columnas)
El diseño de varias columnas de CSS facilita la creación de varias columnas de texto.

Código

<div id="multi-columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui oficia deserunt mollit anim id est laborum</div>

.multi-columnas { -
moz-column-count: 2;
-webkit-column-count: 2;
recuento de columnas: 2;
}

Resultado

Sección 39.2: Ancho de columna

La propiedad de ancho de columna establece el ancho mínimo de columna. Si el recuento de columnas no está definido, el navegador creará tantas columnas como quepan

en el ancho disponible.

Código:

<div id="varias columnas">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui oficia deserunt mollit anim id est laborum

GoalKicker.com – Notas CSS para profesionales 193

Machine Translated by Google

</div>

.multi-columnas { -moz-
columna-ancho: 100px; -webkit-
columna-ancho: 100px; ancho de
columna: 100px;
}

Resultado

GoalKicker.com – Notas CSS para profesionales 194

Machine Translated by Google

Capítulo 40: Múltiples columnas

CSS permite definir que los contenidos de los elementos se envuelvan en múltiples columnas con espacios y reglas entre ellos.

Sección 40.1: Crear varias columnas

<div clase="contenido">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. </div>

CSS

.content { -
webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-
count: 3; /* Firefox */ recuento de columnas: 3; }

Sección 40.2: Ejemplo básico

Considere el siguiente marcado HTML:

<sección>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> <p> Stet clita kasd
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua . At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.</p> </section>

Con el siguiente CSS aplicado, el contenido se divide en tres columnas separadas por una regla de columna gris de dos píxeles.

sección
{ columnas:
3; espacio entre
columnas : 40px; columna-regla: 2px gris sólido;
}

Vea una muestra en vivo de esto en JSFiddle.

GoalKicker.com – Notas CSS para profesionales 195

Machine Translated by Google

Capítulo 41: Diseño de bloque en línea

Sección 41.1: Barra de navegación justificada
La barra de navegación (menú) justificada horizontalmente tiene algunos elementos que deben justificarse. El primer elemento (izquierda) no tiene
margen izquierdo dentro del contenedor, el último elemento (derecha) no tiene margen derecho dentro del contenedor. La distancia entre los
elementos es igual, independientemente del ancho del elemento individual.

HTML
<navegación>

<ul>
<li>abc</li>
<li>abcdefghijkl</li>
<li>abcdef</li>
</ul>
</nav>

CSS

navegación { ancho:
100%; altura de línea: 1,4 em;

} ul
{ estilo de lista: ninguno;
pantalla: bloque;
ancho: 100%; margen:
0; relleno: 0; alineación
de texto: justificar;
margen inferior: -1.4em;

} ul:después
{ contenido: "";
pantalla: bloque en línea;
ancho: 100%;

} li
{ pantalla: bloque en línea;
}

notas

Las etiquetas nav, ul y li se eligieron por su significado semántico de 'una lista de elementos de navegación (menú)'. Por supuesto, también
se pueden utilizar otras etiquetas.
El pseudo-elemento :after causa una 'línea' extra en el ul y por lo tanto una altura vacía extra de este bloque, empujando hacia abajo
otro contenido. Esto se resuelve con el margen inferior negativo, que debe tener la misma magnitud que la altura de la línea (pero
negativa).
Si la página se vuelve demasiado estrecha para que quepan todos los elementos, los elementos se dividirán en una nueva línea
(comenzando desde la derecha) y se justificarán en esta línea. La altura total del menú crecerá según sea necesario.

GoalKicker.com – Notas CSS para profesionales 196

Machine Translated by Google

Capítulo 42: Herencia

Sección 42.1: Herencia automática
La herencia es un mecanismo fundamental de CSS mediante el cual los valores calculados de algunas propiedades de un elemento se
aplican a sus hijos. Esto es particularmente útil cuando desea establecer un estilo global para sus elementos en lugar de tener que
establecer dichas propiedades para todos y cada uno de los elementos de su marcado.

Las propiedades comunes que se heredan automáticamente son: fuente, color, alineación de texto, altura de línea.

Supongamos la siguiente hoja de estilo:

#miContenedor
{ color: rojo;
relleno: 5px;
}

Esto aplicará color: rojo no solo al elemento <div> sino también a los elementos <h3> y <p> . Sin embargo, debido a la naturaleza del
relleno , su valor no se heredará a esos elementos.

<div id="myContainer">
<h3>Algún encabezado</
h3> <p>Algún párrafo</p> </
div>

Artículo 42.2: Sucesión forzosa

Algunas propiedades no se heredan automáticamente de un elemento a sus hijos. Esto se debe a que normalmente se desea
que esas propiedades sean exclusivas del elemento (o selección de elementos) al que se aplica la propiedad. Tales propiedades
comunes son margen, relleno, fondo, pantalla, etc.

Sin embargo, a veces se desea la herencia de todos modos. Para lograr esto, podemos aplicar el valor de herencia a la propiedad que se
debe heredar. El valor heredado se puede aplicar a cualquier propiedad CSS y cualquier elemento HTML.

Supongamos la siguiente hoja de estilo:

#miContenedor
{ color: rojo;
relleno: 5px;

} #miContenedor p {
relleno: heredar;
}

Esto aplicará color: rojo a los elementos <h3> y <p> debido a la naturaleza de herencia de la propiedad de color .
Sin embargo, el elemento <p> también heredará el valor de relleno de su padre porque así se especificó.

<div id="myContainer">
<h3>Algún encabezado</
h3> <p>Algún párrafo</p>
</div>

GoalKicker.com – Notas CSS para profesionales 197

Machine Translated by Google

Capítulo 43: Sprites de imágenes CSS

Sección 43.1: Una Implementación Básica

¿Qué es un sprite de imagen?

Un sprite de imagen es un activo único ubicado dentro de una hoja de sprite de imagen. Una hoja de sprites de imagen es un archivo de
imagen que contiene más de un activo que se puede extraer de él.

Por ejemplo:

La imagen de arriba es una hoja de sprites de imagen, y cada una de esas estrellas es un sprite dentro de la hoja de sprites. Estas hojas
de sprites son útiles porque mejoran el rendimiento al reducir la cantidad de solicitudes HTTP que un navegador podría tener que hacer.

Entonces, ¿cómo implementar uno? Aquí hay un código de ejemplo.

HTML

<div clase="icono icono1"></div>

<div clase="icono icono2"></div>
<div clase="icono icono3"></div>

CSS

.icon
{ fondo: url(“iconos-sprite.png”); pantalla:
bloque en línea; altura: 20px; ancho: 20px;

} .icon1
{ posición de fondo: 0px 0px;

} .icon2
{ posición de fondo: -20px 0px;

} .icon3
{ posición de fondo: -40px 0px;
}

Al configurar el ancho y la altura del sprite y al usar la propiedad de posición de fondo en CSS (con un valor x e y), puede extraer fácilmente
sprites de una hoja de sprite usando CSS.

GoalKicker.com – Notas CSS para profesionales 198

Machine Translated by Google

Capítulo 44: Recorte y enmascaramiento

Parámetro Detalles

Una URL que puede apuntar a un elemento SVG en línea (o) un elemento SVG en un archivo externo que contiene la
clip-fuente
definición de la ruta del clip.

Se refiere a uno entre recuadro(), círculo(), elipse() o polígono(). Usando una de estas funciones se define la
forma básica ruta de recorte. Estas funciones de forma funcionan exactamente de la misma manera que lo hacen en Formas para
flotantes. Puede tener uno entre cuadro de contenido, cuadro de relleno, cuadro de borde, cuadro de margen, cuadro

de relleno, cuadro de trazo, cuadro de vista como valores. Cuando se proporciona sin ningún valor para <basic-
shape>, los bordes del cuadro correspondiente se utilizan como ruta de recorte. Cuando se usa con una <basic-
clip-geometry-box
shape>, actúa como el cuadro de referencia para la forma.

máscara-referencia Puede ser ninguno o una imagen o una URL de referencia a una fuente de imagen de máscara.

Esto especifica cómo se debe repetir o colocar en mosaico la máscara en los ejes X e Y. Los valores admitidos son
estilo de repetición
repetir-x, repetir-y, repetir, espacio, redondo, sin repetición.

Puede ser alfa o luminancia o automático e indica si la máscara debe tratarse como una máscara alfa o una máscara

modo máscara de luminancia. Si no se proporciona ningún valor y la máscara de referencia es una imagen directa, entonces se
consideraría una máscara alfa (o) si la máscara de referencia es una URL, entonces
se consideraría como máscara de luminancia.

Esto especifica la posición de cada capa de máscara y tiene un comportamiento similar a la propiedad de posición
posición de fondo . El valor se puede proporcionar en una sintaxis de 1 valor (como arriba, 10 %) o en una sintaxis de 2
valores (como arriba a la derecha, 50 % 50 %).

Esto especifica el cuadro al que se debe recortar la máscara (área de pintura de máscara) o el cuadro que se debe
usar como referencia para el origen de la máscara (área de posicionamiento de máscara) según la propiedad. La lista
caja de geometría de valores posibles son content-box, padding-box, border-box, margin-box, fill-box, stroke-box, view-box. La explicación
detallada de cómo funciona cada uno de esos valores está disponible en W3C Spec.

Esto representa el tamaño de cada capa de imagen de máscara y tiene la misma sintaxis que el tamaño de fondo. El
tamaño bg valor puede ser longitud o porcentaje o automático o cubrir o contener. La longitud, el porcentaje y el auto se pueden
proporcionar como un solo valor o como uno para cada eje.

Puede ser cualquiera entre sumar, restar, excluir, multiplicar por capa y define el tipo de operador de composición de
la operación de composición las
queespecificaciones
debe usarse paradelesta
W3C.capa con las que están debajo. La explicación detallada de cada valor está disponible en

Sección 44.1: Recorte y enmascaramiento: Resumen y diferencia

Con Clipping and Masking puede hacer que algunas partes específicas de los elementos sean transparentes u opacas. Ambos se pueden aplicar
a cualquier elemento HTML.

Recorte

Los clips son caminos vectoriales. Fuera de este camino el elemento será transparente, dentro es opaco. Por lo tanto, puede definir una propiedad
de ruta de recorte en los elementos. Todos los elementos gráficos que también existen en SVG se pueden usar aquí como una función para
definir la ruta. Los ejemplos son círculo(), polígono() o elipse().

GoalKicker.com – Notas CSS para profesionales 199

Machine Translated by Google

Ejemplo
clip-path: círculo (100 px en el centro);

El elemento solo será visible dentro de este círculo, que está ubicado en el centro del elemento y tiene un radio de 100 px.

Enmascaramiento

Las máscaras son similares a los clips, pero en lugar de definir una ruta, define una máscara que se coloca sobre el elemento. Puedes
imaginar esta máscara como una imagen que consiste principalmente en dos colores: blanco y negro.

Máscara de luminancia: el negro significa que la región es opaca y el blanco que es transparente, pero también hay un área gris que es
semitransparente, por lo que puede realizar transiciones suaves.

Máscara Alfa: Solo en las áreas transparentes de la máscara el elemento será opaco.

Esta imagen, por ejemplo, se puede utilizar como máscara de luminancia para hacer que un elemento tenga una transición muy suave
de derecha a izquierda y de opaco a transparente.

La propiedad de máscara le permite especificar el tipo de máscara y una imagen para usar como capa.

Ejemplo
máscara: url(masks.svg#rectangle) luminancia;

Un elemento llamado rectángulo definido en masks.svg se utilizará como máscara de luminancia en el elemento.

GoalKicker.com – Notas CSS para profesionales 200

Machine Translated by Google

Sección 44.2: Máscara simple que desvanece una imagen de sólida a

transparente
CSS

div
{ altura: 200px;
ancho: 200px;
fondo: url(http://lorepixel.com/200/200/nature/1); imagen de máscara:
degradado lineal (a la derecha, blanco, transparente);
}
HTML
<div></div>

En el ejemplo anterior hay un elemento con una imagen como fondo. La máscara que se aplica a la imagen (usando CSS) hace que parezca
que se desvanece de izquierda a derecha.

El enmascaramiento se logra mediante el uso de un degradado lineal que va de blanco (a la izquierda) a transparente (a la derecha) como
máscara. Como es una máscara alfa, la imagen se vuelve transparente donde la máscara es transparente.

Salida sin la máscara:

Salida con la máscara:

Nota: como se mencionó en los comentarios, el ejemplo anterior funcionaría en Chrome, Safari y Opera solo cuando se usa con el prefijo
-webkit . Este ejemplo (con un degradado lineal como imagen de máscara) aún no es compatible con Firefox.

Sección 44.3: Recorte (Círculo)

CSS:

div{

GoalKicker.com – Notas CSS para profesionales 201

Machine Translated by Google

ancho: 200px;
altura: 200px;
fondo: verde azulado;
ruta de recorte: círculo (30% a 50% 50%); /* consulte los comentarios antes del uso */
}

HTML

<div></div>

Este ejemplo muestra cómo recortar un div a un círculo. El elemento se recorta en un círculo cuyo radio es del 30 % en función de las
dimensiones del cuadro de referencia con su punto central en el centro del cuadro de referencia. Aquí, dado que no se proporciona
ningún <recuadro de geometría de clip> (en otras palabras, cuadro de referencia), el cuadro de borde del elemento se utilizará como
cuadro de referencia.

La forma del círculo debe tener un radio y un centro con coordenadas (x, y) :

círculo (radio en x y)

Ver ejemplo

Producción:

Sección 44.4: Recorte (Polígono)

CSS:

div{ ancho:200px;
altura: 200px;
fondo: verde azulado;
ruta de recorte: polígono (0 0, 0 100%, 100% 50%); /* consulte los comentarios antes del uso */
}

HTML:

<div></div>

En el ejemplo anterior, se utiliza un trazado de recorte poligonal para recortar el elemento cuadrado (200 x 200) en forma de triángulo.
La forma de salida es un triángulo porque la ruta comienza en (es decir, las primeras coordenadas están en) 0 0 , que es la esquina superior
izquierda del cuadro, luego va a 0 100% , que es la esquina inferior izquierda del cuadro. y finalmente a 100% 50% que no es más que el punto medio
derecho del cuadro. Estos caminos se cierran solos (es decir, el punto de inicio será el punto final) y, por lo tanto, la forma final es la de un triángulo.

Esto también se puede usar en un elemento con una imagen o un degradado como fondo.

Ver ejemplo

GoalKicker.com – Notas CSS para profesionales 202

Machine Translated by Google

Producción:

Sección 44.5: Uso de máscaras para cortar un agujero en el medio de

una imagen
CSS

div
{ ancho: 200px;
altura: 200px;
fondo: url (http://lorepixel.com/200/200/abstract/6); imagen de máscara:
gradiente radial (círculo del lado más alejado en el centro, transparente 49%, blanco 50%); /* controlar
comentarios antes de usar
*/ }
HTML

En el ejemplo anterior, se crea un círculo transparente en el centro usando un degradado radial y luego se usa como una máscara para producir
el efecto de un círculo recortado del centro de una imagen.

Imagen sin máscara:

Imagen con máscara:

GoalKicker.com – Notas CSS para profesionales 203

Machine Translated by Google

Sección 44.6: Uso de máscaras para crear imágenes con formas irregulares

CSS

div { /* comprobar comentarios antes de usar */

height: 200px; ancho: 400px; imagen de
fondo: url(http://lorepixel.com/400/200/nature/
4); imagen de máscara: degradado lineal ( arriba a la derecha, transparente
49,5 %, blanco 50,5 %), degradado lineal ( arriba a la izquierda, transparente 49,5 %, blanco 50,5 %), degradado lineal
(blanco, blanco);
tamaño de máscara: 75% 25%, 25% 25%, 100% 75%;
posición de la máscara: abajo a la izquierda, abajo a la derecha, arriba a la
izquierda; repetición de máscara: sin repetición;
}
HTML

<div></div>

En el ejemplo anterior, tres imágenes de gradiente lineal (que cuando se colocan en sus posiciones adecuadas cubrirían el 100 % x 100
% del tamaño del contenedor) se usan como máscaras para producir un corte triangular transparente en la parte inferior de la imagen.

Imagen sin la máscara:

Imagen con la máscara:

GoalKicker.com – Notas CSS para profesionales 204

Machine Translated by Google

GoalKicker.com – Notas CSS para profesionales 205

Machine Translated by Google

Capítulo 45: Fragmentación

Valor Descripción automático Predeterminado. Saltos de

página automáticos siempre Insertar siempre un salto de

página evitar Evitar salto de página (si es posible) dejado

Insertar saltos de página para que la página siguiente tenga el formato de página

izquierda derecha Insertar saltos de página para que la página siguiente tenga el formato de página

derecha inicial Establece esta propiedad en su valor predeterminado. heredar Hereda esta propiedad

de su elemento principal.

Sección 45.1: Salto de página de impresión de medios

@media print { p
{ página-salto-
dentro: evitar;

} h1
{ salto de página antes: siempre;

} h2
{ salto de página después de: evitar;
}
}

Este código hace 3 cosas:

evita un salto de página dentro de cualquier etiqueta p, lo que significa que un párrafo nunca se dividirá en dos páginas, si es posible.
fuerza un salto de página antes en todos los encabezados h1, lo que significa que antes de cada ocurrencia de h1, habrá un salto
de página. previene los saltos de página justo después de cualquier h2

GoalKicker.com – Notas CSS para profesionales 206

Machine Translated by Google

Capítulo 46: Modelo de objetos CSS (CSSOM)

Sección 46.1: Adición de una regla de imagen de fondo a través de CSSOM
Para agregar una regla de imagen de fondo a través de CSSOM, primero obtenga una referencia a las reglas de la primera hoja de estilo:

hoja de estilo var = document.styleSheets[0].cssRules;

Luego, obtenga una referencia al final de la hoja de estilo:

var fin = hoja de estilo.longitud - 1;

Finalmente, inserte una regla de imagen de fondo para el elemento del cuerpo al final de la hoja de estilo:

stylesheet.insertRule("cuerpo { imagen de fondo: url('http://

cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico'); }", end);

Sección 46.2: Introducción

El navegador identifica tokens de la hoja de estilo y los convierte en nodos que están vinculados a una estructura de árbol.
El mapa completo de todos los nodos con sus estilos asociados de una página sería el modelo de objetos CSS.

Para mostrar la página web, un navegador web sigue los siguientes pasos.

1. El navegador web examina su HTML y construye el DOM (Modelo de objeto de documento).

2. El navegador web examina su CSS y crea el CSSOM (modelo de objetos CSS).
3. El navegador web combina el DOM y el CSSOM para crear un árbol de representación. El navegador web muestra su
página web.

GoalKicker.com – Notas CSS para profesionales 207

Machine Translated by Google

Capítulo 47: Consultas de características

Parámetro Detalles
Evalúa verdadero si el navegador puede manejar la regla CSS. Los paréntesis alrededor de la regla son (propiedad:
valor) requeridos.

y Devuelve verdadero solo si las condiciones anterior y siguiente son verdaderas.

no Niega la siguiente condición.
o Devuelve verdadero si la condición anterior o la siguiente son verdaderas.
(...) Condiciones de los grupos

Sección 47.1: Uso básico de @supports

@supports (display: flex) { /*

Flexbox está disponible, así que utilícelo
*/ .my-container { display: flex;

}
}

En términos de sintaxis, @supports es muy similar a @media, pero en lugar de detectar el tamaño y la orientación de la pantalla,
@supports detectará si el navegador puede manejar una regla CSS determinada.

En lugar de hacer algo como @supports (flex), observe que la regla es @supports (display: flex).

Sección 47.2: Encadenamiento de detecciones de características

Para detectar varias funciones a la vez, utilice el operador y .

@supports (transformar: translateZ(1px)) y (estilo de transformación: preserve-3d) y (perspectiva: 1px) {

/ * Probablemente haga algunas cosas elegantes en 3D aquí */
}

También hay un operador or y un operador not :

@supports (pantalla: flex) o (pantalla: table-cell) {

/ * Se utilizará si el navegador admite flexbox o display: table-cell */

} @supports not (-webkit-transform: translate(0, 0, 0)) { /* *No* se utilizará

si el navegador admite -webkit-transform: translate(...) */
}

Para disfrutar de la mejor experiencia @supports , intente agrupar expresiones lógicas con paréntesis:

@supports ((display: block) y (zoom: 1)) o ((display: flex) y (no (display: table-cell))) o (transform: translateX(1px)) {

/ * ... */
}

Esto funcionará si el navegador

1. Admite visualización: bloque Y zoom: 1, o

2. Admite visualización: flex Y NO visualización: celda de
tabla, o 3. Admite transformación: translateX (1px).

GoalKicker.com – Notas CSS para profesionales 208

Machine Translated by Google

Capítulo 48: Contexto de apilamiento

Sección 48.1: Contexto de apilamiento
En este ejemplo, cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento e índice
z. La jerarquía de contextos de apilamiento se organiza de la siguiente manera:

Raíz
DIV #1
DIV #2
DIV #3
DIV #4
DIV #5
DIV #6

Es importante tener en cuenta que DIV #4, DIV #5 y DIV #6 son hijos de DIV #3, por lo que el apilamiento de esos elementos se
resuelve completamente dentro de DIV #3. Una vez que se completa el apilamiento y la renderización dentro de DIV #3, todo el
elemento DIV #3 se pasa para apilar en el elemento raíz con respecto al DIV de su hermano.

HTML:

<div id="div1">
<h1>Elemento de división #1</h1>
<code>posición: relativa;<br/> índice z:
5;</code>
</div>
<div id="div2">
<h1>Elemento de división #2</h1>
<code>posición: relativa;<br/> índice z:
2;</code> </div>

<div id="div3">
<div id="div4">

GoalKicker.com – Notas CSS para profesionales 209

Machine Translated by Google
<h1 >Elemento de división #4</h1 >
<code >posición: relativa;<br/> índice z: 6;</
code > </div > <h1 >Elemento de división
#3</h1 > <code > posición: absoluta;<br/>
índice z: 4;</code> <div id ="div5" >

<h1 >Elemento de división #5</h1 >

<code >posición: relativa;<br/> índice z: 1;</
code >
</div>
<div id ="div6" >
<h1 >Elemento de división #6</h1 >
<code >posición: absoluta;<br/> índice z:
3;</code > </div >

</div>

CSS:

*{
margen : 0 ;

} html
{ relleno : 20px ;
fuente : 12px /20px Arial , sans-serif ;

} div
{ opacidad : 0.7 ;
posición : relativa ;

} h1
{ fuente : heredar ;
fuente-peso : negrita ;

} #div1 ,
#div2
{ borde : 1px punteado #696 ;
relleno : 10px ; color de fondo :
#cfc ;

} #div1
{ índice z : 5 ;
margen inferior : 190px ;

} #div2
{ índice z : 2 ;

} #div3
{ índice z : 4 ;
opacidad : 1 ;
posición : absoluta ;
arriba : 40px ; izquierda :
180px ; ancho : 330px ;
borde : 1px punteado #900 ;
color de fondo : #fdd ; relleno :
40px 20px 20px ;

} #div4 ,

GoalKicker.com – Notas CSS para profesionales 210

Machine Translated by Google

#div5
{ borde: 1px punteado #996; color
de fondo: #ffc;

} #div4
{ índice z: 6;
margen inferior: 15px;
relleno: 25px 10px 5px;

} #div5
{ índice z: 1;
margen superior: 15px;
relleno: 5px 10px;

} #div6
{ índice z: 3;
posición: absoluta; arriba:
20px; izquierda: 180px;
ancho: 150px; altura:
125px; borde: 1px punteado
#009; acolchado superior:
125px; color de fondo: #ddf;
alineación de texto: centro;

Resultado:

Fuente:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context.

GoalKicker.com – Notas CSS para profesionales 211

Machine Translated by Google

Capítulo 49: Contextos de formato de bloque

Sección 49.1: Uso de la propiedad de desbordamiento con
un valor diferente a visible

img{ flotador:izquierda;
ancho: 100px;
margen:0 10px;

} .div1{ fondo:#f1f1f1; /* no
crea contexto de formato de bloque */

} .div2{ fondo:#f1f1f1;
desbordamiento: oculto; /*
crea contexto de formato de bloque */
}

https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/

El uso de la propiedad de desbordamiento con un valor diferente a visible (su valor predeterminado) creará un nuevo contexto de
formato de bloque. Esto es técnicamente necesario : si un flotador se cruzara con el elemento de desplazamiento, volvería a envolver
el contenido a la fuerza.

Este ejemplo que muestra cómo varios párrafos interactuarán con una imagen flotante es similar a este ejemplo, en
css-tricks.com.

2: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow MDN

GoalKicker.com – Notas CSS para profesionales 212

Machine Translated by Google

Capítulo 50: Centrado vertical

Sección 50.1: Centrado con pantalla: tabla

HTML:

<div class="envoltorio">
<div clase="exterior">
<div class="inner">
centrado
</div>
</div> </div>

CSS:

.envoltorio
{ altura: 600px;
alineación de texto: centro;

} .outer
{ pantalla: tabla;
altura: 100%;
ancho: 100%;

} .outer .inner
{ pantalla: table-cell;
alineación de texto:
centro; alineación vertical: medio;
}

Sección 50.2: Centrado con Flexbox

HTML:

<div class="contenedor">
<div class="child"></div> </div>

CSS:

.contenedor
{ altura: 500px;
ancho: 500px;
pantalla: flexible; // Use Flexbox //
alinear elementos: Esto centra a los niños verticalmente en el padre.
centro; justificar-contenido: // Esto centra a los niños horizontalmente.
centro; fondo: blanco;
}

.niño
{ ancho: 100px;
altura: 100px;
fondo: azul;
}

GoalKicker.com – Notas CSS para profesionales 213

Machine Translated by Google

Sección 50.3: Centrado con Transformar

HTML:

<div class="envoltorio">
<div class="centrado">
centrado
</div>
</div>

CSS:

.wrapper
{ posición: relativo;
altura: 600px;

} .centered
{ posición: absoluta;
índice z: 999;
transformar: traducir (-50%, -50%); arriba:
50%; izquierda: 50%;

Sección 50.4: Centrar texto con altura de línea

HTML:

<div class="contenedor">
<span>centrado verticalmente </div>

CSS:

.contenedor{ altura: 50px; /* establecer altura */ line-

height: 50px; /* establecer line-height
altura */igual a la
vertical-align: middle; /* funciona sin esta
regla, pero es bueno tenerla configurada explícitamente */
}

Nota: este método solo centrará verticalmente una sola línea de texto. No centrará los elementos del bloque correctamente y si el texto se
divide en una nueva línea, tendrá dos líneas de texto muy altas.

Sección 50.5: Centrado con Posición: absoluta

HTML:

<div class="envoltorio">
<img
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a"> </div>

CSS:

.envoltura{ posición:relativa;

GoalKicker.com – Notas CSS para profesionales 214

Machine Translated by Google

altura: 600px;

} .wrapper img
{ posición: absoluta;
superior: 0; izquierda: 0;
derecha: 0; inferior: 0;
margen: automático;

Si desea centrar otras imágenes, entonces debe dar alto y ancho a ese elemento.

HTML:

<div class="envoltura"> <div

class="hijo">
hazme centro </div>
</div>

CSS:

.envoltura{ posición:relativa;
altura: 600px;

} .wrapper .child
{ posición: absoluta;
superior: 0; izquierda: 0;
derecha: 0; inferior: 0;
margen: automático;
ancho: 200px; altura: 30px;
borde: 1px sólido #f00;

Sección 50.6: Centrado con pseudo elemento

HTML:

<div class="contenedor"> <div

class="contenido"></div>
</div>

CSS:

.envoltura{ altura mínima: 600px;

}

.wrapper:antes{ contenido:
""; pantalla: bloque
en línea; altura: 100%;
alineación vertical: medio;

GoalKicker.com – Notas CSS para profesionales 215

Machine Translated by Google

.content
{ pantalla: bloque en línea;
altura: 80px; alineación
vertical: medio;
}

Este método se utiliza mejor en los casos en los que tiene un .content de altura variada centrado dentro de .wrapper; y desea que la altura
de .wrapper se expanda cuando la altura de .content supere la altura mínima de .wrapper .

GoalKicker.com – Notas CSS para profesionales 216

Machine Translated by Google

Capítulo 51: Ajuste y colocación de objetos

Sección 51.1: ajuste de objeto

La propiedad object-fit definirá cómo un elemento encajará en un cuadro con una altura y un ancho establecidos. Generalmente aplicado a una imagen o

video, Object-fit acepta los siguientes cinco valores:

LLENAR

ajuste de objeto: relleno;

Rellenar estira la imagen para que se ajuste al cuadro de contenido sin tener en cuenta la relación de aspecto original de la imagen.

CONTENER

ajuste de objeto: contiene;

Contain ajusta la imagen en la altura o el ancho del cuadro mientras mantiene la relación de aspecto de la imagen.

CUBRIR

ajuste de objeto: cubierta;

GoalKicker.com – Notas CSS para profesionales 217

Machine Translated by Google

La portada llena todo el cuadro con la imagen. La relación de aspecto de la imagen se conserva, pero la imagen se recorta a las dimensiones
de la caja.

NINGUNA

ajuste de objeto: ninguno;

Ninguno ignora el tamaño del cuadro y no cambia de tamaño.

ESCALA-REDUCCIÓN

ajuste de objeto: reducción de escala;

Reducir el tamaño del objeto como ninguno o como contenido. Muestra cualquier opción que resulte en un tamaño de imagen más pequeño.

GoalKicker.com – Notas CSS para profesionales 218

Machine Translated by Google

GoalKicker.com – Notas CSS para profesionales 219

Machine Translated by Google

Capítulo 52: Patrones de diseño CSS

Estos ejemplos son para documentar patrones de diseño específicos de CSS como BEM, OOCSS y SMACSS.

Estos ejemplos NO son para documentar marcos CSS como Bootstrap o Fundación.

Sección 52.1: BEM

BEM significa Bloques, Elementos y Modificadores. Es una metodología concebida inicialmente por la empresa tecnológica rusa.
Yandex, pero que también ganó bastante tracción entre los desarrolladores web estadounidenses y de Europa occidental.

Como lo mismo implica, la metodología BEM tiene que ver con la división en componentes de su código HTML y CSS en tres tipos
de componentes:

Bloques: entidades independientes que son significativas por sí mismas

Los ejemplos son encabezado, contenedor, menú, casilla de verificación y cuadro de texto

Elementos: parte de los bloques que no tienen un significado independiente y están vinculados semánticamente a sus bloques.

Los ejemplos son elemento de menú , elemento de lista, título de casilla de verificación y título de encabezado

Modificadores: banderas en un bloque o elemento, que se utilizan para cambiar la apariencia o el comportamiento

Los ejemplos están deshabilitados, resaltados, marcados, fijos, tamaño grande y color amarillo

El objetivo de BEM es seguir optimizando la legibilidad, el mantenimiento y la flexibilidad de su código CSS. La manera de
lograr esto, es aplicar las siguientes reglas.

Los estilos de bloque nunca dependen de otros elementos en una página

Los bloques deben tener un nombre simple y corto y evitar _ o - caracteres

Al diseñar elementos, use selectores de formato blockname__elementname

Cuando aplique estilo a los modificadores, use selectores de formato blockname--modifiername y blockname__elementname--
nombre del modificador

Los elementos o bloques que tienen modificadores deben heredar todo del bloque o elemento que está modificando
excepto las propiedades que se supone que modifica el modificador

ejemplo de código

Si aplica BEM a los elementos de su formulario, sus selectores de CSS deberían verse así:

.form { } .form-- // Bloquear

theme-xmas { } .form--simple // Bloque + modificador
{ } .form__input { } .form__submit // Bloque + modificador
{ } .form__submit--disabled { } // bloque > elemento
// bloque > elemento
// Bloque > elemento + modificador

El HTML correspondiente debería verse así:

GoalKicker.com – Notas CSS para profesionales 220

Machine Translated by Google

<form class="form form--theme-xmas form--simple"> <input

class="form__input" type="text" /> <input class="form__submit
form__submit--disabled" type="submit" /> </formulario>

GoalKicker.com – Notas CSS para profesionales 221

Machine Translated by Google

Capítulo 53: Compatibilidad y prefijos del navegador

Prefijo Navegador(es)
-webkit- Google Chrome, Safari, versiones más recientes de Opera 12 y superiores, navegadores Android, Blackberry y UC
-moz- Mozilla Firefox
-milisegundo-
Internet Explorer, borde
-o-
, -xv- Opera hasta la versión 12

-khtml -Conquistador

Sección 53.1: Transiciones

div { -
webkit-transition: todo 4s facilidad; -moz-
transición: todo 4s facilidad; -o-
transición: todos los 4s facilidad;
transición: todo 4s facilidad;
}

Sección 53.2: Transformar

div { -
webkit-transform: rotar (45 grados);
-transformar moz: rotar (45 grados);
-ms-transform: rotar (45 grados); -o-
transformar: rotar (45 grados);
transformar: rotar (45 grados);
}

GoalKicker.com – Notas CSS para profesionales 222

Machine Translated by Google

Capítulo 54: Normalización de los estilos del navegador

Cada navegador tiene un conjunto predeterminado de estilos CSS que utiliza para representar elementos. Es posible que estos estilos predeterminados no

sean coherentes entre los navegadores porque: las especificaciones del idioma no están claras, por lo que los estilos básicos están sujetos a interpretación,

es posible que los navegadores no sigan las especificaciones proporcionadas o que los navegadores no tengan estilos predeterminados para los elementos

HTML más nuevos. Como resultado, es posible que las personas deseen normalizar los estilos predeterminados en tantos navegadores como sea posible.

Sección 54.1: normalize.css

Los navegadores tienen un conjunto predeterminado de estilos CSS que utilizan para representar elementos. Algunos de estos estilos pueden
incluso personalizarse utilizando la configuración del navegador para cambiar las definiciones de tamaño y tipo de fuente predeterminados, por
ejemplo. Los estilos contienen la definición de qué elementos se supone que están a nivel de bloque o en línea, entre otras cosas.

Debido a que estos estilos predeterminados tienen cierto margen de maniobra por las especificaciones del idioma y debido a que los navegadores
pueden no seguir las especificaciones correctamente, pueden diferir de un navegador a otro.

Aquí es donde normalize.css entra en juego. Anula las inconsistencias más comunes y corrige errores conocidos.

Qué hace

Conserva valores predeterminados útiles, a diferencia de muchos restablecimientos de CSS.

Normaliza estilos para una amplia gama de elementos.

Corrige errores e inconsistencias comunes del navegador.
Mejora la usabilidad con modificaciones sutiles.
Explica qué hace el código usando comentarios detallados.

Por lo tanto, al incluir normalize.css en su proyecto, su diseño se verá más parecido y consistente en diferentes navegadores.

Diferencia con reset.css

Es posible que haya oído hablar de reset.css. ¿Cuál es la diferencia entre los dos?

Mientras que normalize.css proporciona consistencia al establecer diferentes propiedades en valores predeterminados unificados, reset.css logra
la consistencia al eliminar todos los estilos básicos que un navegador puede aplicar. Si bien esto puede parecer una buena idea al principio, en realidad
significa que debe escribir todas las reglas usted mismo, lo que va en contra de tener un estándar sólido.

Sección 54.2: Enfoques y ejemplos

Los restablecimientos de CSS toman enfoques separados para los valores predeterminados del navegador. Reset CSS de Eric Meyer ha existido por
un tiempo. Su enfoque anula muchos de los elementos del navegador que se sabe que causan problemas desde el principio. Lo siguiente es de su
versión (v2.0 | 20110126) CSS Reset.

html, cuerpo, div, span, applet, objeto, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abr, acrónimo, dirección,
grande, cite, código, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, forma, etiqueta, leyenda, tabla, título,
tbody, tfoot, thead, tr, th, td,

GoalKicker.com – Notas CSS para profesionales 223

Machine Translated by Google

artículo, aparte, lienzo, detalles, incrustar, figura, figcaption,

pie de página, encabezado, hgroup, menú, navegación, salida,
ruby, sección, resumen, tiempo, marca, audio, video { margen:
0; relleno: 0; borde: 0; tamaño de fuente: 100%; fuente: heredar;
alineación vertical: línea de base;

Restablecer CSS de Eric Meyer

Normaliza CSS por otro y trata muchos de estos por separado. El siguiente es un ejemplo de la versión (v4.2.0) del
código.

/ **
* 1. Cambiar la familia de fuentes predeterminada en todos los navegadores (obstinado).
* 2. Corregir la altura de línea en todos los navegadores.
* 3. Evite los ajustes del tamaño de fuente después de los cambios de orientación en IE e iOS. */

/ * Documento
================================================== ========================*/

html
{ familia de fuentes: sans-serif; /* 1 */ altura de
línea: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /*
3 */ -webkit-text-size-adjust: 100%; /* 3 */

/ * Secciones
================================================== ========================*/

/ **
* Eliminar el margen en todos los navegadores (obstinado). */

cuerpo
{ margen: 0;
}

/ **
* Agrega la visualización correcta en IE 9-. */

artículo,
aparte, pie
de página,
encabezado,
navegación,

sección
{ pantalla: bloque;
}

/ **
* Corregir el tamaño de fuente y el margen en los elementos `h1` dentro de los contextos de `sección` y *
`artículo` en Chrome, Firefox y Safari. */

GoalKicker.com – Notas CSS para profesionales 224

Machine Translated by Google

h1
{ tamaño de fuente:
2em; margen: 0,67em 0;
}

Normalizar CSS

GoalKicker.com – Notas CSS para profesionales 225

Machine Translated by Google

Capítulo 55: Hacks de Internet Explorer

Sección 55.1: Adición de soporte de bloques en línea a IE6 e IE7
pantalla: bloque en línea;

La propiedad de visualización con el valor de bloque en línea no es compatible con Internet Explorer 6 y 7. Una solución alternativa
para esto es:

ampliar:
1; *pantalla: en línea;

La propiedad de zoom activa la función hasLayout de los elementos y solo está disponible en Internet Explorer. La *pantalla se
asegura de que la propiedad no válida se ejecute solo en los navegadores afectados. Otros navegadores simplemente ignorarán la
regla.

Sección 55.2: Modo de alto contraste en Internet Explorer 10 y superior

En Internet Explorer 10+ y Edge, Microsoft proporciona el selector de medios -ms-high-contrast para exponer la configuración de
"Alto contraste" del navegador, lo que permite al programador ajustar los estilos de su sitio en consecuencia.

El selector -ms-high-contrast tiene 3 estados: activo, negro sobre blanco y blanco sobre negro. En IE10+ también tenía un
estado ninguno , pero eso ya no se admite en Edge en el futuro.

Ejemplos
@media screen y (-ms-high-contrast: active), (-ms-high-contrast: black-on-white) {

.header{ fondo: #fff;

color: #000;
}
}

Esto cambiará el fondo del encabezado a blanco y el color del texto a negro cuando el modo de alto contraste esté activo y esté en
modo de blanco y negro .

@pantalla multimedia y (-ms-alto-contraste: blanco sobre negro) {

.header{ fondo: #000;

color: #fff;
}
}

Similar al primer ejemplo, pero esto selecciona específicamente el estado blanco sobre negro e invierte los colores del encabezado
en un fondo negro con texto blanco.

Más información:

Documentación de Microsoft en -ms-alto-contraste

GoalKicker.com – Notas CSS para profesionales 226

Machine Translated by Google

Sección 55.3: Internet Explorer 6 e Internet Explorer 7 solamente

Para apuntar a Internet Explorer 6 e Internet Explorer 7, comience sus propiedades con *:

.ocultar-en-ie6-y-ie7 {
*pantalla : ninguna; // Esta línea se procesa solo en IE6 e IE7
}

Los prefijos no alfanuméricos (que no sean guiones y guiones bajos) se ignoran en IE6 e IE7, por lo que este truco funciona para
cualquier propiedad sin prefijo: par de valores .

Sección 55.4: solo Internet Explorer 8

Para apuntar a Internet Explorer 8, coloque sus selectores dentro de la pantalla @media \0 { }:

@media \0 pantalla
{ .hide-on-ie8
{ pantalla : ninguno;
}
}

Todo entre @media \0 screen { } es procesado solo por I

GoalKicker.com – Notas CSS para profesionales 227

Machine Translated by Google

Capítulo 56: Rendimiento

Sección 56.1: Use la transformación y la opacidad para evitar el diseño del disparador

Cambiar algún atributo CSS hará que el navegador calcule de forma sincrónica el estilo y el diseño, lo cual es malo cuando
necesitas animar a 60 fps.

NO

Animar con diseño de disparador izquierdo y superior .

#caja
{ izquierda:
0;
superior: 0; transición: izquierda 0.5s,
arriba 0.5s; posición: absoluta; ancho:
50px; altura: 50px; color de fondo: gris;

#box.active
{ izquierda:
100px; arriba: 100px;
}

Manifestación tardó 11,7 ms en renderizar, 9,8 ms en pintar

GoalKicker.com – Notas CSS para profesionales 228

Machine Translated by Google

HACER

Animar con transformar con la misma animación.

#caja
{ izquierda :
0;
superior : 0 ; posición :
absoluta ; ancho : 50px ;
altura : 50px ; color de
fondo : gris ;

transición : transformar 0.5s ;

transformar : traducir3d ( 0 , 0 , 0 );
}

#caja.activa {

GoalKicker.com – Notas CSS para profesionales 229

Machine Translated by Google

transformar: traducir3d(100px, 100px, 0);

}

Manifestación misma animación, tomó 1.3ms para renderizar, 2.0ms para pintar.

GoalKicker.com – Notas CSS para profesionales 230

Machine Translated by Google

Créditos
Muchas gracias a todas las personas de Stack Overflow Documentation que ayudaron a proporcionar este contenido.
se pueden enviar más cambios a [email protected] para que se publique o actualice nuevo contenido

AB capitulo 20
A.J. Capítulo 4
Aarón Capítulo 4
abaracedo Capítulo 4
Abhishek Singh capitulo 22
adamboro Capítulo 1
Aeolingamenfel Capítulos 27 y 55
Ahmed Alfy Capítulos 4, 5 y 16
Alohci Capítulo 15
amflare Capítulos 13 y 17
andré lopes capitulo 44
andre mcgruder capitulo 54
andreas Capítulos 15 y 38
Andrés Capítulos 12, 19 y 53
andres myers capitulo 47
Añil Capítulo 4
animacion Capítulos 4, 50 y 53
pablo Capítulos 6 y 27
arácnido Capítulo 4
Arif Capítulo 11
Arjan Einbu Capítulos 4, 7, 8, 15 y 17
Ashwin Ramaswami Capítulos 1 y 4
Asim KT Capítulos 5 y 16
AVAVT capitulo 50
temor Capítulo 1
bdkopen Capítulo 3
Ben Rhys Capítulo 5
Bipón capitulo 40
GalletaPanadero Capítulo 7
boris Capítulo 5
Boysenb3rry Capítulo 1
brandaemon capitulo 17
Brett De Woody Capítulos 18, 38 y 39
CalvT Capítulos 5 y 9
Casey Capítulo 11
cassidy williams Capítulos 10 y 22
cdm Capítulos 5 y 8
charlie h Capítulos 4 y 28
Chathuranga Jayanath Capítulos 11, 13 y 23
enfriador capitulo 38
cris Capítulos 1, 4, 23, 25, 42 y 50
chris saliva Capítulos 8 y 24
christiaan maks capitulo 28
Codificador de Capítulo 5
CocoaBean Capítulo 3
cono56 Capítulos 31 y 36
CPHPython Capítulo 4

GoalKicker.com – Notas CSS para profesionales 231

Machine Translated by Google

csx.cc Capítulo 1
cuervoo capitulo 18
Daniel G. Blázquez Capítulo 5
Daniel Käfer Capítulo 6
daniel stradowski Capítulo 5
DarkAjax capitulo 17
darrylyeo Capítulos 2, 13 y 18
Golpe de dardo Capítulo 5
Dave Everitt Capítulo 4
david fullerton Capítulo 4
Deméter Dimitri Capítulo 4
demonioofthemista capitulo 14
diseñar Capítulos 4, 5 y 18
Devid Farinelli Capítulos 4 y 6
devon bernardo Capítulo 4
Dex estrella capitulo 27
diego v Capítulo 6
Dinidu Hewage Capítulo 4
dippas Capítulos 4, 17 y 21
doctoresherlock Capítulo 10
dodopok Capítulos 13, 36 y 45
Elegante.Scripting capitulo 43
Eliran Malka Capítulo 6
emmanuele parisio Capítulo 6
evgeny Capítulo 15
Farzad YZ Capítulo 6
fcalderan Capítulo 5
feeela Capítulos 46 y 55
Felipe Als Capítulos 1, 5, 10, 11, 14, 16, 24 y 25
Félix AJ Capítulo 15
Félix Edelmann Capítulo 4
Félix Schütz Capítulo 4
Cuarenta Capítulo 4
fracciones Capítulo 4
fzzylogic capitulo 16
GRAMO
Capítulos 1 y 17
gabriel r Capítulo 1
gandreadis Capítulo 4
geek1011 capitulo 21
geeksal capitulo 17
gerardas Capítulo 1
Gnietschow Capítulo 10
CabrasVestirSombreros Capítulo 1
Gofilord capitulo 21
otorgar palin capitulo 54
H. Pauwelyn Capítulos 4, 18 y 36
HansCz Capítulo 4
Harish Gyanani Capítulo 1
harry Capítulos 10, 26, 28, 29, 33, 35 y 44
henry Capítulo 4
Horst Jahn Capítulo 5
cristo capitulo 32
Hugo Buff Capítulo 4

GoalKicker.com – Notas CSS para profesionales 232

Machine Translated by Google

Hynes Capítulos 4, 5 y 15
insertar nombre de usuario aquí Capítulo 15
J atkin Capítulos 1 y 4
JF Capítulos 4 y 20
jacob gris Capítulos 4, 5 y 22
james donnelly Capítulos 7 y 17
James Taylor Capítulo 5
Jaredsk Capítulos 10, 36 y 50
JedaiCoder Capítulo 6
Jef capitulo 16
Jeffery Tang capitulo 30
jehna1jgh Capítulo 6
Capítulo 12
JHS capitulo 25
Jmh2013 Capítulos 13, 23 y 43
joejoe31b Capítulos 4 y 13
JoelBonetR Capítulo 4
joe_young Capítulos 1 y 15
Juan Slegers Capítulos 4, 5, 6, 13, 17, 18, 28, 52 y 55
jon chan Capítulos 5 y 15
Jonathan Argentiero Capítulo 6
jonathan lam Capítulos 1, 6, 7, 16 y 22
Jonathan Zúñiga Capítulo 5
José Gómez Capítulo 1
solo un estudiante Capítulo 1
kevin katzke capitulo 23
reycobra1986 capitulo 17
Kuhan capitulo 18
Kyle Ratliff Capítulo 6
leo_ap capitulo 50
LiLacTac capitulo 55
Luka Kerr capitulo 29
lucas taylor capitulo 28
madalina taina Capítulos 4, 5, 6, 8, 9, 10, 11, 12, 14, 15, 19, 25, 29, 31, 32, 34, 39, 45 y 49
Bagazo capitulo 20
Marcatectura capitulo 21
Marjorie Pickard Capitulo 2
Marcos Perera Capítulo 4
Marten Koetsier Capítulos 34 y 41
Matas Vaitkevicius Capítulos 4 y 13
mattia astorino capitulo 22
Maximiliano Laumeister Capítulos 5 y 13
Maxouhell Capítulo 6
Michael Moriarty Capítulos 5, 15 y 18
miguel_b Capítulos 4 y 6
Mipiet Capítulo 6
mike mcaughan capitulo 24
Millas Capítulos 12 y 51
Miró capitulo 18
MMachinegun capitulo 54
mmativ capitulo 50
Mod Proxy Capítulo 6
Sr. Alien Capítulo 5

GoalKicker.com – Notas CSS para profesionales 233

Machine Translated by Google

Sr. Meeseeks capitulo 29

SR verde Capítulo 8
Muthu Kumaran capitulo 37
Naeem Shaikh Capítulo 4
Nate Capítulo 5
Nathan Arturo Capítulos 1, 4, 6, 8, 13, 14, 15 y 16
Nemanja Trifunovic capitulo 48
Niek Brower capitulo 23
niyasc capitulo 18
Nobal Mohán Capítulo 10
ov Capítulo 6
Obsidiana Capítulos 37 y 53
Ortomala Lokni Capítulos 6, 7 y 17
Palmadita capitulo 21
patelarpan Capítulos 1 y 50
Pablo Kozlovitch Capítulo 6
pablo sudor capitulo 46
Persijn Capítulos 4 y 5
phil capitulo 50
pixelbandito Capítulo 9
Praveen Kumar Capítulos 4, 6, 13, 15, 26, 28, 50 y 55
Qaz Capítulo 12
Raul Nanwani capitulo 22
RamenChef capitulo 43
rdans Capítulo 4
JineteRojoX capitulo 37
rejnev Capítulo 8
ricardo hamilton Capítulos 4, 5, 15, 18, 20 y 27
rion williams Capítulo 4
desarrollo de rishabh capitulo 46
mondesilva Capítulos 15 y 20
Robotnicka capitulo 20
Cohete Risa Capítulo 1
Sandeep Tuniki Capítulo 6
Saroj Sasmal Capítulo 1
ScientiaEtVeritas Capítulos 1, 4, 6, 7, 10, 11, 18, 20, 21, 23, 26, 31, 33, 44 y 53
Sebastián Zartner capitulo 40
SeinopSys Capítulos 18, 23, 36 y 54
Serguéi Denisov Capítulos 5 y 26
Lanudo Capítulos 5, 21 y 53
Siavas Capítulo 6
Alguien Capítulo 6
Sourav Ghosh Capítulos 5 y 22
Srikarg Capítulos 16 y 31
de Squazz Capítulo 13
StefanBob Capítulo 9
stewartside Capítulos 4, 5, 6, 18, 20 y 21
stratboy Capítulo 5
sudo bangbang Capítulo 4
Sumner Evans Capítulo 4
Sun Qingyao Capítulo 8
Sunnyok Sverri Capítulos 4, 6 y 8
M. Olsen Capítulo 1

GoalKicker.com – Notas CSS para profesionales 234

Machine Translated by Google
tomarradi capitulo 16
taylor Capítulo 6
ted goas Capítulos 12, 15, 34 y 43
Teo Dragovic Capítulos 1 y 13
esebicho raro Capítulo 4
El Genio De La Verdad capitulo 36
teodoro k capitulo 22
pensar123 Capítulo 5
timoteo molinero capitulo 55
Toby Capítulos 15 y 20
Todd Capítulo 1
ToniB Capítulo 15
Tot Zam Capítulo 8
trevor clarke Capítulos 5, 8, 10 y 15
Trung DQ capitulo 56
tylerh Capítulos 1, 4, 5, 36 y 53
ulrich schwarz capitulo 43
usuario007 capitulo 18
usuario2622348 capitulo 20
vishak capitulo 14
vkopio Capítulo 7
Vlusión Capítulo 15
Volker E. Capítulo 15
web Capítulos 6, 26, 28, 29 y 44
Will Di Fruscio Capítulo 9
Wolfgang capitulo 18
X capitulo 18
xpy xinyang Capítulo 1
li Capítulo 4
Yuri Fiódorov Capítulo 4
Zac Capítulos 5 y 12
Zaffy Capítulo 4
Zakaria Acharki capitulo 20
Zaz Capítulo 4
ze rubeus Capítulo 4
entusiasmo Capítulo 6
zer00ne capitulo 20
zeta Capítulo 5
Zze Capítulo 5

GoalKicker.com – Notas CSS para profesionales 235

Machine Translated by Google

También te puede interesar