Diccionario CSS
La siguiente es una síntesis de selectores y propiedades CSS
| Selectores de etiqueta | p { } |
| Selectores de clase | .clase { } |
| Selectores de id | .id { } |
| Pseudoselector “mouse over” | :hover { } |
| Pseudoselector “al hacer clic” | :active { } |
| Color de texto | color: blue; color: #0000FF; color: rgb(0, 0, 256); |
| Color de fondo | background-color: lightblue; |
| Ancho y alto | width: 20%; height: 120px; |
| Bordes | border: 2px solid black; Ancho / Estilo / Color Estilos: solid, dotted, dashed, double, groove |
| Bordes redondeados | border-radius: 10px; |
| Sombreados | box-shadow: 5px 10px 20px red; Desplazamiento horizontal / Desplazamiento vertical / Ancho del difuminado / Color |
| Márgenes | margin: 10px 5px 10px 5px; o margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; |
| Relleno | padding: 10px 5px 10px 5px; o padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left: 5px; |
| Tipografía: familia tipográfica | font-family: Arial; |
| Tipografía: tamaño | font-size: 28px; |
| Tipografía: grosor | font-weight: bold; Opciones: números del 1 al 1000, bold, lighter |
| Tipografía: alineación | text-align: center; Opciones: left, right, center, justify |
| Tipografía: decoración | text-decoration: underline Opciones: none (ninguno), underline (subrayado), overline (línea por encima), line-through (tachado) |
| Grilla | display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 200px 100px; grid-gap: 10px; Opciones de medida: porcentaje (%), pixeles (px), fracciones (fr), auto (el ancho depende del contenido) |
| Imágenes de fondo | background-image:url(“link_a_la_imagen”); background-repeat: repeat; | no-repeat; para que la imagen se repita o no background-size: contain; (la imagen entra completa, sin recortarse ni deformarse) | cover; (se recorta) | 100% 100%; (se deforma) |
| Imágenes de fondo Efecto Parallax |
background-attachment: fixed; La imagen de fondo queda estática y el contenido se desplaza |
| Listas (li) | list-style-position: inside; Hace que las viñetas tomen el color de fondo de la lista justify-content: center; Centra el contenido align-items: center; Centra los elementos sobre el eje vertical |
| Animaciones simples | transform: scale(2); el objeto se agranda al doble transform: scale(0.5); el objeto se achica a la mitad transform: rotateX(180dg); el objeto rota sobre el eje horizontal transform: rotateY(180dg); el objeto rota sobre el eje vertical transform: rotate(180dg); el objeto rota sobre el centro transition: 2s; duración de la transición |
| Animaciones (carrousel) | animation: carrousel 15s infinite; Nombre de la animación | Duración de la transición | Cantidad de repeticiones position: relative; Para que el contenedor se mueva respecto de la página @keyframes carrousel { from { right: 0%; } 50% { right: 100%; } to { right: 200%; } } |