EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Propiedades de texto en CSS

            Propiedades texto CSS

            Propiedades de texto en CSS

            Las propiedades de texto son las que nos permiten controlar el texto como bloque, es decir, afectan al interlineado, a la separación entre palabras, al tabulado, etc.

            Contenidos del artículo

            • 6. Propiedades de texto
            • 6.1. Text-indent
            • 6.2. Text-align
            • 6.3. Text-decoration
            • 6.4. Letter-spacing
            • 6.5. Word-spacing
            • 6.6. Text-transform
            • 6.7. Line-height
            • 6.8. Vertical-align

            6. Propiedades de texto

            En la tabla 6.1 se muestran las propiedades de texto más utilizadas.

            PropiedadDescripciónValores
            text-indentDesplazamiento de la primera línea del textolongitud | porcentaje
            text-alignAlineamiento del textoleft | right | center | justify
            text-decorationEfectos de subrayado y tachadonone | underline | overline | line-through
            letter-spacingEspacio entre caracteresnormal | longitud
            word-spacingEspacio entre palabrasnormal | longitud
            text-transformTransformación a mayúsculas / minúsculascapitalize | uppercase | lowercase | none
            line-heightTamaño del espacio entre líneaslongitud | porcentaje
            vertical-alignAlineación verticaltop | middle | bottom
            baseline | sub | super | valor
            Tabla 6.1. Propiedades de los textos

            6.1. Text-indent

            .a { text-indent: 50px; }
            .b { text-indent: 3em; }
            .c { text-indent: 30%; }
            .d { text-indent: -50px; }

            0


            6.2. Text-align

            .a { text-align: center; }
            .b { text-align: right; }
            .c { text-align: left; }
            .d { text-align: justify; }

            0


            6.3. Text-decoration

            .a { text-decoration: underline; }
            .b { text-decoration: overline; }
            .c { text-decoration: line-through; }
            .d { text-decoration: underline line-through; }

            0


            6.4. Letter-spacing

            .a { letter-spacing: 3px;  }
            .b { letter-spacing: 10px; }
            .c { letter-spacing: 15px; }

            0


            6.5. Word-spacing

            .a { word-spacing: 5px; }
            .b { word-spacing: 20px; }
            .c { word-spacing: 50px; }

            0


            6.6. Text-transform

            .a { text-transform: capitalize; }
            .b { text-transform: uppercase; }
            .c { text-transform: lowercase; }

            0


            6.7. Line-height

            .a { line-height: 50px; }
            .b { line-height: 3em; }
            .c { line-height: 30%; }

            0

            6.8. Vertical-align

            .a { vertical-align: top; }
            .b { vertical-align: middle; }
            .c { vertical-align: bottom; }

            dark

            .a { vertical-align: baseline; }
            .b { vertical-align: sub; }
            .c { vertical-align: super; }
            .d { vertical-align: -10px; }

            En el valor puedes usar px, pt, cm y %.

            dark

            Test

            ¿Con qué propiedad podemos centrar un texto?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad podemos subrayar un texto?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad modificamos el espacio entre palabras?

            ¡Bien! ¡Has fallado!

            ¿Con qué propiedad y con qué valor ponemos todas las letras en mayúscula?

            ¡Bien! ¡Has fallado!

            ¿Se pueden usar valores negativos y positivos con la propiedad vertical-align?

            ¡Bien! ¡Has fallado!

            Propiedades de los textos
            ¡Muy bien!

            Navegación de entradas

            ← Colores y fondo en CSS, atributos y propiedades
            Propiedades de las fuentes en CSS →

            Tutorial CSS Nivel Inicial

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Modelo de cajas: márgenes, relleno y bordes
            • 13. Tamaño de los elementos
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Cómo crear un menú horizontal
            • 16. Estilos en formularios CSS
            • 17. Buenas prácticas CSS
            • 18. Herramientas útiles, test de verificación y referencias
            • 19. Test de conocimientos CSS
            • 20. Resumen CSS

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados