6. Propiedades básicas de CSS

Versión para imprimir.

En esta lección se presentan las propiedades básicas de CSS.

A. Fonts

Algunas Familias Básicas

serif

  • Es el tipo de letra que lleva adornos.

  • Cada glifo puede tener un ancho diferente al de los otros de la misma familia.

  • Permite leer cómodamente textos largos.

  • Viene predefinida, pero la familia exacta depende de cada navegador web.

Ejemplo de Serif.

sans-serif

  • Es el tipo de letra que no lleva adornos.

  • Luce más en títulos, textos cortos e interfaces de usuario.

  • Cada glifo puede tener un ancho diferente al de los otros de la misma familia.

  • Viene predefinida, pero la familia exacta depende de cada navegador web.

Ejemplo de Sans Serif.

Solo para los más rudos

B. La propiedad font-family

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>font-family</title>
8 <style>
9 h1 {
10 font-family: sans-serif
11 }
12
13 p {
14 font-family: serif
15 }
16 </style>
17</head>
18<body>
19 <h1>font-family sans-serif</h1>
20 <p>font-family serif.</p>
21</body>
22</html>

C. Colores en CSS

Colores primarios

Los colores se expresan como una combinación de los colores primarios:

  • Rojo (red en inglés)

  • Verde (green en inglés)

  • Azul (blue en inglés)

Especificación de los colores primarios y transparencia

Estas son algunas formas de expresar los colores primarios en las definiciones que aparecen después:

num_rojo

Valor decimal entre 0 y 255. Indica la cantidad de rojo que lleva un color.

num_verde

Valor decimal entre 0 y 255. Indica indica la cantidad de verde que lleva un color.

num_azul

Valor decimal entre 0 y 255. Indica la cantidad de azul que lleva un color.

num_transp

Valor decimal fraccionario entre 0 y 1. Indica lo transparente que es un color: 0 - totalmente transparente, 1 - totalmente opaco.

rr

Valor de 2 cifras hexadecimales entre 00 y ff. Indica la cantidad de rojo que lleva un color.

gg

Valor de 2 cifras hexadecimales entre 00 y ff. Indica la cantidad de verde que lleva un color.

bb

Valor de 2 cifras hexadecimales entre 00 y ff. Indica la cantidad de azul que lleva un color.

aa

Valor de 2 cifras hexadecimales entre 00 y ff. Indica lo transparente que es un color. 00 - totalmente transparente, ff - totalmente opaco.

Algunas Formas de Expresar Colores en CSS3

transparent

Color transparente.

Nombre del color

Los nombres de colores que se pueden usar están definidos en https://www.w3.org/TR/css-color-3/#html4 y en https://www.w3.org/TR/css-color-3/#svg-color.

Ejemplo:

blue

rgb(num_rojo, num_verde, num_azul)

Representa la mezcla de colores rojo, verde y azul en notación decimal.

Ejemplo:

rgb(155, 255, 43)

rgba(num_rojo, num_verde, num_azul, num_transp)

Representa la mezcla de rojo, verde, azul y transparencia en notación decimal.

Ejemplo:
rgba(155,255,43,0.7)

#rrggbb

Representa la mezcla de colores rojo, verde y azul en notación hexadecimal.

Ejemplo:

#a2fe09

#rrggbbaa

Representa la mezcla de rojo, verde, azul y transparencia en notación hexadecimal.

Ejemplo:
#0b467380

Temas por Investigar

Solo para los más rudos

D. La propiedad color

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>Color</title>
8 <style>
9 h1 {
10 color: blue
11 }
12
13 p {
14 color: #005500
15 }
16 </style>
17</head>
18<body>
19 <h1>Color blue</h1>
20 <p>Color #005500.</p>
21</body>
22</html>

Solo para los más rudos

E. La propiedad background-color

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>background-color</title>
8 <style>
9 h1 {
10 background-color: yellow
11 }
12
13 p {
14 background-color: #aaffaa
15 }
16 </style>
17</head>
18<body>
19 <h1>background-color yellow</h1>
20 <p>background-color #aaffaa.</p>
21</body>
22</html>

Solo para los más rudos

F. Resumen