Documente Academic
Documente Profesional
Documente Cultură
INTRODUCCIÓN.........................................................................................................2
LAS HOJAS DE ESTILO .............................................................................................4
LOS ESTILOS...............................................................................................................5
CÓMO TRABAJAR MICROSOFT EXPRESSION WEB y CSS ...............................7
STYLE APPLICATION .......................................................................................... 7
DEFINIR LOS ESTILOS EN UNA HOJA DE ESTILOS EXTERNA......................10
APLICANDO ESTILOS CON EL PANEL STYLE APPLICATION Y LA BARRA
DE HERRAMIENTAS STYLE ..................................................................................16
MANEJANDO ESTILOS CON LA VENTANA PROPIEDADES CSS Y CON EL
PANEL MANAGE STYLES ......................................................................................24
PANEL MANAGE STYLES ................................................................................. 24
VENTANAS CSS PROPERTIES Y TAG PROPERTIES .................................... 26
REDEFINIR UNA ETIQUETA O TAG HTML ........................................................29
CSS REPORTS ...........................................................................................................32
1
INTRODUCCIÓN
Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal
usado para definir la presentación de un documento estructurado escrito en HTML o
XML (y por extensión enXHTML). El W3C (World Wide Web Consortium) es el
encargado de formular la especificación de las hojas de estilo que servirá de estándar
para los navegadores.
Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web
Consortium. Los navegadores modernos implementan CSS1 bastante bien, aunque
existen pequeñas diferencias de implementación según marcas y versiones de los
navegadores. CSS2, sin embargo, está solo parcialmente implementado en los más
recientes.
2
3
LAS HOJAS DE ESTILO
Sin embargo, hay tres caminos diferentes para aplicar los estilos:
a) Fichero externo: Es el método más eficaz sobre todo cuando la Web es extensa. Se
crea un fichero de estilos -una hoja de estilos- y se almacena en un fichero diferente y
cada página html hará referencia a la hoja de estilos mediante la etiqueta <link>.
Cuando se desea hacer alguna modificación en la presentación de la página basta con
cambiar la hoja de estilos y los cambios se realizan de manera automática. Una misma
hoja de estilos servirá para muchas páginas web o para todo el sitio, por lo que los
cambios son tan sencillos de realizar cuando nuestro sitio consta de una sola página que
cuando contiene 500. Es en este modo de trabajo en donde se ve más claramente que la
presentación y el contenido están separados.
b) En el propio fichero html: Es posible definir los estilos en la propia página web
utilizando la etiqueta <style> en el interior de la cabecera de la página, es decir, dentro
de la etiqueta <head>. El problema de esta forma de trabajo se presenta en grandes
Webs, ya que cuando se desean hacer los cambios, hay que ir también página a página.
En esta forma la presentación y los contenidos están de manera separada, sin embargo
están definidos en cada página con lo que – a mi modo de ver- no hay plena separación.
<style type="text/css">
.menu {
width: 150px;
float: left;
}
#mainContenido {
margin-left: 165px;
}
p{
background-color:lime;
list-style:upper-roman;
}
</style>
4
LOS ESTILOS
Una hoja de estilos consiste en un fichero de texto donde se definen una serie de reglas
que determinan el aspecto o presentación de nuestra página web. Estas reglas consisten
en propiedades de fuentes, propiedades de posicionamiento, propiedades de bordes de
los elementos, etc.
Por ejemplo:
body{
color: red;
font-size: 10px;
}
p{
background-color:lime;
list-style:upper-roman;
}
.miClase {
width: 150px;
float: left;
}
#mainID {
margin-left: 165px;
}
Figura 1
propiedad: valor;
Por ejemplo:
color: red
Los estilos se pueden aplicar de tres formas diferentes, que se corresponden con los tres
tipos de selectores:
h3{
font-size: 10px;
}
.miClase{
font-family:"Lucida Sans";
color:red;
5
}
#miID {
margin-left: 165px;
font-family:"Courier";
color: yellow;
}
Figura 2
<style>
h3{
font-size: 10px;
}
.miClase{
font-family:"Lucida Sans";
color:red;
}
#miID {
margin-left: 165px;
font-family:"Courier";
color: yellow;
}
<style>
Figura 3
6
Muchos diseñadores web ignoran la posibilidad de implementar en contenido y la
presentación de sus sitios de manera separada. Es además muy posible que no salgan de
este error hasta que deseen realizar cambios en la presentación de sus sitios.
Para mí, en este momento, Microsoft Expression Web es la mejor herramienta del
mercado para trabajar de esta forma, es decir, el paquete que más ayuda al diseñador
Web a separar el contenido de la presentación en sus sitios web.
Sin embargo, es necesario comprender bien cuando se deben aplicar los estilos en línea,
en el propio documento o en una hoja de estilos externa. Además, en Microsoft
Expression Web es necesario comprender bien cuándo se aplican los estilos de manera
automática o manual.
Como regla general, se puede decir que crear páginas Web utilizando los estilos en línea
o en la propia página permite que la implementación o creación de las páginas sea más
rápida ya que casi todo el trabajo de presentación lo puede hacer Microsoft Expression
Web de manera automática y el diseñador no tiene que ocuparse de ello. Definir los
estilos en una hoja de estilos externa significa que hay que definir “manualmente” –
aunque Microsoft Expression Web nos ayuda con ventanas de diálogo donde
prácticamente todo se puede hacer al golpe de ratón- dichos estilos para cada elemento
de la página o sitio.
Con esta forma de trabajo la creación es más lenta, pero sin embargo, como
contrapartida, se gana muchísimo tiempo, se cometen muchos menos errores y, yo me
atrevería a decir, que se mejora enormemente la posibilidad de mejorar la presentación
del sitio o página cuando se desean realizar cambios en la presentación
STYLE APPLICATION
Microsoft Expression Web permite definir la forma de trabajo –en línea, en el propio
documento o página o en un fichero externo- y cómo aplicar estilos –manual o
automáticamente-. Para ello, proporciona una barra de herramientas:
7
Para añadir esta barra a la barra de herramientas podemos clicar con el botón derecho
del ratón sobre la caja de herramientas y elegir Style Application o bien en el menú,
seleccionar View/Toolbar/Style Application.
a) New Auto Class: se define una clase en la cabecera del propio documento o página
y se van añadiendo propiedades conforme se van pulsando en la barra de
herramientas como el tipo de letra, su color o su tamaño, el color del fondo, etc…
b) New Style in line: Conforme se pulsa en las distintas opciones de la barra Microsoft
Expression Web se define un estilo en línea.
c) Apply New Style: Microsoft Expression Web (MEW a partir de ahora) abre una
ventana de diálogo que nos permite definir el estilo de manera totalmente visual, a
golpe de ratón.
8
Esta ventana la explicaremos con más detalle más adelante, pero ahora adelantamos
que es la opción más flexible de todas porque además de ayudarnos mucho a la hora
de diseñar nuestros estilos de manera visual, nos permite:
o Crear el estilo –en línea, en la propia página o en un documento externo-.
o Crear una clase o un identificador donde definir el estilo.
o Modificar, sobrescribiendo, los estilos que vienen por defectos de los
elementos Web.
Ya veremos más adelante que esta ventana la podemos abrir también desde otros
lugares del propio entorno.
9
Microsoft Expression Web permite elegir entre crear el estilo en línea, en el propio
documento o página o definir el estilo al comienzo del documento.
Antes de comenzar a estudiar este punto, creo que es muy útil ver los siguientes videos:
Cómo definir una hoja de estilos externa con MEW (Duración: 3m. 48seg.) En este
video se hace una introducción para explicar una de las maneras de definir uno o varios
estilos en una hoja de estilos externa. Se aprovecha para explicar algunas peculiaridades
de la interfaz de usuario de MEW y para explicar cómo definir un atributo en un
elemento web.
Cómo definir un estilo in line o en línea con MEW (Duración 3m. 19seg.)
Cómo definir un estilo en el propio documento con MEW (Duración 3m. 26seg.). Se
explica una manera sencilla de definir un estilo en la cabecera del propio documento
Para construir una hoja de estilos externa, podemos trabajar de dos formas:
10
b. En la barra de herramientas de ApplyStyles, con la opción Manual
seleccionada, escoger Apply New Style en Target Rule.
1. Creamos una página web. Nada más crearla, lo mejor es guardar esta página.
Parra ello pulsamos sobre el botón guardar de la barra de herramientas o bien
File/Save en el menú principal. Nos pedirá un nombre y, por ejemplo, podemos
llamar a nuestra página AplicarEstilos.htm –ver nota sobre la diferencia entre las
extensiones htm y html-. Una vez guardada nuestra página, insertamos un
elemento <h5> y tres párrafos. Para añadir estos elementos, podemos hacerlo
escribiendo directamente el código en el fichero html –y esto es perfectamente
posible porque MEW nos ayuda mucho- o bien podemos hacerlo desde la barra
de herramientas Common de MEW –si no la tenemos en el entorno de trabajo
podemos pulsar View/Toolbar/Common o bien pulsar el botón derecho del
ratón sobre una parte vacía de la barra de herramientas de MEW y seleccionar
Common-. Una vez aquí, basta con pulsar sobre el ComboBox primero de esta
barra –como se aprecia en la figura siguiente- y seleccionar Heading <h5> y
Paragraph <p> respectivamente para insertar esos elementos.
A los párrafos les llamaremos respectivamente, pUno, pDos y pTres. Para ello,
en el panel de Tag Properties -si por lo que sea no podemos ver este panel, lo
podemos abrir en el menú Task Panes/Tag Properties- definimos para esos tres
elementos los atributos id pUno, pDos y pTres respectivamente, como se indica
en la figura.
11
A continuación escribimos un título –el que queramos- y tres contenidos –uno
por cada párrafo-.
2. En la barra de herramientas de Style Application, seleccionamos Manual y en
Target Rule, Apply New Style… Se os abrirá entonces la ventana de diálogo
que nos ayuda a definir los estilos de manera visual, a golpe de ratón.
Para definir un nuevo estilo, tenemos varias opciones que vamos a ir explicando:
a. Define in: nos permite definir el tipo de estilo que vamos a crear.
Tenemos varias posibilidades:
i. Current Page: En la página actual. En general, añade un estilo
en la etiqueta <style> de la cabecera de la página. Si el foco está
en la página css porque estamos trabajando en ella, añade el estilo
a esta hoja de estilos.
ii. New Style Sheet: Crea una nueva hoja de estilos externa.
12
iii. Existing Style Sheet: Añade el estilo a una hoja de estilos ya
existente. Dicha hoja la seleccionaremos en la opción URL que
está situada a la derecha de la ventana, en la parte superior.
Permite también crear un estilo en línea. Lo vemos en el siguiente
punto.
b. Selector: Permite dar cualquier nombre a un selector, tanto si se trabaja
con clases (.miClase) como con Identificadores (#miIdentificador)
como si se desea sobrescribir o redefinir un determinado estilo de un
elemento cualquiera (por ejemplo un <h5> o <p>. Permite también crear
un estilo en línea, seleccionando in line en Selector.
c. En la parte inferior de esta ventana hay tres botones. Tanto Aceptar
como Cancelar tienen el sentido que se espera de ellos y Apply nos
permite aplicar ese estilo al elemento que esté seleccionado, sin que se
cierre la ventana.
13
4. Pulsamos el botón Ok y se nos presenta la ventana
Los dos ficheros –htm y css- quedan vinculados por esta etiqueta <link> que
indica que este documento html tiene una hoja de estilos asociada de tipo texto e
indica la ruta donde se almacena dicho fichero.
5. En la ventana de diálogo para definir visualmente los estilos hay otras opciones.
14
a. Category: Aquí se selecciona el tipo de elemento para el que se desea
definir el estilo –fuente, fondo, posicionamiento, etc.- del elemento
seleccionado en Selector –en la figura, es el elemento párrafo <p>. En
la figura se ha definido una serie de opciones para este elemento: la
fuente –porque es la que está seleccionado- y el fondo –se indica con
letra negrita el hecho de haber seleccionado algo de esa propiedad-.
b. Preview: este recuadro es meramente visual, y se utiliza para que el
usuario pueda ver el aspecto de su estilo en esta pequeña ventana.
c. Description: En esta caja de texto se escribe el código que define este
estilo y que se va a añadir a nuestro fichero css o a nuestro propio
documento o al elemento –dependiendo de la opción seleccionada en
Define in-.
6. Aceptamos y el aspecto de nuestro documento debería ser, más o menos- el
siguiente:
15
Vemos que nada más cerrar la ventana se ha actualizado el aspecto o
presentación de nuestra página y en dicha página no hay nada que haga suponer
que hemos definido una presentación para nuestros elementos de párrafo. Sólo la
etiqueta <link> define, como hemos dicho- la referencia a un fichero css que
define este aspecto. Dicho fichero tiene el suiente contenido:
p {
background-color: #FF0000;
font-family: "Lucida Sans", sans-serif;
font-size: x-large;
font-style: italic;
color: #0000FF;
text-decoration: overline;
}
Poco a poco iremos estudiando cada una de las propiedades de esta ventana de diálogo.
16
Es conveniente ver los dos videos siguientes antes de estudiar este punto.
Panel ApplyStyles (Duración: 10m. 20seg.) En este video tutorial se explica con detalle
el panel Apply Styles, que se utiliza para aplicar o borrar estilos en nuestra página.
Una vez que hemos definido un estilo en una hoja de estilos externa… ¿cómo aplicarlo?
Hay varias maneras de hacerlo. Con MEW esta tarea resulta muy sencilla. Para verlo,
vamos a hacer un ejemplo. Nos vamos a apoyar en el ejemplo anterior, donde tenemos
definidos un elemento h5 como título y tres párrafos cuyos IDs son respectivamente
pUno, pDos y pTres. Hemos definido un estilo para la clase .miEstilo.
Antes de empezar, es absolutamente necesario tener seleccionado “Manual” en la barra
de herramientas Style Application.
a) En primer lugar abrimos el fichero htm o html.
b) Como antes hemos dicho hay varias formas de aplicar estilos:
a. Ventana o panel Tag Properties. (Si el lector no lo tiene en pantalla,
puede visualizarlo sin más que pulsar desde el menú Task Pane/Tag
Properties). Para ello, seleccionamos el párrafo pUno y, en la ventana
Tag Properties, seleccionamos en el atributo class, la clase .miEstilo
como se describe en la figura. (En este combo box aparecerán todas las
clases que tengamos definidas).
17
En el caso de hacerlo sobre pDos, sólo aparecerá información sobre el
elemento sobre el ID, pero no en el elemento class porque no tiene ninguna
clase asignada. Una vez explicado esto ya se puede aplicar el estilo. Sólo es
necesario seleccionar nuestro elemento –en este caso vamos a seleccionar el
párrafo pDos- y, en el ComboBox correspondiente a class de esta barra de
herramientas, elegimos la clase que queramos aplicar, en nuestro caso,
.miEstilo. De manera inmediata se aplica al elemento pDos la clase
.miEstilo.
c) Panel de tareas Apply Styles. Es con mucha diferencia la manera más flexible
de aplicar un estilo. (Si no vemos este panel, lo podemos visualizar desde el
menú Task Pane/Apply Styles). En este panel se listan los estilos actualmente
definidos en nuestro proyecto y una aproximación gráfica del estilo
seleccionado. El aspecto de la ventana es el siguiente:
18
determiknado fichero htm o html, categorizar las vistas de los estilos, borrar
estilos, renombrarlos, editarlos, etc.
19
2. Attach Style Sheet… Abre una caja de diálogo que nos
permite lincar o referenciar una hoja de estilos externa a
una determinada página web si es que esa hoja no está ya
referenciada. Podemos referenciar uno o varios fichero
css, a una o varias páginas web y lincar o importar –ya
veremos la diferencia más adelante- dicho fichero.
20
con una serie de opciones realmente útiles. La lista es más
o menos –depende del elemento o estilo- la siguiente:
21
• Remove Link. Permite desvincula o desrefernciar
nuestra hoja de estilos externa del fichero web o página
html.
• Attach Style Sheet… Justo lo contrario. Permite
vincular la hoja de estilos con la página web. Añade a
la cabecera de la página una etiqueta <link> donde se
define el vínculo a la hoja de estilos.
• Manage Style Sheet Links... Abre la ventana de la
figura desde donde es possible gestionar las
vinculaciones de las páginas web y las hojas de estilo.
Desde aquí puede cambiarse la referencia de la página
actual.
22
Esta ventana nos ayuda también a identificar los diferentes
estilos porque nos representa el aspecto de cada uno ellos.
En las dos siguientes figuras se puede ver un ejemplo de
cada uno de los elementos anteriores. La ventana nos
representa en diferentes bloques los estilos que están
definidos en las hojas de estilo y los estilos definidos en la
página actual, ya sea en línea, en el propio documento o
importados. En la primera de las representaciones nunca se
representan los estilos de los elementos, ya que éstos no se
pueden aplicar –están aplicados por sí mismos-.
23
MANEJANDO ESTILOS CON LA VENTANA PROPIEDADES CSS
Y CON EL PANEL MANAGE STYLES
a) CSS Style List o listado de estilos del sitio web. Se puede acceder desde aquí a
cualquiera de los estilos que tengamos definido en nuestro sitio Web. Clicando
con el botón derecho sobre cualquiera de los estilos –ya sea de la página actual o
bien de la hoja de estilos- se puede acceder a muchas posibilidades en el menú
contextual.
24
Por ejemplo, si pulsamos con el botón derecho sobre el estilo .otroEstilo,
aparece el menú:
25
caso- el nombre de la clase (Rename Class), borrar el estilo o la clase (Delete),
quitar o añadir la referencia de la página web a nuestra hoja de estilos (Remove
Link & Attach Style Sheet), y por último, manejar o controlar las referencias
de nuestra página a una o varias hojas de estilo (Manage Style Sheet Links). No
explicamos estas posiblidades ahora porque he hablado de ellas en el punto
anterior de forma detallada.
b) Select Style Preview. En esta pequeña zona de este panel se presenta el aspecto
que tiene el estilo seleccionado.
c) Botón Options. Ya se ha explicado en el anterior punto.
d) New Style. Ya se ha explicado en el anterior punto
e) Attach Style Sheet. Ya se ha explicado en el anterior punto
Panel Manage Styles (Duración: 9m. 44seg.) En este video tutorial se explica la
funcionalidad del Panel Manage Styles. Para hacerlo, me apoyo en un sencillo ejemplo
que permite ir describiendo sus distintas opciones.
26
El primero nos permite ver las propiedades CSS por categorías, el segundo
nos ordenas dichas propiedades por orden alfabético y la tercera nos presenta
en la parte superior las propiedades CSS que han sido definidas o
modificadas y el resto listadas por categorías o por orden alfabético según se
tenga pulsado el primer o segundo botón. En la figura anterior puede verse
que se tiene pulsado el primer botón –listado por categorías- y el tercero por
lo que se sitúan en la parte superior de dicha lista las tres propiedades CSS
que se han definido. El texto está en color azul cuando una propiedad se ha
definido y en la parte derecha de la ventana aparece el valor de dicha
propiedad.
b) En la parte que está situada un poco más hacia abajo, Current Rule, se
informa de cómo se ha aplicado el estilo –en línea, en el propio documento o
en un a hoja de estilos externa y en éste último caso se informa del nombre
del fichero css y un poco más abajo el selector que se ha utilizado –una
etiqueta, una clase, un identificador, etc (en este caso la clase .miEstilo).
Si se pulsa sobre el nombre del fichero css se accede al código de la hoja de
estilos.
27
Si se pulsa sobre el botón Summary la ventana cambia su contenido:
28
Ahora nos aparecen sólo las propiedades que afectan a este estilo. Haya que tener en
cuenta que este botón permanecerá en estado pulsado si no lo volvemos a pulsar.
Si esta ventana está vacía es porque el foco de la aplicación no se encuentra sobre algún
estilo en el panel Manage Styles.
Panel CSS Properties (Duración: 7m. 54seg.) Se explica en detalle el Panel CSS
Properties. A través de un ejemplo, se enseña que sirve para obtener información de un
elemento que se haya seleccionado pero también y sobre todo, para realizar pequeñas
modificaciones en un determinado estilo ya definido sin tener que ejecutar la ventana de
edición de estilos o hacerlo directamente sobre el código.
En el video tutorial Tag Properties (Duración: 6m. 27seg.) se explica con detalle la
utilización de la ventana Tag Properties y cómo trabajar con ella. A través de un
ejemplo se enseña que sirve, sobre todo, para trabajar con el código HTML y no con
estilos aunque también podría modificarse un estilo desde esta ventana.
Por defecto, los elementos HTML tienen un estilo pre-definido. Por ejemplo, el
elemento <h1> tiene un tamaño y un color de letra por defecto. Los mismo sucede con
29
cualquier elemento. ¿Es posible modificar estos estilos predefinidos?. La respuesta es
afirmativa y vamos a hacer un ejemplo para comprender cómo hacerlo.
El elemento <body> por ejemplo, tiene un estilo definido por defecto. La fuente o letra
por defecto es Times New Roman, de color negro. Por otro lado tiene unos márgenes
determinados arriba, abajo, izquierda y derecha. Vamos a modificar la apariencia que el
elemento <body> tiene por defecto. Para entender cómo redefinir etiquetas HTML
utilizando CSS con MEW. Para ello se deben seguir estos pasos:
a) Desde el panel Apply Styles o Manage Styles, pulsamos sobre New Style y se
abrirá la ventana de diálogo de estilos.
30
c) Cambiamos ahora en la ventana alguna propiedades: La categoría Font
Arial/Helvetiva en la opción Font-Family. El tamaño o Font-Size Small y
Color Rojo. La categoría Box quitar Same for All for margin en el checbox
correspondiente e introducir el valor 35 for left. Esto añadirá 25 píxeles de
espacio en la parte izquierda de la página.
31
En el video tutorial Redefinir Etiquetas (Duración: 5m. 27seg.) se explica cómo
redefinir el estilo que por defecto se aplica a cada uno de los elemento HTML. Para ello,
nos apoyamos en un ejemplo muy sencillo y se modifican algunas de las propiedades
CSS que están predefinidas por defecto para el elemento body. También se explica con
detalle cómo quedan reflejados estos cambios en en los paneles Apply Styles y Manage
Styles así como en la ventana CSS Properties.
CSS REPORTS
MEW nos proporciona un herramienta que permite chequear nuestro código para saber
si tiene errores. Dicha herramienta se denomina CSS Reports. Esta herramienta nos
permite conocer las clases indefinidas, los estilos no utilizados, lo errores, etc.
Para ejecutar esta herramienta lo podemos hacer de dos maneras: desde el menú Task
Panes/CSS Reports o bien desde el menú Tools/ CSS Reports. La única diferencia
entre ambas es que en la segunda la aplicación se ejecuta directamente y en la primera
de las opciones tenemos que hacerlo sobre la ventana que se nos abre.
32
tenemos que ejecutar la aplicación, pulsando sobre el botón PLAY situado en la esquina
superior izquierda del panel, en color verde.
En el video tutorial Chequear Estilos (Duración 4m. 11seg.) se explica esta herramienta
que proporciona MEW para chequear nuestras páginas. Con ella se puede acceder a
errores que sería muy difícil detectar visualizando el código directamente o ejecutando
nuestras páginas web.
33