Hojas de Estilo CSS

Hojas de estilo
5. Hojas de estilo
1. 2. 3. 4. Qu son las hojas de estilo Definir el estilo de una etiqueta Definir el estilo de una pgina Crear una hoja de estilo externa
Qu son las hojas de estilo

A menudo queremos que las pginas de nuestra web tengan un estilo comn, la misma fuente, el mismo estilo de prrafos, etc. Para hacer esto podemos repetir una y otra vez estos estilos o podemos englobarlos todos en una nica instruccin. Si tomamos como ejemplo este manual veremos que la fuente es del tipo Arial, y la de los encabezados y actividades es Comic Sans Serif. Adems las actividades van dentro de un recuadro, los vnculos no estn subrallados y cambian de color al pasar sobre ellos. Para conseguir este estilo propio y comn a todas las pginas he creado una hoja de estilo en cascada, cascade style sheets en ingls, donde defino el formato de cada una de las etiquetas que me interesan, y en cada pgina hago una llamada a esta hoja de estilos para que aplique el formato sin tener que repetirlo una y otra vez. En esta leccin se introcucen algunas de las propiedades ms comunes de las hojas de estilo en cascada segn el convenio CSS2, es decir, la versin 2 de las hojas de estilo en cascada cuyas iniciales en ingls son CSS como hemos visto ms arriba. En el anexo C. Propiedades de CSS2 tienes una tabla completa con todas las propiedades de CSS2, sus posibles valores y ejemplos. A continuacin veremos que no es tan complicado como parece.
Definir el estilo de una etiqueta

Podemos definir un estilo dentro de una etiqueta de modo que slo afecte a sta mediante el atributo style . Este atributo es vlido para todas las etiquetas de Html y su formato es el siguiente:
<etiqueta style="propiedad: valor;">Texto</etiqueta>
Veamos un ejemplo: Cdigo

<p style="color: red;">Texto Rojo</p>
Resultado Texto Rojo
Como puedes observar la estructura es muy sencilla: dentro del atributo style escribimos la propiedad ( color ), dos puntos, el valor ( red ) y un punto y coma. Si quisiramos podramos aadir tantas propiedades como deseemos, todas ellas separadas por un punto y coma.
http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]
Hojas de estilo
Nota: Esta es la forma correcta de aplicar colores, fuentes y tamaos al texto de nuestras pginas en Html 4 y no utilizar la etiqueta <font> que actualmente est desaprobada. A continuacin tienes una pequea tabla con propiedades de la fuente y la alineacin del prrafopara que practiques este atributo en la actividad siguiente, aunque tienes el resto de propiedades en el Anexo C. Propiedades de CSS2. Propiedad Valor
normal font-style italic normal font-weight bold
Resultado Normal Itlica Normal Negrita Grueso 900 Familia serif Familia sans-serif Familia cursive
Familia monospace
Nmero de 100 a 900

serif sans-serif cursive font-family monospace fantasy
Familia fantasy
Nombre de la fuente, p.e. wingdings
font-size
Tamao en pxels (px), puntos tipogrficos (pt), centmetros (cm), milmetros (mm), pulgadas (in), etc., p.e. 40px
40 pxels
Texto Rojo Texto violeta fondo Rojo Fondo violeta Texto a la izquierda Texto a la derecha Texto centrado Texto justificado a izquierda y derecha
color
Nombre del color en ingls, p.e. red Color en hexadecimal RGB, p.e. #AA00AA
background- Nombre del color de fondo en ingls, p.e. red color Color de fondo en hexadecimal RGB, p.e. #AA00AA left, alinear a la izquierda right , alinear a la derecha center , alinear al centro text-align justify, justificar, alinear a izquierda y derecha
Nota: Esta es una propiedad slo para etiquetas de prrafo como <p> , <h1> o <blockquote>, y por tanto no funcionar con etiquetas de frases como <b> , <em>, etc. Estas propiedades puedes aplicarlas a todas las etiquetas que ya conoces que, de una manera u otra, dan formato a un texto de tu pgina. As podemos cambiar las propiedades de <p> , <body> , <h1>, <blockquote>, <b> , etc. Ejemplo
<html> <head> </head> <body style="color: red; background-color: #DD66DD;"> Resultado
Hojas de estilo
<p>Fuentes rojas y fondo lila</p> <p style="color: navy;">Prrafo azul marino</p> </body> </html>
A menudo querrs dar formato a un prrafo o a un texto, pero no con una etiqueta en particular sino con una ms genrica. Para ello existen dos etiquetas sobre las que podemos aplicar estos estilos. Estas etiquetas son <div> para dar formato a un prrafo y <span> para dar formato a un texto. Ejemplo:
<span style="color: red;">Texto rojo</span>
Resultado Texto rojo
Actividad 5.1 1. 2. 3. 4. 5. 6. 7. 8. Abre el archivo inicio.htm . Cambia el color de fondo de la pgina a amarillo (yellow ). Cambia el tipo de fuente de la pgina a Comic Sans MS. Cambia el encabezado a fuente Arial , color azul marino (navy) y grueso de fuente 900 . Centra los encabezados Alinea tu nombre y la cita del final a la derecha Prueba a cambiar las propiedades de otras partes de la pgina.. Guarda el archivo y brelo en el navegador para comprobar el resultado.
Definir el estilo de una pgina

Si queremos que todos los encabezados de nuestra pgina, definidos con una etiqueta del tipo <h1>, sean de color azul, podemos indicarlo en cada etiqueta como acabamos de aprender o podemos definirlo para toda la pgina en el encabezado de sta, es decir, dentro de la etiqueta <head> . Para definir estos estilos comunes a toda la pgina se utiliza la etiqueta <style> de la siguiente manera:
<html> <head> <title>Mi pgina web</title> <style type="text/css"> ... </style> </head> <body> ... </body> </html>
Hojas de estilo
El atributo type="text/css" indica al programa que se trata de una hoja de estilo (Cascade Style Sheet). Dentro de la etiqueta <style> escribiremos las distintas etiquetas y entre llaves sus propiedades segn vimos en el apartado anterior. Veamos un ejemplo: Ejemplo:
<html> <head> <title>Mi pgina web</title> <style type="text/css"> body { background: yellow; font-family: monospace; } h1,h2,h3,h4,h5 { color: navy; } </style> </head> <body> ... </body> </html>
Resultado
Actividad 5.2 1. Abre el archivo agua.htm . 2. Define en la seccin <head> de la pgina las siguientes propiedades siguiendo el ejemplo anterior. Color de fondo de la pgina azul claro Familia de fuente cursive La etiqueta <b> con fuente serif y grueso 900 Las cursivas <i> o <em> con fuente sans-serif 3. Guarda el archivo y brelo en el navegador para comprobar el resultado.
Es posible tambin definir estilos diferentes para la misma etiqueta. Observa el siguiente ejemplo:
<style type="text/css"> p {font-family: serif;} p.azul {color: navy;} </style>
En el ejemplo anterior hemos definido el tipo de fuente de la etiqueta <p> como serif , pero hemos definido una subetiqueta o clase de <p> llamada azul y que tendr color azul marino. Para indicar que un prrafo definido por <p> es de la clase azul lo indicaremos con el atributo
Hojas de estilo
class="azul". Observa como queda el cdigo y el resultado final:
Ejemplo:
<html> <head> <title>Mi pgina web</title> <style type="text/css"> p {font-family: serif;} p.azul {color: navy;} </style> </head> <body> <p>ste es un prrafo normal</p> <p class="azul">...y ste azul marino.</p> </body> </html>
Resultado
Tambin es posible definir una clase genrica que podr ser utilizada dentro de cualquier etiqueta. Por ejemplo:
<style type="text/css"> .centrado {text-align: center;} </style>
Con esta clase podemos centrar cualquier texto definido por una etiqueta de bloque escribiendo, por ejemplo, <p class="centrado"> o <h2 class="centrado"> . Ejemplo:
<html> <head> <title>Mi pgina web</title> <style type="text/css"> .centrado {text-align: center;} </style> </head> <body> <p>ste prrafo no est centrado</p> <p class="centrado">...pero ste s</p> <h2 class="centrado">...y este encabezado tambin</h2> </body> </html>
Resultado
Actividad 5.3 1. Abre el archivo agua.htm . 2. Define en el encabezado de la pgina una clase para la etiqueta <b> llamada definicion con tamao ms grande. 3. Establece la clase definicion a la palabra agua del principio. 4. Guarda el archivo y brelo en el navegador para comprobar el resultado.
Hojas de estilo
Crear una hoja de estilo externa

Por lo general, al disear una web querremos que todas las pginas tengan el mismo estilo para dar mayor uniformidad y un aspecto personalizado a nuestro gusto. Podemos entonces repetir en el encabezado de cada una de las pginas el estilo de cada etiqueta, lo cual sera muy tedioso, o podemos escribir estos estilos en un archivo aparte y llamarla desde cada pgina. El contenido de este archivo es simplemente lo que escribamos dentro de la etiqueta <style> en el apartado anterior, y lo guardaremos con la extensin .css. Por ejemplo, creamos con el editor de textos un archivo nuevo llamado miestilo.css y cuyo contenido es el siguiente:
body { background-color: yellow; font-family: monospace; } h1,h2,h3,h4,h5 { color: navy; }
Una vez creada la hoja de estilo y guardado el archivo lo llamaremos escribiendo la siguiente etiqueta dentro del encabezado, donde antes escribamos la etiqueta <style>:
<link href="miestilo.css" rel="stylesheet" type="text/css">
Y en definitiva la estructura final de la pgina quedar de la siguiente manera:
<html> <head> <title>Mi pgina web</title> <link href="miestilo.css" rel="stylesheet" type="text/css"> </head> <body> ... </body> </html>
Actividad 5.4 1. Abre el archivo agua.htm . 2. Selecciona los estilos que escribiste en la actividad 5.3 dentro de la etiqueta <style>, pero no la etiqueta.
Hojas de estilo
3. Selecciona Edicin - Copiar para guardar la seleccin en el portapapeles i cierra el archivo agua.htm . 4. Abre el bloc de notas o tu editor de textos y selecciona Edicin - Pegar para pegar el contenido del portapapeles. 5. Selecciona Archivo - Guardar para guardar el archivo. En Nombre escribe miestilo.css y en Tipo selecciona Todos los archivos para que no aada la extensin .txt . 6. Ahora ya tienes en el archivo miestilo.css los estilos que habas definido. 7. Crea un nuevo archivo fuego.htm con el editor de textos segn aprendiste en la actividad 2.1 . 8. Escribe el siguiente texto ajustndote al formato que tiene.
9. Establece la clase definicion a la palabra fuego del principio. 10. Guarda el archivo y brelo en el navegador para comprobar el resultado. 11. Vuelve a abrir el archivo fuego.htm en el editor de textos e inserta en el encabezado la etiqueta que llama a la hoja de estilo miestilo.css que acabas de crear 12. Guarda el archivo de nuevo y brelo en el navegador para comprobar el resultado y comparar la nueva presentacin con la anterior sin la hoja de estilo.
Formatos de texto
Insertar objetos

Hojas de Estilo CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Hojas de Estilo CSS

Uploaded by

Copyright:

Available Formats

Hojas de estilo

Qu son las hojas de estilo

Definir el estilo de una etiqueta

Veamos un ejemplo: Cdigo

Resultado Texto Rojo

http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]

Nmero de 100 a 900

Nombre de la fuente, p.e. wingdings

http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]

Resultado Texto rojo

Definir el estilo de una pgina

http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]

<style type="text/css"> p {font-family: serif;} p.azul {color: navy;} </style>

http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]

class="azul". Observa como queda el cdigo y el resultado final:

<style type="text/css"> .centrado {text-align: center;} </style>

http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]

Crear una hoja de estilo externa

body { background-color: yellow; font-family: monospace; } h1,h2,h3,h4,h5 { color: navy; }

Y en definitiva la estructura final de la pgina quedar de la siguiente manera:

http://www.terra.es/personal3/tutorialhtml/css.html[02/06/2011 10:19:38 a.m.]

You might also like