Definiciones de CSS y sus conceptos

/ Tecnología / Por
Definiciones de CSS y sus conceptos

Definición de CSS

CSS (Cascading Style Sheets) es un lenguaje utilizado para describir la presentación visual de los documentos HTML. Permite definir colores, fuentes, tamaños, márgenes, alineaciones, fondos y muchos otros aspectos visuales, separando el contenido (HTML) de la apariencia (CSS).

Funcionamiento Básico de CSS

El funcionamiento de CSS se basa en reglas que se aplican a elementos HTML. Cada regla está formada por un selector (que identifica los elementos a los que se aplicará el estilo) y un bloque de declaración (que contiene las propiedades y sus valores). El navegador interpreta estas reglas y las aplica a la página web.

Incluir CSS en un archivo HTML

CSS puede incluirse en un documento HTML de tres formas principales:

  1. En línea (inline): dentro del atributo style en una etiqueta HTML.
  2. Interno (internal): dentro de la etiqueta <style> ubicada en el <head> del documento.
  3. Externo (external): mediante un archivo separado con extensión .css, enlazado con la etiqueta <link>.

Definición de una regla CSS

Una regla CSS es la estructura básica del lenguaje que se compone de un selector y un bloque de declaraciones.
Ejemplo:

p {
  color: blue;
  font-size: 16px;
}

Elemento de una regla CSS

Una regla CSS tiene los siguientes elementos:

  • Selector: indica el elemento HTML al que se aplicará el estilo.
  • Propiedad: define la característica que se modificará (color, tamaño, margen, etc.).
  • Valor: establece el ajuste de la propiedad.
  • Bloque de declaración: conjunto de propiedades y valores entre llaves { }.

Medios CSS

Los medios en CSS (media queries) permiten aplicar estilos específicos según el dispositivo o el tamaño de la pantalla. Se usan con la regla @media.
Ejemplo:

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

Comentarios CSS

Los comentarios en CSS sirven para añadir notas o aclaraciones que no se interpretan como código. Se escriben entre /* comentario */.
Ejemplo:

/* Este estilo aplica al título principal */
h1 {
  color: red;
}

Sintaxis de la definición de las propiedades CSS

La sintaxis de una propiedad CSS consiste en:

  • Propiedad: característica que se desea modificar.
  • Valor: ajuste asignado a la propiedad.
    Se separan por dos puntos : y terminan con punto y coma ;.
    Ejemplo: color: green;

Conceptos relacionados

Selector

Los selectores identifican los elementos HTML a los que se aplicarán estilos.

  • Selectores básicos: seleccionan por tipo, id o clase.
    • p (tipo) → aplica a todos los párrafos.
    • #titulo (id) → aplica a un elemento con id=»titulo».
    • .rojo (clase) → aplica a todos los elementos con class=»rojo».
  • Selectores avanzados: permiten mayor precisión.
    • div p → todos los párrafos dentro de un div.
    • p:first-child → primer párrafo de un contenedor.
    • [type="text"] → selecciona inputs de texto.
  • Agrupación de reglas: se usa una coma para aplicar estilos iguales a varios selectores. h1, h2, h3 { color: blue; }
  • Herencias: algunos estilos se heredan automáticamente, como el color o la fuente. Otros no se heredan, como el margen o el borde.

Colisiones de estilos

Las colisiones ocurren cuando varios estilos afectan al mismo elemento. El navegador resuelve la colisión aplicando el estilo más específico o el último declarado. El orden de prioridad es:

  1. Estilos en línea.
  2. Estilos en hoja interna.
  3. Estilos en hoja externa.
  4. Estilos por herencia.

Unidades de medida en CSS

Las unidades de medida en CSS permiten definir tamaños (fuentes, márgenes, anchos, etc.). Se dividen en relativas y absolutas.

  • Unidades relativas: dependen del contexto o del elemento padre. Ejemplos:
    • em: relativo al tamaño de la fuente del elemento.
    • rem: relativo al tamaño de la fuente raíz (html).
    • %: relativo al contenedor padre.
    • vw y vh: relativos al ancho y alto de la ventana gráfica.
  • Unidades absolutas: tienen un valor fijo independiente del contexto. Ejemplos:
    • px (píxeles).
    • cm, mm (centímetros, milímetros).
    • in (pulgadas).
    • pt (puntos tipográficos).

Colores en CSS

CSS permite definir colores de varias maneras:

  • Palabras clave: nombres predefinidos como red, blue, green.
  • RGB decimal: define el color con tres valores entre 0 y 255.
    • Ejemplo: rgb(255,0,0) → rojo.
  • RGB porcentual: define el color con porcentajes.
    • Ejemplo: rgb(100%,0%,0%) → rojo.
  • Hexadecimal: utiliza un código de seis dígitos hexadecimales.
    • Ejemplo: #FF0000 → rojo.

Modelo de Caja en CSS (Box Model)

El modelo de caja es la base del diseño en CSS. Cada elemento HTML se representa como una caja con las siguientes partes:

  • Anchura y altura: definen el tamaño del contenido.
  • Padding (relleno): espacio entre el contenido y el borde.
  • Border (borde): línea que rodea el relleno y el contenido.
  • Margin (margen): espacio externo entre el borde del elemento y otros elementos.
  • Background (fondo): área de color o imagen que ocupa el contenido y el relleno.

Posicionamiento en CSS

El posicionamiento controla dónde aparece un elemento en la página:

  • Normal (static): es el valor por defecto. Los elementos se colocan en orden normal del flujo.
  • Relativo (relative): se coloca respecto a su posición normal, desplazándose según top, right, bottom, left.
  • Fijo (fixed): el elemento se mantiene fijo respecto a la ventana del navegador, incluso al hacer scroll.
  • Absoluto (absolute): se coloca respecto a su contenedor más cercano que tenga posición distinta de static.
  • Flotante (float): permite alinear un elemento a la izquierda o derecha, dejando que el contenido fluya a su alrededor.

Visualización (display)

La propiedad display controla cómo se muestra un elemento en pantalla:

  • block: el elemento ocupa toda la anchura disponible (ej. <div>).
  • inline: el elemento se muestra en línea, sin romper el flujo (ej. <span>).
  • inline-block: combina características de block y inline.
  • none: oculta el elemento.
  • flex o grid: permiten diseños avanzados de distribución.

Propiedades de Textos

Las propiedades de texto permiten controlar la apariencia de los contenidos escritos en una página web.

  • color: define el color del texto.
  • font-family: el tipo de fuente.
  • font-size: el tamaño de la letra.
  • font-style: estilo como cursiva o normal.
  • font-weight: grosor (normal, bold).
  • text-align: alineación (left, right, center, justify).
  • text-decoration: decoración (subrayado, tachado).
  • line-height: altura entre líneas.

Propiedades de Enlaces

Los enlaces se estilizan principalmente con pseudoclases:

  • a:link: estado normal.
  • a:visited: cuando el enlace ya fue visitado.
  • a:hover: cuando el ratón pasa encima.
  • a:active: al hacer clic.
    Estas permiten cambiar color, fondo, subrayado o aplicar transiciones.

Propiedades de Imágenes

Las imágenes en CSS se controlan con:

  • width y height: dimensiones.
  • object-fit: ajusta cómo se redimensiona la imagen (cover, contain).
  • border-radius: redondear esquinas.
  • filter: aplicar efectos (blur, brightness).
  • background-image: usar imágenes como fondo.

Propiedades de Listas

Las listas (<ul>, <ol>) se estilizan con:

  • list-style-type: define el marcador (disc, circle, square, decimal).
  • list-style-image: usar una imagen como viñeta.
  • list-style-position: posición dentro o fuera.

Propiedades de Tablas

Las tablas (<table>) tienen propiedades de formato:

  • border: define bordes.
  • border-collapse: colapsar o separar bordes.
  • padding: espacio en celdas.
  • text-align: alineación del texto.
  • background-color: color de celdas.

Propiedades de Formularios

Los formularios (<input>, <textarea>, <button>) se personalizan con:

  • width y height: dimensiones.
  • border: estilo del borde.
  • background-color: color de fondo.
  • font-size: tamaño del texto.
  • :focus: estado activo de un campo.

Transformación 2D

La propiedad transform permite modificar elementos en dos dimensiones. Ejemplos:

  • translate(x,y): mover.
  • rotate(45deg): rotar.
  • scale(1.5): escalar.
  • skew(20deg): inclinar.

Transformación 3D

También con transform, pero en tres dimensiones:

  • rotateX, rotateY, rotateZ: rotaciones en ejes 3D.
  • translateZ: mover en profundidad.
  • perspective: dar efecto de perspectiva.

Transición

Las transiciones permiten animar un cambio de estado de una propiedad:

  • transition-property: qué propiedad cambia.
  • transition-duration: tiempo de la transición.
  • transition-timing-function: velocidad (linear, ease).

Animación

Las animaciones permiten cambiar propiedades en varios pasos con @keyframes.
Ejemplo:

@keyframes mover {
  from { left: 0px; }
  to { left: 100px; }
}
  • animation-name: nombre de la animación.
  • animation-duration: tiempo.
  • animation-iteration-count: cantidad de repeticiones.

Paginación: Columnas

CSS permite dividir texto en columnas.

  • column-count: número de columnas.
  • column-gap: espacio entre columnas.
  • column-rule: línea divisoria.

Interfaces de usuario

  • Box-sizing: controla cómo se calculan ancho y alto de un elemento.
    • content-box: tamaño incluye solo el contenido.
    • border-box: incluye relleno y borde.
  • Flexbox: sistema de diseño flexible.
    • display: flex: activa flexbox.
    • justify-content: alineación horizontal.
    • align-items: alineación vertical.
    • flex-wrap: control de líneas.

Media Query

Las media queries permiten aplicar estilos según el dispositivo o tamaño de pantalla.
Ejemplo:

@media (max-width: 768px) {
  body { background-color: lightgray; }
}

Se usan para diseños responsivos.

Otros Artículos