5. 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.

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>CSS</title>
8 <style>
9 h1 {
10 color: yellow;
11 background-color: blue;
12 }
13
14 p {
15 color: white;
16 background-color: black;
17 }
18 </style>
19</head>
20<body>
21 <h1>CSS</h1>
22 <p>Este es un ejemplo.</p>
23 <p>Aprende CSS.</p>
24 <h2>Subsección</h2>
25 <p>Juega con colores.</p>
26 <footer>
27 <p>
28 © 2021
29 Gilberto Pacheco Gallegos.
30 </p>
31 </footer>
32</body>
33</html>

Solo para los más rudos

B. El elemento style

Ejemplo

1<!DOCTYPE html>
2<html lang="es">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width">
7 <title>CSS</title>
8 <style>
9 h1 {
10 color: yellow;
11 background-color: blue;
12 }
13
14 p {
15 color: white;
16 background-color: black;
17 }
18 </style>
19</head>
20<body>
21 ...
22</body>
23</html>

C. Comentarios

Ejemplo

1<style>
2 /* Comentario sobre h1. */
3 h1 {
4 color: yellow; /*Sobre color.*/
5 background-color: blue;
6 }
7</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

1<style>
2 /* Esta es una regla.
3 * El selector es h1.
4 * Sus propiedades están dentro de
5 * las llaves. */
6 h1 {
7 color: yellow;
8 background-color: blue;
9 } /* Fin de la primera regla. */
10
11 /* Esta es otra regla.
12 * El selector es p.
13 * Sus propiedades están dentro de
14 * las llaves. */
15 p {
16 color: white;
17 background-color: black;
18 } /* Fin de la segunda regla. */
19</style>

E. Selector de tipo

Ejemplo

1<head>
2 <style>
3 /* El selector
4 * h1
5 * hace que las propiedades de
6 * esta regla se apliquen a todos
7 * los elementos de tipo
8 * h1. */
9 h1 {
10 color: yellow;
11 background-color: blue;
12 }
13
14 /* El selector
15 * p
16 * hace que las propiedades de
17 * esta regla se apliquen a todos
18 * los elementos de tipo
19 * p. */
20 p {
21 color: white;
22 background-color: black;
23 }
24 </style>
25</head>
26<body>
27 <!-- Las reglas con el selector
28 h1
29 se aplican a este elemento. -->
30 <body>
31 <h1>CSS</h1>
32 <!-- Las reglas con el selector
33 p
34 se aplican a este elemento. -->
35 <p>Este es un ejemplo.</p>
36 <!-- Las reglas con el selector
37 p
38 se aplican a este elemento. -->
39 <p>Aprende CSS.</p>
40 <h2>Subsección</h2>
41 <!-- Las reglas con el selector
42 p
43 se aplican a este elemento. -->
44 <p>Juega con colores.</p>
45 <footer>
46 <!-- Las reglas con el selector
47 p
48 se aplican a este elemento. -->
49 <p>
50 © 2021
51 Gilberto Pacheco Gallegos.
52 </p>
53 </footer>
54 </body>

F. Propiedades

Ejemplo

1<head>
2 <style>
3 h1 {
4 /* Esta es la propiedad
5 * color.
6 * En este caso se aplica
7 * a los elementos tipo
8 * h1.
9 * Su valor es yellow. */
10 color: yellow;
11 /* Esta es la propiedad
12 * background-color.
13 * En este caso se aplica
14 * a los elementos tipo
15 * h1.
16 * Su valor es blue. */
17 background-color: blue;
18 }
19
20 p {
21 /* Esta es la propiedad
22 * color.
23 * En este caso se aplica
24 * a los elementos tipo
25 * p.
26 * Su valor es white. */
27 color: white;
28 /* Esta es la propiedad
29 * background-color.
30 * En este caso se aplica
31 * a los elementos tipo
32 * p.
33 * Su valor es black. */
34 background-color: black;
35 }
36 </style>
37</head>
38<body>
39 <h1>CSS</h1>
40 <p>Este es un ejemplo.</p>
41 <p>Aprende CSS.</p>
42 <h2>Subsección</h2>
43 <p>Juega con colores.</p>
44 <footer>
45 <p>
46 © 2021
47 Gilberto Pacheco Gallegos.
48 </p>
49 </footer>
50</body>

G. Propiedades personalizadas

Ejemplo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<head>
2 <style>
3 html {
4 --colTexto: yellow;
5 --colFondo: blue;
6 }
7
8 h1 {
9 color: var(--colTexto);
10 background-color:
11 var(--colFondo);
12 }
13
14 p {
15 color: var(--colTexto);
16 background-color: black;
17 }
18 </style>
19</head>
20<body>
21 <h1>CSS</h1>
22 <p>Este es un ejemplo.</p>
23 <p>Aprende CSS.</p>
24 <h2>Subsección</h2>
25 <p>Juega con colores.</p>
26 <footer>
27 <p>
28 © 2021
29 Gilberto Pacheco Gallegos.
30 </p>
31 </footer>
32</body>

H. Resumen