- Tipos de selectores
- Especificidad
- Metodologia Bem
- Medidas
- Propiedades de texto
- Normalize
- Modelo de Cajas
- Position
- Overflow
- Float
- Pseudoelementos
- Pseudoclases
- Objet Fit
- Cursor
- Responsive Design
- Flex Box
- Grid
Los selectores (como su nombre lo dice), nos ayudan a identificar y seleccionar los elementos dentro del DOM, una vez seleccionado e identificado el elemento que deseamos procedemos a darle estilo aplicando diversas propiedas.
- Universal
- Tipo o etiqueta
- Clase
- ID
- Atributo
- Descendiente
- Pseudaclases
La especifidad vino para resolver un problemas muy común en css. El problema radicaba en como se seleccionaban ciertos elemento del DOM, y como seleccionar algunos elementos podia ocasionar comportamientos inesperados en otros. Lo que se busca con la especifidad es poder brindar caracteristicas inmutables o con mayor importancia ante otras, de manera que independientemente de los cambios en otros lugares, su estilo inicial se conserve. Los rangos de especifidad son:
- Important
- Estilos en linea: Aquellos usados en el HTML.
- Identificadores
-
- Atributos
- Pseudoclase
- clases
-
- Elementos
- Pseudoelementos
NOTA: Cuando hay dos selectores que entran en conflicto debido a que tienen un mismo rango de especifidad, el atributo definitivo se define por cascada, es decir, en el mismo orden que son declarados los atributos en el CSS.
La metodologia Bem(Block, Element, Modifier) es una metodologia basada o dirigida en la modularización o entendimiento de la jerarquia y especificación de nuestro componentes CSS. Consiste en nombrar las clases basados en un sistema estandar y siguiendo ciertos patrones conocidos, brindando así:
- Orden
- Escalabilidad
- Entendimiento
- Mantenibilidad
En CSS podemos encontrar 2 tipos de medida relativas y fijas, las cuales se pueden ver reflejadas en la siguiente lista:
| Medida | Valor |
|---|---|
| Pixeles | px |
| Centimetros | cm |
| Milimetros | mm |
| Inches | in(1in = 96px = 2.54cm) |
| Puntos | pt(1pt = 1/72 of 1in) |
| Picas | pc (1 pc = 12pt) |
| Medida | Valor |
|---|---|
| em | Se refiere al tamaño actual o longitud del elemento, 2em significa(2 veces el tamaño del elemento). Inicialmente el navegador asigna un valor de 16px a 1em. |
| rem | Hace referencia al tamaño o longitud del elemento raiz o elemento padre. |
| vw | Hace referencia al ancho total del dispositivo. |
| vh | Relativo a la altura del dispositivo. |
| % | Hace enfasis en el valor que tiene o medida que tiene su padre. De tal manera, que 50% es la mitad del valor de su padre. |
Todos las fuentes tienen caracteristicas importantes que deberiamos tener en cuenta, o por lo menos conoce:
| Propiedad | valor |
|---|---|
| font-size | Define el tamaño de la fuente |
| font-family | Define el tipo de fuente (Calibri, arial, etc). |
| line-height | Especifica la altura de una linea, o la altura que ocupa. El valor por defecto es 1. |
| font-weight | Sirve para aplicar negrilla en determinadas proporciones a una fuente. |
Se pueden agregar fuentes de internet, puede buscar en Google fonts para ver varias opciones gratuitas.
Todos los navegadores dan valores por defecto a cada etiqueta HTML, es decir, dan un (padding, margin) que varia entre cada navegador web. Esto puede ocasionar ciertos dolores de cabeza, y es que esto puede ocasionar que nuestra pagina web se vea diferente en cada navegador web, sujeto a decisiones que deberiamos poder controlar. La solucion para esta problematica se conoce como Normalize, es codigo CSS que viene especializado en dar un formato estandar en todos los navegadores, de modo que podamos empezar a trabajar sin preocupaciones de las variaciones que se puedan producir en el diseño de nuestra pagina. Nota: Es recomendable aplicar en el archivo Normalize.css, con el operador universal la propiedad universal la propiedad:
box-sizing: border-box;
Con esta propiedad nos aseguramos de darle el ancho y alto correcto a cada elemento. Tambien recomendable aplicar margin y padding con valor de cero. Y al elemento img del archivo normalize darle un: max-width: 100%; para que en los dispositivos moviles las imagenes se ajusten al ancho sin sobrepasarse.
En HTML todo son cajas, sin embargo, no todas se comportan de la misma manera. Encontramos dos tipos de caja que podran ser adaptadas con CSS pero que tambien traen un valor por defecto con HTML. Los dos tipos de caja existentes son: cajas en bloque y cajas en linea.
El comportamiento caracteristico de una caja en bloque es:
- Fuerza a realizar un salto de linea respecto a los otros componentes.
- La caja adquiere un ancho del 100% del valor disponible.
- Las propiedades height y width se respetan.
El comportamiento que refleja una caja en linea es el siguiente:
- No fuerza a ningun salto de linea, eso quiere decir que puede compartir una mismo linea con otra caja en linea.
- Las propiedades height y width no se aplican ni se tienen en cuenta.
Para cambiar el comportamiento de nuestras cajas podemos usar la propiedad display.
En HTML todas las etiquetas son cajas o estan envuelta en una por lo tanto, todas las siguiente propiedades aplican para todas las etiquetas:
| Atributo | Función |
|---|---|
| padding | Es la distancia que hay entre la caja y su contenido (shorthand property). |
| margin | Es la distancia entre diferentes cajas, tambien se entiende como la distancia que una caja tiene hacia afuera (shothand property). |
| border | Define las caracteristicas que tiene el borde(shorthand property). |
| content | Se refiere al contenido mismo de la caja(line-height). |
| Propiedad | Uso |
|---|---|
| border-radius | Le da bordes redondeados a una caja. |
| box-shadow | Se usa para darle el efecto de sombreado a una caja (material design). |
La propiedad position es muy importante, es una propiedad que nos brindad diferentes modos de acomodar nuestros elementos respecto a los otros. Cuando usamos la caracteristica position adquirimos 5 nuevas propiedas que son: left , right ,top ,bottom, z-index.
Hay 5 diferentes tipos de valores que puede tomar la propiedad position:
- relative
- absolute
- fixed
- sticky
- static
La propiedad overflow hacer referencia al contenido que sobre o no se ajusta correcta a nuestra caja, con overflow podemos decidir que pasa con este contenido y como manejarlo. La propiedad overflow es un shorthand de overflow-x y overflow-y.
Posible valores:
- Visible: Es el valor por defecto que tiene la caja.
- Auto: Si mi texto o contenido se desborda, automaticamente me cree una barra deslizable.
- Scroll: Genera una barra deslizable independientemente de que sea necesario o no.
- Hidden: Oculta la barra deslizable y tambien su contenido.
Esta propiedad actualmente es usada para envolver imagenes o elementos en texto, esto le da un efecto muy bueno y formateado a la estructura del texto y el desarrollo.
Puede adquirir 3 propiedades:
- Left: La imagen o el elemento pasa a estar en el lado izquierdo del texto.
- Right: La imagen o el elemento pasa a estar en el lado derecho del texto.
- None: Es como si la propiedad float no se aplicara (default).
Un pseudoelemento no hace referencia a un elemento HTML del todo, hace referencia a una parte del elemento que puede variar dinamicamente, ejemplo: la primera linea de un texto. Es importante que la existencia de un pseudelemento depende de un elemento de HTML.
A continuación, mostraremos los diferentes pseudelemento que hay:
| Pseudelemento | Referencia |
|---|---|
| first-line | Hace referencia a la primer linea de un texto. No función con elementos inline. |
| first-letter | Hace referencia a la primer letra de un texto. No función con elementos inline. |
| placeholder | Texto que se encuentra incialmente en un campo de texto y desaparece al empezar a escribir. |
| selection | Cuando seleccionamos texto con el cursor normalmente obtenemos un fondo azul, bueno, con el pseudelemento selection podremos manejar este fondo a nuestro antojo. Tiene sus propiedades un poco limitadas ya que tiene caracteristicas de un elemento en linea ( inline). |
| before | Crea contenido "antes" del contenido, sin embargo, no genera contenido real en el DOM, es visible, sin embargo no se puede seleccionar. Requiere propiedad content para su funcionamiento. |
| after | Crea contenido "despúes" del contenido, sin embargo, no genera contenido real en el DOM, es visible, sin embargo no se puede seleccionar. Requiere propiedad content para su funcionamiento. |
Las pseudoclases son listeners, reaccionan a determinados eventos e interacciones que el usuario va desarrollando a lo largo del desarrollo de la aplicación, volviendo el programa y su diseño mas dinamicos.
Algunas pseudoclases que podremos ver son las siguientes:
| Pseudoclase | Evento |
|---|---|
| hover | Esta pseudoclase tiene su momento cuando ponemos el mouse encima o sobre el elemento, permitiendonos brindarle propiedades. Se recomiendo usar la pseudoclase hover en conjunto con la propiedad transition, ya que ayuda a realizar cambios graduales y no tan bruscos. |
| link | Hace referencia a todos los enlaces o link de la pagina que NO han sido visitados. |
| visited | Hace referencia a todos los enlaces o link de la pagina que SI han sido visitados. |
| focus | Se usa comunmente para los input. Cuando seleccionamos el input para empezar a escribir es cuando pasa de estado desenfocado a enfocado, es entonces cuando tomar lugar la pseudoclase focus. |
| active | Eesponde al click, es decir, cuando clickeamos o seleccionamos un elemento esta pseudoclase actua, permitiendonos modifical el elemento mientras este siendo presionado. Tambien se recomienda el uso de la propiedad transition. |
| lang | Recibe un argumento, el cual es el tipo de lenguaje. Para que esto funcione debemos definir en HTML el atributo lang con su respectivo lenguaje. Funciona similar a la selección por atributo. |
Esta propiedad nos indica como un imagen o video sera desplejado o ajustado en un contenerdor. Si nosotros definimos un contenedor para la imagen con propiedades que no concuerdan con las originales la imagen va a perder su proporción, es por eso que la propiedad objet-fit puede usar alguna de las siguientes propiedades:
| Valor | Significado |
|---|---|
| fill | Estira la imagen hasta lograr ocupar totalmente el elemento, comunmente hace que la imagen pierda sus proporciones logicas (default value). |
| cover | Se escala la imagen para llenar el contenedor, sin embargo no pierde las proporciones logicas de la imagen, lo cual puede dar como resultado que la imagen sea cortada. |
| contain | Escala la imagen al maximo tamaño posible para poder encajar sin tener que cortar la imagen. |
| none | Mantinene las medidas iguales de la imagen sin importarle el tamaño de su contenedor. La imagen puede llegar a ser cortada si el tamaño de su contenedor es menor al de la imagen. |
| scale-down | Es una combinación entre el valor contain y none. Da como resultado que no se adapta al tamaño de su contenedor a menos que el tamaño del contenedor sea menor al de la misma imagen. |
Esta propiedad indica que forma y caracteristicas tendra nuestro puntero cuando este sobre determinado elemento, ya que existen demasiados valores se recomienda ver la siguiente pagina donde estan bien explicado: Click Aqui para ir al enlace
Actualmente todas la web se trabajaba sobre computadores de escritorio, lo cual hacia muy sencillo definir la interfaz grafica ya que tanto la figura rectangular de la pantalla como las resoluciones eran muy similares, pero cuando se introdujo al mundo los celulares toda la web tuvo un gran problema de diseño ya que se enfrenta con que los tamaños de las pantallas eran diferentes y podian variar drasticamente. Responsive Design es el nombre que se le dio al concepto de adaptar una interfaz de usuario a diferentes resoluciones y formas vistos en diferentes dispositivos. Existe un concepto llamado mobile first, el cual nos dice que debemos definir el diseñ del celular antes que el de un computador, de manera que el diseño del movil se adapte al del computador y no al reves.
Antes las paginas web se estructuraban con tablas, lo cual ocasionaba codigo HTML muy extenso y enredado, que si se le daba un mal manejo podia ocasionar desastres en la parte visual, dañando por completo nuestros "estilos". Con la llegada de CSS se soluciono este problema, separando el estilo de la estructura de la pagina.
Como conté en puntos anteriores la llegada de los dispositivos moviles y las diferentes resoluciones fue otro de los grandes retos que enfrentarón las paginas web. Para solucionar este reto que es el responsive design, podemos usar la propiedad ´´´display: flex;´´´, lo cual es usado para definir un flex container. Lo cual habilita algunas propiedades propias del display flex. Es importante que tengamos conocimiento de que cuando los hijos directos que tenga el flex container pasan a ser flex items, que tienen un importante rol en este display ya que son los directamente afectados.
Veamos algunas de las propiedades y valores que pueden tomar los flex container y sus hijos.
order: Normalmente tenemos los flex items ubicados de una manera acorde a como lo hemos definido en el HTML, sin embargo, este orden puede ser cambiado según nuestra necesidad aplicando la propiedad order a los flex items. El flex item con menor valor en su propiedad order sera el primero en mostrarse.(recibe numeros).
flex-direction: Esta propieda se aplica al flex container y puede recibir 4 valores, que son: row, row-reverse, column y column-reverse. Por defecto su valor es row, el cual le indica al contenedor que posicione sus items en una fila. El valor_row-reverse_ ubica los items en fila, pero su orden va a ser inverso. Ahora, faltan por describir dos valores que son column y column-reverse, según la explicación dada con row se puede decir que es igual a diferencia que los flex items se ubicaran en columnas.
flex-flow: Es un shorthand el cual nos abrevia tanto el flex-wrap como el flex-direction. Recibe como primer argumento el flex direction(column,row, column-reverse, row-reverse) y como segundo argumento el flex wrap(wrap, wrap-reverse).
justify-content: Esta propiedad nos ayuda a indicar como van a estar distribuidos nuestros flex items en nuestro flex container. Es analogo al text-align en textos. Puede tomar cuatro valores diferentes que son: space-evenly ,space-between ,space-around ,center.
align-items & align-content: Estas propiedades se usan para alinear los flex items en el eje Y, sin embargo, align-items se usa cuando se espera una sola linea de cajas, mientas que align-content la podemos usar aún con mayor cantidad de lineas de cajas. Estas propiedades pueden tomar 5 valores, flex-start ,flex-end , center , baseline , strech (default).
align-self: Se usa para ubicar un flex item en especifico. Esta propiedad es usada en unicamente en el hijo y puede tomar los 5 valores que vimos las propiedades anteriores: flex-start ,flex-end , center , baseline , strech (default).
flex-grow: Esta función indica que tanto se expandiran nuestros flex-items respecto al espacio sobrante.
flex-wrap: Por defecto flex container van a ubicar todo su contenido en una sola linea, de manera que daran nuevas dimensiones a los flex items. Si queremos que las dimensiones de los flex items se conserven y a medida que la resolución del dispositivo disminuya se vayan añadiendo mas lineas podemos usar esta linea en nuestro css: flex-wrap: wrap;, otro posible valor para que se añadan mas lineas pero hacia la parte superior del elemento es: flex-wrap: wrap-reverse;. El valor por defecto de esta propiedad es wrap.
flex-basis: Es una propiedad que nos indica las dimensiones iniciales de un flex-item, es similar a la propiedad width, sin embargo el flex-basis tiene mayor relevancia al momento de difinir las dimensiones.
flex-shrink: Indica el espacio que va a ceder un flex-item respecto a sus hermanos cuando requieren encogerse.
La propiedad grid esta pensada para trabajar de manera bidimensional, tanto con columnas como con filas. Es muy usada para realizar tablas.
- Al igual que con la propiedad flex existia un container llamado flex container, con grid ocurred exactamente lo mismo. Se debe definir un contenedor con la propiedad grid lo cual nos dara origen a tener un grid container.
- Los hijos de directos de un grid container reciben el nombre de grid items.
- Existen los grid line que son las separaciones que existen entre los diferentes flex items. Hay dos tipos de lineas: column grid lines y row grid lines.
- Los grid cell son los cuadros definidos entre columas y filas, ejemplo: lo esperado en un grid container que tenga 2 columnas y 3 rows es que tenga 6 grid cells.
- grid track es el nombre que reciben tanto las columnas como las filas.
- Un grid area es un espacio que definimos en nuestra cuadrila, solo puede tener forma cuadrada o rectangulo.
Para empezar debemos definir nuestro grid container, lo cual lo logramos dandole la siguiente propiedad a un contenedor display: grid;. Inicialmente, despúes de definir nuestro grid container puede que no notemos ninguna diferencia ya que por defecto solo tendremos una columna, por lo que es apropiado definir las diferentes columnas y filas con las propiedades grid-template-columns: 5px 6px 10px 5fr; y grid-template-rows: 5px 67px 6fr;. La cantidad de argumentos mandamos corresponden a las medidas que queremos otrogar a nuestros grid tracks.
NOTA: Cuando mandamos nuestras medidas de nuestras columnas y filas debemos tener en cuenta que tenemos una nueva unidad de medida que podemos usar como fr, la cual es similar o analoga al flex-grow en los flex items.
Unas interesantes propiedades que podemos usar cuando empezamos a definir nuestras columnas y filas son: grid-row-gap: 20px; , grid-column-grap: 20px; y su respectivo shorthand que es: grid-gap: <<colum-grap>> <<row-grap>>. Estas propiedas indican la distancia que habra entre filas y columnas, muy parecido al margin a diferencia que los grid items no se separaran de su grid container.
Cuando queremos que uno de nuestros grid items ocupe mayor espacio podemos usar las propiedades: grid-column: <<initial column line>> / <<end column line>>, grid-row: <<initial row line>> / <<end column line>>. Les pasamos como argumentos la linea de comienzo y la linea final de su respectivo eje. Al podramos notar que nuestro grid item estara ocupando una grid area diferente a la inicial.
Inicialmente definimos las dimensiones de nuestra cuadricula con grid-template columns y grid-template-rows. Sin embargo, es totalmente normal que nuestra cuadricula deba ser dinamica, por lo cual no sabremos exactamente cuantas columnas y filas tendra. Aquellas columnas y filas que predefinimos hacen parte de nuestro grid explicito, aquellas que no, hacen parte de nuestro grid implicito.
Por defecto, las nuevas celdas de la cuadrila se ubicaran como nuevas filas sin ningun tamaño especificado. Para cambiar la forma en que se generan las nuevas celdas tenemos la propiedad: grid-auto-flow, la cual puede tomar uno de los siguientes valores:
- column: Los nuevos grid items no calculados saldran en forma de otra columna.
- row: Los nuevos grid items no calculados saldran en forma de otra fila (default).
- dense: Rellena automaticamente los huecos que pueden generar propiedades como
grid-columnogrid-row.
Para definir las dimensiones de los nuevos grid items implicitos debemos usar una de las siguientes propiedades:
- grid-auto-columns: Se usa para definir las dimensiones de las columnas implicitas.
- grid-auto-rows: Se usa para definir las dimensiones de las filas implicitas.
Hay funciones que aunque no sean necesariamente propias de grid, si son bastante utiles para hacerlas un poco mas dinamicas. Por ejemplo, para dar medidas basadas en un minimo y un maximo podemos usar la funcione minmax(<<medida minima>> , <<medida maxima>>). Otras propiedades complementarias de esta funcion podrian ser max-content y min-content que nos dicen que el ancho minimo y el maximos deben ser relativos a nuestro contenido.
Hay otras dos propiedades que se usan comunmente en el repeat y son autofit y autofill la cuales o escalan las dimensiones de nuestros grid-items o aumentan columnas o filas dinamicamente.