La anatomía de una declaración en css

Un selector es un puente que comunica el html con css.

 Nombre del selector

 Propiedad que se le va a aplicar
 Valor de la propiedad

Tipo de selectores

Tipos de selectores los hay por tipo, es decir el tag html a estilizar, de clase, de id, de atributo y
universal
Selectores combinadores

 Descendientes: escribimos es selector que está dentro del selector

 Hijo directo: el hijo del primer selector
 De elemento adyacente: el que está justo debajo del primer selector
 General de hermanos: Los que están justo al lado del primer selector


Pseudoclases y pseudoelementos

 Las pseudoclases nos permiten acceder a aquellas actividades que hace el usuario,
como por ejemplo un click, pasar el click por una aimagen etc.
 Los pseudoelementos son aquellos que nos permiten acceder a elementos de html
que no son accesibles con aquello tipo de selectores que hemos visto anteriormente,
ejemplo, la primera letra de un texto, agregar contenido en un sitio especifico
Cascada y especificidad

Especificidad
Aquí podemos observar la importancia de los selectores

La especificidad consiste en dar un valor a una regla CSS sobre qué tan específico es el estilo,
esto para que los navegadores puedan saber qué estilos aplicar sobre otros,
independientemente de dónde se encuentren en el código. El estilo se aplicará donde la
especificidad sea mayor.
Tipos de display más usados

La propiedad display establece el tipo de visualización de los elementos html sin afectar el flujo
normal de los demás elementos

Hay etiquetas que por defecto su display ya está determinado, como la etiqueta <div> que
tiene su display en bloque, <span> tiene el display inline y button tiene el display inline-block.

Visualización en block:

El display block establece que un elemento ocupará todo el espacio disponible por defecto y el
siguiente elemento a este se situará por debajo.

Es posible añadir medidas de anchura (width y height) a esos elementos

También es posible agregar todas las propiedades del modelo de caja

Visualización en línea (inline)

El display inline establece que un elemento ocupará el espacio del contenido del mismo y el
siguiente elemento se situará a la derecha

No es posible definir medidas de anchura width y altura heigth a estos elementos.

También, no es posible agregar todas las propiedades del modelo de caja, únicamente
funcionará la propiedad margin en eje horizontal

Visualización en bloque y en línea (inline-block)

El display inline-block ccombina las ventajas de bloque de colocar medidas al elemento y

propiedades del modelo de caja correctamente, con las ventajas de inline de color un
elemento seguido de otro en el mismo espacio

Si el elemento excede el contenido total, se coloca en la siguiente línea por debajo.

Ejemplo de display inline-block

Visualización nula (none)

El display none desactiva la visualización de un elemento, como si el elemento no existiera.

Display Flex

El display flex y grid son formas de visualización de elementos recientes y cada uno tiene sus
propias características para crear interfaces de manera efectiva, a partir de un contenedor
padre que dotará a los elementos hijos con superpoderes de posicionamiento, flex por defecto
ubica los elementos uno al lado del otro

Que es flexbox

Flexbox consiste en el ordenamiento de los elementos hijos en un mismo eje, por defecto
horizontalmente, el elemento padre o contenedor deberá contener la propiedad display con
valor flex. A partir de aquí ya se puede ordenar los hijos según sea necesario.

Que es grid

Grid consiste en el ordenamiento de elementos en dos ejes, como si fuera una cuadricula o
tabla. El elemento padre contenedor deberá tener la propiedad display con el valor de grid y
debes definir el valor de las columnas y las filas. A partir de aquí ya puedes ordenar los hijos
según sea necesario

Modelo de caja
El modelo de caja se compone de cuatro elementos; margin, border, padding y contenido

Que es el contenido del elemento html, como su nombre lo indica es todo lo que estpa dentro
del elemento, este tiene medidas establecidas por las propiedades width y heigth, uqe
representan la anchura y la altura, respectivamente. Si imaginamos una caja, este valor sería
todo lo que decidas colocar dentro
Que son los borders en el elemento html

El border consiste en el perfil o borde de un elemento HTML. Si imaginamos una caja, sería la

caja en sí. Para definir un borde es necesario utilizar las siguientes tres propiedades:

Border-color: establece el color del borde.

Border-style: establece el estilo propio del borde, estos pueden ser: none (sin

borde), dotted (puntos), dashed (guiones), solid (continuo), double (doble
continuo), groove (recuadro).

border-width: estable la anchura del borde.

Que es el espaciado interno del elemento html o padding

El padding consiste en el espacio entre el borde y el contenido del elemento html. si

imaginamos una caja, este valor sería el espacio entre la caja y lo que deseas guardar.

Puedes establecer el padding en casa posición en una sola línea de las siguientes maneras:

 padding: [arriba] [derecha] [abajo] [izquierda], siguiendo el sentido horario.

 padding: [arriba] [abajo] [derecha e izquierda], siguiendo el eje principal.
 padding: [arriba y abajo] [derecha e izquierda], siguiendo los ejes del elemento.

También estableciendo de manera individual los valores de cada posición:

Que es el espaciado interno o margin

El margin consiste en el espacio entre el borde y otro elemento HTML. Si imaginamos una caja,
es el espacio entre tu caja y otra caja.

Puedes establecer el margin en cada posición en una sola línea de las siguientes maneras:

 margin: [arriba] [derecha] [abajo] [izquierda], siguiendo el sentido horario.

 margin: [arriba] [abajo] [derecha e izquierda], siguiendo el eje principal.
 margin: [arriba y abajo] [derecha e izquierda], siguiendo los ejes del elemento.

También estableciendo de manera individual los valores de cada posición:

Que son los valores por defecto

Por defecto, el navegador establece valores iniciales a algunas propiedades CSS, este es el caso
de margin y padding. Una buena práctica es utilizar el selector universal para restablecer estos
valores a 0, para que no surjan errores inesperados.

Qué es el tamaño total del elemento

El tamaño total del elemento está determinado por la suma de los valores de las
propiedades border padding y widtho height, dependiendo del eje. La propiedad margin no
está incluida en este cálculo.
Por ejemplo, definimos los siguientes estilos:

El tamaño total del elemento será de 210px en ambos ejes,

donde la suma fue: 150 (altura/anchura) + 20 x
2 (padding ambos lados) + 10 x 2 (borde ambos lados). Si
evaluamos este elemento en las herramientas del
desarrollador mostrará su tamaño como 210x210

Aunque se conozca las medidas de los elementos de esta manera, no siempre existirá un
control total. Por lo que podríamos establecer el tamaño total del
elemento con width y height, y no solo del contenido, añadiendo la propiedad box-sizing.

Propiedad box-sizing

La propiedad box-sizing establece cómo se calculará el width y el height si incluyen bordes y

espacios internos. Como buena práctica, se lo coloca en el selector universal, para que todos
los elementos sigan esta tendencia.

Con el valor border-box, el tamaño total del elemento será igual al especificado en el width y
height, provocando que las medidas del contenido cambien con respecto a los bordes y
espacios internos.

Por ejemplo, con los estilos que definimos anteriormente establezcamos esta nueva
propiedad.
En conclusión, establece las medidas totales del elemento con width y height, junto con box-
sizzing: border-box; para que el contenido se adecue a las necesidades del contenedor

¿Cuál es el problema con el tamaño de los bordes?

Recapitulando, el tamaño total de un elemento es la suma de tres: el borde, el espacio interior

y el contenido.

Entonces, en algunas ocasiones tendrás la intención de añadir un borde al realizar un hover.

Esto provocará que el elemento necesite más espacio del inicial, en un contenedor con más
elementos puede ocasionar un conflicto.

Mira el siguiente ejemplo, e intenta poner el cursor sobre un elemento ¿qué sucede?

Observaste este comportamiento, debes tener cuidado con lo que agregas porque puedes
provocar errores.

La solución a esto es colocar un borde de color transparent (transparente) y del mismo tamaño

que el otro borde. Esto hará que el elemento se mantenga en su tamaño total, lo único que
cambia es el color.

Evita agregar un tamaño diferente al inicial.

Colapso de márgenes

El colapso de márgenes sucede cuando dos elementos bloque adyacentes tienen un

determinado calor de margin, entonces los márgenes se solapan
Como puedes observar, al cambiar el display este comportamiento desaparece. Además,
en flexbox y grid no ocurre el colapso de márgenes. Cuida los márgenes que colocas en los
elementos de tipo bloque.

Posicionamiento

El posicionamiento en CSS consiste en cómo un elemento se situará, con respecto a su

elemento padre y al flujo normal del documento. El flujo normal del documento es el orden de
los elementos establecidos en el html.

La posición del elemento se define con la propiedad position, mediante los siguientes valores.

 Static
 Relative
 Absolute
 Sticky

Prioridades de posición

Además de la propiedad de position, existen cuatro propiedades del elemento de acuerdo a su

position con respecto a su padre, estás son: top (arriba), botton(debajo), left(izquierda) y
rigth(derecha).

Estos valores estarán establecidos en el padre próximo que tenga la posición relative.
Si top y buttom están definidos, top gana., si left y rigth están definidos, left gana,
dependiendo del idioma configurado.

Posición estática

La posición static es el valor por defecto de todo elemento HTML, consiste en respetar el flujo
normal del documento donde las propiedades del posición no pueden ser establecidas.

Position relative

La position relative consiste en respetar el flujo normal del documento donde las propiedades
de posición pueden ser establecidas

Position fija

La posición fixed consiste en quitar al elemento del flujo normal del documento y fijarlo en un
lugar donde las propiedades de posición si pueden ser establecidas

Posición variable fija

La posición sticky consiste en quitar al elemento del flujo normal del documento y fijarlo en un

lugar mientras su contenedor sea visible; donde las propiedades de posición sí pueden ser
establecidas.

En el siguiente ejemplo, desplázate por el documento, observa el comportamiento antes y

después de colocar la posición variable fija.

Z-Index – Contexto de apilamiento

El contexto de apilamiento consiste en la superposición de capas o elementos a lo largo del eje

Z del navegador. Esto es importante para evitar que un elemento esté ocultando a otro.

Qué son los planos y ejes

El navegador está constituido de tres planos y ejes: ancho o X; el alto o Y; y el de profundidad o
Z.

El eje X positivo está hacía la derecha; el eje Y positivo está hacía abajo; el eje Z positivo está
hacía el usuario

Estos son muy importantes para mover los elementos de HTML desde un punto inicial hacía un
punto final

Qué es la propiedad Z-Index

El contexto de apilamiento se configura con la propiedad z-índex

Por defecto, todos los elementos tienen un valor auto, es decir, el orden está definido por la
estructura del HTML. Los primeros elementos estarán detrás y los últimos estarán de frente.

Si se establece un valor positivo, este elemento se sitúa por delante de los demás, si se
establece un valor negativo, se sitúa por detrás.

Si un elemento tiene un z-Index mayor a otro estará por delante. Sin embargo, si un elemento
que tiene un z-index menor a otros, sus hijos nunca estarán por encima, aunque su z-index sea
mayor.
Como puedes observar en la imagen, el elemento de la clase yellow tiene un z-índex mayor a
red, pero no está por encima, porque su contexto de apilamiento está dentro del contexto de
apilamiento del elemento blue así mismo, nunca estará por detrás de si elemento padre.

Propiedades y valores de CSS más usados

Las propiedades de css más usadas son las siguientes, separadas en secciones comunes,
algunas ya las conocemos:

 Display
 Margin
 Padding
 Border
 Width
 Height
 Color
 Background