ESTILOS Y CAPAS - I
Los estilos surgen con el fin de mejorar la apariencia de las páginas web, debido a la gran cantidad de limitaciones que estas tenían cuando surgió el lenguaje HTML.
Por ejemplo, teníamos un tamaño límite para el texto, no se podían espaciar las letras o las palabras de forma sencilla, no se podía poner un fondo de color a una palabra sin usar tablas,...
Por ejemplo, teníamos un tamaño límite para el texto, no se podían espaciar las letras o las palabras de forma sencilla, no se podía poner un fondo de color a una palabra sin usar tablas,...
Ahora se pueden hacer muchísimas cosas en los documentos.
Sólo existe un lenguaje de estilos (por ahora) pero en mañana es posible que esto cambie. Para ahorrarnos problemas debemos especificar en nuestro documento qué tipo de lenguaje estoy usando. Ponemos en la cabecera la siguiente etiqueta:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">.
Las siglas "css" significan Cascading Style Sheet (hojas de estilo en cascada).
Hay 3 formas de añadir estilos:
- A una etiqueta individual o a un grupo de ellas.
- En el documento, separado de las etiquetas. Así puedo cambiar la apariencia de la página completa.
- Fuera del documento, en un archivo aparte, todas juntas. Así puedo cambiar mi sitio completo, es decir, varias páginas a la vez.
En etiqueta y etiquetas
Añadimos a la etiqueta el atributo STYLE con una serie de propiedades con sus valores. Las propiedades las representaré en mayúsculas y los valores en cursiva. Veamos el primer ejemplo:
<BODY>
<P STYLE="COLOR:red"> Esto es un texto de prueba </BODY> |
Que se verá:
Esto es un texto de prueba
|
Como vemos se pone STYLE, un signo igual, comillas, las propiedades (COLOR), los dos puntos y el valor (red) y cierra comillas. STYLE="PROPIEDAD:valor"
¡Vaya cosa!. Eso lo podía haber hecho con <FONT SIZE>. Es verdad. Mira ahora esto:
<BODY>
<P STYLE="COLOR:red ; FONT-SIZE:10px"> Esto es un texto de prueba </BODY> |
Que se verá, observa que los separamos con ";" y que se separan las palabras FONT de SIZE con un guión.
Esto es un texto de prueba
|
Esto también se puede hacer con <FONT SIZE>.
Pero mira si puedes conseguir esto:
<BODY>
<P STYLE="COLOR:red;FONT-SIZE:30px"> Esto es un texto de prueba </BODY> |
Esto es un texto de prueba
|
Ese tamaño de letra no se podía conseguir antes de ninguna manera.
Podemos unir varias etiquetas dentro de <DIV> (recuerda que se cierra).
<BODY>
<DIV STYLE="COLOR:red"> <H2> Esto es un texto </H2> <P>de prueba </DIV> </BODY> |
Esto es un texto
de prueba
|
Como ves he puesto el estilo en <DIV> de modo que todas las etiquetas dentro de ella adquieren sus propiedades y valores. Y esto me lleva a preguntar ¿qué pasará si pongo un estilo en <DIV> y otro distinto en <P>?. Lo vemos.
<BODY>
<DIV STYLE="COLOR:red"> <H2> Esto es un texto </H2> <P STYLE="COLOR:blue"> de prueba </DIV> </BODY> |
Esto es un texto
de prueba
|
Donde no he puesto estilo sigue de color rojo mientras que donde lo cambié aparece azul. Eso quiere decir que la preferencia será: 1ª la etiqueta, 2º el grupo de etiquetas.
También podemos usar <SPAN> (y el cierre) para aplicar estilos a palabras o trozos de palabras, es decir, a unidades más pequeñas. Por ejemplo, yo quiero poner "el perro del hortelano" y quiero que todo esté azul pero que la palabra "perro" esté roja.
<BODY>
<P STYLE="COLOR:blue"> El <SPAN STYLE="COLOR:red"> perro </SPAN> del hortelano </BODY> |
Que se ve:
El perro del hortelano
COR |
No hay comentarios:
Publicar un comentario