Maison >interface Web >tutoriel CSS >Comment intégrer du CSS dans du HTML ?
Comment intégrer du CSS dans du HTML ?
- 青灯夜游original
- 2019-05-18 16:38:107808parcourir
Il existe trois façons principales d'intégrer des styles CSS dans du HTML :
1 Définissez l'attribut de la balise, qui est. appelé le
2. Utilisez la balise c9ccee2e6ea535a969eb3f532ad9fe89 dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e du HTML, qui est appelée
3. est appelé style intégré Feuille de style externe.
Les feuilles de style de base modifient généralement l'apparence des balises HTML telles que 6c04bd5ca3fcae76e30b72ad730ca86d et e388a4556c0f65e1904146cc1a846bee. Lors de l'utilisation de fichiers CSS ou de feuilles de style dans les fichiers d'en-tête, nous pouvons également définir des classes de style et les appliquer à n'importe quel élément en utilisant l'attribut class="?", mais cela dépasse le cadre de ce simple guide.
Style en ligne
Caractéristiques :
1), le style en ligne est placé dans l'élément HTML du code.
2) Lorsque vous utilisez des styles en ligne, les styles n'affecteront que les éléments que vous sélectionnez.
3), les styles en ligne n'ont pas de sélecteurs
Remarque : les styles en ligne définis en HTML ne s'appliquent qu'aux balises auxquelles ils sont ajoutés.
<p style="color:red;">Some red text</p>
Avantages :
1 Très utile si vous souhaitez tester et prévisualiser les modifications.
2. Très utile pour une réparation rapide.
3. Réduisez les requêtes HTTP.
Inconvénients :
Le CSS en ligne doit être appliqué à chaque élément.
Style intégré
Fonctionnalités :
1), placé dans la balise de style687c2c06e5a4995392a66a2c50c231d2 style> écrit dans la section d’en-tête de la page Web.
2), le style écrit ne sera utilisé que sur la page web où vous l'utilisez.
3), les styles intégrés sont aussi appelés "styles internes"
Les styles définis dans l'en-tête seront appliqués à l'ensemble de la page. L'exemple ci-dessous fera que toutes les balises h1 de la page afficheront le titre en rouge.
<head>
<style type="text/css">
h1 { color: red; }
</style>
</head>Avantages :
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 :
1. Augmentation du 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.
Feuille de style externe
Comme les fichiers HTML, les fichiers CSS sont du texte brut et ont généralement une extension de fichier .css. Ils peuvent être liés via des balises spécifiques dans le fichier HTML ; .
Caractéristiques :
1), rédigé dans un document séparé puis joint à divers documents web
2), le modifier peut affecter toutes les pages que vous appelez
3), facile à modifier
Par exemple, le contenu du fichier style.css peut être le suivant :
body { background-color: beige; color: #000080;}
h1 { color: red;}Ensuite vous pouvez utiliser 407da91fd18a23f1d2386ba7fd713e2e L'en-tête est introduit pour prendre effet.
<head> <link rel="stylesheet" type="text/css" href="style.css" title="style"> </head>
Avantages :
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 :
La page peut ne pas s'afficher correctement tant que le CSS externe n'est pas chargé.
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!