ホームページ > 記事 > ウェブフロントエンド > CSS スタイルにはどのような種類がありますか? CSSスタイルシートの3つの作り方まとめ（コード付き）

CSS スタイルにはどのような種類がありますか? CSSスタイルシートの3つの作り方まとめ（コード付き）

不言オリジナル: 2018-08-02 16:52:098692ブラウズ

CSS スタイルの種類には何がありますか? CSS スタイルのコード挿入フォームは、基本的に次の 3 つのタイプに分類できます: インライン、埋め込み、外部の 3 つのスタイルには優先順位があります: インライン > 埋め込みスタイル、具体的な内容とコードを見てみましょう。 3 つの CSS スタイルタイプのうちの 1 つです。

注: [埋め込み] > [外部スタイル] には前提条件があります。埋め込み CSS スタイルの位置は外部スタイルの後ろにある必要があります。たとえば、右側のコードエディタでは、f87a5964fcebb93d98ebca11ba9d357b コードは 080b747a20f9163200dd0a7d304ba388...531ac245ce3e4fe3d50054a55f265927 の前にあります。 ; コード（実際にはこれも開発中に書かれています）。興味のある友達は試してみて、順序を逆にして、優先順位が変わるかどうかを確認してください。

実際には、一般に、これは近接性の原則です (設定されている要素に近いほど、優先度が高くなります)。

ただし、上でまとめた優先順位には前提があることに注意してください。インライン、埋め込み、および外部スタイルシートの CSS スタイルは同じ重みを持つということです。

1. CSS インラインスタイルシート

css スタイルシートは、次のコードのように、CSS コードを既存の HTML タグ内に直接記述します:

<p style="color:red">这里文字是红色。</p>

要素の開始タグ内に記述するように注意してください。以下のように記述方法が間違っています:

<p>这里文字是红色。</p style="color:red">

そして、CSS スタイルコードの設定は、ダブルクォートで記述する必要があります。複数の CSS スタイルコード設定がある場合は、セミコロンで区切ってまとめて記述できます。次のコード:

<p style="color:red；font-size:12px">这里文字是红色。</p>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
   color:red;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

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

埋め込み CSS スタイルは、CSS スタイルコードを 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927 に記述できることを意味します。間のタグ。たとえば、次のコードは 3 つの 45a2772a6b6107b401db3c9b82c049c2 タグ内のテキストを赤色に設定します:

<style type="text/css">
span{
color:red;
}
</style>

埋め込み CSS スタイルは c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 の間に記述する必要があり、通常、埋め込み CSS スタイルはの間に記述されます。 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1。右側のエディターのコードなど。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
   color:blue;
}
</style>
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</html>

3. CSS 外部スタイルシート

外部 CSS スタイル (外部スタイルとも呼ばれます) は、CSS コードを別の外部ファイルに記述することです。この CSS スタイルファイルは、「.css」で終わります。 " は拡張子です。次のコードに示すように、93f0f5c25f18dab9d176bd4f6de5d30e 内 (c9ccee2e6ea535a969eb3f532ad9fe89 タグ内ではない) 2cdf5bf648cf2f33323966d7f58a7f3f タグを使用して、CSS スタイルファイルを HTML ファイルにリンクします。 >&lt ;link href="<code>.css”为扩展名，在93f0f5c25f18dab9d176bd4f6de5d30e内（不是在c9ccee2e6ea535a969eb3f532ad9fe89标签内）使用2cdf5bf648cf2f33323966d7f58a7f3f标签将css样式文件链接到HTML文件内，如下面代码：

bfd7070c6914dc1f0b7b088cfc0e92b4base.css

" rel="stylesheet" type="text/css" />

注:

1. CSS スタイルファイル名は意味のある英語で付けられます。 main.css などの文字。

2. rel="stylesheet" type="text/css"は固定の書き方なので変更できません。

3. 2cdf5bf648cf2f33323966d7f58a7f3f タグの位置は、通常、93f0f5c25f18dab9d176bd4f6de5d30e 内に記述されます。

index.html

<!DOCTYPE HTML>
<html>
<head>
   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>php中文网，<span style="color:blue">一级棒的网站</span>、教程,手册,视频,mysql,免费php在线学习平台；<span>资源免费</span>，内容专业、<span>讲师专业</span>。专注让你成为php高手！</p>
</body>
</html>

style.css

span{
   color:red;
   font-size:20px;
}

おすすめ関連記事:

css折り畳みスタイル(1) - cssスタイルの3つの使い方

HTML CSSスタイルシート

CSS スタイルシートのスタイル

🎜

以上がCSS スタイルにはどのような種類がありますか? CSSスタイルシートの3つの作り方まとめ（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html href 样式表

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSSのレイアウト方法にはどのようなものがあるのでしょうか？ CSSのレイアウト方法まとめ次の記事：CSSのレイアウト方法にはどのようなものがあるのでしょうか？ CSSのレイアウト方法まとめ

続きを見る