Construcc
ión de Docente: Víctor M. González Camacho
Páginas
SELECTOR :root
Este selector hace referencia al elemento raíz del documento HTML, que
usualmente es el elemento <html>. Declarar variables dentro de :root las
hace accesibles globalmente a través de todo el documento.
En el selector :root puedes definir variables CSS (también conocidas como
"custom properties") de cualquier tipo que sea válido en CSS. No estás
limitado a un tipo específico. Los tipos de variables más comunes que
encontrarás en :root incluyen:
Colores: Como en tu ejemplo (--primary-color: #333;). Puedes usar
valores hexadecimales, nombres de colores, rgb(), rgba(), hsl(), hsla(),
etc.
Dimensiones: Para tamaños, márgenes, padding, anchos, etc.
Ejemplos: --espacio-entre-secciones: 2rem;, --ancho-tarjeta: 300px;
Fuentes: Para definir familias de fuentes, tamaños, pesos, etc.
Ejemplos: --fuente-principal: 'Arial, sans-serif';, --tamano-titulo: 2em;
Números: Para valores numéricos sin unidad específica, que luego
pueden usarse en cálculos. Ejemplo: --factor-escala: 1.2;
Strings (Cadenas de texto): Aunque menos comunes, puedes
almacenar cadenas de texto. Ejemplo: --mensaje-error: "Por favor,
complete este campo.";
URLs: Para rutas a imágenes u otros recursos. Ejemplo: --imagen-
fondo: url('/images/[Link]');
Tiempos: Para duraciones de animaciones o transiciones. Ejemplo: --
duracion-animacion: 0.3s;
Puntos importantes:
Las variables CSS son "case-sensitive", es decir, distinguen entre
mayúsculas y minúsculas. --primary-color es diferente de --Primary-
Color.
Puedes usar cualquier nombre para tus variables, siempre y cuando
comience con dos guiones (--).
El valor de una variable puede ser cualquier expresión CSS válida.
PSEUDO-CLASE :target
La selección activa es una regla CSS que utiliza la pseudo-clase :target.
Esta pseudo-clase se aplica a un elemento específico cuando su
identificador (ID) coincide con el fragmento de la URL. En este caso, la
clase .seccion se verá afectada cuando sea el objetivo de un enlace.
La propiedad display: block; dentro de esta regla CSS indica que el elemento
con la clase .seccion se mostrará como un bloque cuando sea el objetivo.
Normalmente, los elementos con esta clase podrían estar ocultos o tener un
estilo diferente, pero al ser el objetivo, se cambiarán para mostrarse como
un bloque, ocupando todo el ancho disponible y comenzando en una nueva
línea.
Este tipo de regla es útil para crear secciones de contenido que solo se
muestran cuando se navega a un ancla específica en la página, mejorando
la navegación y la experiencia del usuario.
1
Construcc
ión de Docente: Víctor M. González Camacho
Páginas
LA PROPIEDAD position: sticky;
En CSS se utiliza para posicionar un elemento de manera que se comporte
como una combinación de relative y fixed. Un elemento con position:
sticky; se posiciona de manera relativa hasta que alcanza un umbral
definido (por ejemplo, cuando el usuario hace scroll), momento en el cual se
comporta como un elemento fijo.
En otras palabras, un elemento con position: sticky; se mantiene en su
posición relativa normal dentro del flujo del documento hasta que el usuario
se desplaza a una posición específica en la página. Una vez que se alcanza
esa posición, el elemento "se pega" a una posición fija en la ventana de
visualización y permanece visible mientras se sigue desplazando.
Esta propiedad es especialmente útil para elementos como encabezados o
menús de navegación que deben permanecer visibles en la parte superior
de la página mientras el usuario se desplaza hacia abajo. De esta manera,
se mejora la accesibilidad y la usabilidad del sitio web, permitiendo un
acceso rápido a elementos importantes sin necesidad de desplazarse hacia
arriba nuevamente.
