Curso de CSS

CSS es un lenguaje de hojas de estilo en cascada, usado mayormente para dar estilos a documentos HTML, CSS se basa en reglas de estilos para cambiar visualmente la apariencia de los antes nombrados documentos HTML, esto incluye diseño, colores, animaciones, fuentes y entre otros elementos visuales.

Como bien sabemos que CSS se basa en reglas de estilos, tenemos una serie de propiedades que permiten cambiar el comportamiento visual.

Propiedades mas usadas en CSS

• background-color: Establece el color de fondo de un elemento.
• color: Establece el color del texto de un elemento.
• font-size: Establece el tamaño de fuente del texto de un elemento.
• font-family: Establece la fuente de un elemento.
• padding: Establece el espacio entre el contenido de un elemento y su borde.
• margin: Establece el espacio entre los bordes de un elemento y los elementos circundantes.
• border: Establece el estilo, ancho y color del borde de un elemento.
• text-align: Establece la alineación horizontal del texto dentro de un elemento.
• display: Establece el tipo de pantalla de un elemento.
• width: Establece el ancho de un elemento.
• height: Establece la altura de un elemento.
• position: Establece la posición de un elemento.
• top, right, bottom, left: Establecen la posición de un elemento en relación a su contenedor.
• float: Establece el flujo del contenido de un elemento.
• clear: Establece el comportamiento de un elemento cuando se encuentra en una línea con otros elementos flotantes.
• opacity: Establece la opacidad de un elemento.
• transition: Establece la duración, el tiempo de espera y la función de transición de una animación.
• text-decoration: Establece la decoración del texto, como subrayado, tachado, etc.
• text-transform: Establece la transformación del texto, como mayúsculas o minúsculas.
• text-shadow: Establece una sombra alrededor del texto.
• box-shadow: Establece una sombra alrededor de un elemento.
• border-radius: Establece la curvatura de las esquinas de un elemento.
• outline: Establece una línea de contorno alrededor de un elemento.
• background-image: Establece una imagen de fondo de un elemento.
• background-size: Establece el tamaño de la imagen de fondo de un elemento.
• background-position: Establece la posición de la imagen de fondo de un elemento.
• background-repeat: Establece la repetición de la imagen de fondo de un elemento.
• transform: Establece transformaciones en un elemento, como rotación, escala, etc.
• transition: Establece una transición animada en un elemento.
• cursor: Establece el tipo de cursor que aparece al pasar el ratón por encima de un elemento.
• box-sizing: Establece el modelo de caja de un elemento, como content-box o border-box.
• overflow: Establece el comportamiento de un elemento cuando su contenido desborda su espacio.
• z-index: Establece el orden de apilamiento de los elementos en una página.
• line-height: Establece la altura de línea de texto dentro de un elemento.

¿Que son los selectores ?

Los selectores son patrones que se utilizan para seleccionar uno o más elementos en una página web y aplicarles estilos en CSS. Los selectores pueden ser de tipo, de clase, de ID, de descendencia, de hermano adyacente, de hermano general, etc. Ejemplo: h1 selecciona todos los encabezados de nivel 1 en la página.

¿Que son los pseudoselectores ?

Los pseudoselectores son palabras clave que se utilizan para aplicar estilos a partes específicas de un elemento, como la primera letra (::first-letter) o la primera línea (::first-line) de un párrafo. Los pseudoselectores se agregan después del selector y se escriben con dos puntos dobles ::. Ejemplo: p::first-letter selecciona la primera letra de todos los párrafos en la página.

¿Que son las pseudoclases ?

Las pseudoclases son palabras clave que se utilizan para aplicar estilos a elementos que están en un estado específico, como cuando el usuario mueve el cursor sobre un enlace (:hover) o cuando un elemento está activo (:active). Las pseudoclases se agregan después del selector y se escriben con dos puntos :. Ejemplo: a:hover selecciona todos los enlaces cuando el usuario mueve el cursor sobre ellos.

¿Que son las clases ?

Las clases son atributos que se agregan a los elementos HTML para identificarlos y darles estilo en CSS. Las clases se escriben con un punto . seguido del nombre de la clase. Ejemplo: .texto-rojo selecciona todos los elementos con la clase texto-rojo

Tipos de selectores

Selectores comunes

• Selector universal (*): selecciona todos los elementos de la página.
• Selector de tipo (elemento): selecciona todos los elementos del tipo especificado, por ejemplo p para párrafos.
• Selector de clase (.clase): selecciona todos los elementos que tienen la clase especificada.
• Selector de ID (#id): selecciona el elemento con el ID especificado.
• Selector de descendiente (espacio): selecciona elementos que son descendientes de otro elemento, por ejemplo div p selecciona todos los párrafos dentro de un div.
• Selector de hijo (>): selecciona elementos que son hijos directos de otro elemento, por ejemplo div > p selecciona todos los párrafos que son hijos directos de un div.
• Selector de hermano adyacente (+): selecciona el primer elemento que sigue inmediatamente al otro elemento, por ejemplo h1 + p selecciona el primer párrafo que sigue inmediatamente a un encabezado de nivel 1.
• Selector de hermano general (~): selecciona todos los elementos que siguen al otro elemento, por ejemplo h1 ~ p selecciona todos los párrafos que siguen a un encabezado de nivel 1.

Selectores mas complejos

• Selector de atributo : selecciona elementos que tienen un atributo específico Ej: [atributo]

Un atributo específico con un valor específico Ej: [atributo=valor]

Que comienza Ej: [atributo^=valor]

Que termina Ej: [atributo$=valor]

Que contiene un valor específico Ej: [atributo*=valor]

Ejemplo:

Usamos el tipo de selector atributo

input[name="apellidos"] {
  margin-bottom: 1rem;
  border: red;
}

input[type="text"] {
  ...
}

input[class="micss"] {
  ...
}

[name="nombres"] {
    border: 3px solid red;
}

El siguiente ejemplo es un poco mas complejo, selecciona todos los enlaces que no tienen el atributo href

a:not([href]) { color: purple; }

El siguiente ejemplo, muestra de color azul todos los links que apunten a determinada url

a[href="https://google.com"] { color: blue; }

• Selectores de pseudo-elementos (::before, ::after, ::first-line, ::first-letter, ::selection): selecciona elementos y partes específicas de elementos que no existen en el árbol DOM, como el contenido antes o después de un elemento, la primera línea o la primera letra de un elemento, o el texto seleccionado por el usuario.

A continuación un ejemplo de como utilizar before, after, selection

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ejemplo Pseudo-elementos y Pseudo-clases</title>
    <style>
      /* Pseudo-elemento ::before */
      h1::before {
        content: "Antes de: ";
        color: blue;
      }

      /* Pseudo-elemento ::after */
      h1::after {
        content: "Después de.";
        color: red;
      }

      /* Pseudo-clase ::selection */
      p::selection {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>Título principal</h1>
    <p>Este es un párrafo de ejemplo que muestra el uso de los pseudo-elementos y pseudo-clases en CSS.</p>
  </body>
</html>

• Selectores de pseudo-clases (:hover, :active, :focus, :visited, :nth-child(), :nth-of-type(), :not(), :empty, :checked, :disabled, :enabled, :target, :lang()): selecciona elementos en función de su estado o posición en la página, como cuando el usuario mueve el cursor sobre un elemento (:hover), cuando un enlace ha sido visitado (:visited), o cuando un elemento es el tercer hijo de su padre (:nth-child(3)).

Ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ejemplo de Pseudo-clases en CSS</title>
    <style>
      /* Pseudo-clase :hover */
      a:hover {
        color: red;
      }

      /* Pseudo-clase :active */
      button:active {
        background-color: blue;
      }

      /* Pseudo-clase :focus */
      input:focus {
        border: 2px solid green;
      }

      /* Pseudo-clase :visited */
      a:visited {
        color: gray;
      }

      /* Pseudo-clase :not */
      p:not(.importante) {
        color: gray;
      }

      /* Pseudo-clase :checked */
      input[type="checkbox"]:checked + label {
        text-decoration: line-through;
      }

      /* Pseudo-clase :disabled */
      input[type="text"]:disabled {
        background-color: gray;
      }

      /* Pseudo-clase :enabled */
      input[type="text"]:enabled {
        background-color: white;
      }

      /* Pseudo-clase :target */
      #seccion1:target {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <a href="#">Enlace</a>
    <button>Botón</button>
    <br>
    <input type="text" disabled>
    <input type="text" enabled>
    <br>
    <input type="checkbox" id="check1"><label for="check1">Opción 1</label>
    <input type="checkbox" id="check2"><label for="check2">Opción 2</label>
    <br>
    <p>Este párrafo no es importante.</p>
    <p class="importante">Este párrafo es importante.</p>
    <br>
    <section id="seccion1">
      <h2>Sección 1</h2>
      <p>Esta es la sección 1.</p>
    </section>
    <section id="seccion2">
      <h2>Sección 2</h2>
      <p>Esta es la sección 2.</p>
    </section>
  </body>
</html>

Tipos de posiciones

• Posicionamiento relativo : El posicionamiento relativo permite desplazar un elemento de su posición original sin afectar la posición de los demás elementos en la página.

Ejemplo:

div {
  position: relative;
  top: 20px;
  left: 30px;
}

En este ejemplo, position: relative establece el posicionamiento relativo del elemento, y top y left desplazan el elemento 20 píxeles hacia abajo y 30 píxeles hacia la derecha, respectivamente.

• Posicionamiento absoluto El posicionamiento absoluto permite fijar un elemento en una posición específica de la página, independientemente de la posición de otros elementos.

Ejemplo:

div {
  position: absolute;
  top: 50px;
  left: 50px;
}

En este ejemplo, position: absolute establece el posicionamiento absoluto del elemento, y top y left lo fijan a 50 píxeles