4. CSS

Versión para imprimir.

En esta lección se introduce el lenguaje CSS.

A. CSS

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>CSS</title>
 <style>
  h1 {
   color: yellow;
   background-color: blue;
  }

  p {
   color: white;
   background-color: black;
  }
 </style>
</head>
<body>
 <h1>CSS</h1>
 <p>Este es un ejemplo.</p>
 <p>Aprende CSS.</p>
 <h2>Subsección</h2>
 <p>Juega con colores.</p>
 <footer>
  <p>
   © 2021
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>
</html>

Solo para los más rudos

B. El elemento style

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>CSS</title>
 <style>
  h1 {
   color: yellow;
   background-color: blue;
  }

  p {
   color: white;
   background-color: black;
  }
 </style>
</head>
<body>
 ...
</body>
</html>

C. Comentarios

Ejemplo

<style>
 /* Comentario sobre h1.  */
 h1 {
  color: yellow; /*Sobre color.*/
  background-color: blue;
 }
</style>

D. Reglas de estilo

selector

Una expresión que permite identificar a uno o varios elementos de HTML.

lista de selectores

Una secuencia de selectores separadas por coma (,).

declaración de propiedad

Una expresión del tipo nombre: valor

lista de declaraciones de propiedades

Una secuencia de declaraciones de propiedades separadas por punto y coma (;) y encerradas entre llaves ({ }).

regla de estilo

Une lista de selectores con una lista de declaraciones de propiedades.

Ejemplo

<style>
 /* Esta es una regla.
  * El selector es h1.
  * Sus propiedades están dentro de
  * las llaves. */
 h1 {
  color: yellow;
  background-color: blue;
 } /* Fin de la primera regla. */

 /* Esta es otra regla.
  * El selector es p.
  * Sus propiedades están dentro de
  * las llaves. */
 p {
  color: white;
  background-color: black;
 } /* Fin de la segunda regla. */
</style>

E. Selector de tipo

Ejemplo

<head>
 <style>
  /* El selector
   *  h1
   * hace que las propiedades de
   * esta regla se apliquen a todos
   * los elementos de tipo
   *  h1. */
  h1 {
   color: yellow;
   background-color: blue;
  }

  /* El selector
   *  p
   * hace que las propiedades de
   * esta regla se apliquen a todos
   * los elementos de tipo
   *  p. */
  p {
   color: white;
   background-color: black;
  }
 </style>
</head>
<body>
 <!-- Las reglas con el selector
   h1
  se aplican a este elemento. -->
 <body>
  <h1>CSS</h1>
  <!-- Las reglas con el selector
    p
   se aplican a este elemento. -->
  <p>Este es un ejemplo.</p>
  <!-- Las reglas con el selector
    p
   se aplican a este elemento. -->
  <p>Aprende CSS.</p>
  <h2>Subsección</h2>
  <!-- Las reglas con el selector
    p
   se aplican a este elemento. -->
  <p>Juega con colores.</p>
  <footer>
   <!-- Las reglas con el selector
     p
    se aplican a este elemento. -->
   <p>
    © 2021
    Gilberto Pacheco Gallegos.
   </p>
  </footer>
 </body>

F. Propiedades

Ejemplo

<head>
 <style>
  h1 {
   /* Esta es la propiedad
    *  color.
    * En este caso se aplica
    * a los elementos tipo
    *  h1.
    * Su valor es yellow. */
   color: yellow;
   /* Esta es la propiedad
    *  background-color.
    * En este caso se aplica
    * a los elementos tipo
    *  h1.
    * Su valor es blue. */
   background-color: blue;
  }

  p {
   /* Esta es la propiedad
    *  color.
    * En este caso se aplica
    * a los elementos tipo
    *  p.
    * Su valor es white. */
   color: white;
   /* Esta es la propiedad
    *  background-color.
    * En este caso se aplica
    * a los elementos tipo
    *  p.
    * Su valor es black. */
   background-color: black;
  }
 </style>
</head>
<body>
 <h1>CSS</h1>
 <p>Este es un ejemplo.</p>
 <p>Aprende CSS.</p>
 <h2>Subsección</h2>
 <p>Juega con colores.</p>
 <footer>
  <p>
   © 2021
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>

G. Propiedades personalizadas

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<head>
 <style>
  html {
   --colTexto: yellow;
   --colFondo: blue;
  }

  h1 {
   color: var(--colTexto);
   background-color:
    var(--colFondo);
  }

  p {
   color: var(--colTexto);
   background-color: black;
  }
 </style>
</head>
<body>
 <h1>CSS</h1>
 <p>Este es un ejemplo.</p>
 <p>Aprende CSS.</p>
 <h2>Subsección</h2>
 <p>Juega con colores.</p>
 <footer>
  <p>
   © 2021
   Gilberto Pacheco Gallegos.
  </p>
 </footer>
</body>

H. Resumen