ページ上で CSS を使用する 3 つの主な形式は何ですか?

青灯夜游
リリース: 2023-01-07 11:41:37
オリジナル
7645 人が閲覧しました

3 つの形式: 1. タグの style 属性にスタイルを書き込みます。構文は "" です。 2. style タグのペアにスタイルを書き込みます。 syntax is "< ;style>code"; 3. CSS コードを「.css」ファイルに配置し、リンク タグを使用して導入します。

ページ上で CSS を使用する 3 つの主な形式は何ですか?

#このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. インライン スタイル

は、タグの style 属性を通じて要素のスタイルを設定します。その基本的な構文形式は次のとおりです:

<element style="属性:值;属性:值;...">内容</element>
ログイン後にコピー

構文内の style タグの属性です。実際、どの HTML タグにも、インライン スタイルを設定するために使用される style 属性があります。属性値の記述仕様は、CSS のスタイル ルールと同じです。インラインstyle は、そのすべてのタグとその中にネストされているサブタグに対して機能します。

2. 内部スタイルシート

埋め込みスタイルとは、HTML文書のheadタグ内にCSSコードを記述し、styleタグで定義することです。構文形式は次のとおりです。

<head>  
<style type="text/css"> 
css选择器{ 
  属性:值;
  属性:值;
}
</style> 
</head>
ログイン後にコピー

構文では、通常、style タグは head タグの後に配置されますが、HTML ドキュメント内の任意の場所に配置することもできます。

3. 外部リンク スタイル

リンク スタイルは、拡張子として CSS を持つ 1 つ以上の外部スタイル シート ファイルにすべてのスタイルを配置します。link タグは外部にリンクします。スタイルを HTML ドキュメントに追加します。その基本的な構文形式は次のとおりです:

<link rel="stylesheet" type="text/css" href="css文件路径" />
ログイン後にコピー

AttributeDescriptionrel現在のドキュメントと他のリンクされたドキュメント間の関係を定義します。「スタイルシート」とは、リンクされたドキュメントがスタイル シート ファイルであることを意味します hrefリンクされた外部スタイル シート ファイルの URL を定義します。相対パスまたは絶対パスを使用できます。
利点:

  • 構造コードとパフォーマンス コードの完全な分離

  • 再利用とメンテナンスが容易になります

  • 個別のファイルに分離すると、 HTML ファイルのサイズを調整し、プログラマーや Web クローラーがページ構造を読みやすくします。

  • 検索エンジンに優しい、検索エンジンを作成します。ページに高いスコアを与えます。これは、ページにとって有益です。検索エンジンのランキング

  • ##外部スタイル シートは、ユーザーの最初の訪問後にユーザーのコンピュータにキャッシュされ、次回の訪問時にロードする必要はありません
  • 欠点:

    スタイルが多数ある場合、CSS ファイルが非常に大きくなり、見つけるのが困難になります。さらに、CSS ファイルが 1 つ増えると HTTP リクエストが 1 つ増えることになり、アクセス数が多い Web サイトのサーバーへの負荷が増大します
  • (学習ビデオの共有:
CSS ビデオ チュートリアル

)

以上がページ上で CSS を使用する 3 つの主な形式は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!