Komoloves

Blog Personal de Porkeno
Home » Ayuda Técnica » Blogs y Wordpress » Como modificar la primera letra o la primera linea con CSS

Como modificar la primera letra o la primera linea con CSS

marzo 29th, 2008 Posted in Blogs y Wordpress, Programacion, Tecnologia Tags:

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.

notepad icon CSS

Código CSS para Hacer la Letra Capital

[css]
/*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.*/

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.

[/css]
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.

3 Responses to “Como modificar la primera letra o la primera linea con CSS”

  1. 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.

  2. 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.

  3. Muy buen artículo.

    Un saludo avinagrado.

Leave a Reply