Guía Visual CSS - Irene-Frias/1DAM GitHub Wiki

🎨 Guía Visual de Propiedades CSS

CSS (Cascading Style Sheets) es el lenguaje estándar para definir la presentación y el diseño de las páginas web. Mientras que HTML se encarga de la estructura del contenido, CSS se ocupa de la apariencia visual de ese contenido. Aquí te dejamos una guía rápida de los aspectos más importantes que debes saber sobre CSS para comenzar a diseñar sitios web.

🌍 ¿Qué es CSS?

CSS es un lenguaje utilizado para controlar el estilo y la disposición de los elementos en una página web. Permite aplicar colores, fuentes, márgenes, espaciado, alineación y otras propiedades visuales a los elementos HTML.

Características principales de CSS:

  • Lenguaje de estilo: CSS no afecta la estructura del contenido, sino su apariencia visual.
  • Separa el contenido del diseño: HTML se encarga de la estructura y el contenido, mientras que CSS se ocupa de la presentación.
  • Cascada: CSS sigue un sistema jerárquico de reglas de estilo, donde los estilos más específicos sobrescriben los más generales.
  • Responsive Design: CSS permite crear diseños adaptativos que se ajustan a diferentes tamaños de pantalla (móviles, tabletas, escritorios).

🧩 Estructura Básica de un Documento CSS

Un documento CSS típico contiene reglas que se aplican a elementos HTML de la siguiente manera:

  • Selector: Es el elemento HTML al que se le aplican los estilos (por ejemplo, p, .clase, #id).
  • Propiedad: Es la característica que se va a modificar (por ejemplo, color, font-size, margin).
  • Valor: Es el valor que se asigna a la propiedad (por ejemplo, red, 16px, 10px).
/* Este es un comentario */
selector {
  propiedad: valor;
}

✨ Propiedades de Estilo de Texto y Color

1. color

Define el color del texto.

  • Ejemplo: color: blue;

2. background-color

Establece el color de fondo de un elemento.

  • Ejemplo: background-color: #f0f0f0;

3. font-family

Define la familia de fuentes para el texto.

  • Ejemplo: font-family: Arial, sans-serif;

4. font-size

Define el tamaño de la fuente.

  • Ejemplo: font-size: 16px;

5. font-weight

Define el grosor de la fuente, que puede variar dependiendo de la tipografía que se le haya indicado. Valores comunes incluyen normal (por defecto) o bold (negrita).

  • Ejemplo: font-weight: bold;

6. font-style

Controla el estilo de la fuente, como poner el texto en cursiva. Es útil para enfatizar palabras o frases dentro de un párrafo.

  • Valores comunes: normal, italic, oblique
  • Ejemplo: font-style: italic;

El valor italic aplica un estilo de fuente en cursiva, que se usa para resaltar texto, citas o elementos importantes. El valor oblique también puede ser utilizado, aunque su efecto varía dependiendo de la fuente utilizada.

7. text-align

Alinea el texto dentro de un elemento.

  • Valores comunes: left, center, right, justify
  • Ejemplo: text-align: center;

8. text-decoration

Añade decoraciones visuales al texto, como subrayado, tachado o líneas onduladas.

  • Ejemplo: text-decoration: underline wavy red;

Puedes aplicar diferentes estilos de línea y colores para personalizar la decoración. Por ejemplo, subrayado ondulado de color rojo con un ajuste de tamaño en el valor.

📏 Espaciado y Bordes

9. margin

Define el espacio exterior de un elemento (alrededor del borde).

  • Ejemplo: margin: 10px;
  • Propiedades relacionadas: margin-top, margin-right, margin-bottom, margin-left

10. padding

Define el espacio interior de un elemento (entre el borde y el contenido).

  • Ejemplo: padding: 15px;
  • Propiedades relacionadas: padding-top, padding-right, padding-bottom, padding-left

11. border

Define el borde de un elemento en términos de grosor, estilo y color.

  • Ejemplo: border: 1px solid black;
  • Propiedades relacionadas: border-width, border-style, border-color, border-collapse

12. border-radius

Redondea las esquinas de un borde, dándole un efecto visual más suave.

  • Ejemplo: border-radius: 5px;

📐 Tamaño y Dimensiones

13. width

Define el ancho de un elemento.

  • Ejemplo: width: 100px;

14. height

Define la altura de un elemento.

  • Ejemplo: height: 50px;

📋 Layout y Posicionamiento

15. display

Especifica el tipo de visualización de un elemento.

  • Valores comunes: block, inline, inline-block, flex, grid, none
  • Ejemplo: display: flex;

16. position

Controla la posición de un elemento dentro de la página.

  • Valores comunes: static, relative, absolute, fixed, sticky
  • Ejemplo: position: absolute;

17. top, right, bottom, left

Define la ubicación de un elemento posicionado. Se utiliza junto con la propiedad position.

  • Ejemplo: top: 10px; left: 20px;

18. float

Posiciona un elemento a la izquierda o derecha, permitiendo que otros elementos floten alrededor de él.

  • Ejemplo: float: right;

19. clear

Controla el flujo de elementos flotantes para que no interfieran con otros elementos.

  • Valores comunes: none, left, right, both
  • Ejemplo: clear: both;

20. overflow

Controla cómo se maneja el contenido desbordado de un contenedor.

  • Valores comunes: visible, hidden, scroll, auto
  • Ejemplo: overflow: hidden;

21. z-index

Controla el orden de apilamiento de los elementos posicionados, permitiendo que algunos elementos se sitúen encima de otros.

  • Ejemplo: z-index: 10;

🎛 Interactividad y Estilo Avanzado

22. opacity

Define la opacidad de un elemento (cuánto de transparente es).

  • Ejemplo: opacity: 0.5;

23. cursor

Cambia el tipo de cursor cuando se pasa sobre un elemento.

  • Ejemplo: cursor: pointer;

24. box-shadow

Aplica una sombra alrededor de un elemento para darle un efecto tridimensional.

  • Ejemplo: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

25. transition

Define la transición de una propiedad cuando cambia, por ejemplo, cuando un elemento cambia de estado (como al hacer hover).

  • Ejemplo: transition: all 0.3s ease;

26. transform

Aplica transformaciones en el espacio, como rotar, escalar o trasladar un elemento.

  • Ejemplo: transform: rotate(45deg);
/* Estilo para enlaces */
a {
    color: darksalmon;
    font-weight: bold;
}

/* Enlaces visitados */
a:visited {
    color: green;
    background-color: yellow;
}

/* Enlace cuando aún no se ha visitado */
a:link {
    color: red;
}

/* Enlace cuando el cursor está encima */
a:hover {
    color: black;
}

/* Enlace cuando se hace clic */
a:active {
    color: blue;
}

📐 Flexbox y Grid

27. flex (para Flexbox)

Define cómo un elemento flexible se comporta dentro de un contenedor con display: flex.

  • Propiedades relacionadas: justify-content, align-items, flex-direction
  • Ejemplo: display: flex; justify-content: center; align-items: center;

28. grid (para Grid Layout)

Define un contenedor como un grid, display: grid;

  • Propiedades relacionadas:

    • Establecer columnas y filas en el contenedor: grid-template-columns, grid-template-rows (distribuyen los elementos por la anchula de las columnas y las filas). Las unidades de medida son en píxeles px, porcentajes % o facciones fr.
    • Dar separación en los elementos: column-gap (las columnas), row-gap (las filas), gap(ambos, tanto columnas como filas).
    • Establecer las dimensiones de las filas o columnas: grid-template le pondremos un tamaño indicado. También se pude indicar por defecto con grid-auto-rows o grid-auto-columns.

  • Ejemplo: display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: 100px;

   .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 50px;
      grid-auto-rows: 100px;
  }
  • Además se pueden utilizar otros valores determinados como:
    • repeat repetir un número de veces el número indicado.
    • minmax permite generar un tamaño variable en ese rango.
    • auto-fill permite que el número de columnas dependa del tamaño de la ventana según el número de columnas que haya, tantas como puedan caber.
    • grid-column-start indica la primera casilla vertical donde empieza el elemento.
    • grid-column-end indica la última casilla vertical donde empieza el elemento, grid-column-start +1 ocupando la columna de grid.
    • grid-row-start indica la primera casilla horizontal donde empieza el elemento.
    • grid-row-end indica la primera casilla horizontal donde empieza el elemento, grid-row-start +1 ocupando la fila de grid.
    • span indica el número de columnas o filas que ocupa cada elemento.
  • Ejemplo: grid-column-end: 4; grid-column-end: span 2;
.element {
      grid-column-end: 4;
      grid-column-end: span 2;
}
  • Unen las las columnas grid-column o filas grid-row
  • Indican la estructura general grid-template-areas y con grid-area posiciona la propiedad de los elementos.
.container { 
      display: grid; 
      grid-template-columns: 50px 50px 50px 50px; 
      grid-template-rows: auto; 
      grid-template-areas: "header header header header"
                           "main main . sidebar" 
                           "footer footer footer footer"; 
} 

.header { 
      grid-area: header; 
} 

.main{ 
      grid-area: main; 
} 

.sidebar { 
     grid-area: sidebar; 
} 

.footer { 
     grid-area: footer;
}

29. align-items y justify-content (Flexbox y Grid)

Controlan la alineación y distribución de elementos dentro de un contenedor flex o grid.

  • Ejemplo (Flexbox): align-items: center; justify-content: space-between;

🎭 Pseudo-elementos y Animaciones

30. content (para pseudo-elementos)

Define el contenido de los pseudo-elementos ::before y ::after, que pueden utilizarse para insertar contenido adicional antes o después de un elemento.

  • Ejemplo: 
    .elemento::before {
    content: "Texto adicional";
}