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

Visitas el mes pasado: 36

logo

Donativos

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




3. Estilo con CSS (II)

3.2. Estilo de textos

Paso 9

logo miweb

Estilo del título principal

En esta página vamos a cambiar el estilo de los textos de nuestra página de inicio. En la página anterior ya hicimos un primer cambio en el estilo centrando el título principal mediante el lenguaje CSS. Continuaremos aquí cambiando el estilo de los textos de nuestra página de inicio.

Recuerda que en el paso anterior, para centrar el título principal, hemos puesto la siguiente regla (línea) en CSS:

h1 {text-align: center; }

Añadiremos a esta regla algunas propiedades más para cambiar el estilo del título principal, estas son las siguientes:

Para añadir estas propiedades al titulo principal, abrimos el archivo inicio.css con el editor de textos (HTML-Kit) y las añadimos, de forma que el archivo quedará así:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial; }

Una vez modificada la línea guardamos y cerramos el archivo en el editor de texto, y comprobamos los cambios. Para ello abrimos el archivo index.html con el navegador. Éste debe quedar como el del siguiente enlace:

El título principal ha cambiado, ahora es mas grande, de color azul y con otro tipo de letra.

Si no consigues en tu página el mismo resultado es que algo has escrito mal. Repasa el archivo CSS, sobre todo los signos de dos puntos y de punto y coma, y comprueba que los nombres de propiedades y valores estén bien escritos.

Estilo del resto de los títulos

Seguiremos el mismo procedimiento para cambiar el estilo del resto de los títulos.

tenemos un subtítulo que hemos puesto en una etiqueta h2. Aquí cambiaremos lo siguiente:

Estas son las propiedades que tenemos que poner para cambiar el subtítulo. Como éste está escrito en la etiqueta h2, la regla CSS para cambiarlo será la siguiente.

h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }

Tenemos también otro título secundario que hemos puesto para los enlaces. Éste tiene una etiqueta h3, por lo que seguiremos un procedimiento similar para cambiarlo. Para ello escribiremos la siguiente regla CSS:

h3 {text-align: left; color: olive; font-size: 25px; font-family: stencil, impact, "times new roman"; margin: 20px 100px; }

La novedad en esta regla respecto de las anteriores está en que ponemos una nueva propiedad. La propiedad margin crea un margen alrededor del elemento (espacio vacío). Como valor ponemos aquí dos medidas. La primera indica el margen por arriba y por abajo, y la segunda el margen por la izquierda y por la derecha.

Observa también cómo el tipo de letra "times new roman" lo hemos puesto entre comillas, esto se debe a que se escribe con varias palabras, y de este modo indicamos que es un sólo bloque.

Ponemos las dos reglas anteriores en nuestro archivo CSS. Para ello abrimos el archivo inicio.css con el editor de texto y copiamos las dos líneas anteriores. El archivo CSS quedará así:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial; }
h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
h3 {text-align: left; color: olive; font-size: 25px; 
    font-family: stencil, impact, "times new roman"; margin: 20px 100px; }

Después de los cambios hechos en el archivo CSS (aquí en color azul) comprobamos como queda la página. Para ello abrimos ahora el archivo index.html el cual debe quedar como el del siguiente enlace:

Estilo de párafos

Nos queda sólo cambiar el estilo de los párafos para tener ya todos los textos con estilo, ya que los enlaces los veremos más adelante. Seguimos para ello los mismos pasos que para cambiar el estilo de los titulos, es decir en el archivo de CSS (inicio.css) añadimos una nueva regla que cambie el estilo de los párrafos. Esta es la línea:

p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; font-size: 14px; color: navy; }

En principio vemos que hemos empezado la línea por el selector p. Esto hace que se seleccionen todos los párrafos de la página en la cual aplicamos los siguientes cambios (propiedades):

Abrimos por tanto el archivo inicio.css y le añadimos la línea anterior. El archivo quedará así:

/*archivo de estilo para página de inicio*/
h1 {text-align: center; color: blue; font-size: 40px; font-family: arial; }
h2 {text-align: center; color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
h3 {text-align: left; color: olive; font-size: 25px; 
    font-family: stencil, impact, "times new roman"; margin: 20px 100px; }
p { text-align: justify; margin: 1em 10em; font-family: verdana, nimrod, tahoma; 
    font-size: 14px; color: navy; }

En color azul hemos destacado la nueva línea que hemos puesto, las demás líneas ya las teníamos anteriormente.

Ahora al abrir la página index.html con el navegador veremos que el estilo de los párrafos ha cambiado. Lo veremos como en el siguiente enlace:

Si no has conseguido el mismo resultado que en el enlace anterior repasa el archivo CSS. Este debe estar escrito exactamente igual que lo hemos puesto nosotros.




En el siguiente paso cambiaremos el estilo de los enlaces de la página. Estos pueden tener distintos estados con distintos estilos.

Estilo para enlaces




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