CSS スタイルを Web に導入する方法のまとめ-CSSチュートリアル-php.cn

CSS スタイルを Web に導入する方法のまとめ

伊谢尔伦

リリース： 2017-07-21 09:18:20

オリジナル

2438 人が閲覧しました

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 サイトの他の関連記事を参照してください。