Scribd
Cargar
176 vistas18 páginas

Guia HTML Css en Word

Este documento explica conceptos básicos de HTML y CSS. En HTML, describe las etiquetas semánticas como <header>, <nav>, <article>, <aside> y <footer> y cómo usarlas correctamente. En CSS, explica la estructura básica, tipos de selectores, teoría de especificidad, metodología BEM, unidades, cajas, propiedades y display. El documento proporciona una guía general sobre la organización semántica de HTML y conceptos fundamentales de CSS para dar estilo y diseño a las páginas web.

Cargado por

Maria Judith
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
176 vistas18 páginas

Guia HTML Css en Word

Este documento explica conceptos básicos de HTML y CSS. En HTML, describe las etiquetas semánticas como <header>, <nav>, <article>, <aside> y <footer> y cómo usarlas correctamente. En CSS, explica la estructura básica, tipos de selectores, teoría de especificidad, metodología BEM, unidades, cajas, propiedades y display. El documento proporciona una guía general sobre la organización semántica de HTML y conceptos fundamentales de CSS para dar estilo y diseño a las páginas web.

Cargado por

Maria Judith
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

HTML ORDEN SEMANTICO

<!DOCTYPE html>
<html>
<head> DENTRO DEL HEAD VA TODO EL CODIGO INVISIBLE EN UNA PAGINA WEB
<link rel="stylesheet" type="text/css" href="styles.css">ESTE LINK LLAMA AL ARCHIVO CSS
<meta charset="utf-8"> ESTE META CORRIGE LOS ERRORES ORTOGRAFICOS DEL CODIGO
<meta name="viewport" content="width=device-width, initial-scale=1.0">DEFINE EL AREA DE
PANTALLA DEL CUERPO DEL CODIGO
<script src="https://kit.fontawesome.com/7086fe80f4.js" crossorigin="anonymous"></script> ESTE
SCRIPT LLAMA AL CODIGO DE ICONOS PARA TU CODIGO
<title>GUIA DE PAGINA WEB</title>
</head>
<body>
<header> es el encabezado y al agregarle el nav toma mejor semantica</header>
<nav>nav es el navegador de la pagina deberia ir en el header para colocar los enlaces de la barra deberiamos una
lista desordenada y dentro de esta ingresar los elementos li(<ul><li><a href="seccionesde la pagina">creadas en paginas a
parte</a></li></ul>)</nav>

<article>es un articulo justamente y puede ser dividido por secciones <section>se usa para dividir los articulos ejemplo:
(<article><section><h1></h1><h2></h2><p></p></section></article>)</section></article>
<aside>barra de navegacion secundaria o un contenido extra </aside>
<footer>pie de pagina</footer>

PRUEBA DE UN NAVEGADOR
<header>
<nav class="nav">
<ul class="menu">
<li class="nav-li fas fa-home"><a href="">Inicio</a></li>
<li class="nav-li fas fa-id-card-alt"> <a href="">Sobre nosotros</a></li>
<li class="nav-li fas fa-hand-holdng-usd"> <a href="">Gana dinero</a></li class="nav-li">
<li class="nav-li fas fa-question-circle"> <a href="">Ayuda</a></li>
</ul>

<ul class="responsive-menu">
<li class="nav-li-responsive fas fa-home"> <a href="">Inicio</a></li>
<li class="nav-li-responsive fas fa-id-card-alt"> <a href="">Sobre nosotros</a></li>
<li class="nav-li-responsive fas fa-hand-holdng-usd"> <a href="">Gana dinero</a></li>
<li class="nav-li-responsive fas fa-question-circle"> <a href="">Ayuda</a></li>
</ul>
</nav>
</header>

</body>
</html>
CSS APUNTES
css es un lenguaje que trabaja con hojas de estilo en cascada y se utiliza para darle estilo a las hojas de
codigo ya sea html o cualquier lenguaje compatible con css

Estructura CSS

el css se estructura eligiendo el selector luego las llaves {y dentro de las llaves la propiedad} el selector seria
la la etiqueta o clases del html y la propiedad es como cambiar el selector

Tipos de Selectores de css

selector universal (*) selecciona todos los elementos del htm y es *

selector de tipo son los que seleccionamos por elemento por ejemplo el h1 button etc etc

luego podemos seleccionar por clases (.) que son los atributos de html.

selector por id (#) deben ser unicos

selector por atributo [y se coloca el atributo creado en el html]

selector por descendencia se usa colocando la etiquita que se encuentra mas afuera hacia adentro por
ejemblo (<div><h1><p>ffdsfs</p></h1></div>) colocando div > h1 >p estariamos seleccionando el p para
darle estilo

selector por pseudo clases las cuales por ejemplo hace que cuando paso el mouse por algun elemento este
cambie y se llama con los dos puntos (:)
TEORIA DE ESPECIFIDAD
En css la teoria de especifidad significa que si una seleccion de estilo tiene mas orden jerarquico que otra a
la que le demos un estilo anteriormente o posteriormente esta toma el orden jerarquico mas alto

!importan
estilos en linea
identficadores(id)
{clases
pseudo-clases
atributos}estan en el mismo nivel jerarquico
{elementos
pseudo- elementos}mismo nivel jerarquico
METODOLOGIA BEM
BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML del
documento.
Es decir, es una manera de nombrar las clases de los nodos de tu HTML para posteriormente
atacarlos con CSS de una manera fácil, sencilla y clara.

evita seleccionar muchas clases se selecciona y se selecciona con 2 guiones bajos para la etiqueta y con 2
guiones medios marcas que uno es distinto como por ejemplo

<!-- EJEMPLO 1 --><div class="block">


<div class="block__element">Elem 1</div>
<div class="block__element">Elem 2</div>
<div class="block__element block__element--modifier">Elem 3</div></div>
<!-- EJEMPLO 2 --><div class="item item--modifier">
<div class="item__element">Elem 1</div>
<div class="item__element">
<div class="item__another-element">Elem 2</div>
<div class="item__another-element">Elem 3</div>
</div>
<div class="item__element item__element--modifier">Elem 4</div></div>

Y asi quedaria css con la metodologia bem aplicada

// EJEMPLO 1.block{ color: inherit; }.block__element{ color: inherit;


}.block__element--modifier{ color: inherit; }
// EJEMPLO 2.item{ color: inherit; }.item--modifier{ color: inherit;
}.item__element{ color: inherit; }.item__element--modifier{ color: inherit;
}.item__another-element{ color: inherit; }

Teoria de Medidas
unidades relativas son las que pueden variar y se adaptan a las distintas plataformas con responsive design

son rem y em 1 em son 16 px por defecto pero se puede cambiar heredando declarando en la caja
contenedora mas grande a la propiedad
unidades fijas serian px cm mm pt

font-size: tamaño de letra

font-family: tipo de letra

line-heigth: indica el espacio que ocupa la letra hacia arriba y hacia abajo

font-weigth: cambia el grosor de la letra

Normalize
NORMALIZE es un archivo con estilos que normaliza el diseño del navegador y es importante resetear el
estilo para que poder trabajar sin problemas en css

 ¿Cómo usarlo en nuestros proyectos?


Para usarlo en nuestros proyectos es muy sencillo, basta con seguir los siguientes pasos:

1) Descargar el fichero desde su página oficial http://necolas.github.io/normalize.css/ y colocarlo en la carpeta


de nuestra web.

Archivo Normalize CSS

2) Al tratarse de una hoja de estilo (.css), debe ser tratado como tal, y por tanto simplemente hay que
referenciarlo en el <head> del documento html <link rel="stylesheet" href="normalize.css" />.
Muy importante colocar la referencia a este fichero antes que cualquier otro estilo.

3) Listo!, ya tendríamos normalizada nuestra página web, sin configuraciones ni instalaciones. Ya se debería
ver igual en todos los navegadores.
box-sizing: border-box hace que una caja sea siempre sea del mismo tamaño que la definimos antes en
cualquier navegador

Teoria de cajas
teoria de cajas hay 2 tipos en lineas y en bloque
las de bloque se ajustan al ancho del bloque
mientras los de linea solo ocupan el espacio que usa el contenido de la caja
con la propiedad display se puede cambar el comportamiento de estos elementos en line o en bloque

Propiedades de cajas

propiedades de caja son aquellas que modifican las cajas del html

background-color: cambia el color de fondo de la caja


pading es la distancia entre el texto y los bordes de la caja
padding-top distancia entre texto y borde superior de la caja
padding-left distancia entre texto y borde derecho de la caja
padding-rigth distancia entre texto y borde izquerdo de la caja
padding-bottom distancia entre texto y borde inferior de la caja
el padding se puede dar tambien con simplemente padding para darle y hay que comprender el orden de
cada tamaño
top rigth botom y left

heigth: alto
width: ancho

margin: es la distancia entre 2 cajas y tiene las misma propiedades que el padding

border-radio redonde los bordes de la caja contenedora


border es el borde de la caja hay muchos tipos pero el mas comun es solid

box-shadow: sombra de la caja y movemos el eje x 2px eje y 5px tamaño de desenfoque o tamaño de
sombra el borde que va a tener la sombra 0 y el color por ultimo

text-shadow es lo mismo solo que no tiene el relleno

transform: rotate(rota la caja con los grados que le demos 45 deg) el transform tiene muchas propiedades
outline es un shourhan que significa que es una propiedad acortada como el padding o sea que solo con
outline se puede definir

el outline genera un border sin afectar a la caja por lo que no la modifica solo resalta el objeto

position tenemos distntas propiedades de ella y cuando algo esta posicionado significa que afecta el flujo
de html que es orden de los elementos

position: relative te mueve la caja sin modificar el espacio por lo que si uno la baja el lugar de la caja aun se
va a mantener para esto se le debe dar un

top left rigth bottom estas tienen jerarquia ya que top y left son de mayor lvl jerarquico

position : absolute hace que el espacio reservado ya no este reservado por lo que si le colocas esta
propiedad a una caja la de abajo sube
con esta propiedad la caja se ajusta al tamaño del contenido
en esta propiedad el top sera el contenedor de esta y asi lo mismo con las propiedades de esta caja

position: fixed es igual que el absolute pero este queda fijado por ende fija la caja en una poscion de la
ventana windows

position:stcky es una mezcla entre relative y fixed

PROPIEDAD DISPLAY
MODIFICA EL COMPORTAMIENTO DE LAS CAJAS TIENE MUCHAS PROPIEDADES PERO LAS MAS IMPORTANTES SON

BLOCK = ORDENA LOS ELEMENTO EN EL BLOQUE POR EJEMPLO H1 Y LAS COLOCA UNA DEBAJO DE LA OTRA
INLINE = ORDENA LOS ELEMENTOS EN LA LINEA DEL CONTENIDO POR EJEMPLO DE UN B Y SE USA MAS QUE NADA PARA TEXTO
Y LAS COLOCA UNA AL LADO DE LA OTRA Y ES PARA EL CONTENIDO SOLAMENTE

INLINE-BLOCK = SE LE PUEDE DAR UN ANCHO Y ALTO A LA CAJA MEZCLA EL INLINE Y EL BLOCK MOSTRANDO LA CAJA Y EL
CONTENIDO

FLEX = FLEX Y GRID SE COMPORTAN CASI COMO EL BLOCK


GRID =

INLINE-FLEX
INLINE-GIRD

OVERFLOW

HACE QUE EL SOBRANTE DE UNA CAJA CONTENEDORA SE ENCIERRE EN LA MISMA Y PERMITIRTE SCROLEAR EN ELLA O SEA
CORRE CON LA RUEDITA DEL MOUSE EL TEXTO
SEGUN LAS PROPIEDADES QUE LE PONGAMOS
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).

EL USO VIABLE ES EL DE COLOCAR UNA IMAGEN ENVUELTA EN TEXTO

Pseudo Elementos
PSEUDO-ELEMENTOS SE APLICAN A UN ELEMENTO

Y ELEGIMOS LA CLASE DEL ELEMENTO + :: Y LA PROPIEDAD DEL PSEUDO ELEMENTO

::FIRST-LINE MARCA LA PRIMERA LINEA DE UN ELEMENTO


::FIRST-LETTER PRIMERA LETRA DE UN ELEMENTO

::PLACEHOLDER ES LO QUE APARECE DENTRO DE LOS INPUT Y CON EL PSEUDO ELEMENTO DEL MISMO SE LE PUEDE DAR EL
ESTILO QUE QUERAMOS

::SELECTION ES PARA MODIFICAR EL ESTILO CUANDO SELECCIONAMOS CON EL MOUSE

::AFTER SON HIJOS DEL ELEMENTO AL QUE SE APLICAN Y NECESITAN LA PROPIEDAD CONTENT Y SON ELEMENTOS EN LINEAS
::BEFORE SON HIJOS DEL ELEMENTO AL QUE SE APLICAN Y NECESITAN LA PROPIEDAD CONTENT Y SON ELEMENTOS EN LINEAS
NO DEJA SELECCIONAR LO QUE COLOQUES EN EL BEFORE

after y before crean una etiqueta hijo dentro de otra etiqueta pero con acciones limitadas

Pseudo Clases

PSEUDO CLASES trabajan como los pseudo elementos y sus propiedades escuchan acciones

:hover hace un focus cuando pasas con el mouse por arriba

:link cambia el color de un link que aun no visitamos

:visited cambia el estilo de los link o elementos que ya vsite y juega con la jerarquia de css y esta por debajo
de id

:active al dejar apretado un boton cambia los estilos


:focus se aplica mas a los imputs y cambia mientras mantengo en focus el input

:lang es una funcion que se le debe pasar en el parametro el lenguaje y se usa para modificar el estilo de
una etiqueta a la que le demos el lenguaje

object-fit: se aplica a las imagenes principalmente

:Fil

:Contain hace que la resolucion de la imagen se ajuste al contenido centrandola en el mismo y dejando un
borde

:Cover se ajusta al contenedor sin dejar bordes

:None aplica las resoluciones por defecto

:Scale-Down aplica las resoluciones mas chicas ya sea de la caja o de la imagen

luego tenemos object-position que es para elegir la pocion de la imagen en el contenedor

cursor es una propiedad que cambia el cursor del mouse al estar en un elemento o caja

Colores

hexahecimal es un sistema que trabaja con 16 unidades


por lo que los f es el valor maximo y trabaja con 3 o 6 unidades y el minimo seria 0 y trabaja con numeros
hasta el 10 y con las letras hasta la f
hay una pagina de color picker que te da los colores

Responsive

responsive design adapta una resolucion con varios dispositivos


y mobile first que para el ceo de google es mejor crear una web adaptada a mobiles primeramente

para solucionar los problemas de resolucion se usa una media con @media only and(max-width: px)esto
hace que cuando la pantalla alcanze resoluciones a los pixeles que le demos va a cambiar
para que esto haga efecto es necesario activar en el html la etiqueta meta viewport
Flex box

Flex box viene de caja flexible con flex box se maqueta y maneja el layout en una sola
dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo
bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

Flex requiere de 2 cosas el flex container y el flex bloque

Flex box trabaja sobre los ejes x e y(+)donde para seleccionar cada eje se hace a travez
de sus propiedades Donde main axis seria el eje horizontal o eje x obviamente este debe tener
un inicio y un final donde el inicio se declara como main-start y el final como main-end.

Y luego tenemos el cross axis donde tambien tiene un inicio y fin donde el inicio se declara
como cross-starr y cross-end Y con css podemos cambiar este flujo de direcciones

Y con display:flex para trabajar que es el que usaremos para que un contenedor tenga los flex
items y con estos los oredenaremos en nuestra pagina usando el flex box para colocarlos donde

queramos sobre el eje x o eje y haciendo que en base al contenido se mantenga la altura

haciendo que 2 cajas tengan la misma altura

para cambiar la direccion de un eje debemos usar la propiedad

Propiedades de main-axis

flex-direction: esta tiene varias posciones:

row que dice que se mantenga como va las filas

row-reverse hace que los items vayan sobre el mismo eje x pero iniciando desde el main-end

column que hace que los items se comporten como columnas

column-reverse hace lo mismo que el row-reverse pero en columna

flex-wrap:wrap hace que un item flex no cambie su resolucon si no que se pase hacia abajo

flex-flow:flow es una mezcla de flex wrap y flex direcction haciendo mas optimo el codigo

justify-contain te centra el item flex y tiene varios valores los cuales son

justify-contain:center centra el contenido

justify-contain:space-arround trabaja casi como un margin:auto donde centra todo con un espacio
entre cajas

justify-contain:space-between hace que las cajas tengan la mayor cantidad de espacio entre ellas
posible
justify-contain:space-evenly da un margin especifico para que cada caja tenga exactamente el
mismo espacio dentro del viewport

Propiedades de cross-axis
align-items: se usa solo cuando hay solo una linea de items que son flex items

align-items:fles-start alinea el flex items ajustandoce al contenido del flex item

align-items:center hace que se centre verticalmente

align-items:flex-end lo lleva al final del eje y

align-items:stretch

align-items:baseline genera casi el mismo efecto que wrap pero en end de y

align-contain: se usa cuando hay mas de una linea de items que son flex items

Propiedades de los items


align-self: te alinea un item flex sobre el cross-axis

flex-grow: el espacio sobrante lo reparte entre todas las cajas y a cada caja se le puede asignar si
queremos cierta cantidad de espacio sobrante
con numeros

flex-shrink: decide que espacio va a ocupar cada caja diciendo cuanto espacio puede ceder
segun el width que le demos

flex-basis: es como el width pero lo toma como mas importante dentro de los flex box

flex agrupa las anteriores en una sola o sea es un shourjan


flex: flex-grow

flex: flex-shrink

flex: flex-basis

Order: es como un z index pero en el eje en que pociociona en el main axis

GRID
grid es un estilo de layout y es un valor de la Propiedad de display y se trabaja en grilla por lo que

se dice que se trabaja por celdas

conceptos basicos

grid container es como el flex container y hace que cuando le doy a un contenedor padre la
propiedad grid container este se comporte por grilla

grid item son todos los elementos dentro del grid container y son los hijos directos del
conntenedor

grid cell son las celdas que le asignamos a los items

grid tracks(column y row)son las filas o columnas del contenedor grid

grid area son las areas que nosotros seleccionamos o defnimos dentro del contenedor

grid line(column line y row line)son las lineas de cada linea del contenedor ya sean las de cada
columna o cada fila

Propiedades de grid container

grid-template-rows : le da una medida a cada fila dandole el alto de esta

grid-template-columns le da una medida a las columnas dandole el ancho de estas

el grid grid-template-columns tiene una propiedad repeat la cual con el numero que le asignemos
repitiendo la funcion (grid-template-rows:repeat(1,100px))
unidades auto y fr lo que hacen por ejemplo fr darle el espaco que sobra a las filas o columnas
donde se aplique trabajando asi como el flex row

grid-row-gap es una especie de margin pero entre celdas

grid-column-gap

grid-gap: row column

Propiedades de grid item

grid-row-start

grid-row-end

grid-column-start

grid-column-end

grid-column con esta propiedad podemos seleccionar el area de trabajo por ejemplo el tamaño de
2 celdas siendo seleccionadas por columnas(1/2) y lo selecciona por lineas

grid-row es igual que el column pero selecciona el tamaño de filas tambien posee una propiedad
llamada span que esta hace que ocupe el espacio por columna o filas y no por lineas

GRID IMPLCITO Y EXPLICITO

AGREGA 3 PROPIEDADES NUEVAS DEL GRID IMPLICITO

GRID-AUTO-ROWS(IGUAL QUE EL TEMPLATE)


GRID-AUTO-COLUMNS(IGUAL QUE EL TEMPLATE)
GRID-AUTO-FLOW: row(Default), column y dense

GRID DINAMICO
minmax() le da el ancho y mnimo o maximo a la selda implementado en el repeat
mincontent valores que se colocan generalmente en el repeat (grid-template-columns:
repeat(3,max-content O si no min-content)) y esto hace que la celda se ajuste al contenido
max-content
cantidad:

auto-fill hace que genere la cantidad de columnas posbles en el contenedor


auto-fit tira las columnas hacia abajo y las escala

----------Alineacion y Control de Flujo-------

Diferencia con Flex: es que hay varios tipos de alineacion individual por contenedor y por ITEM

la alineacion es dentro de cada celda y no alineacion total del flex container


cada celda seria un "flex container"

("Propiedades del grid-container")

justify-items (horizontalmente)
align-items(verticalmente)

stretch(default) - star - center - end

place-items: align-items justify-items

________alineacion de filas y columnas_________


justify-content (horizontalmente)
align-content(verticalmente)

stretch(default) - star - center - end


mas las de flex:
space-arround
space-between
space-evenly

APLICADO AL GRID ITEM


align-self
justify-self
place-self: align-self justify-self

stretch(default) - start - center - end

oreder (igual que en flex)


GRID AREA
AL GRID CONTAINER

grid-template-area: "nombre del area o areas"

AL GRID ITEM

grid-area:"nombre del area"

NOMBRES A LAS LINEAS

[line-name]

se puede reemplazar en grid.row | grid-column

SHORTHAND

grid-template: row / columns (grid container)


grid-template: area unidad

______________RESPONSIVE DESIGN (COMPLETO)______________

Estructuras flexibles (contenedores flexibles, imagenes y videos flexibles)


Media Queries

@Media se usa en consultas de medios para aplicar diferentes estilos para diferentes tipos /
dispositivos de medios.

_ancho y alto de la ventana grafica


_ancho y altos del dispositivo
_orientacion (¿la tableta / telefono esta en modo horzontal o vertical?)
_resolucion

all
Apto para todos los dispositivos.

print
destinado a material impreso y visualizacion de documentos en una pantalla en el
modo vista previa de impresion.

screen

Destinado principalmente a las pantallas.

speech
Destinado a sintetizadores de voz.

Operadores AND | OR

orientation: landscape y portrait

mobile first crea una web primero para mobile

__________TRANSITION_________
transition es 1 propiedad que permite realizar transicones en los cambios

transition:

transition-property: property/ies - all - none

transition-duration: duration/s

transition-delay: delay/s

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end |


steps(int, start,end) | initial | inherit;

transition:

__________ANMACONES___________

funciona como las transition solo que requiere de la propiedad

@keyframs

anmation-name:name

animation-duration: duration

animation-delay: delay

animation-timing-function: (transition values)(y cubic besier para cambiar el tipo de animacion)

animation-iteration-count: number
animation-fill-mode: none | forwards | backwards | both | inithial | inerith;

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

____________TRANSFORM_______

transform: translateX(x) - translateY(y) translate(x-y)(si usamos porcentajes son porcentajes


relativos al elemento)-recomendado para animar

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

transform: rotate(angleUnit) - rotateX(angleUnit) - rotateZ(angleUnit) - rotate3D(angleUnit) ||


angleUnit=deg - grad - rad - turn

transform: skew(angleUnit)

buscar en w3school

con clip phat generator en google le podemos dar otras formas

_____Background____

background-color: color(le da el color al fondo del contenedor)

background-image: url()(con la url le da la img al fondo del contenedor)

background-size: x,y,auto,cover,contain (hace que la imagen del url se ajuste al contenedor)

background-position: left-top-botom-right-center- ++ -left-top-botom-right-center()(mezcla 2 de las


propiedades en el fondo del contenedor disiendole donde ubicarse en la caja)

background-attachment: scroll(hace que se haga fondo del objeto contenedor) fixed(fija la imagen
haciendo que cuando uno scrolea se vea atras) inherit()

background-clip: border-box() padding-box() content-box()(dice desde donde muestra la img ya


sea desde el borde padding etc recortandola);

background-origin: origen del a foto(valores de arriba)lo mismo que clip pero crea la imagen a
partir de la propiedad

__________variables en css_______

una variablle es un espacio que se almacena en memoria

variables globales son las que se ajustan a cualquier selector iniciandola con :root{--var-name} y
se las llama en los estilos con la funcion var(--var-nombre)
--varName
var()

_________Filter____________
none

blur(px)

brightness(0 - 1)

contrast(number or %)

drop-shadow(medidas) le da el efecto de sombra a la imagen

grayscale(%)

hue-rotate(deg)

invert(%)

opacity(%)

saturate(%)

sepia(%)

url("flters.svg#filter-id");

CURIOSIDADES DE CSS

direction: ltr(por defecto) | rtl(efecto espejo en un texto) | initial() | inherit;

letter spacing: separa las letras la cxantidad que digamos en px

scroll-behavior aliviana o no el movimiento del scroll dandole al body en un enlace

user-selected hace que se pueda o no seleccionar el texto

text-shadow le da sombra al texto

------- attr() -------

selectores: buscar en w3school+

También podría gustarte