Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 38

Visitas el mes pasado: 80

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Insertar texto (II)

2.2 El Archivo CSS

Estilo del texto en otro archivo: Archivos CSS

Definir el aspecto final que tendrá el texto (color, tamaño, alineación, sangrados, márgenes, espacios entre líneas, etc) es una tarea que haremos usando un archivo aparte desde donde le indicaremos al archivo principal cómo queremos que aparezca nuestro texto. Este es el archivo CSS.

Al igual que el lenguaje HTML, el lenguaje CSS es muy fácil, y no hay por qué asustarse, consiste en una serie de palabras clave, que indican el aspecto final del texto. Por supuesto debemos indicarle, mediante referencias a las etiquetas HTML, el aspècto de los diferentes títulos o párrafos.

Pero todo esto lo veremos mejor en la práctica; así que como vamos a crear un archivo CSS aparte, En nuestra página debemos indicarle que las instrucciones que definen el estilo de nuestro texto debe leerlas desde ese archivo; para ello abre el archivo index.html con el bloc de notas, y en la cabecera, es decir, dentro de la etiqueta <head> ... </head>, y después de la etiqueta <title> ... </title>escribe el siguiente código:

<link rel="stylesheet" type="text/css" href="estilo.css" />

El principio de nuestra página quedará así: (texto nuevo en azul)


<html>

<head>

 <title> Mi Web</title>

<link rel="stylesheet" type="text/css" href="estilo.css" />

</head>


<body>

.......

.......


</body>


</html>



Con esta línea le hemos indicando al navegador que las instrucciones para dar estilo en nuestra Web están en otro archivo, y que las tiene que tomar de ahí. En concreto las instrucciones link rel="stylesheet" type="text/css" indican que hay un archivo de estilo relacionado, y que ese archivo es del tipo CSS. Estas instrucciones debemos ponerlas siempre que queramos incluir el estilo del texto en un archivo CSS.

La instrucción href="estilo.css" Indica el nombre y la ubicación del archivo CSS. Por tanto el archivo que creemos deberá llamarse estilo.css, y deberá estar en la misma carpeta que el archivo HTML al que se refiere.

Vamos, por tanto, a crear el archivo "estilo.css". Para ello abre el bloc de notas de Windows; ya sabes, pulsar en Inicio / Todos los programas / accesorios / Bloc de notas. Una vez abierto el Bloc de notas pulsas en Archivo / Guardar como.... Se abre una nueva ventana llamada "Guardar como". Buscas la carpeta donde tienes tu archivo HTML, y una vez alli, en el recuadro de abajo, donde pone "nombre" escribes estilo.css. y pulsas en guardar.

"estilo" es el nombre del archivo, mientras que ".css" es el tipo de archivo. El nombre lo puedes cambiar, siempre que en la línea de referencia de la cabecera o "head" de nuestro archivo ".html" lo cambiemos también. El tipo de archivo es siempre el mismo, por lo que deberemos escribir siempre al final ".css"; si no lo ponemos el bloc de notas entenderá que ese es un archivo de texto, del tipo ".txt" que no podrá ser leído por el navegador.

Comprueba que en la carpeta donde tenemos nuestra web (Mis documentos / mi_web), están tus archivos; el archivo index.html y el archivo estilo.css. El siguiente paso será dar las instrucciones necesarias en el archivo css.


Vamos al siguiente paso:

Instrucciones en CSS








Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com