Comment écrire du CSS externe

Avec le développement continu de la conception et de la technologie de développement Web, CSS (Cascading Style Sheets) est devenu un langage de conception Web important. Grâce à CSS, nous pouvons facilement contrôler le style des pages Web pour obtenir une meilleure conception Web. Dans le développement réel, nous plaçons généralement les fichiers CSS en externe. Voyons donc comment écrire du CSS externe.

1. Créer un fichier CSS

Tout d'abord, nous devons créer un dossier CSS dans le répertoire racine du site Web et y créer un fichier CSS. Il est recommandé d'utiliser des noms significatifs pour les noms de fichiers afin de faciliter la gestion par vous-même et par les autres.

2. Connectez les fichiers CSS

Dans les fichiers HTML, nous devons référencer les styles CSS en connectant les fichiers CSS. Nous pouvons utiliser des liens externes (lien) ou un style en ligne (style).

1. Méthode de liaison externe

<link rel="stylesheet" href="样式文件路径">

Parmi eux, l'attribut rel fait référence à la relation entre la feuille de style et le document, généralement "stylesheet" est utilisé pour représenter la feuille de style ; feuille. Le chemin du fichier de style est relatif au fichier HTML et peut être un chemin absolu ou relatif.

Par exemple :

<link rel="stylesheet" href="css/style.css">

2. Méthode de style en ligne

<style type="text/css">
    样式内容
</style>

Parmi eux, l'attribut type fait référence au type de fichier de style, généralement "text/css" ;

Par exemple :

<style type="text/css">
    body {
        background-color: gray;
    }
</style>

3. Écrire des styles CSS

La manière d'écrire des styles CSS dans des fichiers CSS est similaire à la manière d'utiliser des balises de style pour écrire des styles CSS dans des fichiers HTML. Nous pouvons utiliser le sélecteur CSS pour sélectionner la partie qui doit être modifiée, puis utiliser les propriétés CSS et les valeurs d'attribut pour définir le style.

Par exemple :

body {
    background-color: gray;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

Dans le code ci-dessus, nous sélectionnons l'élément body de la page entière et définissons sa couleur d'arrière-plan, sa taille et son style de police.

4. Avantages

L'utilisation de fichiers CSS externes peut apporter les avantages suivants :

1. Structure et style séparés. Placer les règles de style dans un fichier séparé permet aux programmeurs de se concentrer sur la structuration du code et les styles de formatage.
2. Présentation différenciée. Différents sites Web/pages peuvent partager un type de fichier de style, permettant au site Web de conserver une apparence unifiée.
3. Réduisez la duplication du travail. Si plusieurs pages ont le même style, il suffit de le définir une seule fois dans un fichier CSS.
4. Améliorez la réutilisabilité des fichiers. Les fichiers CSS peuvent être partagés entre plusieurs pages Web, améliorant ainsi la réutilisation des fichiers CSS.

5. Résumé

Ce qui précède présente la méthode d'écriture et les avantages du CSS externe. Bien sûr, dans le développement réel, nous devons faire attention à l’orthographe du chemin et du nom du fichier pour éviter des erreurs telles que 404. De plus, nous devons également nous adapter aux caractéristiques de la mise en page adaptative pour écrire des styles CSS. Grâce à une pratique et un apprentissage continus, nous pouvons continuellement améliorer la qualité du code, optimiser l’expérience utilisateur et obtenir une meilleure conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!