ページ上で CSS を使用する 3 つの主な形式は何ですか?-フロントエンドQ&A-php.cn

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

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

1. インライン スタイル

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

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

2. 内部スタイルシート

埋め込みスタイルとは、HTML文書のheadタグ内にCSSコードを記述し、styleタグで定義することです。構文形式は次のとおりです。 css选择器{ 属性:值; 属性:值; }

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

3. 外部リンク スタイル

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

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

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

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

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

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

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

欠点:

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

(学習ビデオの共有: CSS ビデオ チュートリアル )