Información y comunicación
Páginas: 5 (1172 palabras)
Publicado: 14 de agosto de 2012
Ejemplo IV de Estilos CSS. Definir un Estilo para todas las páginas de la web
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.
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 deEstilo 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 os habéis mirado bien las lecciones de estilo os sonarán estos terminos. Si no, no os preocupéis. Con este ejemplo solo quiero que veais, a grandes rasgos, como usar las hojas de estilo. Los detalles como las propiedades, etc, las podréis ver mejor en otros ejemplos.
Una vez copiado esto en el Notepad lo guardáis con el nombre "estilo.css" concomillas y todo!! De esta forma evitaréis que el NotePad lo guarde con la extensión .txt que no nos vale. Nosotros lo queremos con extensión .css. Si por cualquier cosa se os guarda con .txt solo tenéis que cambiarle el nombre por estilo.css. Guardarla en la carpeta "ejemplo2".
2.- Asociar la Hoja de Estilo a la Web.
Aunque os parezca un poco fuerte, vamos a hacer la página de este ejemplo "apelo", es decir, directamente en HTML. ALAAAAA!!! No hombre, no , no os asustéis que es muy fácil, además, alguna vez os he dejado solos? Je je. Eso os ayudará un montón a familiarizaros con el HTML y el CSS.
Para ello usaremos también el NotePad de Windows. Abridlo y escribid (o copiad y pegad los más vaguetes) el siguiente código en la hoja del NotePad:
<html>
<head> <title>Ejemplo dos creatuweb</title>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
Si guardáis este código como "ejemplo2.htm" (con las comillas también, por lo dicho antes) podréis abrirlo luego con vuestro Navegador usual y ver la página como va quedando. Para volver a abrirla con el Notepad solo tenéis que cambiarle la extensión, quitarle.htm y ponerle .txt. Después de retocarla le volvéis a poner .htm para poder verla. Un poco lio, pero es fácil y util.
Si veis esta página con el Navegador (poniéndole la extensión .htm) veréis que es una simple página donde pone "Mi segundo ejemplo de Estilo", sin más. A continuación os muestro como asociarle la hoja de estilo creada antes.
Dentro de la cabecera (entre head y </head), porejemplo, 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 Ejemplode Estilo
</body>
</html>
Recordad 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.
Bien ahora queda el último paso. Decid a los elementos de la página, que tipo de estilo deben adoptar.
3.- Indicar Estilos a loselementos 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 palabras mágicas <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...
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.
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 deEstilo 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 os habéis mirado bien las lecciones de estilo os sonarán estos terminos. Si no, no os preocupéis. Con este ejemplo solo quiero que veais, a grandes rasgos, como usar las hojas de estilo. Los detalles como las propiedades, etc, las podréis ver mejor en otros ejemplos.
Una vez copiado esto en el Notepad lo guardáis con el nombre "estilo.css" concomillas y todo!! De esta forma evitaréis que el NotePad lo guarde con la extensión .txt que no nos vale. Nosotros lo queremos con extensión .css. Si por cualquier cosa se os guarda con .txt solo tenéis que cambiarle el nombre por estilo.css. Guardarla en la carpeta "ejemplo2".
2.- Asociar la Hoja de Estilo a la Web.
Aunque os parezca un poco fuerte, vamos a hacer la página de este ejemplo "apelo", es decir, directamente en HTML. ALAAAAA!!! No hombre, no , no os asustéis que es muy fácil, además, alguna vez os he dejado solos? Je je. Eso os ayudará un montón a familiarizaros con el HTML y el CSS.
Para ello usaremos también el NotePad de Windows. Abridlo y escribid (o copiad y pegad los más vaguetes) el siguiente código en la hoja del NotePad:
<html>
<head> <title>Ejemplo dos creatuweb</title>
</head>
<body>
Mi segundo Ejemplo de Estilo
</body>
</html>
Si guardáis este código como "ejemplo2.htm" (con las comillas también, por lo dicho antes) podréis abrirlo luego con vuestro Navegador usual y ver la página como va quedando. Para volver a abrirla con el Notepad solo tenéis que cambiarle la extensión, quitarle.htm y ponerle .txt. Después de retocarla le volvéis a poner .htm para poder verla. Un poco lio, pero es fácil y util.
Si veis esta página con el Navegador (poniéndole la extensión .htm) veréis que es una simple página donde pone "Mi segundo ejemplo de Estilo", sin más. A continuación os muestro como asociarle la hoja de estilo creada antes.
Dentro de la cabecera (entre head y </head), porejemplo, 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 Ejemplode Estilo
</body>
</html>
Recordad 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.
Bien ahora queda el último paso. Decid a los elementos de la página, que tipo de estilo deben adoptar.
3.- Indicar Estilos a loselementos 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 palabras mágicas <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...
Leer documento completo
Regístrate para leer el documento completo.