La etiqueta span la utilizamos para dar estilo sin necesidad de recurrir a CSS, algo similar ocurre con la etiqueta div pero esta última crea un bloque. Un ejemplo de etiqueta div sería el siguiente <div >
Este texto es de color rojo
</div> He escrito todo en la misma línea sin embargo la etiqueta div añade espacios en blanco en sus extremos.Si probamos a editar de nuevo un post nos encontraremos que se ha alterado el orden de lo que habíamos escrito y la etiqueta div ha creado saltos de línea.Ahora el ejemplo con la etiqueta span <span > Este otro también es rojo pero soy span y mi etiqueta es más ordenada </span> ¿Qué tal ahora? la etiqueta span no altera nada, se sitúa en la misma línea y sólo cambia si le añadimos estilos.
Ese ejemplo nos demuestra que para darle estilos a un texto la etiqueta span es mucho más manejable, al igual que añadimos color también podemos escoger el tipo de fuente:
Soy fuente comic y color orangered <span style=";font-family:comic sans ms;color:orangered;" >Soy fuente comic y color orangered </span>
Soy fuente comic,color orangered y de mayor tamaño
<span style=";font-family:comic sans ms;font-size:16px;color:orangered;" >Soy fuente comic,color orangered y de mayor tamaño </span>
» Cada vez que añadimos un estilo lo separamos por comillas como esta ;
Si añadimos con frecuencia cualquier tipo de estilos puede resultar algo molesto. Nos resultará más sencillo si esos estilos los trasladamos a la plantilla.
Los estilos se añaden como su nombre indica en la hoja de estilos conocida como CSS. En nuestra plantilla los ubicaremos en el espacio comprendido entre <head> y </head> para evitar cometer algún error yo siempre aconsejo añadir los estilos justo antes de ]]></b:skin> y precisamente ahí es donde añadiremos una clase para esos estilos a la que llamaremos span.
.span{
color: orangered;
font-family: comic sans ms;
font-size: 16px;
}
Guardamos los cambios y hacemos la prueba en una entrada:
<span class="span">Aquí añadimos cualquier texto</span>
Simplemente añadiendo el nombre de la clase en este caso span nuestro texto adquiere los estilos definidos para esa clase.
El juego con la etiqueta span puede ser tan divertido como nosotros estemos dispuestos a que lo sea.
El juego con la etiqueta span puede ser tan divertido como nosotros estemos dispuestos a que lo sea.
Añadimos dos clases una para cada color y a cada una de esas clases le añadimos estilos.
.color-rojo {
color:#940f04;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro {
color:#000;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
Podemos continuar añadiendo un efecto hover donde el color de la fuente se invierta
.color-rojo:hover {
color:#000;
font-size:54px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
.color-negro:hover {
color: #940f04;
font-size:34px;
text-align: center;
text-decoration: none;
font-family: Trebuchet MS, Trebuchet, Helvetica, Arial;
}
Podemos seguir jugando pero será otro día
0 comentarios:
Publicar un comentario