EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Colores y fondo CSS
            Colores y fondo en CSS, atributos y propiedades
            11/10/2019
            Propiedades fuentes CSS
            Propiedades de las fuentes en CSS
            11/10/2019

            Propiedades de texto en CSS

            Propiedades texto CSS

            Propiedades de texto en CSS

            Tabla de contenidos

            • 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

            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. En la tabla 6.1 se muestran las propiedades de texto más utilizadas.

            Tabla 6.1: Propiedades de texto
            Propiedad Descripción Valores
            text-indent Desplazamiento de la primera línea del texto longitud | porcentaje
            text-align Alineamiento del texto left | right | center | justify
            text-decoration Efectos de subrayado, tachado none | underline | overline | line-through
            letter-spacing Espacio entre caracteres normal | longitud
            word-spacing Espacio entre palabras normal | longitud
            text-transform Transformación a mayúsculas / minúsculas capitalize | uppercase | lowercase | none
            line-height Tamaño del espacio entre líneas longitud | porcentaje
            vertical-align Alineación vertical top | middle | bottom
            baseline | sub | super | valor

            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

            Comprueba tu aprendizaje

            ¿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!

            Compartir

            UD3. CSS básico

            • 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. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            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



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results