Diseño Web

Visual Studio Code (VS Code) es un editor de código fuente desarrollado por Microsoft. Es software libre y multiplataforma, está disponible para Windows, GNU/Linux y macOS. VS Code tiene una buena integración con Git, cuenta con soporte para depuración de código, y dispone de un sinnúmero de extensiones, que básicamente te da la posibilidad de escribir y ejecutar código en cualquier lenguaje de programación.

VS Code es un editor de código optimizado que proporciona muchas facilidades para escribir, depurar y probar código. ¿Qué lenguajes soporta visual Studio Code? Inicialmente incluye un mínimo de componentes y funciones básicas de un editor con soporte nativo para JavaScript/TypeScript y Node.js, sin embargo, es personalizable con los cientos de plugins o extensiones disponibles para escribir código en diferentes lenguajes.

VS Studio Code incluye una terminal con todas las funciones, la cual se inicia fácilmente en el directorio de trabajo. La terminal integrada puede utilizar cualquier Shell instalado en el equipo, como PowerShell, Bash o cualquier otro. Contar con una terminal en el propio editor es de gran utilidad para ejecutar diferentes comandos necesarios cuando estamos desarrollando.

CSS es un lenguaje que facilita instrucciones que podemos usar para asignar estilos a los elementos HTML, como colores, tipos de letra, tamaños, etc. Los estilos se deben definir con css y luego asignar a los elemntos hasta que logramos el diseño visual que queremos para nuestra página.

Por razones de compatibilidad, los navegadores asignan estilos por defecto a algunos elemtos HTML.

Algunos de estos estilos son útiles, pero la mayoría deben ser reemplazados o complementados con estilos personalizados. En CSS, los estilos personalizables se declaran con propiedades. Un estilo se difine declarando el nombre de la propiedad y su valor separados por dos puntos.

A continuación mostrare un ejemplo de que podemos hacer en Visual Studio Code con un jercicio con CSS.

Una caracteristica importante del CSS se que los estilos se asignan en cascada. Los elementos en los niveles bajos de la jerarquía heredan los estilos asignados a los elementos en los niveles más altos.

Por ejemplo, si asignamos una regla a los elementos < section > en lugar de los elementos < p >, el texto en el elemento < p > de nuestro documento se mostrará con un tamaño de 20 píxeles debido a que este elemento es hijo del elemento < section > y, por tanto, hereda sus estilos.

Los estilos de elementos en niveles superiores se pueden reemplazar por nuevos estilos definidos para los elementos en niveles inferiores de la jerarquía. Por ejemplo, podemos declarar una regla adicional para los elementos < p > que sobreescriba la propiedad font-size para el elemento < section > con un valor diferente.