PDF de programación - Elaboración de hojas de estilo

UF1303: ELABORACIÓN DE HOJAS DE ESTILO.
MANUAL TEÓRICO



UF1303:

ELABORACIÓN DE HOJAS DE

ESTILO.



Manual teórico.



1

INDICE

UF1303: ELABORACIÓN DE HOJAS DE ESTILO.
MANUAL TEÓRICO

1.1.

1.1.1.
1.1.2.
1.1.3.

1.2.
1.3.
1.4.
1.5.
1.6.

1. Hojas de Estilo CSS3 en la creación de páginas web. ...................................................................... 4
Funciones y características. .................................................................................................... 4
Las tres capas del diseño web. ........................................................................................ 4
Una breve historia del CSS. ............................................................................................. 5
CSS, HTML Y XHTML. ....................................................................................................... 6
Funciones y características. .................................................................................................... 6
El modelo de forma visual y el modelo de caja....................................................................... 7
Tipos de estilos. ...................................................................................................................... 8
Selectores y reglas de estilos. ............................................................................................... 10
Atributos de estilo. ............................................................................................................... 14
Fondo. ........................................................................................................................... 15
1.6.1.
Propiedades de los textos. ............................................................................................ 16
1.6.2.
Los textos en CSS. ......................................................................................................... 18
1.6.3.
1.6.4.
Bordes en CSS. .............................................................................................................. 23
1.6.5. Márgenes con CSS. ....................................................................................................... 30
CSS Relleno. .................................................................................................................. 33
1.6.6.
1.6.7.
CSS Fonts – Fuentes. ..................................................................................................... 35
Los colores en CSS. ....................................................................................................... 43
1.6.8.
1.6.9.
CSS3. Transparencias en colores RGBA ......................................................................... 49
1.6.10. Contornos con CSS ........................................................................................................ 51
Listas con CSS ................................................................................................................ 56
1.6.11.
1.6.12.
Tablas con CSS .............................................................................................................. 60
Prefijos CSS de Navegadores (webkits). ................................................................................ 67
Columnas en css ........................................................................................................... 69
Esquinas redondeadas en css ....................................................................................... 71
Efecto sombra en css .................................................................................................... 73
Transformaciones con CSS ............................................................................................ 76
CSS Media Queries ........................................................................................................ 78
2. Diseño, ubicación y optimización de los contenidos de una página web. .................................... 82
Creación de un documento funcional. .................................................................................. 82
Diseño de los contenidos. ..................................................................................................... 84
Identificación de la información que se tiene que ubicar en la página web. ........................ 89
Selección de contenidos para cada elemento de la página. ................................................. 89

1.7.1.
1.7.2.
1.7.3.
1.7.4.
1.7.5.

1.7.

2.1.
2.2.
2.3.
2.4.



2

UF1303: ELABORACIÓN DE HOJAS DE ESTILO.
MANUAL TEÓRICO

2.5. Uso del documento funcional para las especificaciones del diseño. .................................... 90
Tipos de página para la ubicación de contenidos. ................................................................ 92
2.6.
2.7.
Definición de los tipos de página según los contenidos y sus funcionalidades. .................... 93
2.8.
Selección del Tipo de página para la página web. ................................................................ 95
2.9. Uso del documento funcional para las especificaciones del diseño. .................................... 97
2.10.
Especificaciones de navegación ........................................................................................ 98
Creación de un mapa de navegación de páginas. ............................................................. 99
2.11.
2.12.
Uso del documento funcional para integrar el mapa de navegación.............................. 100
Elementos utilizados para navegar. ................................................................................ 101
2.13.
2.14.
Elaboración de una guía de usuario. ............................................................................... 101



3



UF1303: ELABORACIÓN DE HOJAS DE ESTILO.
MANUAL TEÓRICO

1. Hojas de Estilo CSS3 en la creación de páginas web.



Funciones y características.

1.1.


El estándar HTML se encuentra en continua evolución. Los navegadores son cada
vez más capaces de plasmar la información de forma atractiva.

Es por ello que aparecen las hojas de estilo. Son una respuesta a la necesidad de
organizar la presentación del contenido de un documento HTML.

La especificación HTML fue concebida inicialmente como un lenguaje de marcas,
y la introducción de varios niveles de formateo de elementos y atributos de texto
sólo sirvió para crear más confusión. Microsoft decidió entonces implementar un
nuevo concepto, las hojas de estilo, soportadas a partir de I.E.3.0, se mejoró la
especificación en I.E.4.0. Netscape también implementó las hojas de estilo para
sus navegadores a partir de la versión 4.0.



1.1.1.

Las tres capas del diseño web.


Los estándares Web fomentan la separación de un contenido Web en 3 capas:
• Contenido: Define estructura semántica y contenido de texto plano, se

representa con el documento HTML.

• Presentación: Añade el aspecto del contenido, lo representa la hoja de

estilo CSS

• Comportamiento: Añade mayor grado de interacción y funciones

complejas, es posible representarlo con un documento JS o de otras
tecnologías semejantes

Un documento html es un visualizador de la información.



4

UF1303: ELABORACIÓN DE HOJAS DE ESTILO.
MANUAL TEÓRICO

Para hacer más atractivo este documento html , podemos utilizar diversas
posibilidades como: combinación de colores, distintos tipos de letras, fondo del
documento, ubicación por coordenadas en píxeles de un determinado texto, etc.
Todas esas posibilidades las tenemos en las hojas de estilo o Style Sheets. Las
hojas de estilo son una extensión del documento HTML, en las que se diseña la
apariencia general del mismo.
Las principales ventajas de utilizar las hojas de estilo son:

• Accesibilidad. Los datos se pueden presentar en función del usuario y

adaptarlos a sus necesidades. No es lo mismo presentar una web en un
Pc, que presentarla en un teléfono móvil, o presentarla a personas con
alguna discapacidad.

• Mantenimiento. Separa y centraliza la presentación, bien en diferentes

archivos o en partes bien conocidas del archivo, con lo cual tenemos
localizado el código que queremos mantener y/o actualizar.

• Simplicidad. Se obtienen documentos más fáciles de entender y se reduce

el tamaño de los mismos.



1.1.2.

Una breve historia del CSS.



Su verdadero desarrollo se produjo con el boom de internet y el crecimiento del
lenguaje HTML, especialmente en los años de la guerra entre navegadores, ya
que la falta de una especificación permitía que una página escrita para un
navegador fuera completamente distinta para otro.
En la tabla siguiente podemos ver a evolución de las hojas de estilo por orden
cronológico.

Año
1970

Nombre
CHSS

Descripción
Se comienza a hablar de las hojas de estilo. Comienzan a surgir
lenguajes de especificación.
CHSS (Cascading HTML Style Sheets)
SSP (Stream-based Style Sheet Proposal)
Guerra de los navegadores. Se unen los creadores de los
lenguajes CHSS y SPP para definir una nueva especificación CSS.
Primera especificación oficial del lenguaje CSS.
Aparece la segunda versión del lenguaje. Sigue siendo utilizada en
la actualidad con alguna modificación, CSS 2.1.
Última especificación del lenguaje aunque hoy en día no se ha
terminado de implementar en la mayoría de los navegadores.

1990
1994

1996
1998

2007

SSP
CSS

CSS Nivel 1
CSS Nivel 2

CSS Nivel 3

URL de interes:


Página oficial de CSS: http://www.w3.org/Style/CSS/.



5

UF1303: ELABORACIÓN DE HOJAS DE ESTILO.
MANUAL TEÓRICO

CSS, HTML Y XHTML.

1.1.3.



Con la aparición de las hojas de estilo, los diseñadores están cambiando la forma
de crear las páginas web, para adaptarse a los nuevos modelos de diseño.

Poco a poco las etiq