Maison > Article > interface Web > Comment intégrer du CSS et des images dans du HTML
Comment intégrer du CSS et des images dans du HTML
- coldplay.xixioriginal
- 2021-03-03 16:07:374174parcourir
Méthodes pour intégrer du CSS et des images dans du HTML : 1. Utilisez l'élément de style HTML pour définir le style CSS dans le document ; 2. Chaque élément HTML contient un attribut de style, qui peut définir directement le style ; . Le référencement dynamique aux fichiers CSS externes définit la présentation du document.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur DELL G3.
Comment intégrer du CSS et des images en HTML :
1 Intégré
Utiliser des éléments de style HTML, définir des styles CSS. dans le document.
Le code est le suivant :
<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>2. Inline
Chaque élément HTML contient un attribut de style, qui peut définir directement le style. Ce style ne peut être appliqué qu'au contenu de cet élément et n'a aucun effet sur un autre élément du même nom.
Le code est le suivant :
<p style="color:#FFF;font-weight:bold;">内联样式</p>
3. Référence externe
La référence externe signifie que le document HTML lui-même ne contient pas de styles CSS, mais fait référence dynamiquement à des fichiers CSS externes qui définissent la présentation du document.
1. Utilisez l'instruction de traitement de la feuille de style
Écrivez une instruction de traitement de la feuille de style au début du document HTML
Le code est le suivant :
<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指令语句 </html>
Cependant, seuls les documents HTML écrits au format de syntaxe XML prennent en charge l'utilisation de cette directive. La plupart des navigateurs ne sont efficaces que lorsqu'ils sont enregistrés au format xhtml ou xml, et JS ne peut pas gérer ce type de CSS, il n'est donc pas recommandé de l'utiliser. il.
2. Utilisez la commande @import
Utilisez la commande @import entre les éléments de style pour importer des fichiers CSS externes
Le code est le suivant :
<head>
<style type="text/css">
<!--下面两行代码效果一样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>Toutes les règles @Import doivent apparaître avant toutes les règles. Le paramètre est l'adresse URL d'un fichier CSS. Vous pouvez également utiliser la directive @import dans un fichier CSS pour importer un autre fichier CSS.
3. Utilisez l'élément de lien
Le code est le suivant :
<head> <link rel="stylesheet" href="css的url" type="text/css" > </head>
C'est aussi la méthode la plus couramment utilisée.
4. Utilisez l'en-tête du message HTTP pour créer un lien vers la feuille de style
Vous pouvez utiliser le champ de lien de l'en-tête du message HTTP pour créer un lien vers une feuille de style externe.
Le code est le suivant :
link:<mystyle.css>;rel=stylesheet; //等同于<link rel="stylesheet" href="css的url" type="text/css" >
Plusieurs liens peuvent être utilisés dans l'en-tête HTTP pour lier plusieurs feuilles de style, et le lien dans l'en-tête HTTP est plus puissant que le lien dans le HTML priorité du document (dans l'élément head).
Recommandations d'apprentissage associées : Tutoriel vidéo HTML
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!