ESTILOS DE CSS by Vega Lozano Laura Daniela

Selectores,propiedades y valores

laurisdaniela123 — 2022-06-17 16:13:59 UTC

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()

Una regla CSS siempre tiene un selector (el elemento al que quiero modificar) y una declaración (las características que le quiero agregar o cambiar). La declaración va encerrada entre llaves { } y dentro de ella se escriben todas las propiedades con sus valores, que modificarán al selector. Cuando hay más de una propiedad, se separan con punto y coma.

Pseudoclases y pseudoelemento

laurisdaniela123 — 2022-06-17 16:39:04 UTC

Una Pseudoclases CSS es una palabra clave que se añade a los selectores y que especifica un estado especial del elemento seleccionado.

div:hover {
  background-color: #F89B4D;
}

Las pseudoclases, junto con los pseudoelemento, permiten aplicar un estilo a un elemento no sólo en relación con el contenido del árbol de documento.

selector::pseudo-elemento { propiedad: valor; }

Cascada y especificidad en CSS

laurisdaniela123 — 2022-06-17 16:45:50 UTC

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.

h1 {
color: red;
}
h1 {
color: blue;
}

This is my heading.

La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:

Display más usados: block, inlinee inline-block

laurisdaniela123 — 2022-06-17 16:50:55 UTC

display: block: El elemento se ubicará debajo de otro, sin importar el tamaño o el contenido. display: inline: El elemento ocupa el ancho de su contenido y se ubicará a la derecha del otro. display: inline-block: Ocupan todo el del contenido y permite posicionar elementos a la derecha.

block: hace que el comportamiento del elemento sea como un bloque.
inline: el elemento se renderizará en línea con otros elementos.
inline-block: el elemento tendrá un comportamiento mezcla entre los dos anteriores, que ahora voy a describir.

Así, si por ejemplo redefinimos la etiqueta de esta manera y volvemos a refrescar la página del principio, lo que veríamos por pantalla es esto:

Flexbox y CSS Grid

laurisdaniela123 — 2022-06-17 16:56:38 UTC

Grid y flexbox. son dos mecanismos de CSS que resultan especialmente útiles de cara a la creación de páginas web. Comparamos sus principales funcionalidades . Con la ventaja de que ambos pueden trabajar juntos:

En qué destaca Grid
Para diseños 2D (filas y columnas).
CSS Grid es perfecto para construir una imagen más grande. Hace que sea realmente fácil de manejar el diseño de la página .

En qué destaca Flexbox
Flexbox es la mejor opción para alinear el contenido dentro de los elementos.
Utiliza Flexbox para posicionar los detalles más pequeños de un diseño.
Flexbox funciona mejor sólo en una dimensión (filas o columnas).

Atomic design

laurisdaniela123 — 2022-06-17 17:04:00 UTC

Atomic Web Design es una metodología de diseño web e inspirada en la química, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

el Atomic Design es que, al empezar desde el elemento más pequeño, podemos ir construyendo de forma sistemática componentes más grandes y complejos sin recurrir a la necesidad de repetir código y, por ende, tener una hoja de presentación más fácil de manejar y mantener.

Responsive Web Desing mediaquery

laurisdaniela123 — 2022-06-21 15:53:56 UTC

En los diseños web responsive , una media query es un CSS que se utiliza como parámetro para saber cuándo utilizar otra declaración de estilo en base a las dimensiones del dispositivo en donde se visualiza la página web

vamos a ver cómo usar la propiedad media queries para poder personalizar los estilos CSS basándonos en las características del dispositivo como, por ejemplo: tv, pc, Tablet, móvil o si esta horizontal (paisaje) o en vertical (retrato), etc.; con ello y conociento los tamaños más comunes de dispositivos de salida:

320px
480px
600px
768px
900px
1200px