A menudo queremos que las páginas de nuestra web tengan un estilo común, la misma fuente, el mismo estilo de párrafos, etc. Para hacer esto podemos repetir una y otra vez estos estilos o podemos englobarlos todos en una única instrucción.
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. Además las actividades van dentro de un recuadro, los vínculos no están subrallados y cambian de color al pasar sobre ellos. Para conseguir este estilo propio y común a todas las páginas he creado una hoja de estilo en cascada, cascade style sheets en inglés, donde defino el formato de cada una de las etiquetas que me interesan, y en cada página hago una llamada a esta hoja de estilos para que aplique el formato sin tener que repetirlo una y otra vez.
En esta lección se introcucen algunas de las propiedades más comunes de las hojas de estilo en cascada según el convenio CSS2, es decir, la versión 2 de las hojas de estilo en cascada cuyas iniciales en inglés son CSS como hemos visto más arriba. En el anexo C. Propiedades de CSS2 tienes una tabla completa con todas las propiedades de CSS2, sus posibles valores y ejemplos.
A continuación veremos que no es tan complicado como parece.
Podemos definir un estilo dentro de una etiqueta de modo que
sólo afecte a ésta mediante el atributo style.
Este atributo es válido para todas las etiquetas de Html y su
formato es el siguiente:
<etiqueta style="propiedad: valor;">Texto</etiqueta> |
|---|
Veamos un ejemplo:
| Código | Resultado |
|---|---|
<p style="color: red;">Texto Rojo</p> |
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 quisiéramos podríamos añadir
tantas propiedades como deseemos, todas ellas separadas por un punto y
coma.
Nota: Esta es la forma correcta de aplicar colores, fuentes y
tamaños al texto de nuestras páginas en Html 4 y no
utilizar la etiqueta <font>
que actualmente está desaprobada.
A continuación tienes una pequeña tabla con propiedades de la fuente y la alineación del párrafopara que practiques este atributo en la actividad siguiente, aunque tienes el resto de propiedades en el Anexo C. Propiedades de CSS2.
| Propiedad | Valor | Resultado |
|---|---|---|
font-style |
normal |
Normal |
italic |
Itálica | |
font−weight |
normal |
Normal |
bold |
Negrita | |
| Número de 100 a 900 | Grueso 900 | |
font−family |
serif |
Familia serif |
sans-serif |
Familia sans-serif | |
cursive |
Familia cursive | |
monospace |
Familia monospace | |
fantasy |
Familia fantasy | |
Nombre de la fuente, p.e. wingdings |
Wingdings | |
font-size |
Tamaño en píxels (px), puntos
tipográficos (pt), centímetros (cm), milímetros
(mm), pulgadas (in), etc., p.e. 40px |
40 píxels |
color |
Nombre del color en inglés, p.e. red |
Texto Rojo |
Color en hexadecimal RGB, p.e. #AA00AA |
Texto violeta | |
background−color |
Nombre del color de fondo en inglés, p.e. red |
fondo Rojo |
Color de fondo en hexadecimal RGB, p.e. #AA00AA |
Fondo violeta | |
text−align |
left, alinear a la izquierda |
Texto a la izquierda
|
right, alinear a la derecha |
Texto a la derecha
|
|
center, alinear al centro |
Texto centrado
|
|
justify, justificar, alinear a izquierda y
derecha |
Texto justificado a izquierda y
derecha
|
|
Nota: Esta es una propiedad sólo
para etiquetas de párrafo 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
página. Así podemos cambiar las propiedades de <p>, <body>, <h1>, <blockquote>,
<b>, etc.
| Ejemplo | Resultado |
|---|---|
<html> |
A menudo querrás dar formato a un párrafo o a un
texto, pero no con una etiqueta en particular sino con una más
genérica. Para ello existen dos etiquetas sobre las que podemos
aplicar estos estilos. Estas etiquetas son <div>
para dar formato a un párrafo y <span>
para dar formato a un texto.
| Ejemplo: | Resultado |
|---|---|
<span style="color: red;">Texto rojo</span> |
Texto rojo |
Actividad 5.1
inicio.htm.yellow).Comic Sans
MS.Arial, color azul
marino (navy) y grueso de fuente 900.Si queremos que todos los encabezados de nuestra página,
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 página en el
encabezado de ésta, es decir, dentro de la etiqueta <head>.
Para definir estos estilos comunes a toda la página se
utiliza la etiqueta <style> de la
siguiente manera:
<html>
<head>
<title>Mi página web</title>
<style type="text/css">
...
</style>
</head>
<body>
...
</body>
</html>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
según vimos en el apartado anterior. Veamos un ejemplo:
| Ejemplo: | Resultado |
|---|---|
<html> |
agua.htm.<head>
de la página las siguientes propiedades siguiendo el ejemplo
anterior.
cursive<b> con fuente serif
y grueso 900<i> o <em> con fuente sans-serifEs posible también 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 párrafo definido por <p>
es de la clase azul lo indicaremos con el atributo class="azul". Observa como queda el
código y el resultado final:
| Ejemplo: | Resultado |
|---|---|
<html> |
También es posible definir una clase genérica 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: | Resultado |
|---|---|
<html> |
agua.htm.<b> llamada definicion
con tamaño más grande.definicion a la palabra agua
del principio.Por lo general, al diseñar una web querremos que todas las páginas 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 páginas el estilo de cada etiqueta, lo cual sería muy tedioso, o podemos escribir estos estilos en un archivo aparte y llamarla desde cada página.
El contenido de este archivo es simplemente lo que
escribíamos dentro de la etiqueta <style>
en el apartado anterior, y lo guardaremos con la extensión .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
escribíamos la etiqueta <style>:
<link href="miestilo.css" rel="stylesheet"
type="text/css">Y en definitiva la estructura final de la página quedará de la siguiente manera:
<html>
<head>
<title>Mi página web</title>
<link href="miestilo.css"
rel="stylesheet" type="text/css">
</head>
<body>
...
</body>
</html>agua.htm.<style>,
pero no la etiqueta.Edición - Copiar para guardar la
selección en el portapapeles i cierra el archivo agua.htm.Edición
- Pegar para pegar el contenido del portapapeles.
- Guardar para guardar el archivo. En Nombre escribe
miestilo.css y en Tipo selecciona Todos
los archivos para que no añada la extensión .txtmiestilo.css los
estilos que habías definido.fuego.htm con el editor de
textos según aprendiste en la actividad 2.1.
definicion a la palabra fuego
del principio.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 Formatos de texto |
 |
Insertar objetos  |