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: 42

Visitas el mes pasado: 68

logo

Donativos

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




3. Estilo con CSS (I)

3.1 Estilo del título

Paso 8

logo miweb

Contenido y estilo

Al crear una página web tendremos en cuenta dos aspectos, el contenido y el estilo.

El contenido es lo que mostramos en la página, es decir los textos, enlaces, imágenes, etc.

El estilo es cómo lo mostramos, es decir colores, tipografía y tamaño de textos, posicionamiento y maquetación de los elementos, fondos en colores o imágenes, etc.

Hasta ahora al crear nuestra página nos hemos centrado en el contenido, el cual lo hemos escrito con el lenguaje HTML. Ahora daremos estilo a lo que hemos hecho hasta aquí.

Estilo con CSS

En las primeras "webs" el estilo se ponía también con el lenguaje HTML. Para ello eran necesarias toda una serie de etiquetas y atributos que complicaban mucho la página. Para solucionar esto pronto se inventó el lenguaje CSS, con el cual se indica el estilo de la página, dejando el lenguaje HTML para el contenido.

En principio puede parecer que es más complicado utilizar dos lenguajes distintos, sin embargo, al separar el contenido del estilo, resulta más fácil no sólo localizar los elementos en el archivo, sino también revisarlos.

Seguiremos ahora con nuestra página, y veremos de forma práctica como crear un archivo CSS en el que pondremos el estilo.

Nuevo archivo CSS

El archivo CSS

Ahora vamos a crear un nuevo archivo de texto. Supongo que tal cómo indicamos en el paso anterior tienes ya descargado e instalado el HTML-Kit. Si no es así puedes seguir utilizando el Block de Notas de Windows.

Abre el HTML-Kit y ve al menú Archivo / Nuevo... Se nos abre un cuadro como el de la derecha. En la parte de arriba debes tener elegida la pestaña "General", y haces doble click sobre "Blank Text File" (Archivo de texto en blanco). Se nos abre un nuevo archivo de texto en blanco en el que podemos escribir.

Si sigues con el block de notas, simplemente abre un archivo nuevo que esté en blanco (sin nada escrito).

Escribe en este nuevo archivo lo siguiente:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; }

Ahora guardaremos este nuevo archivo con una extensión CSS. Para ello pulsamos en Archivo / Salvar Como... (o Archivo / guardar Como en el block de notas) y En el cuadro que nos sale para guardarlo, buscamos la carpeta raíz de nuestra web (buscar la carpeta Mis Documentos/ Mi_web). Donde pone "Nombre" escribiremos el nuevo nombre que le damos a este archivo. Nosotros lo guardaremos con el nombre inicio.css. Pulsamos después en "Guardar".

Al abrir la carpeta raíz de nuestro sitio vemos que tenemos el nuevo archivo css. Pero antes de seguir vamos a explicar lo que hemos escrito en este archivo.

La primera línea que hemos puesto es un comentario. Los comentarios son anotaciones para indicar lo que hacemos. No tienen ningún valor en programación y daría lo mismo ponerlos o no, pero para el que está programando, o sea nosotros, le puede ser de utilidad para saber lo que hay en el archivo.

Los comentarios en CSS empiezan siempre por los signos /* y terminan con los signos */:

/* ... aquí va un comentario ... */

La segunda línea es la realmente importante. La línea que hemos puesto es la siguiente.

h1 {text-align: center; }

En primer lugar con h1 indicamos que queremos modificar todas las etiquetas del tipo <h1> ... </h1>. A esta parte la llamamos selector porque selecciona las etiquetas que queremos modificar.

La segunda parte, es lo que escribimos dentro de las llaves { ... } y la llamamos declaración, y es donde indicamos lo que queremos cambiar. Cada aspecto que podemos cambiar es una propiedad. La propiedad que hemos indicado aquí es text-align (alineación del texto). La propiedad puede tener distintos valores. Aquí nosotros hemos elegido el valor center (centrada); aunque también podríamos haber elegido los valores left, right, justify (izquierda, derecha, justificada).

El conjunto de selector y declaración se llama regla. Fíjate bien en la sintaxis empleada. En primer lugar ponemos el selector, después la declaración (entre llaves). Dentro de la declaración ponemos la propiedad, y separado por dos puntos el valor de esa propiedad, para acabar con punto y coma. Después del punto y coma podemos poner otra propiedad dentro de la misma declaracion, que afecta al mismo selector, tal como veremos más adelante.


Enlazar archivos

Una vez que tenemos el archivo CSS debemos indicar que este archivo se corresponde con la página de inicio de nuestra web. para ello en la página de inicio de nuestra web pondremos una etiqueta que indique que el estilo de esta página está en el archivo CSS que hemos creado.

Para ello abrimos el archivo index.html de nuestra carpeta raíz con el editor de textos, y modificamos la cabecera de la página, es decir la etiqueta <head> ... </head>, dentro de la cual incluiremos la siguiente etiqueta:

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

La etiqueta de cabecera (head) del archivo index.html quedará así:

  <head>
    <link rel="stylesheet" type="text/css" href="inicio.css" />
    <title>Web de Anyelguti</title>
  </head>

En azul hemos destacado la nueva línea que escribiremos en el archivo de inicio (index.html). No haremos más cambios en la página de inicio de nuestra web. Ahora vamos a explicar brevemente la nueva etiqueta que hemos puesto.

Siempre que queramos enlazar un archivo CSS para que se corresponda con una página en HTML, en el archivo HTML, y concretamente en la cabecera (etiqueta head) escribiremos esta etiqueta tal y como la tenemos aquí.

Los atributos rel y type indican que estamos enlazando con una página en lenguaje CSS, y se escriben siempre igual, y con el mismo valor que hemos puesto aquí.

Lo único que cambiará es el valor del atributo href en el cual escribiremos la ruta hacia el archivo CSS. En el caso de que el archivo HTML y el CSS estén en la misma carpeta basta con poner el nombre del archivo CSS (siempre indicando su extensión). Como aquí hemos llamado al archivo CSS inicio.css, y lo hemos colocado en la misma carpeta que el archivo index.html, El valor del atributo href será: href="inicio.css".

Una vez que hemos creado el archivo CSS y hemos modificado el archivo HTML para enlazarlo, abrimos el archivo index.html con el navegador para comprobar el resultado. Este debe quedar como en el del siguiente enlace:

La diferencia respecto de lo que teníamos antes es que ahora el título principal de la página aparece centrado. Hemos visto aquí el funcionamiento del lenguaje CSS. Lo importante en esta página es ver cómo se crean los archivos CSS, cómo se enlazan con la página en HTML, y la sintaxis básica de las instrucciones en CSS o cómo se forma una "regla CSS".

Veremos en pasos posteriores cómo variar el aspecto de la página utilizando unas pocas reglas o líneas de código CSS.

Los siguientes pasos consisten en cambiar el aspecto de la página, por lo que veremos más reglas y código en CSS.




En el siguiente paso cambiaremos el estilo de los diferentes textos de nuestra página.

Estilo de textos




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