Please enable JavaScript.
Coggle requires JavaScript to display documents.
CURSO HTML-CSS - Coggle Diagram
CURSO HTML-CSS
Entendiendo la web
World wide web (www)
Configuramos la computadora para enviar datos a otras computadoras a traves de internet, una vez hecho obtendremos un enlace ej:
https://youtu.be./hsdjhjsh
. Con este enlace una persona puede acceder a traves de un navegador para visualizar su contenido
Se comparte informacion de una computadora a otra (pueden ser videos, imagenes, etc)
utilizar una URL correcta
cargar a un servidor la informacion y darle una forma a otros usuarios que si lo buaque en la barra de navegacion puedan entrar, eso es un enlace/ URL
el enlace solicita a mi computadora que muestre el contenido
NAVEGADORES
OPERA
MOZILLA
GOOGLE
BRAVE
Microsoft EDGE
Etc
desde mi computadora mando una peticion al SERVIDOR, a traves de la URL y el servidor que contiene el archivo va a saber que estoy intentando acceder a lo que contiene, puede darme como no depende de su configuracion
Si u7n servidor contiene una pagina web, cunado me mande el contenido lo que voy a ver es codigo en html/css, por eso necesitamos los navegadores
pagina web, conjunto de codigos para que un navegador recibe este codigo y pueda interpretarlo
Las paginas web son un archivo de texto con codigo, que es leido e interpretado por el navegador
Los navegadores son programas para leer los codigos e iterpretarlos de los archivos de pagina web
Abrimos nuestro navegador, escribimos la URL del servidor que queremos que nos muestre informacion, ese servidor recibe la solicitud del navegador y responde con todo el archivo de codigo de la pagina web.El navegador recibe el codigo, lo interpreta y lo transforma en la pagina
Entendiendo HTML y CSS
Para que sirve CSS
Para no usar un codigo diferente para cada navegador, hacerlo mas eficiente
Establece un estandar que todos los navegadores tienen que cumplir para que los programadores lo que hagan con CSS sea decirle cuales van a ser las propiedades de ese elemento, es decir agarrar las propiedades del navegador y modificarlas, diciendole al navegador como queremos que sea
Le dice a los navegadores cuales son las propiedades estandar que cada elemento HTML tiene que tener, sirve para que todos los navegadores tengan propiedades similares
Se encarga de definir como se debe mostrar los elementos de una pagina web
Como funciona CSS
consta de un selector: .selector{
color: azul;
tamaño: 16px;
margen: 20px
borde: negro;
}
el bloque de las declaraciones tiene todas las propiedades que queremos modificar y cual va a ser el valor que queremos que tengan
selector hace referencia al elemento HTML que queremos modificar sus propiedades
Funciona mediante reglas de estilos por ej. podemos definir el color, tamaño, margen, borde etc
Para que srive HTML
Cada elemento es un bloque o algo que da la informacion extra al bloque
Cada cosa que agreguemos es un elemento dentro de nuestra estructura
Loo que hacemos es armar la estructura de nuestra pagina web
estos elementos se llaman tag o etiquetas porque etiquetan el contenido por ejemplo <b> texto en negrita
define todos los elemtos de una pagina
Las caracteristicas eran declaradas por el navegador por ej. tamaño de letra, color, margen, borde
Se centra en crear estructura y elementos de una pagina web
Que es CSS?
Cascading Style Sheets(Hoja de estilo en cascada)
CSS agarra los elementos que se crearon con HTML y modifica todas sus propiedades
Que es HTML?
Significa Hypertext Markup Languaje(lenguaje marcado de hipertexto)
Lenguaje de marcado agarra texto y lo representa diferente es decir necesita un programa que interpreta que esta quieriendo decir o mostrar
Para que pueda funcionar debe ser interpretado por otro programa con su lenguaje
Editor de codigo
IDE son editores de codigo mas completo, con un editor integrado
programa que nos ayuda escribir el codigo y evitar errores
Index.html
porque los servidores estan configurados en que la pagina que tienen que ir a buscar es el index
.html porque es el formato
< abre una etiqueta
<tag>Contenido</tag> (etiqueta)
Siempre tienen una función especifica
Las etiquetas que dan estilo no son recomendables en HTML, ya que se realiza en CSS
Son importantes utilizarlas correctamente ya que el navegador puede entenderlas y posicionarlas mejor en el buscador
<h1>TITULO IMPORTANTE</h1>
<h2>SUBTITULO </h2>
HTML BASICO
Estructura de pagina web
Parrafos y encabezados
Lo importante de cada parrafo es que tengan una idea y un punto especifico
PARRAFOS
ENCABEZADOS
Tenemos 6 tipos, h1, h2, h3, h4, h5, h6
Etiqueta: <p>Contenido</p>
<h1>TITULO PRINCIPAL</h1>
Por pagina web se utiliza un h1
El h1 es la etiqueta que tiene mucha importancia en el posicionamiento web(Seo)
Los demas h2 a h6 podemos utilizar las veces que queramos
<!DOCTYPE html>
<html lang= "en">
<head>
<title>Document</title>
</head>
<body>
contenido
</body>
</html>
<!DOCTYPE html>
Etiqueta
define la version html que estamos usando
NO se cierra
<title>Document</title>
define el titulo de la pestaña
<html></html>
Define la estructura de la pagina web todo lo que este dentro
<body></body>
Toda la parte visual de la pagina web
representa el contenido del documento
<head></head>
Transmite la informacion de la pagina(no podemos ver en la pagina web)
coleccion de metadatos para el documento
lang= "en"
atributo que significa english
LISTAS
Listas ordenadas
Etiqueta: <ol>li</ol>
Listas desordenadas
Son listas pero el orden no importa, por ej: barra de navegacion
Etiqueta: <ul>li</ul>
Tienen minis elementos: etiqueta: <li>Elemento 1</li>
Son list items
Cada li es algo diferente en la lista
Una pagina web es un archivo
Sitio web es un conjunto de paginas web que se interconectan entre si y debemos enlazarlos(enlaces)
Enlaces
Etiqueta: <a href=" "> </a>
Contiene un atributo, que son propiedades de los elementos
target="_blank"
atributo para interconectar enlaces de otra pag web y abrirlas en una nueva pestaña
tittle=" "
nos pide informacion sobre un elemento para mostrarlo cuando pase el mouse por encima
href="enlace"
atributo para interconectar enlaces de otras paginas web, se abre en la misma pestaña
Estructura
Enlace externo
<a href="
https://enlace.com/>nombre
enlace</a>"
Buena practica
Se abre en la misma pestaña la pag web
Enlace interno
<a href="enlace.com/>nombre enlace</a>"
Enlace que se abre en otra pestaña
<a href="https://enlace.com/" target= "_blank" >nombre enlace</a>"
es una buena practica que se destaquen de alguna forma ej subrayado
Imágenes y rutas
imagenes
etiqueta: <img>
atributo: src="nombre imagen.tipo"
las imagenes se realizan con una etiqueta se se autocierra
<img src="nombre_imagen.tipo">
Por si la imagen no carga/ se rompe usamos el atributo alt para describir de que trata
<img src="nombreimagen.tipo" alt="descripción imagen">
Rutas
Rutas absolutas
Son rutas que son absolutas por donde lo mires ya que no importa desde donde entremos, por ej entrar al enlace de Instagram desde cualquier dispositivo
Rutas relativas
buena practica
../ vuelve una carpeta hacia atras y ../../ dos hacia atras
nombre_carpeta/nombre_carpeta: sirve para entrar a carpetas
<a href="../nombre_carpeta"
<img src="nombre_imagen/nombre_imagen" sirve para entrar a otras imagenes
Sirve para acceder a imagenes, enlaces, etc que se encuentran en otros archivos
Formularios
etiqueta: <form></form>
estructura:<form>
input type="tipo accion"
</form>
segun el tipo de dato de lo que queremos pedir al usuario usamos un tipo de input diferente
Forma de pedirle datos al usuario. ej: dame un nombre, email o color
estructura: <form>
<input>
type(tipear)= "submit" value="enviar"
</form>
value sirve para escribir dentro lo que queremos solicitar y debemos borrar
tipos de forms
<form>input type="email"</form>
escribir solo formato email
<form>input type="checkbox"</form>
caja seleccionar/ no seleccionar
<form>input type="text"</form>
Escribir mensjaje
placeholder sirve para escribir dentro del input sin necesidad de borrar
<form>input type="password"</form>
escribir contraseña
<form>input type="radio"</form>
redondo solo seleccionar
<form>input type="file"</form>
cargar un archivo
<form>input type="submit"</form>
enviar formulario
HTML AVANZADO
Metaetiquetas, comentarios e iconos
Iconos (pestaña)
logo de la pestaña
<link rel = "icon" href = "icono.png" type = "image/png">
la relacion que tiene es de icono
lugar de imagen
tamaño: 32x32 o 64x64
determinar y establecer el tipo
Metadatos/ metatags
Etiquetas que su única finalidad es describir ciertos aspectos de nuestra pagina web. Proporciona información sobre nuestra web
Se coloca en el Head, el usuario no puede ver y accesibilidad
<html lang = "es">
lenguaje de la pagina web
<meta charset="UTF-8">
Le dice al documento cual va a ser la codificacion que va a usar
utiliza caracteres unicode, es decir permite mtodos los caracteres utilizados por todos los idiomas por ej. acentos
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
todas las metatags van a tener name y content
content: contenido de lo que queremos decir
name: nombre de lo que estamos declarando en la pagina
width = device-width quiere decir que el ancho va a ser el total del dispositivo, es decir que nuestra pagina este adaptada a cualquier dispositivos
initial-scale = 1.0 se encarga que el dispositivo entre con un zoom normal
<meta name="description" content="blablablba"
Descripción de lo que trata la pagina (100 caracteres recomendados)
<meta name="keywords" content="palabras claves"
Sirve para que tenga mas chances de salir en el navegador, siempre cuando la pagina trate de las palabras ingresadas
<meta name="author" content="nombre autor">
define quien es el autor de la pagina
<meta name="robots" content="orden">
content="nofollow"
No indexa la pagina, es decir no muestra la pagina en los resultados de busqueda
content="nosnippet"
Sirve para no mostrar un fragmento de nuestra pagina en el navegador
robots sirve para que los motores de busqueda lo lean y sepan que deben hacer
content="noarchive"
Hace que el navegador no pueda almacenar una copia de nuestra pagina web en el cache, porque el navegador lo guarda para que al usuario lo cargue mas rapido
Sirve para paginas web con cambios constantes o depende de cambios por ej. una pag que muestra la diferencia entre peso y el dolar
content="noimageindex"
Para que no se indexe las imagenes en el navegador
No se recomienda usar, salvo casos puntuales
<meta name="title" content="Barra movil">
titulo de la pagina
casi no se usa
Hay muchos mas pero cualquier cosa se puede googlear
Comentarios
<!--comentario-->
Solo es legible para el programador
Open grap metatags
<meta name="OG:orden" content="orden">
Muestra una breve descripción cuando enlazamos
<meta name="OG: title" content="orden">
describe el titulo de la web
<meta name="OG:image" content="orden">
enlaza la imagen del contenido
<meta name="OG:description" content="orden">
breve descripcion de lo que trata la pag web
<meta name="OG:url" content="orden">
url real a la que se tiene que redirigir que accede de esta forma
<meta name="OG:type" content="orden">
describe el tipo de contenido
TEXTAREA
Input que te permite escribir texto en varias lineas
<textarea></textarea>
para no romper el componente que creamos
resize:
vertical solo se desliza en eje y
both: se desliza en el eje x y eje y
min-width
min-height
max-height
o para ahorrarnos el min-heigth en html colocamos rows que es la cantidad de lines que debe escribir el usuario
<textarea rows="1"> cant de linea </textarea>
atributos booleanos son true o false
<textarea readonly> solo se lee y se envian los datos </textarea>
<textarea required> </textarea>
<textarea disabled> solo se lee, no hace focus en el form y no se envian los datos</textarea>
<textarea maxlength> cuanto podemos escribir </textarea>
LABELS
Forma de etiquetar individualmente un elemento de input
Un campo en que pedimos datos al usuario debe estar etiquetado por un label
Mejora la accesibilidad
<label>Nombre</label>
elementos en linea, no podemos modificar el margen o padding tan facilmente asi que debemos usar un line-height
Cuando clickeamos un label hace focus en el elemento
<label for ="Nombre">Nombre completo</label>
<input>type = "text" placeholder = "Nombre" id = Nombre</input>
necesitamos que el input tenga un id asi queda enlazado
otra manera es que el input quede dentro del label eliminando los for y el id
SELECT, DATALIST Y OPTION
SELECT Y OPTIONS
Tipo de campo de entrada que nos permite seleccionar una opccion de entre varias opciuones
<select name="nombre a elegir" id="">
<option value(valor que recibe servidor)="user1">Opcion 1</option>
<option value="user2">Opcion 2</option>
<option value="user3">Opcion 3</option>
</select>
DATALIST Y OPTIONS
Input en en que escribimos algo y se autocompleta con algo que ya autodefinimos
<input list="referente" name="referente">
<datalist id="referente" name="type-of-user" id="">
<option value="user1">opcion 1</option>
</datalist>
Se envía al servidor el value
FIELDSET Y LEGEND
Se usan para agrupar y etiquetar los elementos dentro de un formulario por ej conjunto de elementos que piden informacion sobre metodos de pago
<fieldset>
<legend>Tipo de info</legend>
<input type="text" placeholder="Nombre">
</fieldset>
DETAILS Y SUMMARY
Proporciona una funcionalidad nativa para crear un contenido desplegable
<details>
<summary>texto</summary>
</details>
ENLACES (Avanzado)
<a>href = "#id"</a> ir a un sector de la pag
<a href = "nombrearchivo/ id" download ></a> descargar
<a href = "https: link" rel = "noopener" target = _blank>pagina.com</a> redirigir a otra pag web
cuando abrimos un elemento en target blank la pagina a la que vamos tiene la posibilidad de acceder a nuestro windows.opener. Por ejemplo le puede redirigir al usuario a una pagina maliciosa sin permiso
para evitar paginas sin permiso colocar rel = "noopener"
otra opcion es rel = "noreferrer" no permite que tenga acceso al elemento windows.opener sino que tampoco tenga los encabezados o sea de nunca saber de que pagina vino
rel = "nofollow" le dice a los motores de busqueda que la pagina no la siga/indexe porque la web es un conjunto de enlaces interconectados
recomendado usar los tres
TABLAS
Forma de organizar datos en filas y columnas
Principalmente mostramos datos tabulares cada celda forma parte de una fila y columna en donde tenemos la necesidad de hacer algo
<table>
<th><th>
</table>
tr define filas
td define cada una de las celdas para esas filas
th define encabezado, por defecto tiene text align center
<table>
<tr>
<td><td>
</tr>
</table>
THEAD
Encabezado de una tabla
Define cuales van a ser los campos y darle mas poder en la busqueda del navegador
<thead> </thead>
TBODY
Abarca todos los datos
<tbody></tbody>
TFOOT
Es el pie de la tabla, es decir el resumen de la misma
<tfoot></tfoot>
AUDIO Y VIDEO
VIDEO
<video controls (loop) autoplay muted src = "video.mp4"></video>
src para el video
controls barrita para controlar el video
autoplay muted para que se reproduzca automaticamente en silencio
loop si deseo reproducir en bucle
Subtitulos
<track src = "captions.vtt"> para subtitulos
<track src = "captions.vtt" default> subtitulos por defecto
<track src = "captions.vtt" kind = "captions"> le decimos al navegador que son subtitulos
<track src = "captions.vtt" srclang = "es" label = "Español (Latino)"> decimos al navegador que los subtitulos son en español
AUDIO
<audio controls autoplay muted src = "audio.mp3"></audio>
src para el video
controls para controlar audio
autoplay muted se reproduce automáticamente
LAZY LOADING
El contenido se va cargando a medida que el usuario va llegando a esas secciones. Por ej si a mitad de pagina hay una imagen y el usuario recien esta en el principio no hace falta que cargue la imagen
Mejora la rapidez de la pagina al no cargar todo completo
<elemento loading = "lazy">
HTML OBSOLETO
Etiquetas que no debemos usar NUNCA
Pueden generar problemas de compatibilidad y accesibilidad
<font>, <center>, <blink>, <big>, <strike>
No se da estilos en lenguaje HTML
Chequear etiquetas obsoletas en mdn
HTML SEMANTICO
Utilizar etiquetas especificas que tienen un significado para dar un significado a la sección que estamos creando
La pagina web tiene texto o informacion y esas etiquetas las utilizamos para dar un significado a lo que estamos armando
Evitamos usar div o span para todo
mejora el seo, accesibilidad y mantenibilidad
Encabezado: <header></header>
Barra de navegacion: <nav></nav> decimos al navegador que es para navegacion
Secciion: <section></section> hace referencia a un lugar del contenido
Principal: <main></main> la seccion principal de nuestra pagina
Seccion secundaria: <aside></aside> apartado secundario que puede estar o no relacionado con lo principal
Pie de pagina: <footer></footer> incluye informacion de derechos de autor, enlaces a terminos y condiciones, ayuda, etc
ACCESIBILIDAD WEB
Se refiere a la practica de crear paginas web que sean accesibles para todos
Mejora en el seo
Hay paises que es una ley que sean accesibles
Como funciona?
El codigo
El codigo pasa al navegador
El navegador crea un arbol/ estructura completa para personas que usan o no tecnologia de accesibilidad
vemos la pagina web final
3.5. Si usa tecnologia de accesibilidad su lector de pantalla son las que indican al usuario
para que lea debemos clocar aria-label: <a href = "link" aria-label = "descrip link"></a>
Todo lo que se puede hacer con el teclado, mouse se deberia poder hacer con la tecla tab o enter
Menu desplegable:
<details>
<summary> texto </summary>
</details>
Desliza imagenes:
<div id="slider" role = "slider" aria-valuenow = "1(imagen)" aria-valuemin = "1 (imagen)" aria-valuemax = "3(imagen)"> imagen </div>
wai-aria para ver los roles
Como verificar si es accesible?
Lighthouse
Analyze page load
Inspeccionar
CSS
Introducción a CSS
A nivel macro se trata de entender como funciona las propiedades y como se relacionan las combinaciones de un elemento abuelo, padre o hijo
FORMAS DE ENLAZAR ARCHIVOS A CSS
Etiqueta Link
Linkea una hoja de estilos
Se linkea desde el head
Mas recomendada y practica
propiedad: <link rel= "stylesheet" href="styles.css">
rel = relationship(quiere decir el archivo que vas a vincular ¿que relacion tiene con la pag actual?)
stylesheet= hoja de estilo
atributo href= enlaza el archivo CSS
Estilos en linea
Propiedad: style="color: red"
Mala practica porque no podemos mezclar lenguajes, cada uno debe estar en una seccion especifica
Generalmente se da estilo en una sola linea de codigo
Lo utilizamos para agarrar cada componente de HTML y darle un estilo, para que el conjunto de estilos que damos a cada elemento nos de una pagina web estática, funcional, navegable, accesible, etc.
Selectores
Estructura: selector{
propiedad color
propiedad tamaño
propiedad margen
propiedad borde
etc
}
Seleccionamos por el nombre del elemento, abrimos llaves que indica que estamos abriendo un bloque de selecciones y luego declaramos la propiedad
Seleccionamos uno o varios elementos para modificar
Tipos de seleccion
Selector span
podemos utilizar span para seleccionar y modificar un solo elemento especifico de una palabra por ej
sintaxis: <etiqueta>
<etiqueta><span>Hola</span></etiqueta>
</etiqueta>
estructura: span{
propiedad
}
Selector por clases
atributo: class="nombre"
estructura: .nombre{
propiedad
}
Asignamos a los elementos nombres puntuales(clases) y es la forma que tenemos de separar los elementos por clases
sintaxis: <etiqueta class="nombre"> Ignacio </etiqueta>
Selector elemento (selección por elemento)
estructura: nombre elemento html{
propiedad
}
crear nuestro propio elemento es mala practica
Selector id
Es un selector que se le puede dar a un solo elemento en toda la pagina para determinar un elemento importante
atributo= id"ingrediente-secreto"
Sintaxis: <etiqueta id="ingrediente-secreto"> huevo </etiqueta>
estructura: #ingrediente-secreto{
propiedad
}
Propiedades de fuente y texto
font-family: tipografias(si el nombre contiene mas de una palabra lleva comillas simples) y poniendo comas podemos agregar comas seguidas de mas tipos por si el navegador no carga
font-size: tamaño de texto
color: color para las letras
font-weight: bold: pone en negrita las letras y los numeros que puedan llegar a parecer define un tipo de grosor
bold: tiene un valor de 700
bolder: va un escalón grosor mas adelante
font-style: modifica la letra
normal: valor por defecto
oblique: inclina un poco menos la letra que italic y podemos definir cuanto podemos inclinar con num sg
italic: inclina un poco la letra
text-aline: alinea texto dentro de su contenedor
right: de derecha a izquierda (arabes)
center: lo deja centrada
left: valor por defecto, de izquierda aderecha
justify: intenta que las letras comiencen y terminen alineadas
text-decoration: ilustra el texto con subrayados
underline: subrayado por abajo
overline: subrayado del techo
line-through: nos tacha el texto
none: quita cualquier decoración
line-height: define el espaciado de la letra por linea
normal: viene por defecto y suele elegir el navegador
insertar numeros para definir manualmente
letter-spacing: define el espacio entre letras
se define con numeros por px
text-transform: transforma el tipo de texto
uppercase: todo el texto en mayuscula
lowercase: todo el texto en minuscula
none: valor por defecto
capitalize: transforma la primer letra de cada palabra en mayúscula
Tipografias externas
copiar el codigo de tipografia
pegar en html en el head
buscar en google fonts
en CSS colocar donde queremos usar
No es muy recomendada
Forma recomendada
Estructura:
@ font-face {
font-family: "Montserrat";
src: url("carpeta/tipografia") format("truetype");
}
Crear un nuevo archivo CSS con nombre fonts para crear nuestras propias fuentes
Descargar la tipografia desde google fonts
ejecutar
cortar y pegar en la carpeta que queremos usar
Modelo de cajas
Propiedades concepto
Padding: Es el relleno, se refiere al espacio entre el contenido y el borde del elemento. Este espacio aumenta el area alrededor del contenido dentro del elemento pero por debajo del borde. En síntesis, separa mas el contenido del borde
Content: contenido es el nucleo del box modelo es donde se muestra el texto, imagenes, etc
Border: El borde es una linea que bordea tanto al contenido como al padding, se puede controlar el estilo, el grosor y el color del borde
Margin: El margen es el espacio al rededor de la caja que esta fuera del borde. Este espacio separa los elementos de otros dentro de la pagina, a diferencia de los anteriores el margen NO FORMA parte de la caja, su funcion es separar los elementos de otras cajas
Describe como se diseñan o como se deberian colocar los elementos de HTML en una pagina web. Un elemento en una pagina se considera una caja rectangular/ bloques. Este modelo se encarga de definir como estas cajas se dimensionan, cambian sus tamaños, cambian sus propiedades o como interactuan entre si
Propiedades
Importante cuidado
Width: Determina el ancho
Contenido
Height
Padding: aumenta el tamaño alrededor del contenido pero dentro de los bordes
Relleno
pading-bottom: separa el contenido con el borde de abajo
padding-top: separa el contenido con el borde de arriba
padding-left: separa el contenido respecto al borde de la izquierda
padding-right: separa el contenido del borde derecho
padding: nos ahorramos los items anteriores
Margin: hacemos que las cajas se separen entre si, a veces usamos para evitar padding
Margen
Margin colapse: los margenes de arriba y abajo se superponen no se suman, sino que el margen mas grande predomina
Border: nos permite modificar tres aspectos fundamentales de los bordes: tamaño, estilo, redondeo y color
border-radius: modifica redondeando el borde
border-width: modifica tamaño
Borde
Border-style: modifica el estilo
border-color: modifica el color
border-top: define el borde de arriba
border-left: define el borde de la izquierda
border-bottom: define borde abajo
border-right: define el borde a la derecha
Box sizing: la utilizamos para afectar como funciona el modelo de caja predeterminado, basicamente como los navegadores calculan el total del tamaño de un elemento
indicamos que las cajas tengan el mismo tamaño: box-sizing: border-box;
Colores
RGBA
256 tipos de verde
256 tipos de azul
256 tipos de rojo
Transparencia RGB
Hexadecimal
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
.#nnnn
RGB
256 tipos de verde
256 tipos de azul
256 tipos de rojo
0 a 255
debemos definir la cantidad que queremos de cada uno
Unidades de medida
Pixeles (px)
medidas absolutas
milimetro (mm)
medida absoluta
Centimetros (cm)
Pulgadas (in)
ideales para tener el control y ser precisos, pero no es la mejor opcion para diseño responsive
Unidades relativas
unidad que depende de otro valor
porcentaje
es respecto a su contenedor
em
vale lo mismo que el elemento padre
viewport height o viewport widht
ancho disponible que tenemos en la pantalla
con box-sizing: border box para que no aparezca scroll
bueno para ventanas modales
1vmax = 1vh
cuando el widht es mas grande que el vheidht
1vmin = 1vw
cuando el widht es mas chiquito que el vheidht
Utilizamos para tamaño fuente, espaciados y tipografias en general em y rem
para lagout o dimensiones de los elementos, usamos porcentaje, vh o vw
px si wqueremos que un elemento tenga una rewsolucion exacta
Fondos
backround-size: contain
se ajusta lo maximo posible para que la imagen entre si o si
backround-size: cover
adapta la imagen sin importar la dimension, que se ajuste a la resolucion que debe tener
se recomienda trabajar con las posiciiones
Scroll
backround-attachment: fixed
imagen estatica
propiedad backround
backround: url imagen - posicion - size- repeat- attachment - color
Gradientes
Transición entre colores
linear-gradient
direccion to left o to right(si es necesario), colores
radial-gradiente: ej miras de juegos
Sombras
Muy importantes porque agregan profundidad y realismo a cualquiera de los elementos
Mejora la legibilidad para ir separando contenido del fondo
Tres tipos
Sobra que le damos a box: box-shadow
1- tamaño/ direccion horizontal de sombra
cuanto se desliza/ vertical
cuanto es el desenfoque
cuanto se expande
color
Sombra al texto: text-shadow
Componente x: drop-shadow
filter: drop-shadow();
genera sobra dentro de las imagenes png que no tienen fondo
Etiqueta: <div></div> puede ser cualquier tipo
CSS AVANZADO
Selectores
Seleccionar un elemento especifico dentro de un padre o hijo y darle estilo solo a ese
Selector por atributo
Damos estilo a un elemento en caso de que contenga un atributo o ese atributo contenga un valor definido
img[src = "imagen.png"]{}: selecciona todas las imagenes que tengan atributo imagen.png y les da estilo
img[src$ = "png"]{} selecciona todas las imagenes que terminen en png y les da estilos
img[src^ = "imagen"]{}: seleccionamos imagenes que comiencen con el atributo imagen y les da estilo
Selector descendente
<etiqueta padre> <etiqueta hijo>{} damos estilo a un elemento hijo dentro del padre
etiqueta padre > etiqueta hijo{}: de esta manera damos estilo a un hijo directo
Selector adyacente
Seleccionamos el elemento que esta a continuación instantaneamente y le damos estilo
elemento + elemento siguiente
Selector de hermanos generales
Seleccionamos y damos estilo a todos los elementos del mismo tipo que esta a continuacion
elemento ~ elemento siguiente
HERENCIA
Algunas propiedades pueden heredarse y otras no
Los elementos hijos tendran el valor del padre hasta que estos sean modificados
valor: inherit busca algun elemento padre que tenga ese valor para heredarlo
valor: initial tomara el valor inicial que tenia o valor por defecto que carga
valor: Unset: al reestablecer el valor inicial. Si por defecto era inherit lo vuelve a inherit pero si era otro lo vuelve en initial
valor: revert parecido a unset solo que primero intenta econtrar el estilo del usuario sino lo deja en inherit
CASCADA Y ESPECIFICIDAD
Cascada
El orden que damos las propiedades si importa y si dos reglas tienen la misma especificidad lo que determina que estilo queda es el orden
Cuando la especificidad es igual en ambos casos el valor resultante o la regla que va a quedar, será la ultima que apliquemos
Nivel de importancia
BOSS: !important
Re importante: atributo style. style = ""
No importante: es lo definido por el navegador
Menos importante: lo que el usuario define en navegador
Importante: lo que el desarrollador define
Muy importante: etiqueta style <style> estilos </style>
Especificidad
puntuacion de un estilo es decir mas especificidad
se encarga de determinar los conflictos que ocurren al sobreescribir una propiedad en css
PSEUDO-CLASES
hover: seleccionamos cuando el mouse este encima
active: define el color cuando le damos click
utilizamos palabras claves que nos permite seleccionar un estado especifico de un elemento, es decir agrego una palabra clave al elemento voy a poder modificarlo cuando este en cierto estado
Listas
li:first-child selecciona el primer elemento
li:last-child selecciona el ultimo elemento
li:nth-child()selecciona a un X elemento/ (xn) cada tanto elementos vamos a modificar tantos elementos
Nos permite seleccionar un estado especifico de un elemento que seleccionamos
:empty : seleccionamos al elemento vacio por ej un div
:checked es una pseudoclase que selecciona a un elemento chequeado ej en un input
Links
link: selecciona enlaces no visitados
visited: enlaces ya visitados
Buscar en mdn pseudoclases
IS, WHERE y HAS
IS: lo que hace es agrupar
cambia su especificidad y mantiene una especificidad alta
Where:No cambia su especificidad, mantiene una baja especificidad
tambian agrupa selectores
Has: se le da al elemento padre, lo que hace es modificar algo del elemento en caso de que tenga dentro cierta clase de elemento
PSEUDO-ELEMENTOS
Se acceden con dos puntos ::
::first-letter selecciona la primera letra
Palabra clave que representa una parte especifica de cada elemento, no se trata de un elemento como tal sino una parte
::first::line selecciona la primera linea
::selection seleccionador del mouse
::placeholder cambia de color lo que va en input
::marker cambia los marcadores de li
::before agregamos un texto antes
::after agregamos texto despues
METODOLOGIA BEM
Se compone de bloques, modificadores y elementos
Nos permite reutilizar codigo
Nos permite crear un estilo predefinido para un componente, que despues con los modificadores podemos ir cambiando para no volver a escribir todo de vuelta
Se resuelven problemas de especificidad
Bloque
elemento independiente que no depende nadie para existir por ej. barra de navegacion, formularios
Elemento
Hace referencia a una parte de un bloque que por si solo no tiene sentido pero dentro del bloque si por ej. menu navegacion
Modificadores
Es una forma de modificar un bloque o un elemento
Como nombrar correctamente las clases?
<etiqueta class="nombreBloque">
<etiqueta class = "nombreBloque)__nombreElemento"></etiqeuta>
Es la manera de nombrar bloque y elementos
Modifica todos los elementos
nombreElemento--nombreModificacion
Vamos a modificar a determinado elemento
si queremos modificar un bloque agregamos una clase modificadora
nombreBloque--nombreModificar
si queremos modificar un elemento agregamos una clase modificadora
nombreElemento--nombreModificacion
PROPIEDAD DISPLAY
display: inline-block funciona igual que los elementos en bloque solo que ahora se pueden apilar, ya que no ocupa todo el ancho disponible y no inicia una nueva linea. Acepta margin, padding, etc. Se puede configurar un ancho y alto a comparacion del inline que no
Util para elementos que necesitan tener dimensiones pero uno al lado del otro
display: block convierte elementos en linea en columnas ocupando todo el ancho disponible
display: inline convertimos elementos en bloque en elementos en linea
POSICION RELATIVA
La posición relativa en CSS es una propiedad que permite posicionar un elemento en relación a su posición normal, es decir, en relación al flujo normal de la página.
Con esta propiedad, el elemento se mantiene en el mismo sitio, pero se pueden manipular sus coordenadas con las propiedades top, right, bottom y left. Por ejemplo, para mover el elemento hacia arriba, se puede usar la propiedad top.
Algunas características de la posición relativa en CSS son:
El desplazamiento siempre es respecto al elemento que lo contiene
Las propiedades top y left tienen mayor prioridad sobre right y bottom
Al mover el elemento, se deja un hueco donde estaba su posición normal
Los porcentajes se pueden usar como unidad en las propiedades top o bottom, pero el elemento solo se desplazará si el padre tiene un alto declarado
z-index solo sirve cuando tenemos posicionados los bloques
POSICION FIXED y STICKY
FIXED
Hace que el elemento quede fijo en una parte del navegador y no le importa la posicion relativa
STICKY
Se comporta como relative hasta alcanzar el limite que le dijimos y se empieza a comportar como fixed
TRANSITIONS