Apuntes de Css y HTML

Inducción a Programación
Les comparto mis notas:
Los navegadores funcionan con un protocolo que define cómo se realiza la transferencia de
datos a través de internet .Es llamado
● HTTP : Hypertext Transfer Protocol (Protocolo de Transferencia de Hipertexto)

● HTTPS: Hypertext Transfer Protocol Secure (Protocolo de Transferencia de
Hipertexto Seguro)
En la actualidad la manera de escribir, leer e interpretar los datos transferidos a través de 3

lenguajes que todos los navegadores pueden entender. Estos son:
● HTML: HyperText Markup Language

● CSS: Cascade Style Sheet
● Javascript: Es el lenguaje que le da interaction a las páginas
Google Chrome es uno de los navegadores más modernos y más utilizado, el cual tiene 3
versiones:
● Google Stable. Versión que todos usamos
● Google Dev: Versión para desarrolladores que contiene las nuevas funcionalidades y
el navegador se actualiza semanalmente
● Google Canary: Versión para desarrolladores que contiene las nuevas
funcionalidades y el navegador se actualiza diariamente
Otro navegador muy común es Firefox que también cuenta con 2 versiones:
● Firefox: Version normal
● Firefox Dev: Versión para desarrolladores
HTML
Acá va el título del proyecto
<meta name="viewport" content="width=device-width, inictial-scale1.0">
Esta meta nos ayuda a que la página se vea escalonada desde cualquier dispositivo y que
sea responsive.
<link rel="stylesheet" href="">
Nos permite enlazar los estilos de css
Así nos quedó el Head:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="description" content=" ">
<meta name="robots" content="index,follow">
<meta name="author" content=" ">
<title>Document</title>
<meta name="viewport" content="width=device-width,
inictial-scale1.0">
<link rel="stylesheet" href="">
</head>
Index y su estructura básica: body
Etiquetas: Existen dos tipos etiquetes de contenido y etiquetas contenedoras
Etiquetas contenedoras:
Generar la maquetación de nuestro proyecto y esto se le llama Semántica de HTML.
header: cabecera del documento.
<header>
Va todo lo que va en el encabezado
<nav>
Va la barra de navegación
</nav>
</header>
<main>
</main>
Va el contenido de la página
footer: pie de página del documento.

<footer>
</footer>
<section></section>
Section:Nuestro website puede estar dividido por secciones, por ejemplo platzi tiene 3: El
navegador de cursos y rutas, el feed y nuestras rutas de aprendizaje
<article></article>
article: diferentes partes del contenido que pueden vivir por sí mismas. Contenido
independiente de la página. Es reutilizable
<ul>
<li>
</li>
</ul>
ul y ol: listas de ítems.
<ul> 
<li></li>

<ol>
</ol>
<ol><!--Lista ordenada: Numerada→

<div></div>
Es un comodín
Etiquetas de contenido
<h1>Es el título</h1>
h1 a h6: son etiquetas para indicar títulos con un estilo que destaca del resto.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Mollitia eaque atque, quidem esse, eveniet nesciunt cumque ad, neque
fugiat placeat sit odit? Aliquid, dolorem. Excepturi maiores iusto ea
repellendus nobis.
</p>
Etiqueta <p> Es para ingresar texto
<a href=""></a>
a: corresponde a un ancla o enlace a una url interna o externa del documento.
Anatomía de una etiqueta
Etiqueta de ancla:
Etiqueta de formato multimedia:
Clasificación de las imágenes: Lossy (con pérdida) vs Lossless(sin

pérdida)
Existen dos tipos de imágenes, sin pérdida o con pérdida, y esto depende de como el
formato maneja las imágenes.
Lossless (sin pérdida):

● Capturan todos los datos del archivo original.
● No se pierde nada del archivo original.
● Puede comprimirse, pero podrá reconstruir su imagen al estado original
Lossy (con pérdida):

● Se aproximan a su imagen original.
● Podría reducir la cantidad de colores en su imagen o analizar la imagen en busca de
datos innecesarios.
● Por consiguiente puede reducir su tamaño, lo que mejora el tiempo de carga de la
página, pero pierde su calidad.
● Los archivos tipo lossy son mucho más livianos que los archivos tipo lossless, por lo
que son ideales para usar en sitios en donde el tamaño del archivo y la velocidad de
descarga son importantes.
Formatos de imagen para web
● GIF (Graphics Interchange Format): Formato de imagen sin pérdida, no se puede
comprimir
● PNG 8 (Portable Network Graphics): Formato de imagen sin pérdida, uso de colores
de 256, se utiliza para logotipos e iconos para la página.
● PNG 24 (Portable Network Graphics): Formato de imagen sin pérdida, utilización de
colores ilimitados, alta calidad, si intentamos comprimir no ayudará demasiado por la
gran cantidad de colores.
● JPG / JPEG (Photographic Experts Group): Formato de imagen con pérdida,
perdemos calidad a la hora de comprimirlas, pero llegan a ser óptimas para la carga
en la página web.
● SVG - Vector (Scalable Vector Graphics): Formato de imagen muy ligero sin
pérdida, con svg no perdemos calidad, ya que está compuesta por vectores.
● WebP: Es un formato gráfico en forma de contenedor que sustenta tanto compresión
con pérdida como sin ella. Fue desarrollado por Google.
Optimización de imágenes
● Mejora el tamaño de tus imágenes https://tinypng.com/

● Retira los metadatos de tus imágenes https://www.verexif.com/
Etiqueta de imágenes
<figure>
<img src="/imagenes/cerdito.jpg" alt="">
</figure>
<figcaption>Es una imagen de una chuleta
</figcaption>
Responsive NOTA: Cambio de imagen con media querin
<picture>
<source media="(max-width:768px)" srcset="imgenes\images.png">
<img src="imgenes\squarespace-logo-horizontal-black.jpg"
alt="">
</picture>
Etiqueta de vídeo
<video controls preload="auto">

<source src="./Episodio4.m4v#t=10,60" />
<source src="./Episodio4.mp4#t=10,60" />
</video>
La etiqueta <video>, tiene algunos atributos como:

.
controls: agrega al video los controles necesarios para reproducir, pausar y adelantar.
preload = auto: hace que el navegador descargue el video, en el momento en el que se

accede a la página.
La etiqueta <source>, se puede colocar dentro de una etiqueta <video> varias veces, para
especificar diferentes rutas. Esto para asegurar que cualquier navegador pueda mostrar el
video.
Loop para que cuando termine el vídeo vuelva e inicie
Etiqueta form e input (formularios)
<form action="">
<label for="nombre">
<span>¿Cual es tu nombre?</span>
<input type="text" id="nombre" placeholder="Tu nombre" />
</label>
<label for="inicio-platzi">
<span>¿Qué día comenzaste en Platzi?</span>
<input type="date" id="inicio-platzi" />
</label>
<label for="horario">
<span>¿En que horario estudias?</span>
<input type="time" id="horario" />
</label>
</form>
Es importante utilizar la etiqueta <form></form> para indicar que utilizaremos un formulario,

además de la semántica y buenas prácticas.
Dentro de estas etiquetas indicaremos los elementos del Formulario como lo son…
<label></label> que será nuestro “Contenedor” en esta ocasión. dentro de él pondremos la
etiqueta <span></span> (No es necesario) para colocar un texto haciendo alusión al
contenido esperado (nombre, contraseña, fecha etc…)
y viene una de las etiquetas importantes la cual es <input> aquí es importante aclarar que
hay muchos tipos de Input, los que verán en este ejemplo son text, password, date, time
pero hay muchos más…
También está el atributo placeholder para colocar un texto como guía dentro de la caja
(Input) y este al hacer click sobre él se eliminará.
Calendario
Forma 1 (larga)
<form action="">
<label for="hora">
<span>hora</span>
<input type="time" id="hora" name="hora">
</label>
<label for="dia">
<span>Día</span>
<input type="date" id="dia" name="dia">
</label>
<label for="semana">
<span>semana</span>
<input type="week" id="semana" name="semana">
</label>
<label for="mes">
<span>Mes</span>
<input type="month" id="mes" name="mes">
</label>
<input type="submit" />
</form>
Forma 2 (corta)
<form action="">
<label for="calendario">
<span>Calendario</span>
<input type="datetime-local" id="calendario" name="calendario">
</label>
</form>
Atributos de input
https://developer.mozilla.org/es/docs/Web/HTML/Element/input#atributos
Autocomplete y require
<form action="">
<label for="nombre">
<span>¿Cual es tu nombre?</span>
<input
type="text"
name="nombre"
id="nombre"
autocomplete="name"
required
/>
</label>
<label for="correo">
<span>¿Cual es tu email?</span>
<input
type="email"
name="correo"
id="correo"
autocomplete="email"
required
/>
</label>
<label for="pais">
<span>¿Cual es tu pais?</span>
<input
type="text"
name="pais"
id="pais"
autocomplete="country"
required
/>
</label>
<form action=""></form>
<label for="cp">
<span>¿Cual es tu codigo postal?</span>
<input
type="text"
name="cp"
id="cp"
autocomplete="postal-code"
required
/>
</label>
<input type="submit" />
</form>
El atributo autocomplete = “tipo-del-input” hace que el navegador auto-complete los

formularios, según el tipo de input. El atributo se coloca en la etiqueta <input>.
El atributo require, evita que se envíe información del formulario, si el input está vacío. El
atributo se coloca en la etiqueta <input>.
Atributos de autocomplete
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Select
Para crear inputs con una lista de varias opciones, se puede desarrollar de dos maneras
diferentes:
.
1. Etiqueta <select>: Esta permite crear la lista, con las etiquetas <option>:
<select name="cursos" id="">
<option value="JavaScript">JavaScript</option>
<option value="HTML5">HTML5</option>
<option value="CSS3">CSS3</option>
<option value="Web Standards">Web Standards</option>
</select>
2. Etiqueta <input list = “”>: De este modo, se puede utilizar una etiqueta <datalist>
con etiquetas <option> dentro del input. De este modo, el usuario puede escribir
dentro del input, y filtrar los resultados de la lista:
<input list="cursos" />
<datalist id="cursos">
<option value="JavaScript"></option>
<option value="HTML5"></option>
<option value="CSS3"></option>
<option value="Web Standards"></option>
</datalist>
Input type submit vs. Button tag

input type submit = lo utilizaremos solo en los formularios
<input type="submit" value="Nombre" />
Button = lo utilizaremos en cualquier otro tipo de botón dentro de nuestro proyecto

<button type="submit">Qué color te gusta?</button>
CSS
¿Qué es CSS?
Cascading style sheet (css) es la herramienta con la que le damos estilo a nuestra pagina
ya sea color, tamaño, espacios, lugares de posición y más.
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Se puede agregar el CSS de 3 maneras:

(La forma recomendada es como un link a un archivo externo CSS).
1. Como link hacia un archivo externo “.css”:

<link rel="stylesheet" href="./style.css" />
2. Como un bloque de código CSS dentro del head del HTML:

<style>
p{
color: blue;
}
</style>
3. Como un atributo dentro de una etiqueta HTML (estilo embebido):

<p style="color: blue">texto</p>
Selector
HTML
<p class="parrafo">Soy un texto</p>
<p id="texto">Soy otro texto</p>
CCS
p {
color: blue;
font-size: 40px;
}
/* class */
.parrafo {
color: red;
}
/* ID */
#texto {
color: yellow;
font-size: 24px;
}
Pseudo clases y pseudo elementos
Pseudo-classes
Una pseudoclase CSS es una palabra clave que se añade a los selectores y que especifica
un estado especial del elemento seleccionado. Por ejemplo, :hover aplicará un estilo
cuando el usuario haga hover sobre el elemento especificado por el selector.
div:hover {
background-color: #F89B4D;
}
Las pseudoclases, junto con los pseudoelementos, permiten aplicar un estilo a un elemento
no sólo en relación con el contenido del árbol de documento, sino también en relación a
factores externos como el historial del navegador (:visited, por ejemplo), el estado de su
contenido (como :checked en algunos elementos de formulario), o la posición del ratón
(como :hover que permite saber si el ratón está encima de un elemento o no).
Sintaxis
selector:pseudoclase { propiedad: valor; }
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.
Sintaxis
selector::pseudo-elemento { propiedad: valor; }
Anatomía de una regla en css
Modelo de caja
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
Paiding y margin en 0 Nos ayuda a reiniciar los estilos que traen los navegadores por
defecto.
Box-sizing:border-box; Elimina espacios indeseados.
Herencia
Es código css que el elemento padre heredará al hijo.

html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: inherit;
}
Inherit, Indica que heredará los estilos de su elemento padre

Initial, Indica que obtendrá los valores predeterminados del navegador.
upset, combinación de inherit + initial, intentará heredar los estilos de su elemento padre, si
no está disponible obtendrá los valores predeterminados.
Especificidad en selectores
Orden de declaración en .css
1. Importancia
2. Especificidad
3. Orden de fuente
Importancia.
1. Hoja de estilo de agente de usuario (Estilos del navegador): primero el navegador va

a implementar los estilos que ya trae por defecto
2. Declaraciones normales en hojas de estilo de autor (nuestro .css) que son los estilos
que nosotros colocamos en nuestro proyecto.
3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important)
Especificidad:
el orden de importancia es:
● !important
● Iniline styles
● #id
● ,class
● tag
Para evitar rescribir estilos y que se rompa nuestro código tenemos que evitar los
!important, Iniline styles #id y tag.
Orden de la fuente:
las declaraciones finales son las que se se van a ejecutar en el caso que los estilos tienen
la misma especificidad
Ejemplo de especificidad
1 importancia
h1 {
color: purple;
font-family: serif;
margin-bottom: 10px;
}
2 importancia
.title {
font-size: 18px;
font-family: monospace;
}
3 importancia (mala práctica)

#page-title {
font-family: Arial, Helvetica, sans-serif;
}
<li>
<a href="" class="blog" style="background-color:purple ;
">Blog</a>
</li>

.nav .blog {
background-color: red !important;
}
**¡Recuerda! ** Si no se cargan los estilos que tu deseas es por que hay

otro(selector(es) con mayor importancia que el tuyo
Combinadores: Adjacent Siblings (combinators)
El combinador hermano adyacente ( +) separa dos selectores y coincide con el segundo

elemento sólo si sigue inmediatamente al primer elemento, y ambos son hijos del mismo
padre element.
Hermano adyacente o cercano
h2+p:
El más lo que indica es agregar este estilo a las etiquetas “p” que tengan un “h2” justamente
arriba de sí mismas.
Hermano general
h2~p:
Agregale este estilo a las etiquetas “p” que están abajo de un “h2” (no importando si está
justamente arriba o si está separado por otras etiquetas, la cosa es que tenga un "h2 arriba
en html).
Hijo
Selecciona solo lo que sea hijo directo.

div > p{ (aplica estilos a todos los párrafos ‘p’ que sean hijo directo de ‘div’}
Descendiente
div p{ todas las etiquetas párrafo que estén dentro de una etiqueta div aplícale el estilo}
Medidas
Absolutas
medida absoluta: el valor de este no cambia y siempre será el mismo asi la pagina cambie
su tamaño, las medidas absolutas son:
➔ mm = milímetros
➔ cm = centímetros
➔ in = pulgada
➔ pc = picas
➔ px = pixel
Relativas
las medidas relativas: estas medidas heredan el tamaño o se basan en algún tamaño que
se haya seleccionado y el valor irá cambiando según si la pagina cambia de tamaño, las
medidas relativas son :
➔ %
➔ em
➔ rem
Medidas Em
Em es el acrónimo de elemento y su función es tomar el tamaño de fuente que tenga el

padre directo.
Ejemplo:
Padre: es container que le dimos un tamaño de 20 px
Hijo: es Div y le dijimos que tuviera un tamaño de 2 em
20px * 2 em = 40px
Medidas Rem
Es proporcional de manera constante a el valor dado por HTML es decir no toma en cuenta
el tama;o de padre sino siempre tomará como referencia HTML
1 rem = 16 px
TIP: Para no tener que estar realizando cálculos vamos a dar a HTML un tamaño en
font-size: 62,5% esto hará que el tamaño de la fuente quede en 10px.
1rem=10px
1.6rem= 16px
2 rem=20px
3rem=30px
Ejemplo:
Max/Min width
Las medidas vh y vw
son medidas relativas de acuerdo al viewport.
Vh hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte
del ancho del viewport.
★ 1vh = 1% de la altura del viewport

★ 100vh = altura del viewport
★ 1vw = 1% del ancho del viewport

★ 100vw = ancho del viewport
Max-width
La propiedad de CSS max-width coloca el máximo ancho a un elemento. Además, impide
que el valor de width sea más largo que el valor especificado en max-width.
Min-width
A diferencia de max-width que define el tamaño máximo, min-width define el mínimo tamaño
que un elemento puede tener.
Max-heigth
La propiedad max-height funciona de manera similar a la propiedad max-width, pero afecta
a la altura en lugar de anchura.
Min-heigth
A diferencia de la altura máxima, la propiedad altura mínima proporciona una altura mínima
para un elemento
Position
La propiedad position de CSS especifica cómo un elemento es posicionado en el
documento. Las propiedades top, right, bottom, y left determinan la ubicación final de los
elementos posicionados.
static
El elemento es posicionado de acuerdo al flujo normal del documento. Las propiedades top,
right, bottom, left, and z-index no tienen efecto. Este es el valor por defecto.
relative
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es

desplazado con relación a sí mismo, con base en los valores de top, right, bottom, and
left. El desplazamiento no afecta la posición de ningún otro elemento; por lo que, el espacio
que se le da al elemento en el esquema de la página es el mismo como si la posición fuera
static. Este valor crea un nuevo contexto de apilamiento, donde el valor de z-index no es
auto.
absolute
El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el
elemento en el esquema de la página. Es posicionado relativo a su ancestro posicionado
más cercano, si lo hay; de lo contrario, se ubica relativo al bloque contenedor inicial. Su
posición final está determinada por los valores de top, right, bottom, y left.
fixed
El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el
elemento en el esquema de la página. Es posicionado con relación al bloque contenedor
inicial establecido por el viewport, excepto cuando uno de sus ancestros tiene una
propiedad transform, perspective, o filter establecida en algo que no sea none (ver CSS
Transforms Spec), en cuyo caso ese ancestro se comporta como el bloque contenedor.
sticky
El elemento es posicionado de acuerdo al flujo normal del documento, y luego es

desplazado con relación a su ancestro que se desplace más cercano y su bloque
contenedor (ancestro en nivel de bloque más cercano) incluyendo elementos relacionados a
tablas, basados en los valores de top, right, bottom, y left. El desplazamiento no afecta la
posición de ningún otro elemento.
Display Flex
Flex es un tipo de display que permite que el contenedor padre sea flexible a los cambios
que puedan tener los elementos hijos en su alineación.
Una vez tengamos el elemento padre con display flex tenemos otras propiedades que
podremos usar para nuestro beneficio.
Flex-direction
Te permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal
(row), esta alineación viene por defecto.
Una aclaración con flex-direction: Al ocupar flex-direction las propiedades justify-content y

align-items cambian su funcionamiento, es decir, si se pone un flex-direction de column…
justify-content ahora alineará de forma vertical y align-items de forma horizontal.
Justify-content
Esta propiedad nos permite alinear el contenido de forma horizontal
Valores.
Flex-start
Alinear ítems del flex desde el comienzo.
Flex-end
Alinear items desde el final.
Center
Alinear items en el centro del contenedor.
Space-between
Distribuir items uniformemente, el primer ítems al inicio, el último al final.
Space-around
Distribuir items uniformemente, estos tienen el mismo espacio a su alrededor.
Space-evenly
Distribuye uniformemente el espacio entre los ítems y su alrededor.
Flex-wrap
Permite que un elemento cuyo tamaño sea mayor al de la página haga un salto de línea sin
salirse del contenedor, pues este se agranda.
Order
Especifica el orden utilizado para disponer los elementos en su contenedor flexible. Los
elementos estarán dispuestos en orden ascendente según el valor de order.
Flex-grow
Especifica qué cantidad del espacio restante dentro del contenedor flexible, debería ocupar
el ítem en cuestión según su dirección principal, esta última determinada por flex-direction.
Flex-basis
Especifica el tamaño inicial de un elemento flexible.

Variables
¿Para qué sirven?

Nos servirán para guardar valores que reiteradamente ocuparemos en el desarrollo de
nuestro proyecto. Realmente se le ve mas utilidad en proyectos grandes. Pero claro, es
importante conocerlo desde ahora.
¿Cómo se declara?
Normalmente se declara dentro de :root pondremos colores, fuentes, bordes que sean
repetitivos serán variables globales.
indicando con – (Doble guión) y seguido del Nombre de la variable y el **valor **que este
tendrá.
¿Cómo utilizar las variables?

Se utilizaran las variables gracias a la Función var() y se usa de la siguiente manera.
como llamarla?
Fonts
Son grupos familiares de fuentes, los navegadores web poseen fuentes predeterminadas y
dependiendo del mismo cada uno de ellos posee estilos diferentes.
Algunas Generic Families
serif: Son un tipo de fuente de estilo formal o clásico como Times New Roman.
sans-serif: No tienen acabado en las puntas, como: Verdana.
cursive: Son las que tienen estilo cursivo.
monospace: Son tipos de fuentes con espaciado entre las letras, como: Roboto mono.
¿Cómo puedo saber que tipo de fuente tengo instaladas en mi navegador?
Menú>Configuración>Diseño>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif
¿Cómo puedo importar tipos de fuentes a mi proyecto?

● Ir a Google Fonts.
● Seleccionar la fuente.
● Seleccionar Estilo de fuente.
● Agregar al proyecto, se considera buena práctica agregar las fuentes utilizando la
etiqueta <link>, ya que la fuente cambia la fuente una vez que se haya cargado la
página.
Buenas Prácticas
★ Cargar una sola fuente.
★ Importarlas siempre en la etiqueta del head.
https://fonts.google.com/icons?selected=Material+Icons
https://fontawesome.com/
https://fonts.google.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
Malas Prácticas dichas en Clase Hasta Ahora

★ Utilizar tanto id en CSS
★ Utilizar el !important
★ Utilizar la etiqueta <style> dentro del archivo html
★ Utilizar el atributo style dentro de las etiquetas html
★ Utilizar div para contener todo ignorando los header, nav, section, article, etc.
★ No utilizar la etiqueta <form> para hacer formularios
★ Utilizar las etiquetas <select> y <option> para hacer selectores o menús
desplegables.
★ No nombrar el primer archivo html del proyecto como index.html
★ No tener archivos .css para cada pantalla de un proyecto.
★ Tener todo el css junto en un solo archivo.
★ No ponerle el atributo alt a una imagen
★ Poner imágenes dentro de <div> en vez de <figure>
★ Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS,
text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras
gritando.
★ Poner videos que se reproduzcan solos.
★ No optimizar las imágenes.
★ No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
★ No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada
para CSS.
★ No cerrar las etiquetas que se cierran en sí mismas como <br/>
★ No comentar partes esenciales de tu código.
★ No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto
para que los navegadores los puedan ubicar mejor.
★ No usar la etiqueta <meta name=”viewpor” content=”width=device-width,
initial-scale=1.0”> para hacer tu proyecto responsive.
★ No poner el atributo autocomplete=”valor” en los campos de tu formulario para
hacerle la vida más fácil al usuario
★ No usar el atributo required en los campos obligatorios de tu formulario como una
primera capa de seguridad
Responsive design
Una misma estructura HTML y varios css adaptados a varios display.
El viewport lee el tamaño de la pantalla para generar la escala este se ingresa en el head de
HTML
Si queremos evitar que el usuario puede escalar nuestra web, debemos establecer un
user-scalable=no, así le decimos al navegador que el usuario no puede hacer zoom en la
página.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
De donde inicies el css depende del tipo de proyecto que está realizado esto se basará en
la experiencia de usuario ejemplo si su uso será más en escritorio o desde el celular.
Desktop first
mobile first
Breakpoints: cuando la pantalla sea de cierto tamaño, se generará un cambio para

reposicionar o redimensionar los contenedores.
mínimo debo realizar 3 breakpoints y es recomendable generar un límite de crecimiento a

1400px.
Media queries
Se debe optimizar para todos los dispositivos. Hay tiene que tener en claro un par de
conceptos:
Break points: cuando la pantalla sea de cierto tamaño, se generará un cambio para
reposicionar o redimensionar los contenedores.
Media Query: son condicionales. No es la mejor práctica pero aplicándolo al CSS: @media
(min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo.
El pixelaje dado será el break point.
Lo más importante es diseñar para el móvil. Por lo que se debe diseñar con mobile first. Es
decir, primero diseñar para celular, luego un break point para tablet y finalmente un break
point para PC.
Para aplicar media queries con buenas prácticas, hay que hacerlo en el header. Porque así
solo se descarga el código necesario según el dispositivo, mientras que en CSS se
descarga todo sin importar nada.
En la tag link se colocan los atributos href, rel y, a partir del segundo archivo, el break point
media="screen and (min-width: #px". El style.css debe estar hecho para mobile. Luego se
pueden crear otros archivos como tablet.css o desktop.css.
https://www.mydevice.io/
Concepto de columnas
Columnas estáticas
son columnas de 80 px cada una o también puede ser 74 px + 3px + 3px
Columnas dinámicas
Consta de 12 columnas.
Mostly Fluid
El patrón Mostly fluid consiste, principalmente, en una cuadrícula fluida. Por lo general, en
las pantallas grandes o medianas se mantiene el mismo tamaño y simplemente se ajustan
los márgenes en las más anchas.
@media(min-width:600px) {
.c2,
.c3,
.c4{
width:50%
}
@media (min-width: 800px) {

.container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
.c1 {
width: 60%;
}
.c2 {
width: 40%;
}
.c3,
.c4 {
width: 33%;
}
.c5 {
width: 34%;
}
Layout shifter
El patrón Layout shifter es el más adaptable, ya que posee varios puntos de interrupción en
diferentes anchos de pantalla.
<main class="container">
<div class="c1"></div>
<div class="c4">
</div>
@media (min-width:600px) {
.c1{
width: 25%;
}
.c4{
width: 75%;
}
.c5{
width: 100%;
}
}
@media (min-width:800px){
.container{
width: 800px;
margin-left: auto;
margin-right: auto;
}
.c1{
width: 50%;
order: 1;
}
.c4{
width: 100%;
}
.c5{
width: 50%;
order: 2;
}
}
Column drop
En el caso de los diseños con varias columnas de ancho completo, durante el proceso de
colocación de columnas éstas únicamente se colocan de forma vertical debido a que el
ancho de la ventana es demasiado reducido para el contenido.
<main class="container">
</main
.container{
display: flex;
flex-wrap: wrap;
}
.c1,
.c2,
.c3,
.c4,
.c5{
width: 100%;
min-width: 150px;
height: 150px;
}
.c4{
height: auto;
}
.c1{
background-color: #fabfb7;
}
.c2{
background-color: #fdf9c4;
}
.c3{
background-color: #ffda9e;
}
.c4{
background-color: #c5c6c8;
}
.c5{
background-color: #b2e2f2;
}
@media (min-width: 600px){

.c1{
width: 25%;
order: 1;
}
.c2{
width: 75%;
order: 2;
}
.c3{
width: 100%;
order: 3;
}
.c4{
width: 100%;
order: 4;
.c5{
width: 100%;
order: 5;
}
}
@media (min-width:800px){
.c1{
width: 30%;
}
.c2{
width: 40%;
}
.c3{
width: 30%;
}
.c4{
width: 50%;
}
.c5{
width: 50%;
}
}
Tiny tweaks: El patrón Tiny tweaks permite realizar pequeños cambios en el diseño, como
ajustar el tamaño de la fuente, cambiar el tamaño de las imágenes o desplazar el contenido
de maneras muy poco significativas.
Off canvas: En lugar de apilar contenido verticalmente, el patrón Off canvas coloca
contenido menos usado (tal vez menús de navegación o de apps) fuera de la pantalla y solo
lo muestra cuando el tamaño de la pantalla es suficientemente grande.
Configuración del proyecto
Setup del proyecto, es como vamos a organizar nuestras carpetas y archivos del proyecto.
Shortcut, abreviación que nos permite generar un grupo de código.
.
Repaso de etiquetas:
• <!DOCTYPE html> esta etiqueta sirve para avisar al navegador que estamos hablando de
HTML5.
• Head, es una etiqueta contenedora, y no es visible para el usuario, pero es necesaria para
manejar dependencias.
• Body, es una etiqueta contenedora, y contiene todo lo visual con lo que el usuario puede
interactuar.
• Link, es una etiqueta de contenido que sirve para referenciar ciertos assets y por medio de
esta invocamos nuestro archivo css.

Apuntes de Css y HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Apuntes de Css y HTML

Cargado por

Copyright:

Formatos disponibles

Inducción a Programación

Les comparto mis notas:

● HTTP : Hypertext Transfer Protocol (Protocolo de Transferencia de Hipertexto)

En la actualidad la manera de escribir, leer e interpretar los datos transferidos a través de 3

● HTML: HyperText Markup Language

Así nos quedó el Head:

Index y su estructura básica: body

Etiquetas: Existen dos tipos etiquetes de contenido y etiquetas contenedoras

Generar la maquetación de nuestro proyecto y esto se le llama Semántica de HTML.

header: cabecera del documento.

footer: pie de página del documento.

<ul>

<li></li>

<ol><!--Lista ordenada: Numerada→

Etiqueta <p> Es para ingresar texto

Etiqueta de formato multimedia:

Clasificación de las imágenes: Lossy (con pérdida) vs Lossless(sin

Lossless (sin pérdida):

Lossy (con pérdida):

● Mejora el tamaño de tus imágenes https://tinypng.com/

<video controls preload="auto">

La etiqueta <video>, tiene algunos atributos como:

preload = auto: hace que el navegador descargue el video, en el momento en el que se

Loop para que cuando termine el vídeo vuelva e inicie

Etiqueta form e input (formularios)

Es importante utilizar la etiqueta <form></form> para indicar que utilizaremos un formulario,

El atributo autocomplete = “tipo-del-input” hace que el navegador auto-complete los

Input type submit vs. Button tag

Button = lo utilizaremos en cualquier otro tipo de botón dentro de nuestro proyecto

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

Se puede agregar el CSS de 3 maneras:

1. Como link hacia un archivo externo “.css”:

2. Como un bloque de código CSS dentro del head del HTML:

3. Como un atributo dentro de una etiqueta HTML (estilo embebido):

Pseudo clases y pseudo elementos

Anatomía de una regla en css

Es código css que el elemento padre heredará al hijo.

Inherit, Indica que heredará los estilos de su elemento padre

Orden de declaración en .css

1. Hoja de estilo de agente de usuario (Estilos del navegador): primero el navegador va

3. Declaraciones importantes en hojas de estilos de autor (utilizar el !important)

3 importancia (mala práctica)

5 importancia (mala práctica)

**¡Recuerda! ** Si no se cargan los estilos que tu deseas es por que hay

Combinadores: Adjacent Siblings (combinators)

El combinador hermano adyacente ( +) separa dos selectores y coincide con el segundo

Selecciona solo lo que sea hijo directo.

Em es el acrónimo de elemento y su función es tomar el tamaño de fuente que tenga el

★ 1vh = 1% de la altura del viewport

★ 1vw = 1% del ancho del viewport

El elemento es posicionado de acuerdo al flujo normal del documento, y luego es

El elemento es posicionado de acuerdo al flujo normal del documento, y luego es

Una aclaración con flex-direction: Al ocupar flex-direction las propiedades justify-content y

Especifica el tamaño inicial de un elemento flexible.

¿Para qué sirven?

¿Cómo utilizar las variables?

Algunas Generic Families

¿Cómo puedo saber que tipo de fuente tengo instaladas en mi navegador?

Menú>Configuración>Diseño>Personalizar Fuentes>Fuente Serif/Fuente Sans-serif

¿Cómo puedo importar tipos de fuentes a mi proyecto?

Malas Prácticas dichas en Clase Hasta Ahora

Una misma estructura HTML y varios css adaptados a varios display.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

¡Recuerda! Si no se cargan los estilos que tu deseas es por que hay