Curso básico de HTML y CSS, Parte 3: Más CSS

  • SHARE

Ya aprendimos un poco de HTML en la parte 1 y conocimos un poco de la sintaxis del CSS en la parte 2. En esta parte, aprenderemos un poco más de CSS.

Al final de la segunda parte, estuvimos familiarizándonos con las pseudo-clases. Pues, existen más pseudo-clases para manejar los estilos de las listas y sus elementos (:first-child, :last-child y :nth-child).

Comencemos con los extremos :first-child (primer hijo) y :last-child (último hijo).

Basic CSS

:first-child (primer hijo) y :last-child (último hijo)

Como su nombre lo indica, son pseudo-clases que nos permiten asignar estilos diferentes al primer y último elemento de una lista. Como vimos en la parte 1, el padre o título de la lista se identifica con la etiqueta <ul> y los hijos o elementos con <li>.

Ahora bien, para modificar los otros elementos debemos usar la pseudo-clase :nth-child(X) en donde la X deberá ser reemplazada por un número, una palabra clave o una fórmula.

La pseudo-clase :nth-child(X)

La pseudo-clase :nth-child(X)

Debemos tomar en cuenta que la cantidad de elementos que colocamos en nuestra lista debe coincidir con nuestro CSS, de lo contrario, uno de los elementos puede quedar sin estilo.

Para solucionar esto, podemos hacer uso de las palabras clave odd (impar) y even (par).

Palabras clave odd (impar) y even (par)

Palabras clave odd (impar) y even (par)

El mismo efecto se puede lograr usando una fórmula en lugar de palabras clave.

Una fórmula en lugar de palabras clave

Una fórmula en lugar de palabras clave

¡No te asustes! El 2n le indica al navegador que de dos en dos se aplicará un estilo comenzando desde el cero; mientras que el 2n+1 indica lo mismo pero comenzando desde el uno. Es básicamente otra manera de decir par e impar.

Pseudo-elementos

Los selectores de CSS, las pseudo-clases y todos los elementos HTML no son suficientes para aplicar estilos a algunos elementos especiales. Muchas veces, la única forma de seleccionar estos elementos especiales es usando los pseudo-elementos.

La sintaxis de los pseudo-elementos es casi igual a la de las pseudo-clases:

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

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

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

Para jugar con los pseudo-elementos crearemos un index4.html con un ejemplo rápido y sencillo en donde aprenderemos a usar ::before y ::after.

::before y ::after

::before y ::after

Los pseudo-elementos nos permiten agregar contenido extra al contenido que ya posee un elemento HTML. El ::before nos permite agregar contenido antes del elemento y el ::after después del mismo.

Puedes pensar que carece de funcionalidad, pero nos sirve para agregar íconos y pequeños detalles.

Combinación de Elementos

Los elementos dentro de un CSS pueden combinarse para optimizar el uso de nuestras reglas con la siguiente sintaxis:

selector selector { propiedad: valor; }

Observemos este código de ejemplo para ver cómo quedaría:

Código de ejemplo

Observamos que aunque el artículo tiene la clase miarticulo y contiene h1 y p, no posee los estilos de la regla .miarticulo ya que estas reglas solo son válidas cuando se encuentra dentro de un contenedor con id seccion1.

Aprendiendo CSS

Colores, Longitudes y Porcentajes

Ahora aprenderemos rápidamente y sin extendernos mucho a asignar otro tipo de valores.

Otro tipo de valores

Ese código nos arrojaría la siguiente imagen:

Otro tipo de valores

Colores

Los colores por keyword (palabra clave) se logran en CSS escribiendo el nombre del color en inglés con la limitante de que solo contamos con pocas opciones. Puedes encontrar la lista de estos colores aquí.

Otros formatos que puedes usar son RGB y RGBA. Los colores RGB se asignan con función rgb(X,X,X), en donde las X son los parámetros para indicar la cantidad de rojo, verde y azul (por sus siglas en inglés red, green, blue). Estos valores pueden ir desde 0 a 255.

Para el formato RGBA se usa una función parecida pero con un parámetro extra llamado alpha que regula la opacidad del color. Esta se mide del 0 al 1, viéndolo como porcentajes (Ej: 0.5 = 50%). Este formato posee una extensa posibilidades de colores para usar: (255 * 255 * 255) = 16.581.375 millones de colores, además de sus sombras.

Por último, tenemos los colores hexadecimales, que no son más que la representación del rojo verde y azul en código hexadecimal. Podemos representarlos de dos formas: con tres dígitos (#000) o con seis (#000000). En el ejemplo colocamos de primero el azul #0000ff o en su forma resumida #00f. La forma resumida solo se puede usar cuando los pares se repiten: 00-00-ff = 00f.

Nota: podemos usar mayúsculas y minúsculas indistintamente.

Longitudes

En CSS la longitudes están dadas por unidades absolutas o relativas que nos permiten definir los tamaños de los elementos estructurales, las letras, los bordes, entre otros.

Dentro de las unidades absolutas tenemos:

in pulgadas (1 pulgada = 2.54 centímetros)
cm centímetros
mm milímetros
px pixel (1 píxel = 1/96 pulgada)
pt puntos (1 punto = 1/72 pulgada)
pc picas (1 pica = 12 puntos)

La más usada es el píxel, aunque últimamente ha perdido popularidad.

Las unidades relativas no están realmente definidas ya que su valor hace referencia a otro. A pesar de su aparente dificultad, son las más utilizadas en el diseño web por la flexibilidad con la que se adaptan a los diferentes medios. Entre esas unidades relativas más usadas se encuentran: rem, em, ex, ch; directamente relacionadas al tamaño de la fuente siendo em la más popular.

La unidad rem toma como base el valor de fuente de la raíz del documento. Su uso es muy simple, si el documento raíz tiene una fuente de 13px, cuando apliquemos rem en algún elemento se multiplicará el número de rem por el valor del documento raíz. Por ejemplo, si con 13px le damos el valor 4rem a un elemento, nos daría 52px.

En el caso de la unidad em la lógica es parecida, con la diferencia de que en vez de buscar en el documento raíz, buscan el elemento padre más cercano con un tamaño de fuente definido. En el código anterior podemos observar que el selector .padre4 posee un ancho de 70em; es decir, el número de píxeles de la fuente más cercana multiplicado por 70. En este caso, es la definida por el navegador obtenida del documento raíz: 16px.

Porcentajes

Los porcentajes nos ayudan a definir los tamaños de los elementos estructurales con respecto a otros elementos. En el código de ejemplo observamos que los selectores .padre2 y .padre3 poseen un ancho de 70%, esto quiere decir que va a tomar un tamaño del 70% en relación a su elemento padre (que en este caso es el cuerpo de la página).

Esto funciona igual para las fuentes, si en un elemento colocamos una fuente de 60px y en el hijo de ese elemento indicamos font-size: 50%; la fuente del elemento hijo tendrá un tamaño de 30px.

Con esto terminamos las bases de CSS. Más adelante veremos a detalle los diferentes usos y propiedades para darle más forma a nuestro sitio web. Mientras tanto, te invito a curiosear y jugar con su código para ver cómo cambia.

Recuerda que puedes descargar todos los ejemplos de código usado en DavecastGit.

¡Hasta la próxima! 🙂

IMPULSA
TU COMPAÑÍA
David Castillo
LEE MAS DE
Desarrollador web en 1Entity. T.S.U en informatica, Ing. en Sistemas y futuro Diseñador Gráfico. Apasionado por la tecnología y programación en desarrollo web. Enamorado de la buena comida y en abundancia.
HAZ CRECER TU
NEGOCIO
Únete a nuestra newsletter y recibe gratis contenido exclusivo valorado en más de $107.
ebook ebook-mobile
x
HAZ CRECER TU NEGOCIO
ÚNETE A NUESTRO NEWSLETTER
Y RECIBE GRATIS
CONTENIDO EXCLUSIVO VALORADO EN MÁS DE $107
No, gracias. No quiero que mi negocio crezca.
( Cero spam, Lo odiamos tanto como tú. )