Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN> . Con su atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo, pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.
<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color verde</SPAN>. Resulta muy fácil.
</p> |
Esto es un párrafo con varias palabras en color verde . Resulta muy fácil. |
De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo, podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el atributo style , que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de un navegador compatible con CSS).
<p style="color:#990000"> Esto es un párrafo de color rojo.</p>
<p style="color:#000099"> Esto es un párrafo de color azul.</p> |
Esto es un párrafo de color rojo.
Esto es un párrafo de color azul. |
Con la etiqueta <DIV> podemos definir secciones de una página y aplicarle estilos con el atributo style , es decir, podemos definir estilos de una vez a todo un bloque de la página.
<div style="color:#000099; font-weight:bold">
<h3>Estas etiquetas van en <i>azul y negrita</i></h3>
<p>
Seguimos dentro del DIV, luego permanecen los estilos
</p>
</div> |
Estas etiquetas van en azul y negrita
Seguimos dentro del DIV, luego permanecen los estilos |
Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.
Este ejemplo es más complicado, puesto que se utiliza la sintaxis CSS de manera más avanzada. Pero no te preocupes puesto que con los ejemplos irás aprendiendo su uso y más tarde comentaremos la sintaxis en profundidad.
En el ejemplo vemos que se utiliza la etiqueta <STYLE> colocada en la cabecera de la página para definir los distintos estilos del documento.
A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.
<html>
<head>
<title>Ejemplo de estilos para toda una página</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head> <body>
<h1>Página con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin más importancia</p>
</body>
</html> |
Como se puede apreciar en el código, hemos definido que la etiqueta <H1> se presentará
También, por ejemplo, hemos definido que el cuerpo entero de la página (etiqueta <BODY>) se le apliquen los estilos siguientes:
- Color del texto negro
- Color del fondo grisaceo
- Margen lateral de 1 centímetro
Caber destacar que si aplicamos estilos a la etiqueta <BODY>, estos serán heredados por el resto de las etiquetas del documento. Esto es así siempre y cuando no se vuelvan a definir esos estilos en las siguientes etiquetas, en cuyo caso el estilo de la etiqueta más concreta será el que mande. Puede verse este detalle en la etiqueta <P>, que tiene definidos estilos que ya fueron definidos para <BODY>. Los estilos que se tienen en cuenta son los de la etiqueta <P>, que es más concreta.
Por último, ha de apreciarse los comentarios HTML que engloban toda la declaración de estilos: <!--Declaración de estilos-->. Estos comentarios se utilizan para que los navegadores antiguos, que no comprenden la sintaxis CSS, no incluyan ese texto en el cuerpo de la página. Si no se pusiera, los navegadores antiguos (por ejemplo Netscape 3) escribirían ese "feo código" en la página.
Actividad: Comprueba el funcionamiento de los estilos anteriores copiando el código expuesto en una página web en blanco. |
