Curso IT Fundamentos CSS 019_HelloCSS
¿Qué es CSS?
CSS (Cascading Style Sheets, Hojas de Estilo en Cascada) es similar a HTML, CSS tampoco es un verdadero lenguaje de programación, ni siquiera un lenguaje de marcado. CSS es un lenguaje de hojas de estilo, utilizado para agregar estilos a elementos HTML, describir la apariencia de documentos HTML y controlar el color, tamaño, fuente, diseño, etc. de los elementos del documento HTML.
CSS es una parte importante del desarrollo web, puede ayudarte a crear páginas web atractivas y fáciles de usar.
Estructura básica de CSS
Los estilos CSS se componen de selectores y propiedades. Los selectores se utilizan para seleccionar los elementos HTML a los que se aplicarán los estilos. Las propiedades especifican los valores de los estilos.
Ejemplo:
p { color: red;}Resultado:
Análisis de estructura:
[!Resumen]
Selector El nombre del elemento HTML se encuentra al inicio del conjunto de reglas. Selecciona uno o más elementos a los que se agregarán estilos (en este ejemplo, el elemento
<p>). Para agregar estilos a diferentes elementos, simplemente cambia el selector.Declaración (Declaration) Una regla individual, como color: red; especifica las propiedades de los elementos a estilizar. Las declaraciones CSS siempre terminan con punto y coma ; y se encierran entre llaves {}:
Propiedades (Properties) La forma de cambiar los estilos de los elementos HTML (en este ejemplo, color es la propiedad del elemento
<p>). En CSS, el autor decide qué propiedad modificar.Valor de la propiedad (Property value) A la derecha de la propiedad, después de los dos puntos, está el valor de la propiedad, que selecciona un valor entre las muchas apariencias posibles (además de red, hay muchos otros valores para color).
¿Cómo incluir CSS?
Inclusión en línea:
El código CSS se escribe directamente en las etiquetas HTML, usando el atributo style.
La inclusión en línea consiste en escribir el código de estilo directamente en las etiquetas HTML, es un método simple y rápido. Ventajas: conveniente y rápido, adecuado para pocos estilos. Desventajas:
- Desfavorable para la reutilización de estilos, difícil de mantener.
- Archivos HTML desordenados, no cumple con el principio de separación.
- Desfavorable para el caché del navegador, afecta el rendimiento.
Ejemplo:
<div style="color: red; font-size: 16px;">Este es un texto rojo</div>Resultado:
Inclusión interna:
El código CSS se escribe en etiquetas <style>, colocadas dentro de la etiqueta <head>.
La inclusión interna consiste en escribir el código de estilo en las etiquetas style del archivo HTML, un enfoque relativamente equilibrado. Ventajas: los estilos están separados del archivo HTML, fácil de mantener. Además, el caché del navegador puede mejorar la velocidad de carga. Desventajas:
- Se requieren solicitudes de red adicionales al cargar la página, relativamente ineficiente.
- Los estilos y el archivo HTML aún tienen cierto acoplamiento.
Ejemplo:
div { color: red; font-size: 16px;} <div>Este es un texto rojo</div>Resultado:
Inclusión externa:
El código CSS se escribe en un archivo CSS separado y se incluye usando la etiqueta link.
La inclusión externa consiste en escribir el código de estilo en un archivo CSS separado, un método estándar. Ventajas: los estilos y el archivo HTML están completamente separados, fácil de mantener. Además, la aceleración CDN puede mejorar la velocidad de carga. La inclusión externa también soporta compresión y combinación para reducir el tamaño del archivo. Desventajas:
- Se requieren solicitudes de red adicionales al cargar la página, pero se puede optimizar.
- Dependencia de recursos externos, puede causar bloqueo o fallo de carga.
- Durante el desarrollo pueden requerirse múltiples solicitudes a archivos externos.
Ejemplo:
<head>
<!-- En el directorio actual, referencia al archivo de estilos en la subcarpeta styles --><link rel="stylesheet" href="style.css" />
<!-- En el directorio actual, referencia al archivo de estilos en styles/general --><link rel="stylesheet" href="/style.css" />
<!-- En el directorio padre, referencia al archivo de estilos en la subcarpeta styles --><link rel="stylesheet" href="../styles/style.css" />
</head>div { color: red; font-size: 16px;}Resultado:
Orden de cascada y prioridad
El orden de cascada (Cascading Order) y la especificidad (Specificity) de CSS son dos factores clave que determinan el efecto de estilo CSS mostrado.
Orden de cascada: El orden de cascada CSS define el peso de las reglas de estilo, de mayor a menor:
- Importancia (!important): Las reglas de estilo declaradas con !important tienen la mayor prioridad. Debe usarse con moderación, ya que el abuso dificulta el mantenimiento.
- Estilos de autor (Author Styles): Estilos definidos por el desarrollador web, incluyendo hojas de estilo externas, internas y estilos en línea. Prioridad entre estilos de usuario y estilos del agente de usuario.
- Estilos de usuario (User Styles): Estilos establecidos por el usuario a través de plugins del navegador o configuraciones, prioridad mayor que los estilos del agente de usuario, ej: plugins de fuentes.
- Estilos del agente de usuario (User Agent Styles): Los estilos predeterminados del navegador, menor prioridad, ej: fuentes.
Prioridad: Cuando hay múltiples reglas de estilo del mismo nivel o reglas conflictivas, CSS muestra los estilos según la prioridad.
- Estilos en línea (Inline Styles): Estilos especificados dentro de etiquetas HTML, mayor prioridad.
- Selector ID (id): Estilos especificados por selector ID, ej: #header.
- Selectores de clase, atributo y pseudoclase (class): Por selector de clase, ej:
.container. Por selector de atributo, ej:[type="text"]. Por selector de pseudoclase, ej::hover. - Selector de elemento: Selector con nombre de elemento HTML, ej:
div,p.
Con la misma prioridad, la regla definida posteriormente tiene precedencia.
Ejemplo:
#header { color: red;}
.container p { color: blue;}
p { color: green;}Herencia CSS
La herencia CSS significa que los elementos hijos heredan ciertos valores de propiedades de los elementos padres. La herencia es una característica importante en CSS que simplifica la escritura de estilos y mejora la mantenibilidad del código. No todas las propiedades CSS son heredables, solo algunas están definidas como heredables.
Las propiedades CSS heredables incluyen principalmente:
- Propiedades de texto: font-family, font-size, font-weight, font-style, color, text-decoration, text-align, line-height, letter-spacing, word-spacing
- Propiedades de color: background-color, border-color, color, outline-color
- Propiedades de borde: border-width, border-style, border-color
- Propiedades del modelo de caja: margin, padding, width, height, display, float, position, z-index
Propiedades CSS no heredables incluyen, por ejemplo, width, height, margin, padding y otras propiedades del modelo de caja, posicionamiento (position), flotación (float), limpieza de flotación (clear) y otras propiedades de diseño.
Propiedades CSS comunes y sus funciones:
Propiedades básicas width, height: Establecer ancho y alto del elemento. margin: Establecer margen del elemento. padding: Establecer relleno del elemento. color, background-color: Establecer color y color de fondo del elemento. font-size, font-family, font-weight, font-style: Establecer tamaño, familia, peso y estilo de fuente.
Propiedades de diseño display: Establecer modo de visualización del elemento. float: Establecer comportamiento de flotación del elemento. position: Establecer posición del elemento. top, left, right, bottom: Establecer posición superior, izquierda, derecha e inferior. z-index: Establecer orden de apilamiento del elemento.
Propiedades de texto text-align: Establecer alineación del texto. text-decoration: Establecer decoración del texto. line-height: Establecer altura de línea. font-variant: Establecer variante de fuente. text-transform: Establecer transformación del texto. letter-spacing, word-spacing: Establecer espaciado entre caracteres y palabras.
Propiedades de borde border: Establecer estilo de borde del elemento. border-width: Establecer ancho del borde. border-style: Establecer estilo del borde. border-color: Establecer color del borde. border-radius: Establecer radio de esquinas del borde.
Propiedades de fondo background: Establecer fondo del elemento. background-color: Establecer color de fondo. background-image: Establecer imagen de fondo. background-repeat: Establecer modo de repetición de imagen de fondo. background-position: Establecer posición de imagen de fondo. background-size: Establecer tamaño de imagen de fondo.
Propiedades de transición transition: Establecer efecto de transición del elemento. transition-property: Establecer propiedad de transición. transition-duration: Establecer duración de transición. transition-timing-function: Establecer función de transición. transition-delay: Establecer retardo de transición.