Comment ajouter des styles CSS au HTML-tutoriel HTML-php.cn

Comment ajouter des styles CSS au HTML

藏色散人

Libérer： 2022-12-30 11:12:14

original

12631 Les gens l'ont consulté

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.

Comment ajouter des styles CSS au 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>

Copier après la connexion

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 .

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>

Copier après la connexion

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

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>

Copier après la connexion

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

Copier après la connexion

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!