HTML    •    CSS

Introducción a las CSS.
Formas de aplicar CSS I.
Formas de aplicar CSS II.
Pseudoclases.
Unidades de medida.
Estilos de fuentes.
Estilos de párrafos.
Estilos de fondo.
Estilos de bordes.
Margin y Padding.
Float y Clear.
Position, left y top.
Width y height.
Altura de las capas.
Visibility y display.
Overflow.
Scrollbar.
Inicio > Curso de CSS (hojas de estilo) > Formas de aplicar CSS II.

Formas de aplicar CSS II.

CSS indirectas dentro del mismo documento

Este tipo de hojas de estilo se aplican cuando queremos que los estilos de las CSS se apliquen de una forma global a todas las etiquetas de un documento.

Por ejemplo, queremos que todo el cuerpo del documento, el “body", tenga un determinado tipo de letra, que los párrafos tengan un color determinado, que las cabeceras tengan un tamaño igual entre ellas, etc. Para conseguir estos propósitos, las CSS indirectas son ideales.

Para aplicar una CSS indirecta dentro del mismo documento, utilizaremos la etiqueta <style>. La colocaremos en la cabecera del documento. Entre esta etiqueta y su cierre (</style>) escribiremos todos los estilos que queramos definir en el documento.

El código de la estructura básica de este tipo de CSS sería el siguiente:

<html>
<head>
Aquí van los datos de la cabececera del documento

<style type="text/css">
<!--
Aquí escribiríamos los diversos estilos que queramos aplicar
-->
</style>

</head>
<body>
Aquí va el cuerpo del documento, todo el contenido
</body>
</html>

Observa como a la etiqueta “style" le hemos puesto el atributo type=“text/css". Indicar este atributo no es necesario, pero sí muy recomendable, pues le está indicando al navegador el tipo de sintaxis que usa la hoja de estilo.

Observa como hemos puesto los estilos como si fueran comentarios. Anteriormente los estilos se escribían así para ocultar las hojas de estilo a los navegadores que no las reconocieran. Actualmente, todos los navegadores las reconocen, así que escribirlo de esta manera es innecesario.

Formas de definir clases

A continuación vamos a explicarte como definir los estilos de los tags dentro de la etiqueta “style". Existen varias formas:

Si queremos definir un estilo, a todas las etiquetas de un determinado tipo que se encuentren en el documento, lo escribiremos de la siguiente manera:

<style type="text/css">
p { atributo1:valor1;atributo2:valor2;}
h4 { atributo1:valor1;atributo2:valor2;}
</style>

Observa como primero indicamos la etiqueta a la que vamos a aplicar el estilo y después le indicamos el tipo de estilo que va a tomar. Éste va encerrado entre los signos { y }. Todo ello entre las etiquetas <style>. Observa el siguiente código:

<style type="text/css">
body {bgolor:#FFFFFF;}
p { font-family:Courier New;font-size:12pt;color:#0000FF;}
h4 { color:#FF0000;font-family:verdana;text-align:center;}
</style>

Este código aplicado a un texto haría que el color de fondo del documento fuera blanco, que todos los párrafos tuvieran la fuente “courier new" de tamaño 10 y de color negro y que los textos dentro de etiquetas <h4> fueran de color rojo, estuvieran centrados y su tipo de letra fuera “verdana". En el siguiente enlace tienes la muestra de cómo quedaría este texto: Ejemplo de muestra. Y a continuación tienes el código del mismo:

<html>
<head>
<title>Un ejemplo de aplicar estilos indirectos en el mismo documento</title>
<style type="text/css">
body {bgolor:#FFFFFF;}
p { font-family:Courier New;font-size:12pt;color:#0000FF;}
h4 { color:#FF0000;font-family:verdana;text-align:center;}
</style>
</head>
<body>
<p>El texto que vaya dentro de este párrafo tiene unas características definidas en la hoja de estilo.<p/>
<h4>Esta cabecera tiene otras características</h4>
<p>Otro párrafo igual que el anterior</p>
</body>
</html>

Otra forma de aplicar un estilo es mediante una clase. Las clases se definen también dentro de la etiqueta “style". Se escribe de la siguiente manera. Observa el código:

.nombreclase {propiedad1:valor1; propiedad2:valor2;}

Como vemos, tenemos que escribir un punto, seguido del nombre de la clase. Para aplicarla, sólo deberemos incluirla dentro de la etiqueta que queramos transformar. Observa el siguiente ejemplo:

<style type="text/css">
.nombreclase { background-color:#000000;color:#FFFFFF;font-size:15pt; }
</style>

Y ahora vamos a aplicarle el estilo a un párrafo. En el siguiente enlace tienes la muestra de cómo quedaría este texto: Ejemplo de muestra. Y a continuación tienes el código del mismo:

<html>
<head>
<title>Un ejemplo de aplicar el estilo class</title>
<style type="text/css">
.nombreclase { background-color:#000000;color:#FFFFFF;font-size:15pt; }
</style>
</head>
<body>
<p class="nombreclase">El texto que vaya dentro de este párrafo tendrá un color de fondo negro, un color de texto blanco y un tamaño de fuente de 15 puntos, ya que son las características que tiene la clase “nombreclase"</p>
</body>
</html>

Si queremos restringir el uso de un estilo a un elemento de un tipo determinado, podemos definirlo de la siguiente manera:

X.nombredelaclase {propiedad1:valor1;}

“X" será la etiqueta a la que queramos aplicar el estilo. Lo que estamos haciendo con esta forma de aplicar el estilo es limitar esa clase sólo a las etiquetas que se llamen "X". Si pusiéramos esta clase en una etiqueta llamada “Y" no funcionaría.

Por ejemplo, si escribimos esta clase: “p.clase1 {color:#FF0000;text-align:center;}", ese estilo sólo se aplicaría a los párrafos que llevarán esa clase, pero no a ningún otro tipo de etiquetas.

Esta es la forma de definir el estilo. Para aplicarlo lo haremos de la misma forma que aplicábamos los estilos por clases. En el caso anterior sería:

<p class="clase1">Este párrafo será de color rojo y alineado al centro</p>

Otra forma de definir un estilo es a través del símbolo “#" y del atributo “id". Esta forma de aplicar un estilo es útil para definir un estilo particular.

Este estilo se escribiría de la siguiente manera:

<style type="text/css">
#estiloparticular { color:#FF0000; font-size:15pt; }
</style>

Y para aplicarlo debe usarse un tag con el atributo "id" cuyo valor sea el nombre del estilo. En el siguiente enlace tienes la muestra de cómo quedaría este texto: Ejemplo de muestra. Y a continuación tienes el código del mismo:

<html>
<head>
<title>Un ejemplo de aplicar un estilo particular</title>
<style type="text/css">
#estiloparticular { color:#FF0000; font-size:15pt; }
</style>
</head>
<body>
<p>Este párrafo no tiene aplicado ninguna clase.</p>
<p id="estiloparticular"> A este párrafo le hemos aplicado el “estiloparticular", por lo que el texto es rojo y de un tamaño diferente al anterior</p>.
</body>
</html>
<< Formas de aplicar CSS I. Pseudoclases. >>

Artículo escrito por Alberto Gómez para HazUnaweb.com. Queda absolutamente prohibida su reproducción.  


© HazUnaWeb.com. Tutoriales y manuales de programación y diseño de páginas web. :: Contacto :: Aviso legal
Queda absolutamente prohibida la copia o reproducción total o parcial de los contenidos de este página.