Cómo cambiar estilos de la primera letra de un texto. Cómo cambiar estilos de la primera letra de un texto.


Mostrando resultados del 1 al 3 de 3
  1. Cómo cambiar estilos de la primera letra de un texto.-titulo-1.png

    En este tutorial vamos a aprender cómo cambiar los estilos de la primera letra de un texto.

    Seguro muchos han visto en los periódicos que en algunos editoriales la primera letra del contenido con un estilo diferente, a veces más grande, con mayor grosor o hasta con otro color, en algunas webs de contenido ocurre lo mismo. En este tutorial aprenderemos cómo cambiar los estilos a la primera letra de un texto.

    Pseudo Elemento ::first-letter


    En CSS contamos con un pseudo elemento ::first-letter que nos va a permitir cambiar los estilos a la primera letra de un texto. Veamos un ejemplo, tenemos un párrafo con texto cualquiera y vamos a pesarlo al pseudo elemento el doble del tamaño.

    p::first-letter{
    font-size: 2rem;
    }


    See the Pen YyJWWj by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

    Como ven la primera letra del parrafo se ve el doble del texto que lo sigue. Ahora para usar esta propiedad deben tener en cuenta algunas cosas:


    Solo en elementos block

    El elemento solo trabaja en elementos block. Por ejemplo cambiemos el elemento p por un span y veamos los resultados:

    See the Pen bVmeeX by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

    Al final no hubo ningun cambio en la primera letra del texto. Asi que mucha atención con eso.


    Compatibilidad

    Este pseudo elemento funciona correctamente en ie 5.5+, Chrome 1+, Firefox 1+, Safari 1+, Android todos, iOS todos. Hay que tener en cuenta que para Internet Explorer e inferiores versiones debemos usar solo :first-letter, es decir con un solo dos puntos.

    Como hemos visto cambiar los estilos de la primera letra de un texto es tarea sencilla, en nuestro ejemplo solo hemos cambiado el tamaño, pero podríamos haber cambiado el color, fondo, grosor y cualquier propiedad que desearamos. Si desean aprender mas sobre HTML, pueden visitar nuestro curso de HTML y CSS. Los espero en un siguiente tutorial.

  2. #2
    Registro
    03-diciembre-2017
    Ubicación
    Venezuela
    Mensajes
    32
    Excelente ejemplo. Con c++ también se puede hacer
    Citar Citar  

  3. #3
    Super interesante muchas gracias siempre existe algo nuevo que aprender
    Citar Citar  



Temas similares

  1. Crear plugin para cambiar estilos y texto
    Hola amigos Me considero bueno en la creacion/edicion de themes, aunque no soy un gran experto. Pero en la creacion de plugins.. si ahi m da...
    Respuestas: 0
    Último mensaje: 29-ene-2016
  2. Como cambiar color de letra ?
    Hola betas, estoy con un problema... Mi web Confimovil.com - Smartphone, Android y Tecnologia tiene las letras rojas, y quiero cambiar a negro,...
    Respuestas: 6
    Último mensaje: 23-abr-2012
  3. Como cambiar el tipo de letra
    Hola a todos, mi duda es la siguiente, comenze con mi blog hace poco tiempo y he notado que solamente hay un solo tipo de letra para redactar los...
    Respuestas: 2
    Último mensaje: 17-feb-2011

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •