CSS Editor

Vous pouvez utiliser des éditeurs CSS professionnels pour écrire du CSS. Voici quelques éditeurs couramment utilisés qui vous sont recommandés :

Vous pouvez télécharger les logiciels correspondants depuis les sites officiels des logiciels ci-dessus et les installer en suivant les étapes.

Vous pouvez également utiliser notre éditeur en ligne:https://www.jyshare.com/front-end/61/

Ensuite, nous allons montrer comment utiliser l'outil VS Code pour créer des fichiers CSS.

VS Code

Visual Studio Code (en abrégé VS Code) est un éditeur de code open source développé par Microsoft qui prend en charge des systèmes d'exploitation tels que Windows, Linux et macOS, avec une fonctionnalité de gestion des extensions intégrée.

Référence du tutoriel d'installation de VS Code:https://www.example.com/vscode/vscode-tutorial.html

Installez les plugins requis (Extensions) :
Cliquez sur l'icône carrée (Extensions) dans la barre latérale gauche de VS Code, recherchez et installez les deux plugins suivants. Ils sont essentiels pour les débutants :

  • Live Server:Permet de prévisualiser des pages web en temps réel dans le navigateur. Après avoir enregistré le code, le navigateur s'actualisera automatiquement.
  • HTML CSS Support:Améliore les suggestions intelligentes CSS.

Étape 1 : Configurer la structure du projet

Créez un dossier nommé sur votre ordinateurmy-first-cssle dossier

Ouvrir dans VS Code : Cliquez sur File -> Open Folder... dans le coin supérieur gauche de VS Code, puis sélectionnez le dossier que vous venez de créer.

  • Faites un clic droit sur la zone vide du gestionnaire de ressources à gauche, et créez un nouveau fichier index.html (c'est le squelette de la page web).

  • Faites à nouveau un clic droit, et créez un nouveau fichier style.css (c'est l'habillage de la page web).

Étape 2 : Écrire le squelette HTML

Le CSS doit être lié au HTML. Voici le code du fichier index.html.

Dans<body>Saisissez le code suivant à l'intérieur de la balise, etAssurez-vous de l'ajouter<link>Utilisez une balise pour lier le fichier CSS：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ma pratique du CSS</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h1>Bonjour, CSS !</h1> <p>Voici la première carte de style que j'ai écrite avec VS Code.</p> <button>Cliquez ici</button> </div> </body> </html>

Étape 3 : Écrire les styles CSS

Saisissez le code suivant dans le fichier style.css :

Exemple

/* Ajouter une couleur d'arrière-plan à toute la page */
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center; /* Centrage horizontal */
    align-items: center;     /* Centrage vertical */
    height: 100vh;           /* Remplir toute la hauteur de l'écran */
    margin: 0;
}

/* Styles de la carte de design */
.card {
    background-color: white;
    width: 300px;
    padding: 30px;
    border-radius: 15px;      /* Coins arrondis */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Ombre */
    text-align: center;
}

/* Couleur du titre */
h1 {
    color: #333;
}

/* Styles du bouton */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s; /* Transition d'animation */
}

/* Effet de survol sur le bouton */
button:hover {
    background-color: #0056b3;
}

Étape 4 : Exécuter et prévisualiser

  1. Retourindex.htmlFichier.
  2. Cliquez n'importe où dans la zone d'éditionClic droit。
  3. Sélectionnez"Open with Live Server"。

À ce stade, votre navigateur par défaut s'ouvrira automatiquement, et vous devriez voir une carte blanche centrée avec un titre et un bouton dessus. Lorsque vous placez le curseur de la souris sur le bouton, la couleur deviendra plus foncée.

Le résultat de l'exécution est similaire à ce qui suit :

autres extensions