Comment référencer CSS en HTML-tutoriel CSS-php.cn

Comment référencer CSS en HTML

php中世界最好的语言

Libérer： 2017-11-21 17:24:33

original

2820 Les gens l'ont consulté

Il existe quatre façons de référencer des feuilles de style CSS. Utilisez les styles CSS directement dans les divs pour créer des pages Web div+css, utilisez le style intégré en HTML, utilisez @import pour référencer des fichiers CSS externes et utilisez un lien vers. référencer des fichiers CSS externes. Chacune présente des avantages et des inconvénients, nous allons donc aujourd'hui expliquer en détail les différences entre ces quatre méthodes.

L'utilisation de différentes méthodes pour référencer des feuilles de style CSS obtiendra finalement le même effet, mais l'utilisation de différentes méthodes pour appliquer des fichiers CSS affectera le référencement et la vitesse et l'efficacité d'ouverture des pages Web. Ensuite, nous expliquerons un par un les exemples de référencement CSS en HTML

1. Intégrez les styles CSS directement dans les éléments de balise HTML, tels que

2. Insérez le code de la déclaration de style dans la partie head de l'en-tête HTML comme suit :

<style type="text/css"> 
<!-- 
.ceshi {font-size:14px; color:#FF0000;}/*这里是设置CSS的样式内容*/ 
--> 
</style>

Copier après la connexion

3. Utilisez @import pour référencer des fichiers CSS externes

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css引用方法实例</title> 
<style type="text/css"> 
<!-- 
@import url(wcss.css);/*这里是通过@import引用CSS的样式内容*/ 
--> 
</style> 
</head> 
 
<body> 
<div class="ceshi">我是测试内容</div> 
 
</body> 
</html>

Copier après la connexion

Code dans le fichier Wcss.css.ceshi {font-size:14px; color:#FF0000;}

On peut voir que l'utilisation de cette méthode est similaire à l'utilisation de la méthode de feuille de style CSS de référence intégrée. Les deux doivent utiliser la balise de style dans l'en-tête du HTML pour référencer le CSS externe. .

4. Utilisez le lien pour appeler le fichier CSS externe

Placez le type Pour appeler le fichier wcss.css externe pour implémenter le fichier css de référence html

Cette méthode ne nécessite pas la balise de style, mais fait directement référence au style externe en liant un style

Il est généralement recommandé d'utiliser un lien pour référencer des méthodes de style CSS externes.

Avantages de l'utilisation d'un lien pour référencer des fichiers CSS externes

1. Il est bénéfique pour le référencement. L'utilisation de cette méthode pour référencer des fichiers CSS externes rendra le code source de la page HTML beaucoup plus petit que l'ajout direct. styles CSS. , car les robots des moteurs de recherche n'explorent pas les fichiers CSS lors de l'exploration des pages Web, ce qui entraîne très peu de codes sources HTML, ce qui permet aux robots d'explorer plus rapidement et de traiter moins, ce qui augmente le poids de cette page Web et est bénéfique pour les classements.

2. L'enregistrement HTML permet au navigateur de séparer les fils de discussion lors du téléchargement de pages Web, tout comme le chargement d'une page et l'ouverture d'une page par deux lignes en même temps, ce qui rend la page Web ouverte très rapidement. (Lorsque l'utilisateur parcourt cette page Web, le code source html et le fichier css sont téléchargés en même temps, ce qui le rend plus rapide)

3. Il est pratique de modifier le style de la page Web. Il vous suffit de modifier. le style CSS pour modifier le style artistique de la page Web. Si sur le site Web Dans cette méthode de projet, puisque l'ensemble du site utilise un style CSS commun, il est rapide et pratique de modifier le style de l'ensemble du site.

Voici les quatre façons de citer des feuilles de style CSS. Les amis qui en ont besoin peuvent les enregistrer. Veuillez également continuer à prêter attention aux autres mises à jour sur ce site.

Recommandations associées :

Comment apprendre Div et CSS

Comment utiliser la bordure CSS

Comment faire des coins arrondis en CSS3

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!