Buscar Más buscado

CSS - Hojas de estilo - Cómo funcionan las hojas de estilo

2 - Cómo funcionan las hojas de estilo

[editar]
Tutorial creado por t0m|ta. Extraido de: http://www.tomatoma.ws/subsecciones.php?forum_id=28&catid=22&todos=1
08 de Marzo de 2006
< anterior | 1 2 3 4 5 6 7 ... 13 | siguiente >
Las hojas de estilo en cascada nos permiten redefinir las reglas que utiliza el navegador para presentar una página del Web. Todos los navegadores tienen sus reglas. Así, por ejemplo el HTML define que las cabeceras del nivel uno (el texto que está entre las etiquetas <H1> y </H1>) se muestre como un texto alineado a la izquierda, un par de puntos mayor que el resto, en negrita y en la fuente Times Roman.

En realidad el concepto es bastante sencillo. En nuestro documento hasta ahora, cuando poníamos un título, mézclabamos con es información, información sobre el color el tipo de fuente etc. Ahora debemos cambiar nuestra manera de pensar, de forma que en nuestro documento html nos limitamos a decir qué es cada cosa.




Luego con nuestra hoja de estilos hos haríamos unas reglas que fueran:
Cita:
títulos: De color rojo, a tamaño 14 píxelex, centrados y subrallados.

Párrafos: en color azul, tamaño 12 píxeles,

listas: indentadas 2 espacios a la derecha.

Veamos un ejemplo de cómo redefiniríamos la aparencia de un encabezado y un párrafo con HTML y cómo lo haríamos con CSS.

Código:
<HTML>
<HEAD>
<TITLE> Ejemplo 1 con html</TITLE>
</HEAD>
<BODY>

<H1><FONT FACE=”tahoma, arial, sans-serif” COLOR=”#B22222” size=”4”>1.- Primer título</FONT></H1>
<P> <font FACE=”tahoma, arial, sans-serif” COLOR=”#666666” size=”2”> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </font></P>

<H1><FONT FACE=”tahoma, arial, sans-serif” COLOR=”#B22222” size=”4”>2.- Segundo título</FONT></H1>
<P><font FACE=”tahoma, arial, sans-serif sans-serif” COLOR=”#666666” size=”2”> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí.</font> </P>

<H1><FONT FACE=”tahoma, arial, sans-serif sans-serif” COLOR=”#B22222” size=”4”>3.- tercer título</FONT></H1>
<P><font FACE=”tahoma, arial, sans-serif sans-serif” COLOR=”#666666” size=”2”> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </font></P>

</BODY>
</HTML>

En este documento tenemos tres títulos y tres párrafos. Cómo los elementos <h1> son tan feotes, hemos modificado el tipo de letra, el color y el tamaño de los títulos. Cómo podéis ver hemos tenido que defnir el formato de cada título y de cada párrafo hemos utilizado font tags, definiendo la fuente y el color. Hemos tenido que introducir cada tag varias veces, y eso con este documento que prácticamente apenas tiene contenido. Con CSS sólo tendríamos que haberlo hecho una vez.

Código:
<html>
   <head>
      <title> Ejemplo 1 con css</title>

   <style type="text/css">
         <!--

H1 {
   font-family: tahoma, arial, sans-serif;
   color: #B22222;
   font-size: 18px; }

P {
   font-family: tahoma, arial, sans-serif;
               color: #666666;
               font-size: 12px; }
-->
</style>

</head>
<body>

<h1>1.- Primer título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

<h1>2.- Segundo título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

<h1>3.- tercer título</H1>

<p> Esto es un párrafo de prueba muy bonito y muy precioso que tenemos por aquí. </P>

</body>
</html>

Todo lo que necesitamos para definir colores, tipo de letra etc, está dentro del encabezado del documento utilizando la etiqueta <style>, que veremos a lo largo de estos artículos, como funcionan. Cómo podemos observar, las etiquetas <font> han desaparecido por completo y ahora el documento está mucho más clarito y fácil de leer. Si queremos cambiar el formato de los títulos, sólo tendremos que cambiarlo una vez, en el encabezado, y todos los títulos cambiarán. Y al igual que podemos definir los párrafos o los títulos, podemos cambiar cualquier otra cosa. CSS es una tecnología muy potente que nos permite un control mucho mayor que con simple HTML.
[editar]
< anterior | 1 2 3 4 5 6 7 ... 13 | siguiente >

Opinar
2 opiniones

Esta muy completo.

Super excelente¡¡¡¡ muy bueno.
Opinión.

Muy buena intro a las css!
gracias.

Tutoriales relacionados con 'CSS - Hojas de estilo'

Hojas de Estilo CSS
Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo... Más »
CSS - Hojas de estilo
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es... Más »
Completo tutorial de HTML
Bienvenidos al manual de HTML de Indaya.A través de todos estos capítulos vamos a descubrir... Más »
Introduccion a DHTML
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea... Más »
Completo tutorial de CSS
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »

Anuncios Google

Autor y licencia de 'CSS - Hojas de estilo'

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.