Formas de definir clases CSS
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». Aquí tienes la muestra de cómo quedaría este texto:
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. Aquí tienes la muestra de cómo quedaría este texto:
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. Aquí tienes la muestra de cómo quedaría este texto:
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>
Deja una respuesta