GUIA CSS

CSS BASICO

ESTRUCTURA

Selector: { propiedad : valor; }

SELECTORES

Universal = * { } // El * selecciona de Manera Global
ID = #id-element // El ID tiene que ser Unico
Tipo = etiqueta{ }
atributo = [nameAtributo = "Valor"]{ }
Descendientes = id > tipo > clase > atributo
PseudoClases = b:hover { } // El pseudo se maneja eventos

METODOLOGIA BEM

Esta metolodogia es una forma para reconocer los elementos. Ejemplo:

form__class-select

UNIDADES

font-size: cm | mm | Q | in | pc | pt | p // Unidades de medida

PROPIEDADES DE TEXTOS

font-size: 1m // Tamano de Letra
background-color: #fff // Tamano de Letra
width: 100vw // Ancho de caja
height: 100vw // Alto de caja
font-family: georgina // Tipo de Letra
line-height: 2 // El line height nace del centro de la Letra
font-weight: 400 // Grosor de letra
color: red // Color de Letra
text-align: center // Centra contenido

TIPOGRAFIAS EXTERNAS

Google Fonts

NORMALIZE

Sirve para poner reiniciar los estilos de los navegadores. Pasos a seguir:

Normalize.css

"Normalize.css"

y lo guardamos en la carpeta del proyecto

// Esto hace que la imagen se ponga al 100% en moviles

// Se Calcula las medidas de la caja

CAJAS

Hay dos tipos de cajas: Las que son en linea y bloques:

Bloque: Ocupa todo el espacio del contenedor. Ocupa toda la caja.
Linea: Esto se extendera hasta completar todo el espacio disponible de la caja.

PADDING

El relleno se utiliza para crear espacio alrededor del contenido de un elemento, dentro de los bordes definidos.

padding: 10px
padding-top: 10px
padding-bottom: 10px
padding-left: 10px
padding-right: 10px

HEIGHT

La propiedad height establece la altura de un elemento.

height: 100%

WIDTH

La propiedad width establece el ancho de un elemento.

width: 100%

BOX SIZING

La propiedad CSS box-sizing nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.

box-sizing: border-box; // El siguiente código garantiza que todos los elementos tengan el tamaño de esta forma más intuitiva.

MARGIN

Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los bordes definidos.

margin: 10px // Espaciado entre Cajas. Distancia entre cajas.
margin: auto // Centra bloque que no esta posicionado

BORDES

Las propiedades de borde de CSS le permiten especificar el estilo, el ancho y el color del borde de un elemento.

border: 4px solid blue
border-radius: 50% // Redondea el borde

BOX MODEL

Jerarquia

content => line-height:
padding => padding:
border => border:
margin => margin:

SOMBRAS

La propiedad box-shadow adjunta una o más sombras a un elemento.

box-shadow: 0px 0px 0px 0px color
text-shadow: 0px 0px 0px 0px color // Propiedad que da sombra a al texto

OUTLINE

Un contorno es una línea que se dibuja al rededor de elementos, fuera de los límites del borde, para resaltar un elemento.

outline: 5px solid red;

POSITION

La propiedad position especifica el tipo de método de posicionamiento utilizado para un elemento (estático, relativo, fijo, absoluto o pegajoso). Cuando se posiciona un elemento, hace que adquiera 4 elementos que son: top,bottom,left,rigth.

position:static Un elemento con position: static; no está posicionado de ninguna manera especial; siempre se posiciona de acuerdo con el flujo normal de la página.
position:relative Un elemento con position: relative; se coloca en relación con su posición normal.
position:fixed Un elemento con position: fixed; se coloca en relación con la ventana gráfica, lo que significa que siempre permanece en el mismo lugar, incluso si se desplaza la página.
position:absolute Los elementos de posición absoluta se eliminan del flujo normal y pueden superponerse a los elementos.
position:sticky Hace que el elemento se comporte como en position:relative hasta que, debido al scroll de la página, el elemento es alcanzado por la parte superior del viewport. En ese momento se comporta como fixed, y para que funcione correctamente hay que especificar al menos un valor top, bottom, left o right, en función de si va a ser sticky en un scroll horizontal o vertical.

Z-INDEX

La propiedad z-index especifica el orden de pila de un elemento.
Un elemento con mayor orden de apilamiento siempre está delante de un elemento con menor orden de apilamiento.

NOTA: z-index solo funciona en elementos posicionados (posición: absoluta, posición: relativa, posición: fija o posición: fija) y elementos flexibles (elementos que son hijos directos de elementos display:flex ).

NOTA: Si dos elementos colocados se superponen sin z-index especificar, el último elemento colocado en el código HTML se mostrará en la parte superior. ).

CSS INTERMEDIO

DISPLAY

La propiedad CSS display especifica si un elemento es tratado como block or inline element y el diseño usado por sus hijos, como flow layout(Diseño de Flujo), grid(Cuadricula) o flex(Flexible). Ejm:

display: block;

display: inline;

display: run-in;

OVERFLOW

La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque.

overflow: visible

overflow: hidden

overflow: scroll

overflow: auto

FLOAT

La propiedad CSS float ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del posicionamiento absoluto).

float: left;

float: right;

float: none;

float: inline-start;

float: inline-end;

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.

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

::after

::before

::first-letter

::first-line

::selection

::placeholder

"Se podria decir que es como un EDIT al elemento"

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. 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:
article p:first-child {
               font-size: 120%;
               font-weight: bold;
}

"Se podria decir que es como un EFECTO al elemento"

OBJECT FIT

La propiedad object-fit se usa para especificar cómo se debe cambiar el tamaño de un IMG o VIDEO paraque se ajuste a su contenedor.

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: scale-down

object-fit: none;

object-fit: initial;

object-fit: inherit;

OBJECT POSITION

La propiedad object-position se usa junto con object-fit para especificar cómo se debe colocar un IMG o VIDEO con las coordenadas x/y dentro de su "propio cuadro de contenido".

object-position: position;
object-position: initial;
object-position: inherit;

CURSOR

La propiedad cursor especifica el mouse que se mostrará cuando se apunte sobre un elemento.

cursor: value;

COLOR

La propiedad:color especifica el color del texto.

color: #fff;

RESPONSIVE DESIGN

Cuando utilizamos el término “responsive” (adaptable), nos referimos principalmente a “responsive design” (diseño web adaptable). Esto significa hacer que un sitio web sea accesible y adaptable en todos los devices: tabletas, smartphones, etc.

Técnicas para hacer un diseño responsive

Uso de viewport en la etiqueta metatag.

Uso de Media Queries.

Uso de Max-Width y Min-Width.

Uso de medidas relativas.

Tamaño de fuente en un diseño responsive.

Prueba tus sitios con emuladores.

FLEX BOX

Flex propiedad establece la longitud flexible en elementos flexibles.
Las cosas que se pueden hacer con Flexbox involucran a dos partes fundamentales.
Una es el contenedor y otra los ítems que están dentro de él.
Mas informacion respecto a FLEXBOX clic aqui

Flex Container

Propiedades

flex-direction : row/ row-reverse / column / column-reverse

flex-wrap : wrap / nowrap / wrap-reverse

flex-flow row wrap (flex-direcion flex-wrap) //abreviado

justify-content flex-start / flex-end / center / space-between / space-around / space-evenly

align-items : flex-start / flex-end / center / stretch

align-content : flex-start / flex-end / center / stretch /space-between / space-around

Flex Items

Propiedades

align-self

flex (flex-grow , flex-shrink, flex-basis)

flex-basis

flex-grow

flex-shrink

order

GRID

El módulo de diseño de cuadrícula de CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posiciones.

grid-container

grid-item

grid-cell

grid-tracks

grid-area

grid-line

USO DE GRID CONTAINER E ITEMS

propiedades

grid-template-rows (grid-container)

grid-template-columns (grid-container)
  #unidades de medida "auto" y "fr"

row-gap (grid-container)

column-gap (grid-container)

grid-gap:row (grid-container)

grid-row-start (grid-item)

grid-row-end (grid-item)

grid-column-start (grid-item)

grid-column-end (grid-item)

grid-row (grid-item)

grid-column (grid-item)
repeat (cantidad , tamano/s)

GRID IMPLICITO Y EXPLICITO

propiedades

align-self

flex (flex-grow , flex-shrink, flex-basis)

flex-basis

flex-grow

flex-shrink

order

GRID DINAMICO

propiedades

mimax()

mincontent

max-content
#Cantidad:auto-fill / auto-fit

ALINEACION Y CONTROL DE FLUJO

propiedades

justify-content (horizontal) : stretch / start / center / end

align-content (vertical): stretch / start / center / end
# mas de la flex
: space-arround / space-between / space-evenly

GRID ITEM

propiedades

align-self: stretch / start / center / end

justify-self: stretch / start / center / end

place-self: align-self justify-self

order

AREA GRID

Grid Container

• grid-template-areas: Nombre del Area;

Grid Item

• grid-area: NombreDelArea;

NOMBRES A LAS LINEAS

propiedades

[line-name]
        # se puede reemplazar en: GRID-ROW | GRID-COLUMN

SHORTHAND

propiedades

grid-template: row / columns (grid-container)

grid-templat: area unidad

grid: global para abreviar
#todo esto no es tan recomendado, porque lo hace muy resumido

RESPONSIVE DISEGN (COMPLETO)

@media screen and (min-width: 600px) and (max-width:750px) {
    .div-responsive{
        background: red;
    }
}

CSS AVANZADO

TRANSITION

Las transiciones de CSS le permiten cambiar los valores de propiedad sin problemas, durante un período determinado.

transition

transition-delay: delay/s

transition-duration: duration/s

transition-property: property/ ies - all - none

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | steps(int,star|end) | initial | inherit;

Fuente:Transitions CSS

ANIMATION

Una animación permite que un elemento cambie gradualmente de un estilo a otro.Puede cambiar tantas propiedades CSS como desee, tantas veces como desee.Para usar la animación CSS, primero debe especificar algunos fotogramas clave para la animación.Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos.

@keyframes

animation-name: name

animation-duration: duration

animation-delay: delaye

animation-iteration-count: number

animation-direction: normal | reverse | alternate | alternate-reverse

animation-timing-function: (Transition values)

animation-fill-mode: none | forwards | backwards | both | initial | inherit;r

animation

Fuente Animaciones CSS

TRANSFORM

Las transformaciones CSS le permiten mover, rotar, escalar y sesgar elementos.

transform: translateX(x) - translateY(y)

transform: scale(xy - x,y) - scaleX(x) - scaleY(y)

transform: rotate(angleUnit) - rotateX(angleUnit) - rotateZ(angleUnit) || angleUnit = deg - grad - rad - turn

transform: skew(angleUnit)

Fuente:Transforms CSS

Background

En este capítulo, aprenderá cómo agregar varias imágenes de fondo a un elemento.También aprenderá sobre las siguientes propiedades:

background-color: color

background-image: url()

background-size: x,y, auto, cover, contain

background-position: left - top - bottom - right - center ++ left - bottom - right - center

background-attachment: scroll | fixed | inherit

background-clip: border-box | padding-box | content-box

background-origin: border-box | border-box | padding-box

Fuente:Background CSS

Variables

La var() función se utiliza para insertar el valor de una variable CSS.Para crear una variable con alcance global, declárela dentro del :root selector. El :root selector coincide con el elemento raíz del documento.

var(--name, value)

Variable global

En primer lugar: las variables CSS pueden tener un alcance global o local. Para crear una variable con alcance global, declárela dentro del :root selector. El :root selector coincide con el elemento raíz del documento.
Ejemplo:

:root {
--blue: #1e90ff;
--white: #ffffff;
}

body: { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--white); }

Fuente: Variables CSS

FILTER

Una animación permite que un elemento cambie gradualmente de un estilo a otro.Puede cambiar tantas propiedades CSS como desee, tantas veces como desee.Para usar la animación CSS, primero debe especificar algunos fotogramas clave para la animación.Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos.

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

Fuente Filtros CSS

CLEAR FIX

Los elementos después de un elemento FLOAT fluirán a su alrededor. Use el truco "clearfix" para solucionar el problema.Un clearfix es una forma de que un elemento borrar automáticamente sus elementos hijos para no tener que añadir marcas adicionales. Generalmente se utiliza en diseños de flotadores donde los elementos son flotados para ser apilados horizontalmente.
.clearfix{
float:none;
clear:both;
}

OTROS

Otras propiedades, funciones y selectores curiosos de CSS.

direction: ltr | rtl | initial | inherit

letter-pacing

scroll-behavior: smooth;

user-select: none

text-shadow

Fuente: w3schools CSS