Herramientas y Conceptos Generales de Desarrollo Web
Visual Studio Code: Es un editor de código fuente desarrollado por Microsoft. Es software libre y multiplataforma, disponible para Windows, GNU/Linux y macOS. VS Code ofrece una excelente integración con Git, soporte para depuración de código y un vasto número de extensiones que permiten escribir y ejecutar código en prácticamente cualquier lenguaje de programación.
CSS (Cascading Style Sheets): Hojas de Estilo en Cascada. Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado como HTML.
Lorem Ipsum: Es un texto de relleno formateado de una manera específica para permitir la presentación de elementos gráficos en documentos sin necesidad de contenido real. Su uso permite a los diseñadores visualizar la disposición y forma del contenido antes de su creación definitiva, otorgando mayor libertad al proceso de diseño y producción.
Símbolo de Copyright (©): La ‘C’ en un círculo significa ‘todos los derechos reservados’ por el autor. Se puede obtener con el código ASCII: tecla ALT + 0169.
Pipeline o Barra Vertical (|): Es una barra que se utiliza comúnmente para separar elementos o palabras, por ejemplo, en la información de derechos de autor. Se puede obtener con el código ASCII: tecla ALT + 124.
Propiedades Fundamentales de CSS
Fondos (Background)
background-image: Especifica la imagen de fondo de un elemento de bloque.
background-position: Especifica la posición de la imagen de fondo dentro del elemento de bloque.
background-size: Establece el tamaño de la imagen de fondo de un elemento de bloque.
background-repeat: Indica si la imagen de fondo se repite y cómo lo hace (horizontal, vertical o en ambas direcciones).
background-color: Determina el color de fondo de un elemento, utilizando diversas nomenclaturas para la asignación de color.
Bordes (Border)
border: Establece una o todas las propiedades de los bordes de un elemento.
border-color: Determina el color del borde de un elemento.
border-radius: Permite a los desarrolladores web definir cuán redondeadas serán las esquinas de un elemento. Comúnmente se aplica a imágenes y contenedores.
Tipografía (Font & Text)
font-family: Especifica el nombre de la familia de la fuente (tipografía).
font-size: Especifica el tamaño de la fuente.
font-style: Determina el estilo de la fuente (normal, cursiva, oblicua, etc.).
font-weight: Determina el grosor de la fuente (por ejemplo, negrita).
color: Determina el color del texto del elemento sobre el que se aplica.
line-height: Establece la altura de línea, afectando el espacio vertical entre líneas de texto.
text-align: Determina la alineación horizontal de un bloque de texto dentro de su elemento contenedor.
text-decoration: Determina la decoración del texto (tachado, subrayado inferior, subrayado superior, parpadeo).
text-justify: Determina la justificación de un párrafo, ajustando los espacios en blanco según el parámetro utilizado.
text-shadow: Agrega sombra al texto. Cada sombra se especifica como un desplazamiento (offset) del texto, junto con valores opcionales de color y radio de difuminación.
Modelo de Caja y Dimensiones (Box Model & Sizing)
width: Ancho de un elemento.
height: Alto de un elemento.
max-width: Limita la anchura máxima de los elementos de bloque.
padding: Establece el espacio de relleno (padding) en todos los lados de un elemento. Es el espacio entre el contenido del elemento y su borde.
margin: Establece el margen exterior para los cuatro lados de un elemento. Es una propiedad abreviada para margin-top, margin-right, margin-bottom y margin-left.
Posicionamiento y Visualización
float: Ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo que el texto y los elementos en línea fluyan a su alrededor.
opacity: Establece el grado de transparencia de un elemento.
Listas (Lists)
list-style: Propiedad que permite determinar el aspecto de los marcadores de una lista, ya sea ordenada (<ol>) o desordenada (<ul>).
Tablas (Tables)
table-layout: Determina el algoritmo utilizado para disponer las celdas, filas y columnas de una tabla.
border-spacing: Determina la distancia que separa los bordes de las celdas adyacentes en una tabla (cuando border-collapse es separate).
border-collapse: Determina si los bordes de la tabla y sus celdas se fusionan en un solo borde o se mantienen separados.
Selectores CSS
Selectores de ID: En CSS, un selector de ID selecciona un elemento basándose en el valor de su atributo id. El atributo id de un elemento debe ser único en el documento y debe coincidir exactamente con el valor del selector. En CSS, los selectores de ID se preceden con el carácter de numeral (#).
Selectores de Clase: En CSS, un selector de clase selecciona elementos basándose en el valor de su atributo class. El atributo class puede contener una lista de nombres de clase separados por espacios, y uno de ellos debe coincidir con el nombre especificado en el selector. En CSS, los selectores de clase se preceden con un punto (.).