-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclase-css2.txt
88 lines (73 loc) · 3.44 KB
/
clase-css2.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
medidas
px : Medidas usadas de manera estandar.
em rem : son medidas fijas con responsividad (valen 16x1 pixel). Tienen relacion con la tipografia.
% : se apapta al tamaño de la pantalla
vw vh : hacen referencia la viewport (que es la parte visible de la pantalla)
colores
nombre :
rgb rgba :
hex :
hsl :
-------------------------------------------------
background : fonodo de la pagina
background-color : un solo color de fonodo
background-image : imagen o estilo particular
url : permite mostrar una imagen a travez de un enlace
size : tamaño en porcentaje que lleva una imagen en el fonodo
repeat: permite hacer patrones.
text
align : direcciona donde va el texto
transform :
decoration :
none : le quita cualquier tipo de decoracion que ocupe el texto
shadow : le da sombras al texto
(usando Google Fonts)
font :
family :
weigth : (preferiblemente en 400. usar entre 400 y 600) le da anchura
-------------------------------------------------------
Aplicando una "," entre los elementos especificados permite agregar mas de un elementos
box-sizing :
border-box : para todo para que el tamaño de las caja sea uno solo y no varie
Margin : empuja las cajas y les agrega una separacion. No se colicionan entre si
border : esta entre el magin y el borde de la caja
dashed : segmenta la linea del borde.
padding : es la distancia entre el contenido de la caja y su orilla. Sirve para comprimir el contenido de la caja (siempre aplicado al contanier).
visibility : deja
Opacity :
display : para indicar si un objeto exciste o no. Permite hacer que ciertos contenidos sean visibles o no para los usuarios
none : el usuario tiene que hacer una accion antes de que le aparezca el elemento
block : Toma el ancho de la pantalla y hace que sus elementos se dispercen hacia los lados de la ventana
inline : los elementos se organizan sobre la linea horizontal
grid : permite ordenar tanto columnas como filas
grid-template-columns : oder de las columnas
grid-template-rows : orden de las filas
repeat : repite el numero de elementos (columnas o filas)
auto-fill : permite rellenar
minmax :
-- repeat-auto-fill, minmax(200px, 1fr) --
grid-auto-rows :
box-shadow : hace sombras a la caja. (no usar sombras muy fuertes para las cajas)
(En la web: generador de sombras css)
min/max-width : limita el tamaño de las cajas dentro del viewport
position :
absolute :
fixed : Se queda pegado a la pantalla y se continua viendo aun haciendo scroll
sticky : Se pega al viuport al hacer scrolly pasar por encima de la caja an su posicion inicial
relative :
transform :
trasnlate :
rotate :
scale :
display-flex : comando aplicado directamente al contenedor. Para ordenar los elementos dentro del contenedor.
flex-direction : indica la direccion a la que se distribuyen los elementos del contenedor.
justify-content : orden horinzontal del contenedor (eje X) (solo en flex)
space-betweeng : ordena el espacio entre los elementos en el viewport en el eje vertical.
space-around : equilibra el espacio entre elementos
space-evenly :
justify-items : ordena el contenido
flex-wrap:
align-items / aline-content : orden vertical ("align-items" solo en flex)
----------------------------------------------------------
Atropos Js
Particulas Js