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

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

不言
リリース: 2018-08-02 16:52:09
オリジナル
8797 人が閲覧しました

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

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

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

ただし、上でまとめた優先順位には前提があることに注意してください。インライン、埋め込み、および外部スタイル シートの 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 スタイル コードを に記述できることを意味します。間のタグ。たとえば、次のコードは 3 つの タグ内のテキストを赤色に設定します:

<style type="text/css">
span{
color:red;
}
</style>
ログイン後にコピー

埋め込み CSS スタイルは の間に記述する必要があり、通常、埋め込み CSS スタイルは の間に記述されます。

。右側のエディターのコードなど。

<!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< /code>」で終わります。 " は拡張子です。次のコードに示すように、<head> 内 (<style> タグ内ではない) <link> タグを使用して、CSS スタイル ファイルを HTML ファイルにリンクします。 >&lt ;link href="<code>.css”为扩展名,在内(不是在