Taller Atml Estilos
Enviado por harveymond • 13 de Abril de 2013 • 1.263 Palabras (6 Páginas) • 261 Visitas
Taller de Informática(Html-Estilos Css)
Qué son las hojas de estilo
No es que el HTML no tuviese hasta aquí recursos de estilo, que ya hemos visto en páginas anteriores, como los tipos, tamaños y colores de letra (<FONT>), atributos de estilo de formularios y links, (<STYLE>) y otros, pero todos ellos están escritos embebidos en el propio código html. Estas definiciones típicas hacen muy trabajoso el cambiar de estilo, ya que eso implica que hay que editar todas las páginas del documento en muchos puntos de las mismas. Para intentar resolver este problema, se han implementado las hojas de estilo o CSS (Cascade Style Sheets).
El problema que tienen, por ahora, es que no todos los navegadores soportan el mismo tipo de lenguaje CSS, ni lo interpretan de la misma forma (a pesar de que existe un estándar como en el HTML), ni por supuesto, la misma versión de lenguaje. El estándar dice que un navegador que soporte la versión 2 de CSS también soportará la 1, eso dice, pero tal vez el navegador no lo sepa, o no soporte la 2, o ninguna y se cuelge irremisiblemente... Una de las peores cosas que tienen las hojas de estilo, es que si el navegador no entiende lo que hay en ellas, en lugar de ignorarla, puede colgarse, o en el mejor de los casos, ofrecer una imagen desoladora de nuestra página. Así pues, es buena idea probar las hojas de estilo con cuantas versiones de navegador se pueda, y saber con cuales no funciona. Y si es posible, procurar que el documento, sin aplicarle ningún estilo, solamente utilizando los valores por defecto, tenga una apariencia más o menos aceptable. Recuerda que no todo el mundo tiene la última versión de todo, ni usa el mismo navegador que tú. Por cierto: el navegador más popular del mundo no es precisamente el que mejor funciona, además de pasar olímpicamente de los estándares...
La tecnología aplicada a las CSS es utilizable de cuatro formas distintas:
1.- En línea, que es la forma ya conocida, aunque aquí se utiliza una sintaxis algo diferente. Sea por ejemplo:
<P STYLE="font-size:20px; font-family:Courier; color:green";>Ejemplo de estilo</P>
Este es el resultado:
Ejemplo de estilo
2.- Por clase de estilo. Esta técnica consiste en definir una clase, que es un conjunto de propiedades de estilo agrupadas bajo un nombre. La clase creada se invoca desde un elemento <span>. Por ejemplo, para definir la clase prueba_cl:
<html>
<head><TITLE>Estilos</TITLE>
<style type="text/css">
.prueba_cl{ font-size:20px; font-family:Courier; color:green;}
</style>
</head>
<body>
<span class="prueba_cl">Ejemplo de estilo</span>
</body>
</html>
3.- Por identificador de bloque, que al igual que la clase, consiste en definir un conjunto de propiedades de estilo agrupadas bajo un nombre, que se asignarán a un bloque. El identificador creado se invoca desde un elemento <div>. Por ejemplo, para definir el identificador prueba_id:
<html>
<head><title>Estilos</title>
<style type="text/css">
#prueba_id{ font-size:20px; font-family:Courier; color:green;}
</style>
</head>
<body>
<div id="prueba_id">Ejemplo de estilo</div>
</body>
</html>
Y en ambos casos, este es el resultado:
Ejemplo de estilo
Como puedes ver, los dos ejemplos anteriores son casi iguales. A simple vista solamente cambia el caracter que hay delante del nombre prueba_, que es un punto para la clase y una almohadilla para el identificador, pero internamente, la diferencia estriba en que la clase puede ser utilizada por todos los bloques de texto que se quiera (generalmente solo contiene instrucciones de estilo), mientras que el identificador solamente se puede utilizar una vez, ya que es capaz de crear un bloque y no puede haber dos bloques con el mismo nombre.
Estas dos últimas técnicas, permiten cambiar algo más fácilmente el estilo de la página, ya que solamente habría que tocar la cabecera
...