Maison >interface Web >tutoriel HTML >Comment ajouter des styles CSS au HTML

Comment ajouter des styles CSS au HTML

藏色散人original: 2021-01-20 09:14:5612628parcourir

Comment ajouter des styles CSS au HTML : 1. Ajoutez des styles CSS en ligne ; 2. Mettez le code CSS dans la partie d'en-tête d'une page spécifique via en ligne ; 3. Utilisez la balise de lien externe, liez simplement le CSS externe ; fichier en HTML.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5&&CSS3, ordinateur DELL G3.

Recommandé : "Tutoriel vidéo HTML"

Lors de l'apprentissage du front-end, il faut savoir que le CSS ajoute différents styles à la balise html pour l'indiquer au navigateur, donc Comment afficher le contenu à l'intérieur de ces balises. Puisque CSS est utilisé pour ajouter divers styles au HTML, comment ajouter des styles CSS au HTML ?

Il existe trois façons d'ajouter des styles CSS au HTML, à savoir en ligne (en utilisant l'attribut style, utilisé dans une balise HTML spécifique) et en ligne (la balise style place le code CSS dans la partie d'en-tête d'un fichier HTML spécifique). page), Liens externes (en utilisant la balise link pour lier des fichiers CSS externes en HTML).

1. En ligne

Utilisez l'attribut style pour définir des styles CSS dans des balises HTML spécifiques.

Il est recommandé de ne pas utiliser de CSS en ligne car chaque balise HTML doit être stylisée séparément, 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 est le suivant :

<!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>

Le style CSS en ligne consiste à placer du code CSS sur une page spécifique dans le < ;tête> Le CSS en ligne doit être placé entre les balises c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927.

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.

Un exemple de feuille de style interne :

<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>

3. Lien externe

Le lien externe consiste à utiliser l'élément de balise de lien pour référencer le fichier CSS externe (fichier .css ) à Dans les pages HTML, les références doivent être placées dans la section 93f0f5c25f18dab9d176bd4f6de5d30e

C'est le moyen le plus pratique d'ajouter du CSS aux pages HTML. De cette façon, toutes les modifications que vous apportez aux fichiers CSS externes seront reflétées sur votre site Web.

Un exemple de feuille de style externe :

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

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

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

La plupart des sites Web utilisent aujourd'hui des feuilles de style externes, qui sont des styles écrits dans des documents séparés puis ajoutés à divers documents Web. Les feuilles de style externes affectent tous les fichiers auxquels elles sont connectées, ce qui signifie que si vous avez un site Web de 20 pages et que chaque page utilise la même feuille de style, lorsque des modifications doivent être apportées, vous pouvez simplement modifier la feuille de style pour compléter ces pages à long terme. gestion du site plus facile.

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：Que dois-je faire si HTML ne peut pas lire les styles CSS ?Article suivant：Que dois-je faire si HTML ne peut pas lire les styles CSS ?

Articles Liés

Voir plus