CSS Editor

Puedes usar editores CSS profesionales para editar CSS. Te recomendamos varios editores de uso común:

Puedes descargar el software correspondiente desde el sitio web oficial de cada uno e instalarlo siguiendo los pasos.

También puedes usar nuestro editor en línea:https://www.jyshare.com/front-end/61/

A continuación, te mostraremos cómo usar VS Code para crear un archivo CSS.

VS Code

Visual Studio Code (abreviado VS Code) es un editor de código abierto desarrollado por Microsoft que soporta sistemas operativos como Windows, Linux y macOS. El editor incluye funciones integradas de gestión de extensiones.

Consulta el tutorial de instalación de VS Code:https://www.example.com/vscode/vscode-tutorial.html

Instala los complementos necesarios (Extensiones):
Haz clic en el icono de cuadrados en la barra lateral izquierda de VS Code (Extensiones), busca e instala los siguientes dos complementos, que son esenciales para los principiantes:

  • Live Server:Te permite previsualizar la página web en el navegador en tiempo real. Al guardar el código, el navegador se actualiza automáticamente.
  • HTML CSS Support:Mejora las sugerencias inteligentes de CSS.

Paso 1: Crear la estructura del proyecto

En tu computadora, crea unamy-first-csscarpeta llamada

En VS Code: haz clic en File -> Open Folder... en la esquina superior izquierda y selecciona la carpeta que acabas de crear.

  • Haz clic derecho en el área vacía del explorador de la izquierda y crea un nuevo archivo index.html (este es el esqueleto de la página web).

  • Vuelve a hacer clic derecho y crea un nuevo archivo style.css (esta es la apariencia de la página web).

Paso 2: Escribir el esqueleto HTML

El CSS debe existir adjunto al HTML. A continuación se muestra el código del archivo index.html.

En<body>Dentro de la etiqueta, ingresa el siguiente código yasegúrate de agregar<link>la etiqueta para vincular el archivo CSS：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi práctica de CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h1>Hello, CSS!</h1> <p>Esta es mi primera tarjeta de estilos escrita con VS Code.</p> <button>Haz clic en mí</button> </div> </body> </html>

Paso 3: Escribir los estilos CSS

En el archivo style.css, ingresa el siguiente código:

Ejemplo

/* Agrega un color de fondo a toda la página */
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    height: 100vh;           /* Ocupa toda la altura de la pantalla */
    margin: 0;
}

/* Diseña el estilo de la tarjeta */
.card {
    background-color: white;
    width: 300px;
    padding: 30px;
    border-radius: 15px;      /* Esquinas redondeadas */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra */
    text-align: center;
}

/* Color del título */
h1 {
    color: #333;
}

/* Estilo del botón */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s; /* Transición de animación */
}

/* Efecto al pasar el ratón sobre el botón */
button:hover {
    background-color: #0056b3;
}

Paso 4: Ejecutar y previsualizar

  1. Vuelve alindex.htmlarchivo.
  2. Haz clic en cualquier lugar del área de edicióncon el botón derecho del ratón。
  3. selecciona"Open with Live Server"。

En ese momento, tu navegador predeterminado se abrirá automáticamente. Deberías ver una tarjeta blanca centrada con un título y un botón. Cuando coloques el ratón sobre el botón, el color se oscurecerá.

El resultado de la ejecución es similar al siguiente:

Otras extensiones