IDW2022CSS002

Vista previa del material en texto

Los selectores de CSS se utilizan para "encontrar" (o seleccionar) los 
elementos HTML que se quieren diseñar.
Selectores simples — seleccionar elementos basados en nombre, id, clase
Selectores combinadores — seleccionar elementos en función de una 
relación específica entre ellos
Selectores de pseudoclase — seleccionar elementos en función de un 
determinado estado
Selectores de pseudoelementos — seleccionar y diseñar una parte de un 
elemento
Selectores de atributos — seleccionar elementos en función de un atributo 
o valor de atributo
Selectores de CSS
Un combinador explica la relación entre selectores.
Un selector puede contener más de un selector simple. Entre los selectores 
simples se puede incluir un combinador.
Hay cuatro combinadores diferentes:
— selector de descendientes (espacio)
— selector de hijos (>)
— selector de hermano adyacente (+)
— selector general de hermanos (~)
Selectores Combinadores CSS
Estos selectores seleccionan elementos que son descendientes de otros 
selectores. No es necesario que sean hijos directos.
Selector de Descendientes
Seleccionan elementos cuando identifican que son hijos directos.
Selector de Hijos
Se utiliza para seleccionar un elemento que se encuentra justo al lado de 
otro elemento en el mismo nivel de la jerarquía.
Selector de Hermano Adyacente
Se utiliza para seleccionar los hermanos que aparecen después de un 
elemento, incluso si no son adyacentes.
Selector de General de Hermanos
Las pseudoclases nos permiten seleccionar elementos de acuerdo a sus 
características, como sus posiciones, o condiciones actuales. Estas son 
algunas de las más utilizadas:
:hover — Se activa cuando el usuario se desplaza sobre un elemento con el cursor.
:nth-child(valor) — Selecciona un elemento de una lista de elementos hermanos 
que se encuentra en la posición especificada por el valor.
:first-child — Selecciona el primer elemento de una lista de elementos 
hermanos.
:last-child — Selecciona el último elemento de una lista de elementos hermanos.
:only-child — Selecciona un elemento cuando es el único hijo de otro elemento.
:first-of-type — Selecciona el primer elemento de una lista de elementos del 
mismo tipo.
:not(selector) — Selecciona los elementos que no coinciden con el selector 
indicado.
Selectores de Pseudoclases
:hover — Se activa cuando el usuario se desplaza sobre un elemento con el cursor.
Selectores de Pseudoclases
:nth-child(valor) — Selecciona un elemento de una lista de elementos hermanos 
que se encuentra en la posición especificada por el valor.
Selectores de Pseudoclases
:nth-child(valor) — Selecciona un elemento de una lista de elementos hermanos 
que se encuentra en la posición especificada por el valor.
Selectores de Pseudoclases
:nth-child(valor) — Selecciona un elemento de una lista de elementos hermanos 
que se encuentra en la posición especificada por el valor.
Selectores de Pseudoclases
:first-of-type — Selecciona el primer elemento de una lista de elementos del 
mismo tipo.
Selectores de Pseudoclases
:first-of-type — Selecciona el primer elemento de una lista de elementos del 
mismo tipo.
Selectores de Pseudoclases
:not(selector) — Selecciona los elementos que no coinciden con el selector 
indicado.
Selectores de Pseudoclases
:not(selector) — Selecciona los elementos que no coinciden con el selector 
indicado.
Selectores de Pseudoclases
Tablas con CSS
Especifica cómo se muestran los elementos.
Cada elemento HTML tiene un valor de display por defecto, dependiendo de qué tipo 
de elemento sea. Mediante la propiedad display se puede cambiar ese valor.
Los valores por defecto para la mayoría de los elementos son block (en bloque) o 
inline (en línea)
La Propiedad Display
Ej. elementos en línea
<span>
<a>
<q>
Ej. elementos en bloque:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
La Propiedad Display
Las propiedades width y height, sólo funcionan en elementos block.
Display puede tomar el valor inline-block para definir un elemento inline que pueda 
adoptar un tamaño personalizado.
La Propiedad Display
La Propiedad Display
Este modelo permite que los elementos puedan flotar a cada lado de la ventana y 
compartir espacio en la misma línea con otros elementos, sin importar su tipo.
float — permite a un elemento flotar hacia un lado u otro, y ocupar el espacio 
disponible. Valores: none, left, right.
clear — restaura el flujo normal del documento, y no permite que el elemento siga 
flotando. Valores: none, left, right, y both (ambos).
El Modelo de Caja Tradicional
imagen y párrafo con estilos por defecto 
Si queremos mostrar el texto al lado de la imagen, podemos hacer que el elemento 
<img> flote hacia la izquierda o la derecha.
El Modelo de Caja Tradicional
Si el elemento afectado por la propiedad float es más alto que el resto de los 
elementos de la misma línea, desbordará al contenedor
El Modelo de Caja Tradicional
La propiedad overflow no deja que el contenido desborde a su contenedor 
extendiendo el tamaño del contenedor o incluyendo barras de desplazamiento
El Modelo de Caja Tradicional
Otra alternativa para normalizar el flujo del documento es declarar la propiedad 
clear en el elemento que se encuentra a continuación del elemento flotante dentro 
del contenedor.
El Modelo de Caja Tradicional
La propiedad clear no afecta a otros aspectos del elemento y no agrega barras de 
desplazamiento como la propiedad overflow. Por lo tanto, es la que se implementa 
en el modelo de caja tradicional para organizar la estructura de un documento.
Cajas Flotantes
Si el elemento padre no es lo suficientemente ancho como para contener todas las 
cajas, los elementos que no se pueden ubicar en la misma línea se moverán a una 
nueva.
Cajas Flotantes
Si hay más espacio disponible en el contenedor del que necesitan las cajas, el espacio 
restante se ubica a los lados. Se puede ubicar el espacio restante en medio de las 
cajas, haciendo flotar algunas cajas hacia la izquierda y otras hacia la derecha.
Las siguientes reglas asignan un tamaño de 120px a cada caja, dejando un espacio 
vacío de 80 píxeles, haciendo flotar las dos últimas cajas a la derecha.
Cajas Flotantes
Las siguientes son algunas propiedades para posicionar un elemento.
position — Define el tipo de posicionamiento
static: se posiciona de acuerdo con el flujo normal del documento.
relative: se posiciona según la posición original del elemento.
absolute: se posiciona con una posición absoluta relativa al contenedor del elemento
fixed: se posiciona con una posición absoluta relativa a la ventana del navegador
top — Distancia entre el margen superior del elemento y el margen superior de su 
contenedor.
bottom — Distancia entre el margen inferior del elemento y el margen inferior de su 
contenedor.
left — Distancia entre el margen izquierdo del elemento y el margen izquierdo de 
su contenedor.
right — Distancia entre el margen derecho del elemento y el margen derecho de su 
contenedor.
Posicionamiento
Cuando el elemento se ubica con posicionamiento relativo, el elemento se desplaza 
pero el diseño no se modifica. Con posicionamiento absoluto, el elemento se elimina 
del diseño, y el resto de los elementos se desplazan para ocupar el nuevo espacio 
libre.
Posicionamiento
Con posicionamiento absoluto, se debe tener en cuenta que el elemento se ubicará 
con respecto a la ventana del navegador, a menos que se declare la posición de su 
elemento padre.
Posicionamiento
z-index — Esta propiedad define un índice que determina la posición del elemento 
en el eje z. El elemento con el índice más alto se dibujará sobre el elemento con el 
índice más bajo.
Posicionamiento
Esta técnica sirve para crear menús desplegables o listas 
desplazables que revelan información adicional.
Barra de Navegación
Barra de Navegación
Contenido Desplegable
Menú Desplegable
Modelo de Caja Flexible
Definir cómo distribuir las cajas y especificar sus tamaños, no se puede lograrde 
forma eficiente con el modelo de caja tradicional.
El modelo de caja flexible resuelve estos problemas. En lugar de hacer flotar los 
elementos, organiza las cajas usando contenedores flexibles (sus tamaños cambian 
de acuerdo al espacio disponible).
En este modelo, cada grupo de cajas debe estar incluido dentro de otra caja que 
configura sus características.
Para convertir un elemento en contenedor flexible, CSS ofrece los valores flex e 
inline-flex para la propiedad display.
El valor flex define un elemento Block flexible y el valor inline-flex define un 
elemento Inline flexible.
Modelo de Caja Flexible
Para que un elemento dentro de un contenedor flexible se vuelva flexible, tenemos 
que declararlo como tal, mediante alguna propiedad:
flex-grow — Esta propiedad* declara la proporción en la cual el elemento se va a 
expandir.
flex-shrink — Esta propiedad* declara la proporción en la que el elemento se va a 
reducir.
flex-basis — Esta propiedad declara un tamaño inicial para el elemento.
flex — Esta propiedad permite configurar los valores de las propiedades 
flex-grow, flex-shrink, y flex-basis al mismo tiempo.
Si todas las cajas se configuran como flexibles, el tamaño de cada una dependerá del 
tamaño de la caja padre y del valor de la propiedad flex.
* Dicha proporción se determina considerando los valores asignados al resto de los elementos de la caja (los 
elementos hermanos).
Modelo de Caja Flexible
El tamaño de cada caja será de 150px menos los 
márgenes, o sea 140px.
tamaño de caja padre x valor de su propiedad flex
suma de los valores flex-grow de todas las cajas
tamaño de caja = 
600px x 1
4
tamaño de caja = = 150px
Modelo de Caja Flexible
600px x 2
5
tamaño de caja-1 = = 240px
600px x 1
5
tamaño de las otras = = 120px
Modelo de Caja Flexible
300px x 1
3
= 100pxtamaño de las otras = 
Modelo de Caja Flexible
Para este ejemplo se han declarado tres parámetros para la 
propiedad flex.
flex-grow es la proporción de expansión.
flex-shrink determina la proporción en la que las cajas se 
reducirán para caber en el espacio disponible.
flex-basis establece un valor inicial para el elemento.
Modelo de Caja Flexible
flex-basis permite definir un tamaño inicial para 
influenciar al navegador al distribuir el espacio disponible 
entre las cajas, pero las cajas se expanden o reducen más 
allá de ese valor.
Quedan un espacio libre de 100 píxeles.
100px × 1/4 = 25px (menos los márgenes).
Modelo de Caja Flexible
CSS ofrece las siguientes propiedades para definir valores 
mínimos y máximos permitidos para el ancho y la altura del 
elemento.
max-width
min-width
max-height
min-height
Modelo de Caja Flexible
Por defecto, los elementos dentro de un contenedor flexible se muestran 
horizontalmente en la misma línea, pero no se organizan con una orientación 
estándar.
Un contenedor flexible usa ejes para describir la orientación de su contenido.
Existen dos ejes que son independientes de la orientación: el eje principal y el eje 
transversal.
Modelo de Caja Flexible
Si la orientación cambia, los ejes se desplazan junto con el contenido.
Modelo de Caja Flexible
CSS ofrece las siguientes propiedades para la organización de las cajas.
flex-direction — Define el orden y la orientación de las cajas en un contenedor 
flexible. Valores: row, row-reverse, column y column-reverse.
order — Especifica el orden de las cajas.
justify-content — Determina cómo se va a distribuir el espacio libre. Valores: 
flex-start, flex-end, center, space-between, y space-around.
align-items — Alinea las cajas en el eje transversal. Valores: flex-start, 
flex-end, center, baseline, y stretch.
align-self — Alinea una caja en el eje transversal. Afecta cajas de forma individual. 
Valores: auto, flex-start, flex-end, center, baseline, y stretch.
flex-wrap — Determina si se permiten crear múltiples líneas de cajas. Valores: 
nowrap, wrap, y wrap-reverse.
align-content — Alinea las líneas de cajas en el eje vertical. Valores:flex-start, 
flex-end, center, space-between, space-around, y stretch.
Modelo de Caja Flexible
El valor row-reverse declara la misma orientación que row, 
pero invierte el orden de los elementos desde main-end a 
main-start (normalmente de derecha a izquierda)
Modelo de Caja Flexible
Una característica importante del modelo de caja flexible 
es la capacidad de distribuir el espacio libre.
Por defecto, las cajas se ordenan desde main-start a 
main-end dejando un espacio libre al final.
Este comportamiento se puede modificar con la propiedad 
justify-content
Modelo de Caja Flexible
Otra propiedad para distribuir espacio es align-items. 
Alinea las cajas en el eje transversal, y esto permite realizar 
una alineación vertical.
Modelo de Caja Flexible
Cuando no se declara la altura de las cajas, estas adoptan 
automáticamente el tamaño de su elemento padre.
El valor stretch se declara por defecto para todos los 
contenedores flexibles.
Modelo de Caja Flexible
A veces puede resultar útil alinear las cajas de forma 
independiente, sin importar la alineación establecida por el 
contenedor. Esto se puede lograr utilizando la propiedad 
align-self.
Modelo de Caja Flexible
Un contenedor flexible puede organizar las cajas en una o 
varias líneas. La propiedad flex-wrap declara esta 
condición usando tres valores:
nowrap define el contenedor flexible como un contenedor 
de una sola línea (las líneas no se agrupan)
wrap define el contenedor como un contenedor de 
múltiples líneas y las ordena desde el extremo 
cross-start a cross-end.
wrap-reverse genera múltiples líneas en orden invertido.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.
Modelo de Caja Flexible
Cuando tenemos contenedores con múltiples líneas, es 
posible que necesitemos alinearlas. CSS ofrece la 
propiedad align-content para alinear líneas de cajas en 
un contenedor flexible.