ホームページ > 記事 > ウェブフロントエンド > CSS スタイルを Web に導入する方法のまとめ
CSS スタイルを Web に導入する方法のまとめ
- 伊谢尔伦オリジナル
- 2017-07-21 09:18:202387ブラウズ
HTML と CSS は異なる機能を持つ 2 つの言語であり、同時に Web ページに影響を与えるため、CSS と HTML は相互にリンクされている必要があります。
2 つの簡単な方法は、HTML タグに直接導入するか、HTML ファイルの前で宣言することです。以下は簡単なコード例です
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{background-color:red;
color: black}
</style>
<!--这里是修饰所有的P标签里面的内容，这是引入方法的一种-->
<style>
div{background-color:chartreuse;
color: coral}
</style>
</head>
<body>
<p style="background-color: aquamarine;color: black">Jay</p>
<!--在css里面，要用分号区别各种属性,虽然这个P标签有css样式，但是文本的样式是就近原则，这是最简单的css引入方式-->
<p>Bob</p>
<div>spider
<p>我是个P</p>
</div>
<!--div里面的P标签在上面有div的样式而没有P标签样式时，按div标签的样式，否则按P标签的样式-->
</body>
</html>import タイプとリンク タイプの目的は、独立した CSS ファイルを HTML ファイルに取り込む 2 つの違いは、リンク タイプでは HTML タグを使用して外部 CSS ファイルを導入するのに対し、インポート タイプでは CSS ルールを使用して外部 CSS ファイルを導入することです。
リンクを使用して外部 CSS ファイルを導入する例:
<link href="~/Content/Base.css" rel="stylesheet" type="text/css" />
インポートを使用して CSS ファイルを導入する例:
<style type="text/css">
@import "/Content/Base.css"
</style>これら 2 つの方法の表示効果の違い: リンク方法を使用する場合、CSS ファイルは先に読み込まれます。ページの主要部分が読み込まれると、この方法で表示される Web ページには最初からスタイル効果が適用されます。インポート方法を使用する場合、ページ全体が読み込まれた後に CSS ファイルが読み込まれます。一部のブラウザでは、Web ページ ファイルが比較的大きい場合、スタイルのないページが表示され、しばらく点滅してから表示されます。再度読み込むとスタイル設定後の効果が表示されます。ユーザー エクスペリエンスの観点から見ると、これはインポートを使用する場合の欠点です。
一部の比較的大規模な Web サイトでは、メンテナンスを容易にするために、すべての CSS スタイルを複数の CSS ファイルに記述したい場合があります。このように、リンクベースのインポートを使用する場合は、CSS ファイルを個別にインポートするためのいくつかのステートメントが必要になります。 CSS ファイルの分類を調整する場合は、HTML ファイルも同時に調整する必要があります。これはメンテナンス作業の欠点となります。インポート方法を使用する場合は、一般的な CSS ファイルのみをインポートし、その後、このファイル内の他の独立した CSS ファイルをインポートできます。
CSS ファイルを 1 つだけインポートする必要がある場合は、リンク メソッドを使用します。複数の CSS ファイルをインポートする必要がある場合は、最初にリンク メソッドを使用して「ディレクトリ」CSS ファイルを導入し、次にインポート メソッドを使用して他の CSS を導入します。この「ディレクトリ」CSS ファイル内。
ただし、JavaScript を通じてどの CSS ファイルをインポートするかを動的に決定したい場合は、リンクを使用してこれを実現する必要があります。
以上がCSS スタイルを Web に導入する方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。