Trois façons dont CSS est utilisé dans les pages : styles en ligne, feuilles de style intégrées et feuilles de style liées

2024-07-12

La manière dont les styles CSS sont utilisés dans les pages comprend trois méthodes : les styles en ligne, les feuilles de style intégrées et les feuilles de style liées.

1. Style en ligne

Le style en ligne est un style relativement direct, défini directement dans la balise HTML et implémenté via l'attribut style. Cette méthode est plus facile à apprendre, mais n’est pas très flexible.

【Exemple】Appliquez des styles en ligne pour contrôler la page.


<!-- 在页面元素中定义CSS样式 -->
<p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
<p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Résultats du :

2. Feuille de style intégrée

Utilisation des feuilles de style intégrées <style>...</style> Les balises incluent des styles CSS dans la page. La forme des feuilles de style en ligne n'est pas aussi directe que celle des styles en ligne, mais la page sera plus régulière.

【Exemple】Utilisez des feuilles de style intégrées pour styliser vos pages.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
    
    <!-- 内嵌式样式表 -->
    <style type="text/css">
        h1, h2, h3{
            font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
            color: blue; /*文字颜色*/
        }
    </style>
</head>
<body>
    <h1>大风起兮云飞扬</h1>
    <h2>威加海内兮归故乡</h2>
    <h3>安得猛士兮守四方</h3>
</body>
</html>

Résultats du :

3. Feuille de style liée

La création d'un lien vers une feuille de style CSS externe est le moyen le plus courant de référencer une feuille de style.Définissez d'abord le style CSS dans un fichier séparé, puis transmettez-le dans la page HTML<link> Des balises pour les référencer, c’est le moyen le plus efficace d’utiliser les styles CSS.

<link>La structure syntaxique de la balise est la suivante :

<link rel='stylesheet' href='path' type='text/css'>

rel : La relation entre le document externe et le document appelant.

href : chemin absolu ou relatif vers le document CSS.

type : type MIME du fichier externe

【Exemple】Référencez les styles CSS dans la page.

(1) Créez un répertoire css, puis créez un fichier de style css.css dans le répertoire.


/*定义CSS样式 */
h1,h2,h3{								
    color:#6CFF;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
p{
    color:#F0CC;	/*定义颜色*/
    font-weight:200;
    font-size:24px;	 /*设置字体大小*/
}

(2) Passer dans la page<link> Les balises introduisent des fichiers de style CSS dans la page.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>CSS在页面中使用的三种方式</title>
 
    <!--页面引入CSS样式表-->
    <link rel="stylesheet" type="text/css" href="/css/css.css">		
</head>
<body>
    <h2>春夜喜雨</h2>
    <p>好雨知时节，当春乃发生。</p>
</body>
</html>

Résultats du :

4. Priorité des appels de feuille de style

L'ordre de priorité des appels aux feuilles de style suit les principes suivants :

(1) Le style défini dans le style en ligne a la priorité la plus élevée.

(2) Les autres styles suivent le principe de proximité dans l'ordre dans lequel ils apparaissent ou sont référencés dans le fichier HTML. Plus ils sont proches du texte, plus la priorité est élevée.

(3) L'ordre de priorité des sélecteurs est le sélecteur descendant, le sélecteur de classe, le sélecteur d'ID et la priorité décroît dans l'ordre.

(4) Les styles non définis dans aucun fichier suivront le style par défaut du navigateur.

Partage de technologie