PDF de programación - Manual Rápido de CSS

Manual Rápido de CSS
Una aproximación para el estudiantes con
interés en el dominio y consulta de CSS para
la aplicación de estilos en el desarrollo de
páginas Web

Este manual se constituye en un material de
complemento a la clase magistral sobre el tema de
desarrollo de páginas Web. Tiene como propósito apoyar
a los estudiantes en la preparación para el día del
laboratorio y para la realización de su proyecto del curso.
El manual tiene 2 grandes secciones, la primera trata
sobre el desarrollo de hojas de estilo CSS, la segunda
sección presenta un compendio de enlaces de interés a
ejemplos y otros manuales.

Beatriz Eugenia Florián Gaviria
03/10/2007



Tabla de contenido

Manual Rápido de CSS

2007

1) CSS .................................................................................................................................. 3

Herencia ............................................................................................................................... 4

Cascada ............................................................................................................................... 4

Reglas .................................................................................................................................. 5

Selectores de CSS ................................................................................................................ 6

Selector Universal .............................................................................................................. 6

Selector por Tipo................................................................................................................ 6

Selector por Clase.............................................................................................................. 6

Selector por ID ................................................................................................................... 6

Selectores Descendentes ................................................................................................... 7

Pseudo-Selectores de CSS .................................................................................................... 7

Pseudo Elementos ............................................................................................................. 7

Pseudo Clases ................................................................................................................... 9

Propiedades Iniciales de CSS............................................................................................... 10

Notación .......................................................................................................................... 10

Unidades ......................................................................................................................... 10

Propiedades de Fondo ..................................................................................................... 12

Propiedades de Fuente .................................................................................................... 12

Propiedades de Texto ...................................................................................................... 13

Propiedades de Listas ...................................................................................................... 13

Ejemplos de uso de propiedades iniciales .......................................................................... 14

El Modelo de Cajas de CSS ................................................................................................. 16

Propiedades de Margen para Cajas .................................................................................. 17

Propiedades de Relleno para Cajas .................................................................................. 17

Propiedades de Borde para Cajas ..................................................................................... 18

Formato Visual de Cajas ................................................................................................... 20

2) Enlaces Interesantes ........................................................................................................ 25



Tabla de Figuras

Figura 1. Elementos de un documento CSS __________________________________________________________ 5

Figura 2. Elementos de Cajas en CSS _______________________________________________________________ 16



2


1 ) C S S

Manual Rápido de CSS

2007

Las Hojas de Estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar
formato a los documentos escritos en HTML ó XHTML (y en otros lenguajes estructurados, como
XML) separando el contenido de las páginas de su apariencia. Para el diseñador, esto significa que
la información estará contenida en la página HTML, pero este archivo no debe definir cómo será
visualizada esa información, sino la hoja de estilos asociada a él. Las indicaciones acerca de la
composición vis ual del documento estarán es pecificadas en el archivo de la CSS.

En un ejemplo sencillo, una página HTML podría tener uno o varios encabezados definidos con la
etiqueta < h1>, se quieren decorar con tipografía Arial, de 19 puntos, en color azul y alineación
central. Por un lado el archivo XHTML contendría la definición de encabezados y por otra el archivo
CSS contendría la definición de los estilos a aplicar para la etiqueta de encabezados así:

Parte del contenido del archivo pagina.html

…
<h1>1er Título de nivel 1</h1>
…
<h1>1er Título de nivel 1</h1>
…

Estilo para <h1> definido en el archivo estilos.css

h1 {
font-family: Arial;
font-size: 19pt;
color: blue;
text-align: center;
}

Luego, agregamos un enlace en el doc ument o HTML a la hoja de estilo creada. El enlac e se crea
dentro de la cabecera del documento. Nuestro documento pagina.html quedaría as í:

<html lang="es">
<head>
<title>Introducción a las CSS</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
…
<h1>1er Título de nivel 1</h1>
…
<h1>1er Título de nivel 1</h1>
…
</body>
</html>

La etiqueta <link> especifica:

el tipo de vínculo: a una hoja de estilo ("stylesheet")

el tipo de hoja de estilo que se vincula: "text/css"

la ubicación de la hoja de estilo a través del atributo "href"

Ahora, todos los encabezados h1 de la página tendrán el aspecto que hemos definido. Se puede
asociar un mismo archivo CSS a diferentes archivos HTML del sitio Web y así lograr consistencia
de estilos entre las páginas que lo comprenden.



3


La aplicación de estilos toma en cuent a dos conceptos import antes, la herencia y la cascada.

2007

Manual Rápido de CSS

H er en cia

Cada página HTML está compuesta por una serie de elementos (tít ulos, párrafos, listas, tablas,
etc.) organizados en una estructura donde cada elemento está contenido por otro element o, que a
su vez puede estar contenido por ot ro.

En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás
elementos. En HTML se puede considerar como elemento raíz al elemento < body> o al elemento
<html>.

La importancia de este hecho es que cada elemento hereda las propiedades del elemento que lo
contiene (llamado el elemento padre). Quiere decir que si especificamos la propiedad color: red
para <BODY> en la hoja de estilos, todos los elementos de la página heredarán esta característica
(como listas y párrafos) y no será neces ario especificar nuevament e la propiedad color en cada
uno de ellos.

Aquí es necesario hacer algunas precisiones:

1. No todas las propiedades son hereditables y para cada propiedad se define si ésta se hereda

o no.

2. El valor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede
usarse para reforzar explícitamente la herencia de una propiedad o para lograr que un
elemento herede de su padre una propiedad que de otro modo no sería heredada.

*.peligro { color: inherit; }

3. Cuando se asigna una propiedad a un elemento, el valor especific ado reemplaz a al valor

heredado, como si se sobrescribiera el valor heredado del padre. .

4. Los elementos heredan los valores computados (expresados con bas e a porcentajes o
tamaños relativos ) del padre, no los valores especificados. Todas las propiedades tienen
siempre un valor asignado. El valor por defecto, el valor heredado o el valor asignado en el
archivo CSS ).

C ascad a

Cuando varias hojas de estilos se aplican sobre un documento y hay conflictos sobre la regla que
debe aplicarse. El orden de la cascada determina, en el caso en que existan reglas incompatibles,
cuál de ellas tiene preponderancia.

Las hojas de estilo pueden tener tres orígenes:

El autor: como hemos visto hasta ahora, puede hacerlo a través de una hoja externa que
es la forma más elegante. También se pueden hace la hoja de estilos incrustada, incluso
definiendo el estilo en línea.

El usuario: también puede especificar su propia hoja de estilo. Esta posibilidad puede
resultar de gran ayuda para aquellas personas con discapacidades visuales o,
simplement e, para quienes deseen adaptar las páginas a sus preferencias. Cada
navegador tiene su forma particular de proveer al usuario la posibilidad de especificar una
hoja de estilo propia.

La aplicación del usuario: el navegador también aplica una h