Comment ajouter du style CSS au HTML ?-tutoriel HTML-php.cn

Comment ajouter du style CSS au HTML ?

青灯夜游

Libérer： 2019-06-01 10:16:29

original

26553 Les gens l'ont consulté

Comment ajouter du style 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 de style place le code CSS dans un spécifique dans la partie d'en-tête de la page), des liens externes (en utilisant la balise link pour lier des fichiers CSS externes au 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. Si vous utilisez uniquement du CSS en ligne, il peut devenir très difficile de gérer le site Web. 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 le code CSS sur une page spécifique du 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 ajouter un élément externe. Le fichier CSS (fichier .css) est référencé dans la page HTML et la référence doit être placée 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!