<link rel="stylesheet" type="text/css" href="archivo">

selector {

propiedad : valor;
}
selectores:
universal "*"

Etiqueta "se selecciona la etiqueta" h1 : valor

clase "se selecciona por clase" .clase : valor

id "se selecciona por id" #id : valor

atributo "atributo="Nombre" [atributo="Nombre"]

pseudoclases :hover "cuando seleccione el puntero en una etiqueta

completar una accion"

!important Es la escala mas alta de la especificidad

Metodologia de ben

medida relativas y fijas

fijas cm, mm, px

relativas em 1 em es igual al valor del contenedor

relativa vw es igual al tamaño del dispositivo en lo vertical : wh es

igual al tamaño del dispositivo en lo
horizontal

font-size tamaño de letra

background-color color de fondo
font-family tipografica de letra
line-height distancia horizontal que toma una letra
font-weight grosor de la letra
color color de letra y objeto
display cambiar el estilo en linea estilos: inline, block,
inline-block, table, inline-table, list-item, table-cell, table-row
table-column, gird, flex,
inline-flex, inline-gerd, none
dato:"el none desaparece el
elemento de la pagina")

padding distancia entre un elemento y la caja que lo contiene

margin es la distancia que tiene una caja de una caja
border-radius Es el redondeo que se le da a un elemento
border Borde; border: tamaño, estilo,
color; border-left, border-bottom: 2px solid blue;
box-shadow darle sombra al elemento; box-shadow: x, y, "tamaño del
desenfoque", "cuanto borde tendra", color
text-align alinear un texto text-align: center, top, left;
transform rotar transform: rotate(90deg)
text-shadow darle sombra a las letra text-shadow: ejex, ejey,
intensidad, color;
outline Es darle sombra a una caja sin afectar a las demas cajas
z-index Cambiar zindex es cambiar el posicionamiento de una caja
encima de otra
letter-spacing cambiar la separacion de letra a letra

position Es cambiar la propiedad en la cual las cajas se mueven en el

documento position: relative, absolute, static, fixed, sticky;
absolute deja de tener un espacio reservado para la caja mientras
que relative
tiene un espacio reservado, diferenciadolas de los demas. Con
relative
puede contener mas cajas dentro de el.
fixed sirve para los menus
sticky funciona igual que fixed.

overflow sirve para la barra de scroll, que se hara con el sobrante

overflow: visible, auto, hidden, scroll;
overflow-x,y
float se ajusta a las cajas cercanas
float: left, right, top, bottom;
opacity opacidad de un elemento
transition transiciones de un elemento
transition: all 1s, background-color 1s;
/* comentario */

pseudo elementos elemento::pseudoelemento

::first-line primera linea
::first-letter primera letra
::placeholder Lo que aparece dentro del input
::selection lo que se seleciona con el mouse
::before Lo que viene antes de una frase inline
content="La primera linea"
::after Lo que tiene despues de la palabra inline
content="La ultima linea"

pseudoclases Escucha un evento, o actuan al realizarce una accion

elemento:pseudoclase
:hover cuando se coloca encima el raton
:link cuando se visito un link
:visited cuando se haya visitado un link
:active cuando apretemos en algun elemento
:focus Solo funciona en los inputs
:first-child selecciona el primer elemento
.clase etiqueta:lang(es)
:nth-child(numero) que elemento vamos seleccionar, en grid se pone primero el
elemento

object-fict: Como interactuan las imagenes con las cajas y como se

ajustan las imagenes object-fict: contain, cover, none, scale-
down;
object-position Posicionar la imagen
object-position: top, botton, left, right;
cursor cambiar el cursor
cursor: pointer;
rgb(0,0,0) Una forma de difinir colores
rgba(0,0,0, 0.1) Forma de colocar colores con opacidad

responsive-design
El responsive design, es la adaptablidad que tiene una pagina web a los diferentes
dispositivos.
@media only screen and (max-width: 100px) { }

flexbox
forma de maquetar una web, solo se aplica al contenedor
x main axis main-start main-end
y cross axis cross-start cross-end
display: flex;
flex-direction cambiar el main o el cross
flex-direction: row, row-reverse, column-reverse;
flex-wrap la direccion en la cu al se dirigen las cajas al a chicarse
flex-wrap: wrap, wrap-reverse, no-wrap
justify-content justifica el contenido o los items
justify-content: center, space-around, space-between("le da

un espacio entre elementos"), space-evenly("da un espacio exacto"),

flex-start, flex-end ("start y end alinean a inicio o final");

flex-grow La caja se ajusta al espacio sobrante
flex-grow: 1, 2, 3, ...;

flex-basic Un width, en la cual obliga a la caja que sea un tamaño

especifico. mas importante que el width flex-basic: 200px;
flex-shrink Cuanto espacio va ceder o dar a las otras cajas
flex-shirnk: 1...;

align-items: alinea en el cross axis

alig-items: flex-start, flex-end, center, stretch, baseline

(cross-axis)

text-align alinea texto

text-align: center,

box-sizing content-box; No se ajusta al contenido content-box;

se ajusta al contenido

.caja__madre>*:first-child {
align-self: stretch;
} Para que haga efecto en un solo elemento el flex

order como el z-index pero en el main axis, se posiciona por

delante o encima order: 1;

grid Es una forma de maquetacion al igual que flex, pero con columnas y
tablas que se le da a la tabla madre display: flex;
grid-template-columns sirve para agregar columnas
grid-template-columns: 100px 100px;
grid-template-rows sirve para agregar filas
 grid-template-rows: 100px 100px;

1fr sirve como flex-shrink, sirve para dar dinamismo. (Cantidad a repartir
para la caja).fr

grid-column-gap dar una separacion entre elementos en grid

grid-column-gap:30px
grid-row-gap dar una separacion entre elementos en grid
grid-row-gap:30px
grid-row para hacer mas grande o extender
grid-row:1/2
grid-column para hacer mas grande o extender
grid column:1/3
grid-column-start Donde inicia.
grid-column-start:1;
grid-column-end Donde termina
grid-column-end:2;
grid-row-start Dnde inicia
grid-row-start:1;
grid-row-end Donde termina
grid-row-end:4 / span 2;
grid-auto-columns Indica el autmatico del tamaño
grid-auto-columns: 100px;
grid-auto-flow
justify-self Justifica el contenido en grid

align-self Alinea objetos

.mother {
display: grid;
grid-template-areas:
"header header header"
"aside main main"
"aside main main"
"footer footer footer"
}

.ground2 {
background-color: green;
}

.ground1 {
grid-area: header;

.ground3 {
grid-area: aside;
}

.ground2 {
grid-area: main;

.ground4 {
grid-area: footer ;
} Una forma de realizar una maquetacion normal con grid

Responsive design
Es una forma de maquetar para diferentes dipositivos
@media Comenzar con el responsive design @media
screen and (max-width:400px) and (max-width: 650px)

all apto para todo los dispositivos

screen Destino principalmente a pantallas
print Destinado a material impresion y visualizacion en vista previa de
impresion
speech Destinado a sintetizadores de voz

and or valores logicos

transition-property: property/les - all - none Las propiedades a

modificar
transition-duration: duration/s la duracion de la
transicion
transition-delay: delay/s La duracion hasta que vuelva
a la normalidad la propiedad
transition-timing-function: En que orden se moveran los
objetos linear | ease | ease-in | ease-out | ease-in-out
:nth-child(2) Una pseudo clase

animaciones
@keyframes
animation-duration: tiempo de la animacion
1s
animation-name: Nombre de la animacion
animation-timing-function: En que orden ira la caja en
la animacion linear | ease | ease-in | ease-out | ease-in-out |
cubic-bezier(x,y,x, y)
animation-interation-count: Cuantas veces se repetira la
animacion 1s | infinite
animation-direction: Que forma va ir la animacin
normal | reverse | alternete | alternete-reverse |
backwards | forwards | both
animation-delay duracion
1s
@keyframes desplazarce {
from {
position: relative;
left: 0;
}

to {
left: 100%;
}
}

@keyframes desplazarce {
0% {
position: relative;
left: 0;
}
 50% {
background-color: green;
}

100% {
left: 100%;
background-color: yellow;
}
}

transform: translateX(x) - translateY(y), translate(x, y) Traslada un

objeto de un lado a otro lado
transform: scale(xy - xy) - scaleX(x) - scaleY(y) Aumentar el
tamaño de un objeto
transform: rotate(angleUnit) - rotateX(angleUnit) - rotateZ(angleunit) -
rotate3D(angleunit) || angleunit - deg - grad - rad - turn
transform: skew(angleUnit) Deformar una caja

clip-path un generador de formas web

creacion de variables
:root {
--variable: #fg3;
}
scroll-behavior: cambiar la forma en la que se comporta el scroll
scroll-behavior: smooth;
user-select: none; que el usuario no pueda selecciona ningun elemento
text-shadow elegir una sombra a las letras

background

background-img: url("direccion")
brackground-size: x, y | cover | contain actua como el object fict
back-ground: repeat | no-repeat que se repita la misma
imagen en un mismo elemento
background-clip: content-box; recorta la imagenDe donde se
va reflejar la imagen
background-origin: content box; crea la imagen
background-position: right, left; Donde se posiciona la imagen