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
            Prácticas CSS páginas web completas
            Herramientas útiles, tests de verificación CSS y referencias
            12/10/2019
            Prácticas CSS
            Prácticas CSS de páginas web completas
            13/10/2019

            Tabla resumen de propiedades CSS y sus valores

            Resumen CSS

            Resumen CSS

            Tabla de contenidos

            • Tabla resumen CSS
            • Sintaxis selector
            • Selectores básicos
            • Unidades de medida
            • Colores básicos
            • Color y fondo
            • Texto
            • Fuentes
            • Listas
            • Tablas
            • Pseudo-clases para selección de hijos o hermanos
            • Pseudo-clases para los estados de un elemento
            • Pseudo-elementos
            • Prefijos para los navegadores
            • Modelo de cajas: márgenes, relleno y bordes
            • Comportamiento de los contenedores
            • Formatos de las fuentes

            Tabla resumen CSS

            Sintaxis selector

            Sintaxis CSS

            Selectores básicos

            SelectorDescripción
            *Selecciona todos los elementos del DOM
            etiquetaSelecciona todas las etiquetas indicadas
            .classSelección de los elementos con la clase .class
            #idSelección del elemento con id #id
            sel1 sel2Selección de los selectores sel2 que se encuentren dentro de los selectores sel1
            .class1.class2Selección de los elementos con las dos clases: class1 y class2
            sel1.class1Selección de todos los selectores sel1 con clase class1
            sel1, sel2Selección de todos los selectores separados por comas
            sel1 > sel2Selección de los selectores sel2 cuando son hijos de sel1
            sel1 + sel2Selección del selector sel2 cuando es hermano de sel1 (su elemento padre es el mismo)

            Unidades de medida

            Longitudes relativas
            px Píxeles (relativo al dispositivo)
            em Relativo al tamaño de la fuente del elemento ( 2em significa 2 veces el tamaño de la fuente actual)
            % Porcentaje (relativo al elemento padre)
            vh y vw Medidas relativas de acuerdo al viewport
            1vh = 1% de la altura del viewport
            100vh = altura del viewport
            Longitudes absolutas
            in Pulgadas (1pulgada = 2.54 cm)
            cm Centímetros
            mm Milímetros
            pt Puntos (1pt = 1/72 pulgadas)
            pc Picas (1pica = 12 puntos)

            Colores básicos

            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

            Color 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)

            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 y 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

            Fuentes

            Propiedad Descripción Valores
            font-family Familias de fuentes nombre-familia|nombre-familia-genérica| *
            font-style Estilo de la fuente normal | italic | oblique
            font-variant Convierte a mayúsculas manteniendo un tamaño inferior normal | small-caps
            font-weight Anchura de los caracteres. Normal = 400, Negrita = 700 normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
            font-size Tamaño de la fuente xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | longitud | porcentaje

            Listas

            Propiedad Descripción Valores
            list-style-type Estilo aplicable a los marcadores visuales de las listas disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
            list-style-image Imagen aplicable a los elementos de las listas url(«…») | none
            list-style-position Posición dentro de la lista de los elementos marcadores de las listas inside | outside
            list-style Permite establecer el estilo de la lista, la imagen y/o la posición list-style-type | list-style-position | list-style-image

            Tablas

            Propiedad Descripción Valores
            caption-side Posición del título respecto la tabla top | bottom
            table-layout Formato de las celdas, filas y columnas auto | fixed
            border-collapse Selección del modelo de los bordes collapse | separate
            border-spacing Espaciado entre los bordes de celdas adyacentes longitud
            empty-cells Visibilidad de los bordes de celdas sin contenido show | hide

            Pseudo-clases para selección de hijos o hermanos

            Pseudo-claseDescripción
            :first-childPrimer hijo
            :last-childÚltimo hijo
            :first-of-typePrimer hermano de su tipo
            :last-of-typeÚltimo hermano de su tipo
            :only-childHijos únicos
            :only-of-typeÚnicos hermanos de su tipo
            :emptyElementos que no tienen hijos
            :nth-child(n)Enésimo elemento hijo
            :nth-last-child(n)Enésimo elemento hijo contando desde el último
            :nth-of-type(n)Enésimo hermano de su tipo
            :nth-last-of-type(n)Enésimo hermano de su tipo comenzando desde el último

            Ejemplos:

            • tr:nth-child(odd) o tr:nth-child(2n+1) Selecciona las filas impares de una tabla.
            • tr:nth-child(even) o tr:nth-child(2n) Selecciona las filas pares de una tabla.
            • :nth-child(7) Selecciona el séptimo elemento.
            • :nth-child(6n) Selecciona los elementos 6, 12, 18, etc.
            • :nth-child(3n+4) Selecciona los elementos 4, 7, 10, 13, etc.

            Pseudo-clases para los estados de un elemento

            Pseudo-claseDescripción
            :linkNo visitado por el usuario
            :visitedVisitado por el usuario
            :hoverModifica el estilo cuando un elemento apuntador pasa por encima
            :activeSe activa cuando el usuario pulsa el elemento
            :focusSe activa cuando tiene el foco sobre el elemento

            Pseudo-elementos

            Pseudo-claseDescripción
            ::first-linePrimera línea de texto de un elemento
            ::first-letterPrimera letra de la primera línea de texto de un elemento
            ::beforeAñade contenido al principio del documento
            ::afterAñade contenido al final del documento

            Prefijos para los navegadores

            PrefijoNavegador
            -moz-Firefox
            -webkit-Safari y Chrome
            -o-Opera
            -khtml-Konqueror
            -ms-Internet Explorer
            -chrome-Google Chrome

            Modelo de cajas: márgenes, relleno y bordes

            Propiedades CSS contenedores
            Propiedad Descripción Valores
            padding-top padding-right padding-bottom padding-left Tamaño del relleno superior, derecho, inferior e izquierdo longitud | porcentaje
            padding Tamaño del relleno longitud | porcentaje {1,4}
            margin-top margin-right margin-bottom margin-left Tamaño del margen superior, derecho, inferior e izquierdo longitud | porcentaje | auto
            margin Ancho de los margenes longitud | porcentaje | auto {1,4}
            border-top-width border-right-width border-bottom-width border-left-width Anchura del borde superior, derecho, inferior o izquierdo thin | medium | thick | longitud
            border-width Anchura del borde (reducida) thin | medium | thick | longitud {1,4}
            border-top-color border-right-color border-bottom-color border-left-color Color del borde superior, derecho, inferior e izquierdo color | transparent
            border-color Color del borde (reducida) color | transparent {1,4}
            border-top-style border-right-style border-bottom-style border-left-style Estilo del borde superior, derecho, inferior e izquierdo none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
            border-style Estilo del borde (reducida) none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}
            border-top border-right border-bottom border-left Ancho, estilo y color para el borde superior, derecho, inferior e izquierdo border-top-width | border-top-style | border-top-color
            border Ancho, estilo y color para los bordes (reducida) border-width | border-style | border-color
            border-radius Curvatura del borde longitud | porcentaje {1,4}

            Comportamiento de los contenedores

            PropiedadDescripciónValores
            displayComportamiento del contenedorinline | block | inline-block | none
            positionEsquema de posicionamientostatic | relative | absolute | fixed
            top right bottom leftDesplazamiento de la caja respecto al borde superior, derecho, inferior o izquierdolongitud | porcentaje | auto
            floatPosicionamiento flotanteleft | right | none
            clearControl de cajas adyacentes a las floatnone | left | right | both
            z-indexNivel de la capaauto | número entero
            box-sizingControl de bordes y relleno en el comportamiento del contenedorcontent-box | border-box
            visibilityMuestra u oculta un elemento ocupando el espaciovisible | hidden
            Propiedad Z-index

            Formatos de las fuentes

            FormatoDescripción
            EOTEmbedded OpenType, Explorer
            TTFTrueType Font, IOS
            WOFFWeb Open Font Format, Chrome
            WOFF2Mejora de WOFF
            SVGScalar Vector Graphics

            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