Si lo que queremos es que cierto estilo definido por nosotros sea válido en todas las páginas de nuestra web, usaremos este método, la creación de una Hoja de Estilo.
Primero dividiremos la tarea en tres partes:
1.- Crear la Hoja de Estilo;
2.- Indicar a cada página de nuestra web donde está y como se llama la Hoja de Estilo que debe seguir, y
3.- Aplicar los estilos definidos en la Hoja de Estilo a los elementos de cada Página.
1.- Crear la Hoja de Estilo.
Vamos a crear nuestra Hoja de Estilo con el NotePad de Windows. Una vez abierto escribimos lo siguiente:
.rojo { color: red; }
p { font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
text-align: justify;
text-indent: 40px;
margin: 10px 10px 10px 10px ;
}
Si ya has mirado bien las lecciones de estilo tendrán estos terminos. Si no, no importa. Con este ejemplo solo veras, a grandes rasgos, como usar las hojas de estilo. Los detalles como las propiedades, etc, las podrás ver mejor en otros ejemplos.
Una vez copiado esto en el Notepad lo guardarás con el nombre "estilo.css" con comillas y todo!! De esta forma evitaras que el NotePad lo guarde con la extensión .txt que no nos sirve. Nosotros lo queremos con extensión .css. Si por cualquier cosa se nos guarda con .txt solo tienes que cambiarle el nombre por estilo.css. Y Guardar el documento en la carpeta de nuestra pagina web.
2.- Asociar la Hoja de Estilo a la Web.
Para ello usaremos también el NotePad de Windows. Abrir y escribir :
<html>
<head>
<title>Ejemplo dos creatuweb</title>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
<head>
<title>Ejemplo dos creatuweb</title>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
Si guardas este código como "ejemplo2.htm" (con las comillas también, por lo dicho antes) puedes abrirlo luego con tu Navegador usual y ver la página como va quedando. Para volver a abrirla con el Notepad solo tienes que cambiarle la extensión, quitarle .htm y ponerle .txt. Después de retocarla le volver a poner .htm para poder verla.
Si vez esta página con el Navegador (poniéndole la extensión .htm) veras que es una simple página donde pone "Mi segundo ejemplo de Estilo", sin más. A continuación mostrare como asociarle la hoja de estilo creada antes.
Dentro de la cabecera (entre head y </head), por ejemplo, después del título (tras la línea <title>.....) tenéis que poner el siguiente código:
<link href="estilo.css" rel=StyleSheet type=text/css>
Quedando el código completo como:
<html>
<head>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
<head>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
Recuerda que, donde pone "estilo.css" se indica la Ruta del Archivo de Estilo, respecto a esa página. en nuestro caso, como tanto la página como la Hoja de Estilo están en la misma carpeta solo hay que indicar estilo.css.
3.- Indicar Estilos a los elementos de la página
En la Hoja de Estilo creada antes, habíamos definido un estilo de párrafo (p) y una clase de estilo (.rojo).
Para poner algunas palabras de color rojo, solo hemos de encerrarlas entre las etiquetas <span class="clasedeestilo"> y</span>.
En cambio, para que la única línea que tenemos en la web adopte la forma del párrafo definida en la Hoja de Estilo, bastaría con encerrar la frase entre <p> y </p>.
Vamos a retocar el código HTML de nuestro ejemplo. Encerraremos la frase "Mi segundo ejemplo de Estilo" entre las palabras<p> y </p>, de forma que esa frase adoptará el estilo de párrafo definido en la Hoja de estilo.
<html>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
<p> Mi segundo Ejemplo de Estilo</p>
</body>
</html>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
<p> Mi segundo Ejemplo de Estilo</p>
</body>
</html>
Ahora vamos a poner las palabras "Ejemplo" y "Estilo" en color rojo, mediante la clase de estilo definida con el nombre .rojo en la Hoja de Estilo. Como he dicho antes, encerraremos esas palabras entre <span class="rojo"> y </span>. (Observar que aunque en la hoja de estilo las clases aparecen con un punto delante, cuando se les llama desde la página no se le pone el punto). El código para conseguir esto, debe quedar como:
<html>
<head>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
<p> Mi segundo <span class="rojo">Ejemplo</span> de <span class="rojo">Estilo</span></p>
</body>
</html>
<head>
<title>Ejemplo dos creatuweb</title>
<link href="estilo.css" rel=StyleSheet type=text/css>
</head>
<body>
<p> Mi segundo <span class="rojo">Ejemplo</span> de <span class="rojo">Estilo</span></p>
</body>
</html>
Comprueba lo que hemos conseguido visualizando este código en el Navegador, tal y como se ha indicado antes.
Otra cosa que podemos hacer es poner toda esa frase con el formato de párrafo especificado en la Hoja de Estilo, pero además, en rojo. Una opción es esta:
<p><span class="rojo">Mi segundo Ejemplo de Estilo</span></p>
pero se puede simplificar, indicando al párrafo qué tipo de clase de estilo debe adoptar:
<p class="rojo">Mi segundo Ejemplo de Estilo</p>
De este modo, el párrafo tomará las características definidas tanto en p como en .rojo de la hoja de estilo.
Puedes ahora seguir haciendo experimentos incluyendo en la hoja de estilos mas clases, como por ejemplo:
.verde { text-color:green ; }
.amarillo { text-color:yellow ; }
.amarillo { text-color:yellow ; }
y poner algunas de esas palabras en estos nuevos colores.
Existen plantillas .HTML que se pueden descargar y algunas ya vienen con su Hoja de Estilos dejare un pack de estas plantillas para que sea mas comodo trabajar con sus Hojas de Estilo y sus paginas web.
No hay comentarios:
Publicar un comentario