Maison > Article > interface Web > Comment écrire du CSS dans une page HTML

Comment écrire du CSS dans une page HTML

王林original: 2023-05-09 10:59:372511parcourir

CSS (Cascading Style Sheets) est une technologie utilisée pour concevoir et embellir des pages HTML. Les styles CSS peuvent être créés et référencés via la balise c9ccee2e6ea535a969eb3f532ad9fe89 dans un document HTML ou à partir d'un fichier CSS externe.

Ce qui suit est une introduction détaillée à la façon d'écrire des styles CSS dans des pages HTML :

Inline
Inline fait référence à l'intégration de styles CSS directement dans les pages HTML, en utilisant la balise c9ccee2e6ea535a969eb3f532ad9fe89 Par exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内嵌式CSS样式表</title>
        <style>
            body {
                background-color: #f0f0f0;
                font-family: Arial, sans-serif;
            }
            h1 {
                color: #333;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一段普通的文字</p>
    </body>
</html>

Dans l'exemple ci-dessus, nous utilisons d'abord la balise e8e496c15ba93d81f6ea4fe5f55a2244 pour définir le jeu de caractères du document, puis utilisons la balise c9ccee2e6ea535a969eb3f532ad9fe89 . Dans la balise c9ccee2e6ea535a969eb3f532ad9fe89, nous définissons la couleur d'arrière-plan du document, le style de police et la couleur du texte du titre.

Notez que la balise c9ccee2e6ea535a969eb3f532ad9fe89 doit être placée dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e et que tous les styles CSS doivent être placés dans la balise c9ccee2e6ea535a969eb3f532ad9fe89. L'utilisation de styles CSS directement dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d

Style externe
Feuille de style externe signifie que nous mettons le style CSS dans un fichier séparé, puis le référençons dans la page HTML via la balise 2cdf5bf648cf2f33323966d7f58a7f3f Les feuilles de style externes présentent les avantages d’utilisations multiples et d’une maintenance facile.

Dans ce cas, nous devons utiliser un fichier avec l'extension .css pour stocker les styles CSS. Le fichier peut être placé sur le serveur ou sur votre ordinateur local. Par exemple :

/* css/style.css */

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
    text-align: center;
}

Dans la page HTML, nous devons utiliser la balise 2cdf5bf648cf2f33323966d7f58a7f3f pour associer le fichier CSS externe au document HTML. Par exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>外部式CSS样式表</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <h1>欢迎来到我的网站</h1>
        <p>这是一段普通的文字</p>
    </body>
</html>

Dans le code ci-dessus, nous utilisons la balise 2cdf5bf648cf2f33323966d7f58a7f3f pour associer le fichier style.css au document HTML. Notez que l'attribut href doit pointer vers l'URL ou le chemin relatif du fichier CSS. Si le fichier CSS se trouve dans le même répertoire que le document HTML, l'attribut href peut pointer directement vers le nom du fichier CSS.

Style en ligne
Le style en ligne fait référence à l'application de styles CSS directement aux éléments HTML. plutôt que de les définir dans la feuille de style. Par exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>行内式CSS样式表</title>
    </head>
    <body>
        <h1 style="color: #333; text-align: center;">欢迎来到我的网站</h1>
        <p style="font-family: Arial, sans-serif;">这是一段普通的文字</p>
    </body>
</html>

Inline, nous définissons les styles CSS dans l'attribut style de l'élément HTML. Chaque attribut doit être séparé par un point-virgule et la valeur de l'attribut doit être placée entre guillemets. Veuillez noter que l'utilisation en ligne peut rendre votre code HTML encombré et difficile à maintenir. Par conséquent, il n’est généralement pas recommandé de l’utiliser en ligne dans des projets réels.

Résumé
Lors de l'écriture de styles CSS dans des pages HTML, vous pouvez utiliser des méthodes en ligne, externes et en ligne. Parmi eux, le style externe est la méthode la plus couramment utilisée, qui permet de concentrer les styles dans un seul fichier pour une maintenance facile et une utilisation multiple. Pour les formats en ligne et en ligne, il est recommandé de les utiliser uniquement lorsque cela est nécessaire, sinon cela pourrait conduire à un code HTML confus et difficile à maintenir.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：c'est à dire, je ne peux pas charger les CSSArticle suivant：c'est à dire, je ne peux pas charger les CSS

Articles Liés

Voir plus