Como podemos observar, el diseño es únicamente un conjunto de tags HTML que proporcionan la
forma del documento. Pero hasta aquí no nos preocupamos de cómo debe mostrarse. Solo de qué debe
mostrarse. Esta aproximación nos permitirá ganar en flexibilidad en futuros cambios de la página.
El código de la página, queda reflejado en el fuente HTML que muestra el Código fuente 48.
<html>
<head>
<title>Ejercicio CSS</title>
</head>
<body>
<h1>Página de aplicación de hojas de estilo en cascada</h1>
<HR>
<p> En esta página vamos a demostrar como se puede formatear
el estilo de una página a través de las Hojas de Estilo en cascada, conocidas
como CSS. Colocaremos dos tablas a la izquierda y a la derecha de la pantalla
con información e hipervínculos interesantes y el centro el logotipo de la
empresay la ventana de login y password de acceso a la aplicación.</p>
<Table border=1>
<TR>
<TD>
<TABLE>
<TR>
<TD>
Cabecera de la tabla
</TD>
</TR>
<TR>
<TD>
Texto contenido en el cuerpo de la tabla.
Haga <A HREF="#">click aquí</A> si desea más información
</TD>
</TR>
</TABLE>
</TD>
<TD>
<FORM>
<CENTER>
Login : <INPUT TYPE="TEXT" NAME="LOGIN">
</CENTER>
<BR>
<CENTER>
Passwd: <INPUT TYPE="PASSWORD" NAME="LOGIN">
</CENTER>
<BR>
<center>
<INPUT TYPE="SUBMIT" NAME="ENVIAR">
</center>
</FORM>
</TD>
<TD>
<TABLE>
<TR>
<TD>
Cabecera de la tabla 2
</TD>
</TR>
<TR>
<TD>
Texto contenido en el cuerpo de la tabla 2.
Haga <A HREF="#">click aquí</A> si desea aún más
información
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<p>(c) grupo EIDOS. Hoja diseñada por Pepe Hevia</p>
</body>
</html>
Código fuente 48. Código HTML de la página en su fase inicial
El diseño inicial de la página...
Como se comentó en el tema de CSS, el primer paso es diseñar el documento HTML tal y como debe representar la información, pero sin ningun tipo de formato gráfico. Puesto que nuestro equipo ya tiene los estilos oportunos creados y documentados. Por lo tanto, la hoja en su primera fase de diseño quedará como muestra la Figura 27
Caso Práctico Definición de la práctica
dicha “moda” premia por encima de todo el mostrar la mayor cantidad de información posible. Por
ello los elementos tradicionales de HTML se quedan un poco “cortos” a no ser que contemos con los
estilos CSS.
Montaremos la página de inicio de “El actual”, un nuevo tipo de publicación virtual que quiere poner
al día al intrépido cibernauta. De tal manera que el diseño quedará como se ve en la figura.
Como premisas:
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
• Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
• La fuente del documento estará basada en la familia de “Verdana”
• Se dejarán márgenes del 2% respecto a los bordes del documento
• El fondo del documento llevará un fondo corporativo que además se desea que esté fijo en
la pantalla y no se mueva al hacer Scroll del documento (en el caso de que esto sea
posible).
• Los botones corporativos serán de color azul
• Al final irá información de copyright en cursiva y con un tamaño de 7pt
ello los elementos tradicionales de HTML se quedan un poco “cortos” a no ser que contemos con los
estilos CSS.
Montaremos la página de inicio de “El actual”, un nuevo tipo de publicación virtual que quiere poner
al día al intrépido cibernauta. De tal manera que el diseño quedará como se ve en la figura.
Como premisas:
• los hipervínculos deben activarse al ponerse el ratón encima y no estarán subrayados
• Las tablas de datos tendrán bordes externos y su texto tiene que estar justificado
• Las tablas tendrán un encabezado centrado y de color amarillo de fondo y la fuente en
negrita y cursiva
• Todos los textos que se encuentran cerca de una imagen tendrán que estar alineados al
centro de la altura de dicha imagen
• La fuente del documento estará basada en la familia de “Verdana”
• Se dejarán márgenes del 2% respecto a los bordes del documento
• El fondo del documento llevará un fondo corporativo que además se desea que esté fijo en
la pantalla y no se mueva al hacer Scroll del documento (en el caso de que esto sea
posible).
• Los botones corporativos serán de color azul
• Al final irá información de copyright en cursiva y con un tamaño de 7pt
Curiosidades y nuevos estilos…
Para terminar este capítulo, sólo mostrar un estilo adicional, que es compatible con el navegador Microsoft Internet Explorer en su versión 5.0 o superior, que ya permite incluso interactuar con los elementos activos del propio navegador: el elemento SCROLLBAR. Y qué mejor que documentarlo con el ejemplo que aparece en la Tabla 5.
Especificación CSS (II)
Se va a proceder ahora a la descripción de los atributos de estilo que se pueden emplear para dar
formato a las páginas HTML con CSS. Como nota, indicar que al explorador de usuario se le suele
denominar UserAgent (UA) y así lo nombraremos en esta documentación.
formato a las páginas HTML con CSS. Como nota, indicar que al explorador de usuario se le suele
Especificación CSS (I)
En base a la documentación del estándar CSS nos encontramos con las declaraciones de estilos siguientes, clasificadas en función de su utilidad.
Versión “XHTML”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
Código fuente 46
Posteriormente, en el bloque <HEAD><HEAD> colocaremos ya la referencia externa a la hoja de
estilos correspondiente.
<HEAD>
(...)
<LINK REL=STYLESHEET HREF="mi_hoja_estilo.css">
</HEAD>
Código fuente 47
"DTD/xhtml1-strict.dtd">
Código fuente 46
Posteriormente, en el bloque <HEAD><HEAD> colocaremos ya la referencia externa a la hoja de
estilos correspondiente.
<HEAD>
(...)
<LINK REL=STYLESHEET HREF="mi_hoja_estilo.css">
</HEAD>
Código fuente 47
Versión “Strict”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Código fuente 45
"http://www.w3.org/TR/html4/strict.dtd">
Código fuente 45
Versión “loose”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Código fuente 44
"http://www.w3.org/TR/html4/loose.dtd">
Código fuente 44
Tipos de documentos DOCTYPE
Los estilos han evolucionado mucho en las últimas incorporaciones de las versiones del estándar de
HTML. ¿Qué ocurre entonces con las versiones anteriores?. ¿Hay que rescribir el código de estilos de
dichas versiones de nuevo?. No es estrictamente necesario. Es posible utilizar el tag DOCTYPE para
indicar al navegador qué tipo de analizador debe emplear para examinar el código CSS empleado en la
página.
Actualmente están vigentes 3 tipos de validadores de documentos: la versión loose que garantiza
compatibilidad hacia atrás con versiones anteriores de la norma, la versión estricta, si queremos que
nuestros documentos cumplan siempre la última norma de una manera estricta y la que incluye la
nueva especificación XHTML. Para indicar la norma a aplicar en nuestros documentos, colocaremos
justo encima de la declaración de <HTML> una de las tres formas descritas:
HTML. ¿Qué ocurre entonces con las versiones anteriores?. ¿Hay que rescribir el código de estilos de
dichas versiones de nuevo?. No es estrictamente necesario. Es posible utilizar el tag DOCTYPE para
indicar al navegador qué tipo de analizador debe emplear para examinar el código CSS empleado en la
página.
Actualmente están vigentes 3 tipos de validadores de documentos: la versión loose que garantiza
compatibilidad hacia atrás con versiones anteriores de la norma, la versión estricta, si queremos que
nuestros documentos cumplan siempre la última norma de una manera estricta y la que incluye la
nueva especificación XHTML. Para indicar la norma a aplicar en nuestros documentos, colocaremos
justo encima de la declaración de <HTML> una de las tres formas descritas:
Clases y Pseudoclases
Cuando vamos a aplicar estilos a los documentos HTML lo podemos realizar tanto a nivel de tags HTML como a nivel de clases. Ambos son equivalente con la diferencia de que los tags HTML ya están predefinidos en el lenguaje con su sintaxis y sus estilos por defecto y las clases son los nuevos tipos de estilos que vamos a aplicar a las clases HTML ya existentes. Definir estilos es más flexible que actuar directamente sobre el tag HTML. Nos pemite aplicarlo cuando es necesario sin preocuparnos de otras hojas de estilos que sobrescriban dicho estilo. Las clases, por tanto, nos posibilitan la reutilización de estilos en varios elementos HTML.
Las subclases son aquellas definiciones de los tags HTML o bien de las clases, que indican un conjunto extendido de funcionalidades del tag HTML / clase. Son referencias a etiquetas de estilo específicas del tag HTML. Veamos el Código fuente 42,por ejemplo.
A:link,A:visited,A:active {text-decoration:none}
Código fuente 42
La sintaxis de la definición de clases y subclases es:
etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}
Lo cual nos permitirá aprovechar al máximo para cada elemento el conjunto de “subestilos” que estén
programados en el estándar. De echo, este tipo de aproximación es utilizado para implementar los
estilos en lo hipervínculos.
Una de las pseudoclases que más juego dan a los estilos es la capacidad que tienen los hipervínculos
de saber cuándo se coloca el ratón sobre ellos, momento en el que podemos aprovechar para modificar
el estilo y crear efectos gráficos que hacen más dinámico aún este tipo de elementos HTML. Un
ejemplo aparece en el Código fuente 43.
<STYLE>
A:link,A:visited,A:active {color:blue}
A:hover {color:red}
</STYLE>
Código fuente 43
Las subclases son aquellas definiciones de los tags HTML o bien de las clases, que indican un conjunto extendido de funcionalidades del tag HTML / clase. Son referencias a etiquetas de estilo específicas del tag HTML. Veamos el Código fuente 42,por ejemplo.
A:link,A:visited,A:active {text-decoration:none}
Código fuente 42
La sintaxis de la definición de clases y subclases es:
etiqueta:pseudoclase {propiedad1:valor;...;propiedadN:valor}
Lo cual nos permitirá aprovechar al máximo para cada elemento el conjunto de “subestilos” que estén
programados en el estándar. De echo, este tipo de aproximación es utilizado para implementar los
estilos en lo hipervínculos.
Una de las pseudoclases que más juego dan a los estilos es la capacidad que tienen los hipervínculos
de saber cuándo se coloca el ratón sobre ellos, momento en el que podemos aprovechar para modificar
el estilo y crear efectos gráficos que hacen más dinámico aún este tipo de elementos HTML. Un
ejemplo aparece en el Código fuente 43.
<STYLE>
A:link,A:visited,A:active {color:blue}
A:hover {color:red}
</STYLE>
Código fuente 43
Estilos CSS
Cuando nos encontramos dentro de un bloque <STYLE>, podremos redefinir las propiedades de los
propios elementos estándar de HTML (elementos raíz) y crear nuevas clases que podremos emplear
para ampliar el formato de los elementos HTML existentes.
Para modificar un elemento raíz, especificaremos el tag HTML y entre corchetes colocaremos los
atributos de estilo, como aparece en el Código fuente 39.
<STYLE TYPE=”text/css”>
BODY
{
color: #000;
background: #FFF;
margin-left: 4%;
margin-right: 4%;
font-family: verdana, helvetica, sans-serif;
}
</STYLE>
Código fuente 39
Para crear nuevas clases de estilos, dentro del bloque <STYLE> colocaremos el nombre de la clase
precedido del símbolo punto (“.”) y después entre corchetes, los modificadores de estilo.
<STYLE TYPE=”css/text”>
.amarillo { background: #ff9 }
.azul { background: #cff }
.gris { background: #999 }
</STYLE>
Código fuente 40
Nota: Cuando especificamos un elemento raíz, su propia definición ya se aplica al documento, pues permiten
modificar el cómo el navegador interpreta los formatos por defecto de cada tag HTML. En el caso de las clases
no ocurre así. Es el diseñador del documento el que tiene la responsabilidad de especificar qué tags HTML deben
asumir la nueva clase CSS.
<P CLASS=”amarillo”>Texto con fondo en amarillo</P>
<P CLASS=”azul”>Texto con fondo en azul</P>
Código fuente 41
propios elementos estándar de HTML (elementos raíz) y crear nuevas clases que podremos emplear
para ampliar el formato de los elementos HTML existentes.
Para modificar un elemento raíz, especificaremos el tag HTML y entre corchetes colocaremos los
atributos de estilo, como aparece en el Código fuente 39.
<STYLE TYPE=”text/css”>
BODY
{
color: #000;
background: #FFF;
margin-left: 4%;
margin-right: 4%;
font-family: verdana, helvetica, sans-serif;
}
</STYLE>
Código fuente 39
Para crear nuevas clases de estilos, dentro del bloque <STYLE> colocaremos el nombre de la clase
precedido del símbolo punto (“.”) y después entre corchetes, los modificadores de estilo.
<STYLE TYPE=”css/text”>
.amarillo { background: #ff9 }
.azul { background: #cff }
.gris { background: #999 }
</STYLE>
Código fuente 40
Nota: Cuando especificamos un elemento raíz, su propia definición ya se aplica al documento, pues permiten
modificar el cómo el navegador interpreta los formatos por defecto de cada tag HTML. En el caso de las clases
no ocurre así. Es el diseñador del documento el que tiene la responsabilidad de especificar qué tags HTML deben
asumir la nueva clase CSS.
<P CLASS=”amarillo”>Texto con fondo en amarillo</P>
<P CLASS=”azul”>Texto con fondo en azul</P>
Código fuente 41
Atributos de estilo CSS
Son pares con el formato atributo:valor que nos permitirán indicar qué atributo de estilo queremos
modificar y con qué valor. Si hay más de una propiedad que modificar se colocarán separadas por
puntos y comas.
La lista de los atributos disponibles en la especificación CSS versión 1 la veremos en el siguiente
punto.
Color:#000; background: #FFF
Código fuente 37
Nota: cuando el estilo se coloca como atributo style HTML, debemos encerrar la definición CSS entre comillas.
<P STYLE=”Color : #000; background : #FFF”>prueba</P>
Código fuente 38
modificar y con qué valor. Si hay más de una propiedad que modificar se colocarán separadas por
puntos y comas.
La lista de los atributos disponibles en la especificación CSS versión 1 la veremos en el siguiente
punto.
Color:#000; background: #FFF
Código fuente 37
Nota: cuando el estilo se coloca como atributo style HTML, debemos encerrar la definición CSS entre comillas.
<P STYLE=”Color : #000; background : #FFF”>prueba</P>
Código fuente 38
Bloques
Establecen el ámbito donde se definen las marcas de estilo del documento. Según su ubicación serán
bloques HTML o bien serán atributos HTML.
<STYLE TYPE=”text/css”>
<!-- definiciones de formato -->
</STYLE>
<P STYLE=”background:#yellow”>prueba</P>
Código fuente 36
bloques HTML o bien serán atributos HTML.
<STYLE TYPE=”text/css”>
<!-- definiciones de formato -->
</STYLE>
<P STYLE=”background:#yellow”>prueba</P>
Código fuente 36
Sintaxis de las reglas CSS
Antes de entrar de lleno en la descripción de las reglas de formato CSS definidas en el W3C, pasamos brevemente a describir la sintaxis de los símbolos CSS.
CSS Internas: CSS Externa
Presentan el hipervínculo a un documento que en su interior almacena definiciones CSS. Se
aplicarán a todas las páginas que tengan la referencia a dicho documento. La definición del
enlace debe hacerse entre los tags HTML <HEAD></HEAD>.
Estilo.css
BODY
{
BACKGROUND-IMAGE: url(/images/fondo.gif);
BACKGROUND-REPEAT: no-repeat
}
H1
{
font: 15pt "Arial";
color: blue
}
Mipagina.htm
<HTML><HEAD>
<LINK REL=STYLESHEET HREF=”Estilo.css” TYPE=”Text/Css”>
</HEAD>
<BODY>
<H1>Titulo con estilo</H1> Prueba de documento con estilo e imagen de fondo
</BODY></HTML>
Código fuente 35
Este tipo de referencias son el equivalente a las “templates” o plantillas de procesadores de
texto como Microsoft Word. Permiten que los sitios Web mantengan una coherencia de diseño
a lo largo de todo el conjunto de documentos y permite además su reutilización en futuros
proyectos.
Como otra gran ventaja, añadir que permite centralizar el diseño de las páginas, de tal manera
que modificar el diseño de todo el Web implicará sólo el cambio de las hojas CSS aplicadas.
aplicarán a todas las páginas que tengan la referencia a dicho documento. La definición del
enlace debe hacerse entre los tags HTML <HEAD></HEAD>.
Estilo.css
BODY
{
BACKGROUND-IMAGE: url(/images/fondo.gif);
BACKGROUND-REPEAT: no-repeat
}
H1
{
font: 15pt "Arial";
color: blue
}
Mipagina.htm
<HTML><HEAD>
<LINK REL=STYLESHEET HREF=”Estilo.css” TYPE=”Text/Css”>
</HEAD>
<BODY>
<H1>Titulo con estilo</H1> Prueba de documento con estilo e imagen de fondo
</BODY></HTML>
Código fuente 35
Este tipo de referencias son el equivalente a las “templates” o plantillas de procesadores de
texto como Microsoft Word. Permiten que los sitios Web mantengan una coherencia de diseño
a lo largo de todo el conjunto de documentos y permite además su reutilización en futuros
proyectos.
Como otra gran ventaja, añadir que permite centralizar el diseño de las páginas, de tal manera
que modificar el diseño de todo el Web implicará sólo el cambio de las hojas CSS aplicadas.
Suscribirse a:
Entradas (Atom)