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
            Unidades de medida CSS
            Unidades de medida en CSS
            11/10/2019
            Propiedades texto CSS
            Propiedades de texto en CSS
            11/10/2019

            Colores y fondo en CSS, atributos y propiedades

            Colores y fondo CSS

            Colores y fondo en CSS, atributos y propiedades

            Tabla de contenidos

            • 5. Colores y fondo
            • 5.1. Tabla de colores básicos
            • 5.2. Propiedades más utilizadas

            5. Colores y fondo

            Los valores de los colores se pueden definir mediante su nombre, en código hexadecimal (#RRGGBBAA) o mediante sus valores en los siguientes formatos:

            • RGB (Red, Green, Blue)
            • HSL (Hue, Saturation, Lightness)
            • RGBA (Red, Green, Blue, Alpha) 
            • HSLA (Hue, Saturation, Lightness, Alpha)

            5.1. Tabla de colores básicos

            HTML soporta alrededor de 140 nombres de colores diferentes. Entre ellos puedes encontrar los siguientes colores básicos:

            Table 5.1. Colores básicos
            Color Nombre HEX RGB
            black#000000 0,0,0
            white #ffffff 255,255,255
            red #ff0000 255,0,0
            blue #0000ff 0,0,255
            yellow #ffff00 255,255,0
            gray #808080 128,128,128
            green #008000 0,128,0
            Ver lista completa de colores expresados por nombre, hexadecimal y en RGB
            Ejemplo de colores en hexadecimal con transparencia:

            0

            5.2. Propiedades más utilizadas

            Algunas de las propiedades relacionadas con el color y el fondo más utilizadas son las siguientes:

            Tabla 5.2: Propiedades colores y fondo
            Propiedad Descripción Valores
            color Color del texto RGB | HSL | HEX | nombre del color | RGBA | HSLA
            background-color Color de fondo RGB | HSL | HEX | nombre del color | RGBA | HSLA
            background-image Imagen de fondo url(«…») | none
            background-repeat Repetición de la imagen de fondo repeat | repeat-x | repeat-y | no-repeat
            background-attachment Desplazamiento de la imagen de fondo scroll | fixed
            background-position Posición de la imagen de fondo percentage | length | left | center | right
            background-size Tamaño de la imagen de fondo valor
            Opacity Transparencia de un elemento [ 0 – 1 ] (0 → totalmente transparente)

            Ejercicio propuesto

            Observa el resultado de los siguientes estilos y estudia las diferencias que hay entre los distintos valores definidos.

            .a { background-color: red; }
            .b { background-color: #FF0000; }
            .c { background-color: RGB(255,0,0); }
            .d { background-color: HSL(0,100%,50%); }
            .e { background-color: red; opacity: 0.5; }
            .f { background-color: rgba(255, 0, 0, 0.5); }

            0

            Ejercicio propuesto

            Agrega los siguientes estilos en una página web y explica las diferencias que hay entre ellos:

            body { background-image: url("https://bit.ly/2slA7jo");}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-x;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat-y;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: repeat;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-size: 100px 100px;}

            dark

            Ejercicio propuesto

            La propiedad background-attachment indica si una imagen se mantiene fija o se desplaza con el resto de la página. Explica las diferencias que encuentras al establecer las siguientes propiedades:

            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: fixed;}
            body { background-image: url("https://bit.ly/2slA7jo"); background-repeat: no-repeat; background-attachment: scroll;}

            dark

            Comprueba tu aprendizaje

            ¿Qué propiedad se emplea para indicar la imagen de fondo de un elemento?

            ¡Bien! ¡Has fallado!

            ¿Qué propiedad se emplea para cambiar el color de fondo de un elemento?

            ¡Bien! ¡Has fallado!

            Indica cuál es el valor en hexadecimal del color negro:

            ¡Bien! ¡Has fallado!

            Para definir que el color de fondo es de color verde se emplea:

            ¡Bien! ¡Has fallado!

            Propiedades colores y fondo
            ¡Muy bien!
            Sigue practicando...
            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