Maison >interface Web >tutoriel HTML >Comment intégrer du CSS et des images dans du HTML

Comment intégrer du CSS et des images dans du HTML

coldplay.xixi
coldplay.xixioriginal
2021-03-03 16:07:374224parcourir

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.

Comment intégrer du CSS et des images dans du HTML

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Articles Liés

Voir plus