## Objetivos de Aprendizaje - Entender la sintaxis y reglas de CSS - Aplicar estilos usando varios métodos - Trabajar con colores y tipografía - Dominar la cascada y la herencia ## Sintaxis CSS ```css selector { propiedad: valor; otra-propiedad: valor; } ``` ### Ejemplo ```css h1 { color: blue; font-size: 24px; text-align: center; } ``` ## Añadir CSS a HTML ### Hoja de Estilos Externa (Recomendado) ```html ``` ### Hoja de Estilos Interna ```html ``` ### Estilos en Línea ```html

Encabezado

``` ## Colores ### Colores Nominados ```css h1 { color: red; background-color: lightblue; } ``` ### Colores RGB ```css p { color: rgb(255, 0, 0); /* Rojo */ color: rgb(0, 0, 0); /* Negro */ color: rgb(128, 128, 128); /* Gris */ } ``` ### RGBA (con opacidad) ```css div { background-color: rgba(255, 0, 0, 0.5); /* Rojo 50% transparente */ } ``` ### Hexadecimal ```css h1 { color: #ff0000; /* Rojo */ color: #000; /* Negro */ color: #808080; /* Gris */ } ``` ### HSL ```css p { color: hsl(0, 100%, 50%); /* Rojo */ background-color: hsl(220, 100%, 50%); /* Azul */ } ``` ## Tipografía ### Familia de Fuentes ```css body { font-family: Arial, Helvetica, sans-serif; } h1 { font-family: "Times New Roman", Times, serif; } ``` ### Tamaño de Fuente ```css h1 { font-size: 32px; } p { font-size: 16px; } ``` ### Peso de Fuente ```css .bold { font-weight: bold; } .thick { font-weight: 700; } .light { font-weight: 300; } ``` ### Estilo de Fuente ```css .italic { font-style: italic; } .normal { font-style: normal; } ``` ### Altura de Línea ```css p { line-height: 1.6; /* 1.6 veces el tamaño de fuente */ } .loose { line-height: 2.0; } ``` ### Alineación de Texto ```css .center { text-align: center; } .right { text-align: right; } .justify { text-align: justify; } ``` ### Decoración de Texto ```css .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .none { text-decoration: none; } ``` ### Transformación de Texto ```css .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } ``` ## La Cascada Cuando múltiples reglas se aplican al mismo elemento: ```css /* La última regla gana */ p { color: blue; } p { color: red; /* Esta gana */ } /* El selector más específico gana */ p { color: blue; } .highlight { color: yellow; /* Esta gana */ } ``` ### Orden de Especificidad 1. Estilos en línea (más alto) 2. Selectores de ID (`#header`) 3. Selectores de clase (`.button`) 4. Selectores de elemento (`p`, `h1`) 5. Selector universal (más bajo) ## Herencia Algunas propiedades se heredan de los elementos padre: ```css body { color: #333; font-family: Arial, sans-serif; } ``` Los elementos hijo heredan `color` y `font-family` a menos que se sobrescriban. ### Palabra Clave inherit ```css p { color: inherit; /* Heredar explícitamente del padre */ } ``` ## Comentarios CSS ```css /* Esto es un comentario de una línea */ /* * Esto es un comentario * de varias líneas */ p { color: red; /* Comentario explicando la regla */ } ``` ## Fondos ### Color de Fondo ```css div { background-color: #f0f0f0; } ``` ### Imagen de Fondo ```css .hero { background-image: url("hero.jpg"); } ``` ### Tamaño de Fondo ```css .hero { background-image: url("hero.jpg"); background-size: cover; } ``` ### Posición de Fondo ```css .hero { background-image: url("hero.jpg"); background-position: center top; } ``` ## Propiedades Abreviadas ### Abreviación de Fuente ```css p { font: italic 16px/1.5 Arial, sans-serif; /* estilo variante peso tamaño/altura-de-línea familia */ } ``` ### Abreviación de Fondo ```css div { background: #f0f0f0 url("imagen.jpg") no-repeat center; } ``` ### Abreviación de Borde ```css .box { border: 1px solid black; } ``` ## Unidades ### Absolutas - `px` - píxeles ### Relativas - `em` - relativo al tamaño de fuente del padre - `rem` - relativo al tamaño de fuente raíz - `%` - porcentaje del padre - `vw` - ancho del viewport - `vh` - alto del viewport ```css p { font-size: 1.2em; } html { font-size: 16px; } h1 { font-size: 2rem; } .container { width: 80%; } ``` ## Resumen - Sintaxis CSS: `selector { propiedad: valor; }` - Usa hojas de estilos externas vía `` - Colores: nominados, rgb(), rgba(), hex, hsl() - Tipografía: font-family, font-size, font-weight, line-height - La cascada: la última regla gana, la especificidad determina los ganadores - Propiedades como color y font-family se heredan - Unidades: px, em, rem, %, vw, vh