Maison > Article > interface Web > Comment ajouter du CSS au HTML

Comment ajouter du CSS au HTML

PHPzoriginal: 2023-04-24 09:09:253077parcourir

Dans le développement Web, HTML est le langage responsable du contenu Web, tandis que CSS est le langage responsable du style Web. HTML et CSS sont interdépendants et CSS ajoute de meilleurs effets de style et de mise en page aux pages Web. Alors, comment ajouter du CSS au HTML ? L'article suivant présentera en détail les aspects suivants :

Style en ligne
Feuille de style interne
Feuille de style externe
Importer une feuille de style

1. Style en ligne

Le style en ligne consiste à convertir une feuille de style CSS Placez-le directement dans l'élément HTML et définissez le style CSS via l'attribut style de la balise HTML. Par exemple :

<p style="color: red;">这是一个段落</p>

Dans le code ci-dessus, nous définissons une police rouge pour la balise de paragraphe p via l'attribut style.

Cependant, l'utilisation de styles en ligne est limitée car elle ne peut être appliquée qu'à des éléments HTML spécifiques. Bien entendu, elle n'est pas non plus propice à la maintenance et à la gestion de grands sites Web. Par conséquent, nous ne recommandons généralement pas l'utilisation de. styles en ligne.

2. Feuille de style interne

La feuille de style interne place le code de style dans la balise style dans la balise head Le style n'est valide que sur la page actuelle et ne peut pas être utilisé sur d'autres pages. Peut être utilisé pour définir le style d’une ou plusieurs pages spécifiques.

Un exemple est le suivant :

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
         }
      </style>
   </head>
   <body>
      <p>这是一个段落</p>
   </body>
</html>

Dans le code ci-dessus, nous mettons le style à l'intérieur de la balise head et définissons la couleur de police de l'élément p sur rouge (#FF0000), changeant ainsi la couleur de police dans le paragraphe.

3. Feuille de style externe

Une feuille de style externe stocke le code CSS dans un fichier CSS externe, puis le lie au fichier HTML via la balise de lien. Cette méthode vous permet de définir les règles de style dans une feuille de style distincte, puis de les appliquer à plusieurs pages HTML.

L'exemple de code est le suivant :

Fichier CSS (style.css) :

p {
   color: red;
}

Code HTML :

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <p>这是一个段落。</p>
   </body>
</html>

Avec le code ci-dessus, on peut accéder aux règles de style dans le fichier "style.css", donc nous pouvons l'utiliser sur plusieurs pages. Utilisez le même code de style.

4. Importer une feuille de style

L'importation de feuilles de style a à peu près la même fonction que les feuilles de style externes, mais elle importe des fichiers CSS via la balise @import. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
   <head>
      <style>
         @import url(style.css);
      </style>
   </head>
   <body>
      <p>这是一个段落。</p>
   </body>
</html>

Le code ci-dessus est similaire à la méthode de feuille de style externe. Il place le code de style dans un fichier CSS externe (tel que "style.css"), mais utilise la balise @import pour importer. le fichier CSS dans le fichier HTML.

Résumé :

Pour la conception et le développement Web, CSS et HTML sont tous deux des langages très importants et interdépendants. En HTML, nous pouvons ajouter des styles CSS de quatre manières : styles en ligne, feuilles de style internes, feuilles de style externes et feuilles de style importées. Différentes méthodes présentent différents avantages et inconvénients selon les situations. Les développeurs doivent faire des choix en fonction des conditions réelles.

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!

css html 样式表

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：Quelques méthodes d'écriture de compatibilité CSSArticle suivant：Quelques méthodes d'écriture de compatibilité CSS

Articles Liés

Voir plus