Maison > Article > interface Web > Comment ajouter du style CSS au HTML ? Avantages et inconvénients des systèmes en ligne, embarqués et externes

Comment ajouter du style CSS au HTML ? Avantages et inconvénients des systèmes en ligne, embarqués et externes

青灯夜游original: 2018-11-02 14:32:3116038parcourir

Comment ajouter du style CSS au HTML ? Cet article vous présentera trois méthodes pour ajouter des styles CSS au HTML : les avantages et les inconvénients des styles en ligne, intégrés et externes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Tout d'abord, nous devons comprendre quelles sont les trois méthodes pour ajouter des styles CSS au HTML ? Ce sont :

1. Utilisez le CSS en ligne pour appliquer des règles à des éléments spécifiques, c'est-à-dire :

en ligne. Utilisez le CSS interne et dans la section 93f0f5c25f18dab9d176bd4f6de5d30e Règles CSS, c'est-à-dire : inline

3. Lien vers un fichier externe (fichier .css) contenant toutes les règles CSS, c'est-à-dire : externe

Présentons-le en détail ci-dessous Parlons de la mise en œuvre et avantages et inconvénients des méthodes en ligne, intégrées et externes.

1. Inline

Le CSS en ligne doit être utilisé dans des balises HTML spécifiques. L'attribut c9ccee2e6ea535a969eb3f532ad9fe89 est utilisé pour définir le style d'une balise HTML spécifique. Il est recommandé de ne pas utiliser de CSS en ligne, car chaque balise HTML doit être stylisée individuellement et la gestion de votre site Web peut devenir très difficile si vous utilisez uniquement du CSS en ligne. Toutefois, cela peut être utile dans certaines situations. Par exemple, dans les situations où vous n'avez pas accès aux fichiers CSS ou où vous devez uniquement appliquer des styles à un seul élément. Un exemple de page HTML avec CSS en ligne ressemble à ceci :

<!DOCTYPE html>
<html>
  <body style="background-color:black;">
    <h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>
    <p style="color:white;">Something usefull here.</p>
   </body>
</html>

Avantages du CSS en ligne :

1. Si vous souhaitez tester et prévisualiser les modifications, est très utile.

2. Très utile pour une réparation rapide.

3. Réduisez les requêtes HTTP.

Inconvénients du CSS en ligne :

Le CSS en ligne doit être appliqué à chaque élément.

2. Le style CSS en ligne consiste à placer le code CSS dans la section 93f0f5c25f18dab9d176bd4f6de5d30e Les classes et les identifiants peuvent être utilisés pour référencer du code CSS, mais ils ne sont actifs que sur cette page spécifique. Les styles CSS intégrés de cette manière sont téléchargés à chaque chargement de la page, ce qui peut améliorer les vitesses de chargement. L'utilisation de feuilles de style en ligne est utile dans certaines situations, comme par exemple pour envoyer à quelqu'un un modèle de page. Il est beaucoup plus facile de voir un aperçu puisque tout se trouve sur une seule page. Le CSS en ligne doit être placé entre les balises c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927. Un exemple de feuille de style interne :

Avantages du CSS embarqué :

<head>
  <style type="text/css">
    p {color:white; font-size: 10px;}
    .center {display: block; margin: 0 auto;}
    #button-go, #button-back {border: solid 1px black;}
  </style>
</head>

1 La feuille de style n'affecte qu'une seule page.

2. Les feuilles de style internes peuvent utiliser des classes et des identifiants.

3. Pas besoin de télécharger plusieurs fichiers. HTML et CSS peuvent être dans le même fichier.

Inconvénients du CSS intégré :

1. Augmente le temps de chargement des pages.

2. Cela n'affecte qu'une seule page - inutile si vous souhaitez utiliser le même CSS sur plusieurs documents.

3. Liens externes

Le moyen le plus pratique d'ajouter du CSS à une page HTML est peut-être de la lier à un fichier externe (. fichier css). De cette façon, toutes les modifications que vous apportez aux fichiers CSS externes seront reflétées sur votre site Web. Les références aux fichiers CSS externes doivent être placées dans la section 93f0f5c25f18dab9d176bd4f6de5d30e de la page, par exemple :

et style.css contient toutes les règles de style. Par exemple :

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

Avantages du CSS externe :

.xleftcol {
   float: left;
   width: 33%;
   background:#809900;
}
.xmiddlecol {
   float: left;
   width: 34%;
   background:#eff2df;
}

1 La taille de la page HTML est plus petite et la structure est plus claire.

2. Vitesse de chargement plus rapide.

3. Le même fichier .css peut être utilisé sur plusieurs pages.

Inconvénients du CSS externe :

1. La page peut ne pas s'afficher correctement avant le chargement du CSS externe.

Conclusion

Ce qui précède est l'intégralité du contenu de cet article, qui vous présente les différentes méthodes d'ajout de CSS aux pages html . Et comprenez les différences entre les feuilles de style en ligne, externes et internes. Vous devrez peut-être utiliser différentes méthodes pour ajouter des styles CSS. J'espère que cela vous sera utile pour votre apprentissage. [Apprentissage vidéo recommandé : tutoriel CSS]

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 样式表 http

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：Comment définir le soulignement en HTML ? Comment souligner du texte HTMLArticle suivant：Comment définir le soulignement en HTML ? Comment souligner du texte HTML

Articles Liés

Voir plus