HTML+CSS
HTML+CSS
Nomenclatura
Al manejar código, siempre que no sea obligatorio (excluimos el texto visual como el texto que ve el usuario), usen:
● camelCase
● kebab-case
● snake_case
● BEM
Eviten siempre caracteres especiales como tildes e inicien todo en minúscula ya que en programación las mayúsculas se reservan para casos
especiales que no van a aplicar a este curso.
Siempre tengan el archivo index.html en la carpeta raíz al iniciar su proyecto, hay otras convenciones como las que
se usa en angular o react pero como están programadas para ejecutarse en una página única (tienen un único html
que es index.html) su estructura es distinta.
Para mantener la organización, el uso de carpetas es muy útil, yo recomiendo una carpeta para:
1. El resto de los HTML
2. Fotos y videos, este se puede subdividir por tipo de archivo o por página o uso, lo importante es que una
vez que elijan un orden, se apeguen a él.
3. CSS, cómo ustedes van a usar un css único, pueden no hacer esta carpeta.
4. SASS, lo van a usar a futuro
Anidación
En programación se dice que 2 elementos están anidados cuando uno se encuentra dentro de otro, se llama padre al elemento que contiene al
hijo.
Herencia
El elemento hijo puede heredar varias propiedades del padre, se ve caso a caso, pero el padre no hereda cosas del elemento hijo.
HTML
Etiquetas
HTML es un conjunto de etiquetas anidadas todas dentro de la etiqueta html. A estas etiquetas se les
pueden agregar atributos y estos atributos pueden tener valores. Se va a ver con mayor claridad más
adelante pero se puede pensar que cada etiqueta es una caja cerrada.
Las etiquetas poseen apertura <etiqueta> y cierre </etiqueta> o son únicas <etiqueta/>. La apertura de
una etiqueta siempre tiene que tener el mismo nivel de indentación que su cierre, de lo contrario esta
mal indentado.
Lo importante es no romper etiquetas, ya dijimos que son cajas cerradas, si un elemento que se abre
adentro se cierra afuera, se te tuvo que romper la caja en algún lado para que salga.
Listado de etiquetas:
● Mozilla(Español)
Etiquetas metadata:
● meta: dependiendo del atributo hay varias, en la imagen que se ve de arriba a abajo:
●.1. Señala compatibilidad de caracteres, esto le permite mostrar tildes o ñ, hay distintos para caracteres japoneses, chinos, etc.
●.2. Compatibilidad con internet explorer, por mucho tiempo internet explorer no se adhirió a las prácticas de w3schools y no
soportaba muchas cosas que los otros navegadores si
●.3. Permite a la página ver el ancho de pantalla
● title: pones el nombre que vas a ver en pantalla
● link: une el contenido de otros archivos al html
Esto se hace mediante una etiqueta link que vamos a colocar dentro del header, es imperativo que tenga la propiedad rel, que indica la relación al
html y href, la ubicación relativa del CSS con respecto al HTML. Personalmente encuentro que agregar el atributo type con el valor “text/css”
ayuda mucho con temas de compatibilidad.
Selectores
Más adelante junto animaciones se verán pseudoselectores en la clase de animación
Un selector llama al elemento al que le vamos agregar estilo. Hay 3 tipos:
● Etiqueta: no lleva nada por delante y le da estilo a todas las etiquetas llamadas por igual, es la de menor importancia.
● Clase: lleva un “.” por delante y da estilo a todas las etiquetas con esa clase. Para agregar una clase a
una etiqueta html se lo hace mediante el atributo class , una clase es una única palabra (podes poner cosas
como descripcion-1 o imgLogo) y se pueden agregar varias clases separándolas con espacios . Si bien
una clase descriptiva es buena, lo mejor es no hacerlas muy largas. Es de importancia mediana
● ID: lleva un “#” por delante y llama a la etiqueta con el id seleccionado (como sabemos el id es único
siempre). Es de gran importancia.
Es posible llamar a varios selectores simultáneamente separándolos con “,”:
Efecto cascada
El efecto cascada de css se da cuando 2 selectores llaman a la misma propiedad de css de una etiqueta. Ahí css toma en cuenta el orden y la
importancia. Si uno es más importante (estilo en atributo html>id>clase>etiqueta), el de mayor importancia es el que modifica al html. Por otro
lado, si ambos son de igual importancia, el último (el de la última línea)es el que se toma.
Se pueden importar varios css a un mismo html y seria lo mismo que pegarle al primer css los otros al final, por lo que sí a una etiqueta se lo
llama con el mismo nivel de importancia en todos los css, por efecto cascada se toma el del último css linkeado ya que queda al final y “pisa”al
resto
Propiedades que vieron por ahora que le van a dar más uso
● color
● border
● border-radius
● background
● text-shadow
● box-shadow
● list-style
● font-type (y google fonts)
● font-style
● font-size
● overflow
Unidades
Las unidades relativas son más fáciles de hacer responsivas pero hay muchos casos en los que uno prefiere usar unidades fijas.
Absolutas:
● px (pixeles/el más usado)
● cm (centimetros)
● mm (milimetros)
● in (pulgadas)
● pt (puntos)
● pc (picas)
Relativas:
● % (porcentaje en relación al elemento padre/muy usado/si lo usan para fuentes hay tabla)
● em (relativo al tamaño de fuente del elemento/muy usado)
● rem (relativo al tamaño de fuente del elemento raíz/muy usado)
● ex (relativo a la altura de la letra)
● ch (relativo al ancho del caracter “0”)