CSS: Sintaxis de selectores y propiedades

CSS 3 es fundamental para diseñar y estructurar páginas web de manera eficiente. En este módulo, nos centraremos en la sintaxis de selectores y propiedades, aspectos clave para el desarrollo avanzado en CSS 3.

Selectores en CSS 3

Los selectores en CSS 3 permiten apuntar y aplicar estilos a elementos específicos del DOM. A continuación, se presentan algunos de los selectores más utilizados:

Selectores básicos

• Selector de tipo: Selecciona todos los elementos de un tipo específico.

  p {
      color: blue;
  }

Este selector aplica el color azul a todos los elementos <p>.

• Selector de clase: Selecciona todos los elementos con una clase específica.

  .mi-clase {
      font-size: 16px;
  }

Aplica un tamaño de fuente de 16px a todos los elementos con la clase mi-clase.

• Selector de ID: Selecciona un único elemento con un ID específico.

  #mi-id {
      background-color: yellow;
  }

Aplica un color de fondo amarillo al elemento con el ID mi-id.

Selectores avanzados

• Selector de atributo: Selecciona elementos basados en un atributo o valor de atributo.

  a[href="https://example.com"] {
      color: red;
  }

Este selector aplica el color rojo a todos los enlaces con el atributo href que apunta a https://example.com.

• Selector de descendiente: Selecciona elementos que son descendientes de un elemento específico.

  div p {
      margin: 10px;
  }

Aplica un margen de 10px a todos los elementos <p> que son descendientes de un <div>.

• Selector de pseudo-clase: Selecciona elementos en un estado específico.

  a:hover {
      text-decoration: underline;
  }

Aplica un subrayado a los enlaces cuando el usuario pasa el cursor sobre ellos.

Propiedades en CSS 3

Las propiedades en CSS 3 definen el estilo de los elementos seleccionados. A continuación, se detallan algunas propiedades esenciales:

Propiedades de texto

• color: Define el color del texto.

  h1 {
      color: green;
  }

Aplica el color verde a todos los elementos <h1>.

• font-size: Define el tamaño de la fuente.

  p {
      font-size: 14px;
  }

Establece un tamaño de fuente de 14px para todos los párrafos.

• text-align: Define la alineación del texto.

  div {
      text-align: center;
  }

Centra el texto dentro de un <div>.

Propiedades de fondo

• background-color: Define el color de fondo de un elemento.

  body {
      background-color: #f0f0f0;
  }

Aplica un color de fondo gris claro a la página.

• background-image: Define una imagen de fondo para un elemento.

  div {
      background-image: url('imagen.jpg');
  }

Establece una imagen de fondo para un <div>.

Propiedades de caja

• margin: Define el espacio exterior de un elemento.

  .contenedor {
      margin: 20px;
  }

Aplica un margen de 20px a todos los elementos con la clase contenedor.

• padding: Define el espacio interior de un elemento.

  .contenedor {
      padding: 10px;
  }

Aplica un relleno de 10px a los elementos con la clase contenedor.

• border: Define el borde de un elemento.

  .contenedor {
      border: 1px solid black;
  }

Aplica un borde de 1px sólido y negro a los elementos con la clase contenedor.