Comment intégrer du CSS et des images dans du HTML-tutoriel HTML-php.cn

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

coldplay.xixi

Libérer： 2023-01-03 09:27:26

original

4178 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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" >

Copier après la connexion

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).