CSS がページ内で使用される 3 つの方法: インラインスタイル、埋め込みスタイルシート、リンクスタイルシート

2024-07-12

ページ内での CSS スタイルの使用方法には、インラインスタイル、埋め込みスタイルシート、リンクスタイルシートの 3 つの方法があります。

1. インラインスタイル

インラインスタイルは比較的直接的なスタイルで、HTML タグ内で直接定義され、style 属性を通じて実装されます。この方法は習得が簡単ですが、あまり柔軟性がありません。

【例】インラインスタイルを適用してページを制御します。


<!-- 在页面元素中定义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>

結果:

2. 埋め込みスタイルシート

埋め込みスタイルシートの使用<style>...</style>タグにはページ内の CSS スタイルが含まれます。インラインスタイルシートの形式はインラインスタイルほど直接的ではありませんが、ページはより規則的になります。

【例】埋め込みスタイルシートを使用してページのスタイルを設定します。


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

結果:

3. リンクされたスタイルシート

外部 CSS スタイルシートへのリンクは、スタイルシートを参照する最も一般的な方法です。まず別のファイルで CSS スタイルを定義し、それを HTML ページに渡します。<link>タグを付けてそれらを参照します。これは CSS スタイルを使用する最も効率的な方法です。

<link>タグの構文構造は次のとおりです。

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

rel: 外部ドキュメントと呼び出し元ドキュメントの間の関係。

href: CSS ドキュメントへの絶対パスまたは相対パス。

type: 外部ファイルの MIME タイプ

【例】ページ内の CSS スタイルを参照します。

(1) css ディレクトリを作成し、そのディレクトリ内に css.css スタイルファイルを作成します。


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

(2) ページを渡す<link>タグは CSS スタイルファイルをページに導入します。


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

結果:

4. スタイルシート呼び出しの優先順位

スタイルシート呼び出しの優先順位は次の原則に従います。

(1) インラインスタイルで定義されたスタイルが最も優先されます。

(2) 他のスタイルは、HTML ファイル内で出現または参照される順序で近接原則に従います。テキストに近いほど優先順位が高くなります。

(3) セレクタの優先順位は、子孫セレクタ、クラスセレクタ、ID セレクタの順で優先度が低くなります。

(4) どのファイルにも定義されていないスタイルは、ブラウザのデフォルトのスタイルに従います。

技術共有