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%; }
}

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *