HTML ドキュメントに CSS を埋め込む一般的な 3 つの方法
|
HTMLでCSSを定義するには、埋め込み、リンク、インラインの3つの方法が一般的に使用されます。 1. 埋め込み ドキュメント内の CSS スタイルを定義するには、HTML スタイル要素を使用します。 コードをコピー コードは次のとおりです。<ヘッド> <スタイル タイプ="text/css"> h1{色:赤} p{色:青} </スタイル> <ヘッド> 2. インライン すべての HTML 要素にはスタイルを直接定義できるスタイル属性が含まれています。このスタイルはこの要素のコンテンツにのみ適用され、同じ名前を持つ別の要素には影響しません。 コードをコピー コードは次のとおりです。<p style="color:#FFF;font-weight:bold;">インライン スタイル</p> 3. 外部参照 外部参照とは、HTML ドキュメント自体には CSS スタイルが含まれず、ドキュメントの表示を定義するために外部 CSS ファイルを動的に参照することを意味します。 1. スタイルシート処理命令文を使用する HTML文書の先頭にスタイルシートの指示を記述する コードをコピー コードは次のとおりです。<?xml-stylesheet type="text/css" href="mystyle.css" ?> <html> 指示文 </html> ただし、このディレクティブの使用をサポートしているのは、XML 構文形式で記述された HTML ドキュメントのみです。ほとんどのブラウザでは、XHTML または XML 形式で保存した場合にのみ有効であり、JS ではこの種の CSS を処理できないため、推奨されません。 2. @importコマンドを使用する スタイル要素間で@importコマンドを使用して外部CSSファイルをインポートします。 コードをコピー コードは次のとおりです。<ヘッド> <スタイル タイプ="text/css"> <!--次の2行のコードは、同じ効果があります @import "mystyle.css"; @import url("mystyle.css"); --> </スタイル> </head> 任意の @import ルールは、他のすべての @import ルールの前に出現する必要があります。パラメータは CSS ファイルの URL です。 CSS ファイルで @import ディレクティブを使用して別の CSS ファイルをインポートすることもできます。 3. リンク要素を使用する コードをコピー コードは次のとおりです。<ヘッド> <link rel="stylesheet" href="cssのurl" type="text/css" > </head> これは最も一般的に使用される方法でもあります。 4. HTTPメッセージヘッダーを使用してスタイルシートにリンクする HTTP メッセージ ヘッダーのリンク フィールドを使用して、外部スタイル シートにリンクできます。 コードをコピー コードは次のとおりです。リンク:<mystyle.css>;rel=スタイルシート; //<link rel="stylesheet" href="css的url" type="text/css" > と同等 HTTP ヘッダーでは複数のリンクを使用して複数のスタイルシートをリンクすることができ、HTTP ヘッダー内のリンクは HTML ドキュメント内のリンク (head 要素内) よりも優先されます。 |
<<: IDEA が docker を統合して springboot プロジェクトを展開するプロセス全体
推薦する
JSはキャンバス技術を使用してeChartsの棒グラフを模倣します
Canvas は HTML5 の新しいタグです。js を使用して Canvas 描画 API を操作...
JS はシンプルなブロック崩しピンボールゲームを実装します
この記事では、ブロック崩しピンボールゲームを実装するためのJSの具体的なコードを参考までに紹介します...
MySQL5.6.31 winx64.zip インストールと設定のチュートリアル
#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....
テーブルを使用する場合と CSS を使用する場合 (経験の共有)
TW のメインテキスト ページは、以前は小さなモニターと低解像度のユーザーを考慮して幅が 850 ピ...
MySQLにおける時刻日付型と文字列型の選択について
目次1. DATETIMEとTIMESTAMPの使用1. 類似点2. 相違点3. 選択2. varc...
Nginx プロキシを使用してフロントエンドのクロスドメイン問題を解決する方法
序文Nginx (「エンジン エックス」と発音) は、リバース プロキシ、ロード バランサ、HTTP...
docker を使用して kafka プロジェクトをデプロイする Centos6 方法の分析
この記事では、Docker を使用して Centos6 に Kafka プロジェクトをデプロイする方...
Docker ディスク領域クリーニングのソリューション
少し前に、docker ディスク容量が小さすぎてデータを書き込めないという問題が発生しました。理由は...
有名なブログの再設計例 28 件
1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...
Docker 実行オプションを使用して Dockerfile の設定を上書きする
通常は、最初に Dockerfile ファイルを定義し、次に docker build コマンドを使...
MySQL の current_timestamp の落とし穴とその解決策を共有する
目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...
Dockerを使用して分散lnmpイメージを作成する
目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...
Ant Design Blazor コンポーネントライブラリのルーティング再利用マルチタブ機能
最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...
Vue でポップアップ ウィンドウをクリックしたときにクリック イベントを自動的にトリガーするソリューション (シミュレーション シナリオ)
ビジネス シナリオ: vue + element ui の el-dialog を使用します。ポップ...
JSを使用して簡単な計算機を実装する
JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...