Comment importer des fichiers CSS-tutoriel CSS-php.cn

Comment importer des fichiers CSS

藏色散人

Libérer： 2023-01-06 11:17:51

original

19430 Les gens l'ont consulté

Méthodes d'introduction des fichiers CSS : 1. Introduction de la méthode en ligne, définition du style CSS dans l'attribut style de la balise ; 2. Introduction de la méthode intégrée, écriture du style CSS dans la balise style de la page Web ; , Utilisez le lien pour référencer les fichiers CSS externes ; 4. Utilisez @import pour référencer les fichiers CSS externes.

Comment importer des fichiers CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Comment importer des fichiers CSS ? Plusieurs méthodes pour introduire des fichiers CSS dans HTML

De manière générale, il existe les quatre méthodes suivantes :

1. Style en ligne : également appelé style en ligne, défini dans l'attribut style du balise Définir les styles CSS. Cette méthode ne reflète pas les avantages du CSS ;

2. Embedded : concentrez les styles CSS sur la paire de balises de la page Web. Alignement des balises ;

3. Type de lien : le quatrième type d'importation est appelé type externe ou type de lien externe, utilisez le lien pour référencer des fichiers CSS externes

4. Type d'importation : utilisez @import pour faire référence ; vers des fichiers CSS externes

--------------------------------------- - ----------------A

Le style en ligne est le moyen le plus simple et le plus confortable de commencer à écrire, mais cette façon d'écrire ne reflète pas les avantages du CSS à all , comme suit :

J'écris en ligne

------------------------------------------------------ ------ ---------B

Embedded est également un bon choix s'il y a relativement peu de pages, mais s'il y a beaucoup de pages correspondant à un projet, ce sera sans doute le cas un peu désastreux, et il faut modifier le style, c'est peut-être une grande page similaire

, mais il faut les modifier une à une, comme suit :

<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>

Copier après la connexion

Cette méthode d'écriture. évite dans une certaine mesure le phénomène "pas de style" de la page, rend la page après le chargement du CSS...

-----------------. --------------- -----------------------------CD

Le style CSS externe est pour écrire le code CSS dans un fichier externe séparé. Ce fichier de style CSS se termine par " .css " comme extension, utilisez la balise dans la balise liez le fichier de style CSS au fichier HTML, maximisant ainsi les avantages du CSS. Bien entendu, le nom du fichier ".css" doit avoir une certaine signification pour faciliter les modifications ultérieures ou améliorer sa lisibilité, comme "main.css". "...

<link href="main.css" rel="stylesheet" style="text/css"/>

Copier après la connexion

Le rel="stylesheet" type="text/css" est une méthode d'écriture fixe qui ne peut pas être modifiée

Le format introduit via @import est le suivant :

<style type="text/css">
@import url(demo.css);
</style>

Copier après la connexion

Cette méthode n'introduira le fichier css qu'après le chargement de la page entière. Évidemment, le problème est le phénomène de "strie" de la page, ce qui est bien sûr absolument inacceptable du point de vue de l'interaction et de l'expérience

La différence de structure grammaticale des deux méthodes d'introduction externes ci-dessus peut être vue visuellement :

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>

Copier après la connexion

Dans cette méthode d'@import, vous devez également faire attention à la différence entre le téléchargement de fichiers HTML et CSS In. HTML, vous devez ajouter , mais dans le fichier CSS, vous pouvez directement @import

pour ajouter le chemin à utiliser. Cela fait apparaître un. point : pour les projets avec un grand nombre de fichiers de style, nous pouvons choisir de restituer d'abord les styles principaux puis les styles secondaires. Cela peut être importé dans le fichier css

, ce qui peut également alléger la pression sur le fichier. serveur dans une certaine mesure. Même si le fichier n'est pas volumineux, il est toujours bon de l'optimiser. Essentiellement, il n'y a pas beaucoup de différence entre ces deux méthodes d'introduction externe, mais parfois, pour faciliter l'édition du style du site dans le projet, la méthode des liens est souvent utilisée.

Bien sûr, il existe certaines méthodes d'introduction qui utilisent XML comme exigences d'édition, mais elles ne sont pas couramment utilisées....

Apprentissage recommandé : "

Tutoriel vidéo CSS

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!