PDF de programación - CSS

CSS.

2.2

2.1

1.1
1.2
1.3


1. INTRODUCCIÓN AL CSS ..................................................................3
¿QUÉ ES CSS?.............................................................................................. 3
FUNCIONAMIENTO BÁSICO.................................................................................. 3
CÓMO INCLUIR CSS EN UN DOCUMENTO HTML......................................................... 4
1.3.1 Incluir CSS en el mismo documento HTML................................................... 4
1.3.2 Definir CSS en un archivo externo.............................................................. 5
1.3.3 Incluir CSS en los elementos HTML............................................................. 6
2. SELECTORES .................................................................................6
SELECTORES BÁSICOS ...................................................................................... 7
2.1.1 Selector de tipo o etiqueta ........................................................................ 7
2.1.2 Selector de clase ..................................................................................... 8
2.1.3 Selectores de ID .................................................................................... 10
2.1.4 Agrupación de reglas.............................................................................. 11
HERENCIA .................................................................................................. 11
3. UNIDADES DE MEDIDA Y COLORES ................................................12
UNIDADES DE MEDIDA .................................................................................... 12
3.1.1 Unidades relativas ................................................................................. 12
3.1.2 Unidades absolutas ................................................................................ 13
COLORES ................................................................................................... 13
3.2.1 Palabras clave ....................................................................................... 14
3.2.2 RGB decimal ......................................................................................... 14
3.2.3 RGB porcentual ..................................................................................... 14
3.2.4 RGB hexadecimal................................................................................... 14
4. MODELO DE CAJAS (BOX MODEL) ..................................................14
ANCHURA Y ALTURA ....................................................................................... 15
4.1.1 Anchura ............................................................................................... 15
4.1.2 Altura .................................................................................................. 15
MARGEN Y RELLENO ....................................................................................... 16
4.2.1 Margen ................................................................................................ 16
4.2.2 Relleno................................................................................................. 17

3.2

3.1

4.1

4.2

4.3

BORDES 18

4.4

FONDOS 19

4.3.1 Anchura ............................................................................................... 19
4.3.2 Color ................................................................................................... 19
4.3.3 Estilo ................................................................................................... 19

5. TEXTO ........................................................................................21
TIPOGRAFÍA ................................................................................................ 21
TEXTO 23

5.1
5.2

6. ENLACES ....................................................................................25
ESTILOS BÁSICOS ......................................................................................... 25
6.1.1 Tamaño, color y decoración..................................................................... 25

6.1

6.2

6.1.2 Pseudo-clases ....................................................................................... 25
ESTILOS AVANZADOS ..................................................................................... 26
6.2.1 Decoración personalizada........................................................................ 26
6.2.2 Imágenes según el tipo de enlace ............................................................ 26
6.2.3 Mostrar los enlaces como si fueran botones ............................................... 27
7. IMÁGENES ..................................................................................27
ESTILOS BÁSICOS ......................................................................................... 27
7.1.1 Establecer la anchura y altura de las imágenes .......................................... 27
7.1.2 Eliminar el borde de las imágenes con enlaces ........................................... 28
8. LISTAS .......................................................................................28
ESTILOS BÁSICOS ......................................................................................... 28
8.1.1 Viñetas personalizadas ........................................................................... 28
9. EJERCICIOS ................................................................................30

7.1

8.1

Pág. 2


Colegio Sagrado Corazón

Godella – Valencia



INFORMATICA


CSS



1. Introducción al CSS

1.1 ¿Qué es CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentación y es imprescindible para crear páginas web complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas,
ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo.
Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y
permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los
contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo,
titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre
elementos, posición de cada elemento dentro de la página, etc.

1.2 Funcionamiento básico
Antes de la adopción de CSS, los diseñadores de páginas web debían definir el aspecto de cada
elemento dentro de las etiquetas HTML de la página. El siguiente ejemplo muestra una página
HTML con estilos definidos sin utilizar CSS:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la página</font></h1>
<p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p>
</body>
</html>

El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el
color, la tipografía y el tamaño del texto de cada elemento del documento.
El principal problema de esta forma de definir el aspecto de los elementos se puede ver
claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que
insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes,
habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos,
habría que definir 1.5 millones de atributos.
Por otra parte, el diseño de los sitios web está en constante evolución y es habitual modificar
cada cierto tiempo los colores principales de las páginas o la tipografía utilizada para el texto. Si

Pág. 3


Colegio Sagrado Corazón

Godella – Valencia



INFORMATICA


CSS


se emplea la etiqueta <font>, habría que modificar el valor de 1.5 millones de atributos para
modificar el diseño general del sitio web.

La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>

CSS permite separar los contenidos de la página y su aspecto o presentación. En el ejemplo
anterior, dentro de la propia página HTML se reserva una zona en la que se incluye toda la
información relacionada con los estilos de la página.
Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la página se
deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las
etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un
tamaño de letra medio.
Definiendo los estilos de esta forma, no importa el número de