Bitacora de Conceptos de CSS. by Ivan Muñiz

Responsive design mediaquery (Mediaconsulta de diseño responsivo)

ivanmuniz528 — 2022-06-14 21:04:37 UTC

Responsive web design se refiere al uso de diferentes técnicas para hacer que un sitio web se adapte, a cualquier dispositivo sin importar el tamaño, posicion o arientacion de dicho dispositivo.

Se trata de hacer más fácil la navegación al usuario, explorar y comprender para que puedan obtener exactamente lo que quieren de un sitio.

Selectores,propiedades y valores CSS.

ivanmuniz528 — 2022-06-14 21:39:19 UTC

```
Selector:
```

Es la informacion que nosotros le brindamos hacia el navegador para que el pueda saber donde poner las reglas del estilo que nostros estamos creando.

```
Valores:
```

Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones rgb() , etc...

```
Propiedades:
```

Las propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

Pseudoclases y Pseudoelementos CSS:

ivanmuniz528 — 2022-06-14 22:04:42 UTC

```
Pseudoclases:
```

Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima.

```
Pseudoelementos:
```

Al igual que las pseudo-classes , los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento ::first-line selecciona solo la primera línea del elemento especificado por el selector.

Cascada y especificidad en CSS:

ivanmuniz528 — 2022-06-15 01:20:53 UTC

```
Cascada:
```

En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.

Un ejemplo claro de este seria el siguiente:

```
P
```
```
  color: red;
```
```
P
```
```
  color: black;
```

Esto seria un CSS en cascada, el CSS va a tener que escoger entre esas dos lineas de codigo, pero el CSS como lo havia mencionado anteriormente cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el code CSS.

```
Espicificidad:
```

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

Un ejemplo claro de este seria el siguiente:

h1.litle#litle{(0,1,1,1)
   background-color: red;
}

h1.litle {(0,0,1,1) 
}
   background-color: black;
}

Algo importante de este ejemplo es que como este caso los dos elementos tienen la misma especifidad se toma en cuenta la cascada osea, el ultimo estilo que se haya aplicado.

Osea CSS a la hora de leer estilos tiene en cuenta la especificidad y la cascada.

Inline-block:

ivanmuniz528 — 2022-06-15 19:20:16 UTC

En esta imagen podemos ver lo que son cada tipo de css-display:

display: block; Esto significa que los elementos ocupan el 100% de el ancho.
Inline: Esto quiere decir como su nombre lo indica, son elementos en linea los cuales el espacio que ocupan es de su propio contenido.
Inline-block: esto quiere decir que por ejemplo, cuando tengamos elementos pèro querramos colocarlos uno al lado del otro coloquemos ahora lo que queremos con esto es que los elementos sigan siendo pero a la vez en linea (uno al lado del otro).

Conceptos:

```
Inline-block:
```

Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

Un elemento block siempre tiene algo de espacio por encima y debajo, que lo separa de los demás elementos, y no acepta ningún otro elemento a su lado - si no está indicado de otra manera ( float ), "como una caja".

```
Block:
```

Un bloque en una página web es un elemento HTML que aparece en una nueva línea, por ejemplo debajo del elemento precedente y encima del siguiente elemento (comúnmente conocido como block-level element).

Un elemento en bloque ocupa todo el espacio de su elemento padre (contenedor), creando así un "bloque".

```
Inline:
```

El CSS inline se utiliza para dar estilo a un elemento HTML específico. Para este tipo de estilo CSS, sólo tendrás que añadir el atributo style a cada etiqueta HTML, sin utilizar selectores. Este tipo de CSS no es realmente recomendable, ya que cada etiqueta HTML debe ser estilizada individualmente.

Flexbox y CSS Grid:

ivanmuniz528 — 2022-06-15 21:41:53 UTC

```
Flexbox:
```

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.

```
CSS Grind:
```

El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.
(Esta herramienta es mucho mas facil y potente para estructaras de paginas web).

Atomic design:

ivanmuniz528 — 2022-06-15 21:51:30 UTC

La metodología “Atomic Design”, o diseño atómico en castellano, es un sistema de trabajo que se basa en la creación de elementos modulares sencillos para crear estructuras de información mucho más complejas, una teoría que creó el diseñador digital Brad Frost.