Aplicaciones de las Hojas de Estilo en cascada
En unas palabras
Para definir estilos en una parte pequeña de una página se utiliza la etiqueta
En una parte de la página
Para hacer que toda una etiqueta muestre un estilo determinado, por ejemplo, un párrafo entero, utilizamos el atributo
Con la etiqueta
En toda una página
Para definir estilos que sean aplicados a toda la página, se utiliza la etiqueta
La etiqueta
En toda la página (etiqueta
En todo un sitio web
La programación con hojas de estilos permite, de una vez, definir los estilos de todo un sitio web, creando un archivo donde colocamos los estilos de la página y enlazando todas las páginas a ese archivo. Así, si cambiamos el archivo de estilos, cambiarán todas las páginas. También se ahorra en código HTML, reduciendo el peso del documento.
Proceso para incluir estilos con un fichero externo.
1- Creamos un fichero de estilos, en formato de texto, con la extensión
2- Enlazamos la hoja de estilos en la página web, colocando la etiqueta:
Siendo
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Título de la página</title>
</head>
<body>
...
</body>
</html >
También podemos incluir estilos en un archivo externo con la sintaxis
Se debe incluir entre las etiquetas
Este método se utiliza cuando hay unas pautas básicas de estilos (que se definen en el archivo a importar) y unos estilos específicos para cada página (que se definen entre las etiquetas
Reglas de importancia en los estilos
Jerarquía para resolver conflictos entre declaraciones de estilos distintas para una misma porción de página (de menor a mayor importancia en caso de contradicción):
* Declaración de estilos con fichero externo.
* Declaración de estilos para toda la página. (etiqueta style en la cabecera de la página)
* Estilos definidos en una parte de la página. (etiqueta div)
* Definidos en una etiqueta en concreto. (etiquetas con atributo style)
* Declaración de estilo para una porción pequeña del documento. (etiqueta span)
Para definir estilos en una parte pequeña de una página se utiliza la etiqueta
<span>. Con el atributo style indicamos las características del estilo.
<p>
Esto es un párrafo con algunas palabras <span style="color:green">en color verde</span>.
</p>
Esto es un párrafo con algunas palabras en color verde.
En una parte de la página
Para hacer que toda una etiqueta muestre un estilo determinado, por ejemplo, un párrafo entero, utilizamos el atributo
style.
<p style="color:#990000">
Esto es un párrafo de color rojo.
</p>
<p style="color:#000099">
Esto es un párrafo de color azul.
</p>
Esto es un párrafo de color rojo.
Esto es un párrafo de color azul.
Con la etiqueta
<div> podemos definir estilos a todo un bloque de la página de una vez.
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <em>azul y negrita</em></h3>
<p>
Seguimos dentro del DIV, luego permanecen los etilos
</p>
</div>
Estas etiquetas van en azul y negrita
Seguimos dentro del DIV, luego permanecen los estilos
En toda una página
Para definir estilos que sean aplicados a toda la página, se utiliza la etiqueta
style colocada en la cabecera de la página. Se coloca el nombre de la etiqueta de la que queremos definir los estilos, y entre llaves {} colocamos las características de estilos.
<html>
<head>
<title>Título de la página</title>
<style type="text/css">
h1 {text-decoration: underline; text-align:center}
p {font-Family:arial,verdana; color: white; background-color: black}
body {color:black;background-color: #cccccc; text-indent:1cm}
</style>
</head>
<body>
<h1>Título dentro de la página</h1>
<p>Párrafo de texto</p>
</body>
</html>
La etiqueta
h1 se presentará subrayada y centrada.
En toda la página (etiqueta
<body>) se aplicará color del texto negro, color del fondo grisaceo, margen lateral de 1 cm. Si aplicamos estilos a la etiqueta <body>, estos serán heredados por el resto de las etiquetas del documento, siempre que no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta será el que prevalezca.
En todo un sitio web
La programación con hojas de estilos permite, de una vez, definir los estilos de todo un sitio web, creando un archivo donde colocamos los estilos de la página y enlazando todas las páginas a ese archivo. Así, si cambiamos el archivo de estilos, cambiarán todas las páginas. También se ahorra en código HTML, reduciendo el peso del documento.
Proceso para incluir estilos con un fichero externo.
1- Creamos un fichero de estilos, en formato de texto, con la extensión
.css.
2- Enlazamos la hoja de estilos en la página web, colocando la etiqueta:
<link rel="stylesheet" type="text/css" href="estilos.css">
Siendo
estilos.css el nombre del archivo de estilos.
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
<title>Título de la página</title>
</head>
<body>
...
</body>
</html >
También podemos incluir estilos en un archivo externo con la sintaxis
@import url("estilo.css").
Se debe incluir entre las etiquetas
<style type="text/css"> y </style>, que se colocan en la cabecera del documento. La importación del archivo CSS se debe escribir en la primera línea de la declaración de estilos:
<style type="text/css">
@import url ("estilo.css");
body{
background-color:#ffffcc;
}
</style>
Este método se utiliza cuando hay unas pautas básicas de estilos (que se definen en el archivo a importar) y unos estilos específicos para cada página (que se definen entre las etiquetas
</style>).
Reglas de importancia en los estilos
Jerarquía para resolver conflictos entre declaraciones de estilos distintas para una misma porción de página (de menor a mayor importancia en caso de contradicción):
* Declaración de estilos con fichero externo.
* Declaración de estilos para toda la página. (etiqueta style en la cabecera de la página)
* Estilos definidos en una parte de la página. (etiqueta div)
* Definidos en una etiqueta en concreto. (etiquetas con atributo style)
* Declaración de estilo para una porción pequeña del documento. (etiqueta span)
Desarrollo web
