Fundamentos de CSS by Amanda Forero

RESPONSIVE DESIGN EN CSS,MEDIAQUERY

amandaforero — 2022-10-11 14:37:02 UTC

Las media queries son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del viewport del navegador).

Se utilizan para:

Aplicar estilos condicionales con las reglas-at @media e @import de CSS.
Indicar medios específicos en los elementos , y otros elementos HTML.

Existen los siguientes tipos de medios:

Tipo de medioSignificadoscreen | Monitores o pantallas de ordenador. Es el más común.
print | Documentos de medios impresos o pantallas de previsualización de impresión.
speech | Lectores de texto para invidentes (Antes aural, el cuál ya está obsoleto).
all | Todos los dispositivos o medios. El que se utiliza por defecto.

Recordemos que con el siguiente fragmento de código HTML estamos indicando que el nuevo ancho de la pantalla es el ancho del dispositivo, por lo que el aspecto del viewport se va a adaptar consecuentemente:

SELECTORES

amandaforero — 2022-10-11 14:37:11 UTC

Los selectores se utilizan para delimitar los elementos HTML de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.
Tipos de selectores:

Selector de tipo

Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
Ejemplo: input se aplicará a cualquier elemento .

Selector de clase

Selecciona todos los elementos que tienen el atributo de class especificado.
Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".

Selector de ID

Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".

Selector universal

Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
Ejemplo: * se aplicará a todos los elementos del documento.

Selector de atributo

Selecciona elementos basándose en el valor de un determinado atributo.
Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).

PSEUDOCLASES Y PSEUDOELEMENTOS

amandaforero — 2022-10-11 14:37:20 UTC

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. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.

Las pseudoclases son palabras clave que comienzan con dos puntos:

:pseudo-class-name

Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML.

Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de acción de usuario, que también reciben el nombre de pseudoclases dinámicas, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:

:hover: solo interviene si el usuario pasa el cursor sobre un elemento, normalmente un enlace.
:focus: solo interviene si el usuario selecciona el elemento con los controles del teclado.

CASCADA Y ESPECIFICIDAD

amandaforero — 2022-10-11 14:37:30 UTC

La forma en que se comporta la cascada es la clave para comprender el CSS.

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.

Especificidad

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:

Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.
Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo class dado), y por tanto recibe una puntuación mayor.

DISPLAY MÁS USADOS: BLOCK,INLINE E INLINE-BLOCK

amandaforero — 2022-10-11 14:37:38 UTC

La propiedad display establece los tipos de visualización interna y externa de un elemento.
Además de los Diferentes Tipos de caja de Visualizacion, el valor de none permite Desactivar la Visualizacion DE UN Elemento; cuando no se utiliza none, todos los elementos descendentes también quedan desactivados. El documento se procesa como si el elemento no existiera en el árbol de documentos.

Block : El elemento genera un cuadro de elemento de bloque.
Inline : El elemento genera uno o más cuadros de elemento en línea.

En comparación con display: inline, la principal diferencia es que display: inline-blockpermite establecer un ancho y alto en el elemento.

Además, con display: inline-block, se respetan los márgenes/rellenos superior e inferior, pero con display: inlineno.

En comparación con display: block, la principal diferencia es que display: inline-blockno agrega un salto de línea después del elemento, por lo que el elemento puede ubicarse junto a otros elementos.

FLEXBOX Y CSS GRID

amandaforero — 2022-10-11 14:37:47 UTC

Grid y flexbox

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.
Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

¿Necesito controlar el diseño únicamente por filas o por columnas? – usa flexbox
¿Necesito controlar el diseño por filas y por columnas? – usa grid

ATOMIC DESIGN

amandaforero — 2022-10-11 14:37:55 UTC

Descrito por Brad Frost en su blog, el Atomic Web Design es una metodología de diseño web que toma nota de OOCSS e inspirada en la química, en la cual Frost replantea la estructuración por componentes reusables con clases semánticas a la cual la mayoría de los diseñadores estamos acostumbrados (e.j. .widget o .media que podamos definir en nuestros temas) y sugiere que partamos desde la unidad más pequeña e indivisible, o atómica, en nuestro diseño: inputs, labels, botones, otros HTML tags que vayamos a usar, incluso elementos más abstractos como paletas de colores, fonts y hasta animaciones.

Una vez que se hayan definido todos los “átomos” a usar, entonces se pasa a estructurar las moléculas o bien la creación de componentes sencillos, generalmente con un uso específico en nuestra página y posiblemente reutilizable. Por ejemplo, la unión de un “átomo” de label, un “átomo” de input, un “átomo” de button, un “átomo” de un color específico y un “átomo” de font, pueden unirse para crear una “molécula” de barra de búsqueda. Así es cómo, según lo explica Frost, podemos eventualmente definir organismos (regiones definidas de una página) y eventualmente, plantillas y páginas.

PROPIEDADES Y VALORES

amandaforero — 2022-10-11 14:58:41 UTC

https://carontestudio.com/blog/listado-de-propiedades-css/

Puede definir propiedades de reglas CSS, como la fuente del texto, la imagen y el color de fondo, las propiedades de espaciado y diseño y el aspecto de los elementos de una lista.
Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite