スタイル シートを挿入するには、次の 3 つの方法があります:
1. 外部スタイル シート;
2. 内部スタイル シート;
3. インライン スタイル
外部スタイル シート
外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。 。各ページは、 タグを使用してスタイル シートにリンクします。 (ドキュメントの) head 内の タグ:
例は次のとおりです:
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
ブラウザはファイル mystyle.css からスタイル宣言を読み取り、ドキュメントをフォーマットしますそれによると。
外部スタイル シートは、任意のテキスト エディタで編集できます。ファイルには HTML タグを含めることはできません。スタイル シートは .css 拡張子を付けて保存する必要があります。スタイル シート ファイルの例を次に示します:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}注: 属性値と単位の間にスペースを入れないでください (「margin-left: 20 px」など)。正しい書き方は「 margin-left: 20px」です。
(ビデオ チュートリアルの推奨: css ビデオ チュートリアル)
内部スタイル シート
単一のドキュメントが必要な場合特別なスタイルを設定するときは、内部スタイル シートを使用する必要があります。
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>インライン スタイル
スタイルにのみ必要な場合1 つの要素に適用する このメソッドは 1 回のみ使用できます。 (注意して使用してください)
インライン スタイルを使用するには、関連するタグ内で style 属性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。
ここでは、段落の色と左マージンを変更する方法を示します:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
複数のスタイル
特定のプロパティが別のスタイル シートで指定されている場合同じセレクター定義では、属性値はより具体的なスタイル シートから継承されます。
たとえば、外部スタイル シートには h3 セレクターの 3 つのプロパティ:
h3{
color:red;
text-align:left;
font-size:8pt;
}があり、内部スタイル シートには h3 セレクターの 2 つのプロパティ:
h3{
text-align:right;
font-size:20pt;
}If This内部スタイル シートを含むページは同時に外部スタイル シートにリンクされるため、h3 によって取得されるスタイルは次のようになります:
color:red;text-align:right;font-size:20pt;
つまり、Color プロパティは外部スタイル シートから継承され、text-align と font-size は内部スタイル シートのルールに置き換えられます。
複数のスタイルの優先順位
スタイル シートを使用すると、スタイル情報を複数の方法で指定できます。スタイルは、個々の HTML 要素、HTML ページのヘッダー要素、または外部 CSS ファイルで指定できます。同じ HTML ドキュメント内で複数の外部スタイルシートを参照することもできます。
通常、優先順位は次のとおりです:
インライン スタイル) インライン スタイル > (内部スタイル) 内部スタイル シート > (外部スタイル) 外部スタイル シート > ブラウザのデフォルト スタイル
注: 外部スタイルが内部スタイルの後に配置される場合、外部スタイルは内部スタイルをオーバーライドします。
推奨チュートリアル: CSS 基本チュートリアル
以上がCSS スタイル シートと複数のスタイルの優先順位の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PMGoofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています
時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AMPavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました
graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AMGraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります
円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AMここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
