Conceptos Esenciales CSS: Selectores, Propiedades y Modelo de Caja

Selectores CSS: Fundamentos y Aplicación

Los selectores son fundamentales en CSS porque se usan para indicar a qué elementos HTML se aplicarán las reglas de estilo.

Identificadores y Clases en CSS

Para aplicar estilos específicos a elementos HTML, utilizamos los atributos id y class.

1. Atributo id

• Cada valor de id debe ser único en un documento HTML.
• Útil para identificar un solo elemento.

Ejemplo HTML:

<div id="header">Este es el encabezado</div>

Ejemplo CSS:

#header {
    background-color: blue;
}

2. Atributo class

• Permite asignar una o más clases a un elemento.
• Varios elementos pueden compartir la misma clase.

Ejemplo HTML:

<div class="important">Texto importante</div>
<div class="important">Otro texto importante</div>

Ejemplo CSS:

.important {
    font-weight: bold;
}

Ejemplos de Aplicación de Clases y IDs

A continuación, se muestran ejemplos de contenido HTML que podrían ser estilizados con las clases y IDs definidos:

Su pedido ha sido registrado en el sistema correctamente. Recibirá una confirmación por correo electrónico en breve.
Se cargarán <span id="total">300 euros</span> en su cuenta bancaria.
Recuerde comprobar que dispone de saldo suficiente en la cuenta.

Y el CSS correspondiente para aplicar estilos:

.aviso {
    color: blue;
}
.aviso_importante {
    font-weight: bold;
    color: red;
}

Elementos div y span

• div: Es un contenedor de bloque. Se utiliza para agrupar contenido relacionado.

Ejemplo HTML con div:

<div>
    <h1>Título</h1>
    <p>Contenido relacionado.</p>
</div>

span: Es un contenedor en línea. Sirve para aplicar estilos a partes de texto dentro de un bloque.

Ejemplo HTML con span:

<p>Texto con <span class="destacado">destacado</span>.</p>

Tipos de Selectores CSS Comunes

Selector Universal (*)

Selecciona todos los elementos del documento.

* {
    color: red;
}

Selector de Tipo (p)

Selecciona todos los elementos <p>.

p {
    font-size: 18px;
}

Selector de Clase (.miclase)

Selecciona todos los elementos con la clase miclase.

.miclase {
    border: 1px solid black;
}

Selector de Grupo (p, div)

Selecciona todos los elementos <p> y <div>.

p, div {
    background-color: lightblue;
}

Selector de Tipo y Clase (aside.miclase)

Selecciona solo los elementos <aside> que tienen la clase miclase.

aside.miclase {
    padding: 10px;
    background-color: yellow;
}

Selector de ID (#identificador)

Selecciona un elemento específico con el ID identificador.

#identificador {
    font-weight: bold;
}

Colores en CSS

Los colores en CSS se pueden definir de varias maneras:

• Palabras clave predefinidas: Puedes usar nombres estándar como aqua, black, blue, purple, transparent, entre otros, para definir colores rápidamente.
• Coordenadas RGB o RGBA: RGB especifica los colores mediante la combinación de rojo, verde y azul (en valores del 0 al 255 o porcentajes). RGBA agrega un cuarto valor que define la transparencia (opacidad).
• Coordenadas HSL o HSLA: HSL representa el tono (hue), saturación y luminosidad. HSLA añade transparencia.

Ejemplos de Colores en CSS

1. body { color: black; background: white; }
   • Define que el texto del cuerpo será negro y el fondo será blanco.
2. h1 { color: maroon; }
   • Cambia el color del texto en los encabezados <h1> a marrón oscuro.
3. h2 { color: olive; }
   • Establece el color del texto en los encabezados <h2> a un tono oliva.

Ejemplos con em (énfasis):

• em { color: #f00; }
  • Usa un color rojo definido con un valor hexadecimal corto (3 dígitos).
• em { color: #ff0000; }
  • Especifica el mismo rojo con un formato hexadecimal largo (6 dígitos).
• em { color: rgb(255, 0, 0); }
  • Define el rojo con coordenadas RGB en valores numéricos.
• em { color: rgb(100%, 0%, 0%); }
  • El mismo rojo, pero usando porcentajes.
• em { color: rgba(255, 0, 0, 0.5); }
  • Define un rojo translúcido al 50% (opacidad 0.5) con RGBA.

Propiedades de Tipo de Texto en CSS

1. font-family: Define la familia de fuentes que se usará. Ejemplo: arial, sans-serif.
2. font-size: Establece el tamaño del texto. Ejemplo: 12pt, larger.
3. font-weight: Especifica el grosor del texto. Ejemplo: bold, 300.
4. font-style: Indica si el texto será normal, en cursiva o en oblicuo. Ejemplo: italic.
5. font-variant: Permite mostrar el texto en formato de versalitas. Ejemplo: small-caps.

Ejemplo de Estilos de Tipografía:

/* Tipografías */
body {
    font-family: 'Georgia', serif; /* Cambia la tipografía por una serif clásica */
    font-size: 16px; /* Tamaño estándar */
    color: #333; /* Color del texto */
    line-height: 1.5; /* Espaciado entre líneas */
    background-color: #f4f4f4; /* Fondo gris claro */
}

Propiedades de Formato del Texto en CSS

1. color: Cambia el color del texto. Ejemplo: rgb(255,0,0), navy.
2. text-align: Define la alineación del texto dentro de su contenedor. Ejemplo: center, justify.
3. vertical-align: Posiciona el texto verticalmente. Ejemplo: top, middle.
4. text-decoration: Añade decoraciones como subrayado. Ejemplo: underline.
5. text-indent: Ajusta la sangría de la primera línea de texto. Ejemplo: 36pt.
6. text-shadow: Aplica una sombra al texto. Ejemplo: rgb(0,0,0) 10px 10px 3px.
7. text-transform: Cambia las mayúsculas y minúsculas del texto. Ejemplo: uppercase.

Ejemplo de Formato de Texto:

p {
    font-family: times serif; /* Define la fuente como 'Times' */
    font-style: italic; /* Aplica estilo cursivo */
    color: navy; /* Cambia el color del texto a azul oscuro */
    text-indent: 5em; /* Añade una sangría de 5em */
}

El Modelo de Caja (Box Model) en CSS

El contenido de un elemento HTML está rodeado por:

1. Padding (relleno): El espacio entre el contenido y el borde del elemento.
2. Borde: Define el contorno que rodea el relleno.
3. Margin (margen): El espacio exterior del borde que separa un elemento de los demás.

Propiedades de Bordes en CSS

Aquí se presentan las propiedades relacionadas con los bordes en CSS:

1. border-color: Especifica el color del borde. Ejemplos: #ff0080, rgb(256,0,128), white, navy.
2. border-style: Define el estilo del borde. Ejemplos: none, solid, dotted, dashed, double, groove, etc.
3. border-width: Controla el grosor del borde. Ejemplos: thin, medium, thick, 1px.
4. border: Propiedad abreviada que combina color, estilo y grosor. Ejemplo: 4px solid red.

Nota: También puedes especificar propiedades para bordes específicos, como:

• border-top-color
• border-left-style
• border-bottom-width
• border-right.

Propiedad padding en CSS

• Concepto: Controla la distancia entre el contenido y el borde del elemento. Básicamente, es un “relleno interno” que rodea al contenido dentro de un borde.
• Detalles:
  • Puede tomar valores numéricos como px, em, %, o la palabra clave especial inherit, que indica que tomará el valor del elemento padre.
  • Propiedades específicas:
    • padding-top: Relleno superior.
    • padding-right: Relleno derecho.
    • padding-bottom: Relleno inferior.
    • padding-left: Relleno izquierdo.
    • padding: Aplica el mismo valor a todos los lados, o permite especificar valores individuales para cada lado (en el orden superior, derecho, inferior, izquierdo).

Propiedad margin en CSS

• Concepto: Controla la distancia entre el borde del elemento y otros elementos o bloques. Actúa como un “espaciado externo”.
• Detalles:
  • Al igual que padding, acepta valores numéricos (px, em, %) y las palabras clave especiales inherit o auto.
  • Propiedades específicas:
    • margin-top: Margen superior.
    • margin-right: Margen derecho.
    • margin-bottom: Margen inferior.
    • margin-left: Margen izquierdo.
    • margin: Similar a padding, permite aplicar valores únicos o específicos para cada lado.
  • Comportamiento especial:
    • En el eje vertical (entre bloques consecutivos), el margen efectivo es el mayor entre el margen inferior del primer bloque y el superior del segundo.
    • En el eje horizontal, los márgenes se suman.

Ejemplo de Propiedades Combinadas en CSS

Este ejemplo combina varias propiedades para aplicar estilos al elemento con el ID resumen y a su contenido:

1. #resumen { ... }:
   • float: right;: Sitúa el elemento flotando a la derecha.
   • border: 1px dashed black;: Establece un borde de 1 píxel, discontinuo, color negro.
   • padding-left: 5px; y padding-right: 5px;: Define un espacio interior (padding) de 5 píxeles a los lados izquierdo y derecho.
   • width: 600px;: Especifica un ancho fijo de 600 píxeles.
   • margin: 0px 50px;: Añade margen superior/inferior de 0 píxeles y lateral de 50 píxeles.
   • background: silver;: Establece un fondo de color plateado.
   • text-align: justify;: Justifica el texto dentro del elemento.
2. #resumen > h2 { ... }:
   • Selecciona directamente los elementos <h2> que son hijos inmediatos de #resumen.
   • text-align: center;: Centra horizontalmente el texto del encabezado.

Propiedades para Controlar el Fondo en CSS

1. Propiedades y ejemplos:

• background-color: Define el color de fondo del elemento, como white (blanco).
• background-image: Especifica una imagen como fondo, por ejemplo: url("background.jpg").
• background-repeat: Controla si la imagen se repite. Ejemplos:
  • repeat: Repite la imagen en ambas direcciones.
  • no-repeat: No repite la imagen.
  • repeat-x: Solo se repite horizontalmente.
  • repeat-y: Solo se repite verticalmente.
• background-position: Define la posición de la imagen de fondo. Ejemplos: left, center, right, top, bottom, o porcentajes (20%, 50%).
• background-attachment: Controla si el fondo es fijo o se desplaza con la página. Valores: fixed o scroll.
• background: Es una forma abreviada para combinar varias propiedades del fondo.

Propiedades de Visibilidad en CSS

1. Propiedades:

• display: Define cómo se muestra un elemento en el flujo de la página. Ejemplos:
  • none: Oculta el elemento completamente y no ocupa espacio en el diseño.
  • block: Muestra el elemento como un bloque (ocupa toda la línea).
  • inline: Muestra el elemento en línea (como parte del texto).
• visibility: Controla si el elemento es visible o no. Ejemplos:
  • visible: El elemento es visible.
  • hidden: El elemento no es visible, pero sigue ocupando espacio.