Maison >interface Web >tutoriel HTML >Comment ajouter du style CSS au HTML ?
Comment ajouter du style CSS au HTML ?
- 青灯夜游original
- 2019-06-01 10:16:2926604parcourir
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>2.
Le style CSS en ligne consiste à placer le code CSS sur une page spécifique du f775363a88c51a73816212751e1d5e2d 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 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 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!