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
            Test de conocimientos css
            Comprueba tu conocimiento sobre CSS en este test
            13/10/2019

            CSS Custom Properties o Propiedades Personalizadas

            propiedades personalizadas css

            propiedades personalizadas css

            Las CSS Custom Properties o propiedades personalizadas (también llamadas variables CSS) nos permiten definir nombres para valores determinados de las propiedades. De esta forma, se puede utilizar ese nombre como si fuese una variable. La gran ventaja es que al modificar el valor de esas «variables» se cambia automáticamente en todos los lugares del documento CSS en los que se haya usado ese nombre.

            Esta característica es utilizada recientemente ya que no estaba presente en las primeras versiones de CSS ni soportada en todos los navegadores en las siguientes versiones.

            Definición de propiedades personalizadas

            Para definir una propiedad personalizada pondremos dos guiones  -- delante del nombre que queramos utilizar. Para definir la propiedad personalizada para todo el documento HTML la incluiremos en el pseudoelemento :root. Ejemplo:

            :root {
              --principal-color: black; /* Valor personalizado */
              --font: "Arial";
            }

            Uso de propiedades personalizadas

            Para utilizar una propiedad personalizada hay que insertar su nombre dentro de la expresión var():

            .clase {
              background-color: var(--principal-color);
              font-family: var(--font);
            }

            Ejemplo en CodePen:

            0

            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