Mar 29, 2008

Como modificar la primera letra o la primera linea con CSS

Leido 365 veces

Publicado por porkeno

How to modify First-letter or First-line with CSS

Como modificar la primera letra o la primera linea con CSS

Con CSS (Hojas de Estilo), podemos modificar la primera letra o la primera linea, de un texto o parrafo. Esto se consigue porque el CSS 2 tiene 2 pseudo elementos llamados first-letter y first-line que hacen esto exactamente.

Este es un ejemplo de su uso puesto en práctica.

Primera letra en otro color, más grande y en negrita

Primera linea subrayada en otro color y en negrita. Pero para poder ver que se escribe más de una linea, tenemos que seguir escribiendo para que el parrafo sea lo suficientemente grande.

Código CSS para Hacer la Letra Capital

/*En Nuestro Fichero style.css deberíamos configurarlo de manera similiar a la siguiente.*/
.letracapital:first-letter {
font-size: 200%;
color: #993333;
font-weight: bold;
}
.primeralinea:first-line {
text-decoration: underline;
color: #993333;
font-weight: bold;
}
/*El Ejemplo puesto en practica.*/
<div class="letracapital">
Primera letra en otro color, más grande y en negrita</div>
<div class="primeralinea">
Primera linea subrayada en otro color y en negrita. Pero para poder ver que se escribe más de una linea, tenemos que seguir escribiendo para que el parrafo sea lo suficientemente grande.
</div>

Esta técnica tiene más usos, por ejemplo yo la uso para poner la primera letra en el Sidebar de la Izquierda siempre a mayúsculas.

Consideraciones

Hay que tener en cuenta que First-letter no se puede aplicar a cualquier elemento, sino que sólo acepta: font properties, color properties, background properties, 'text-decoration', 'vertical-align' (sólo si 'float' está asignado a 'none'), 'text-transform', 'line-height', margin properties, padding properties, border properties, 'float', 'text-shadow' y 'clear'.
Y también decir que First-line sólo se puede aplicar a: font properties, color properties, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' y 'clear'.

Agradecimientos

Mis agradecimientos a Vinagre Asesino que fue quien me enseño el camino para conseguir este objetivo. y también hay que destacar los siguientes links.

Saludos y espero que os sea de utilidad.

PD.: Para cualquier duda no duden en dejar un comentario. Vuestra opinión cuenta.

¡Compártelo!

Categorizado en: Ayuda Blogs y Wordpress, Php - Css - Web, Programacion, Tecnologia

3 Comentarios en “Como modificar la primera letra o la primera linea con CSS”

29 Mar 2008 at 9:451InKiLiNo

Perdona que te corrija, pero en el blockquote te sobra el class=”style2″. Es más el blockquote no sería necesario, bueno depende de donde quieras que aparezca la primera letra en mayúscula, en tu caso al ser en la sidebar tampoco te haría falta.

Y es recomendable poner el código CSS en el archivo style.css y no junto con el HTML.
Using Mozilla Firefox 2.0.0.13 on Mac OS X
29 Mar 2008 at 10:062porkeno

Tienes razón en todo Inkilino. Y esta bien explicarlo.
El Blockquote es sólo para mostrar el ejemplo, para que quede diferenciado. Style2 es porque tengo diferentes estilos de Blockquote.

Y Por supuesto el CSS debería estar en el style.css y no aqui, pero es sólo para mostrar el ejemplo, y para que vean que se puede hacer.

Es más me has convencido y voy a actualizar el Post, para que se entienda mejor.
Gracias Inkilino.
Using Mozilla Firefox 2.0.0.13 on Windows XP
31 Mar 2008 at 9:313Vinagre Asesino

Muy buen artículo.

Un saludo avinagrado.
Using Mozilla Firefox 2.0.0.13 on Windows XP