CSSを記述する3つのパターン令和3年 3月 20日 作成
概略
CSSを記述する場所は、HTMLのタグ内に直接書く「インライン形式」、ヘッダー内に<style>タグを書き込む「ヘッダー埋め込み形式」、別途外部ファイルを作成しそれを読み込み参照する「外部参照形式」の3つのパターンがあります。
「外部参照形式」が一般的ですが、ちょっとしたテスト環境化等での少量コードを記述する場面においては「インライン形式」、「ヘッダー埋め込み形式」が大変楽で便利です。
手順
下記実装方法欄に各形式の記述例を記載します。
CSSの適用優先順位は「インライン形式」、「外部参照形式」、「ヘッダー埋め込み形式」の順となっています。
実装方法
「インライン形式」での記述例
<h1 style="color:#FF0000;font-size:16px;">サンプル</h1>
「ヘッダー埋め込み形式」での記述例
<html>
<head>
<style type="text/css">
h1 {
color:#FF0000;
font-size:16px;
}
</style>
</head>
</html>
「外部参照形式」での記述例
<html> <head> <link rel="stylesheet" href="/css/sample.css"> </head> </html>
考察
通常は「外部参照形式」で指定するのですが、外部CSSに書くまでもない場面（1度限り・1つの要素のみ適用等）での活用によいのではと考えます。
最後までお読み下さり ありがとうございました。記事はここ迄です。
尚、本記事は作成から「3年以上」経過しています。
記事作成当時と現在の状況等により内容が適切でない場合があります。また、リンク切れが生じている場合もあります事を予めご了承下さい。
お気に入りに登録しますとお気に入り記事を一元管理でき、再度閲覧したい場合等 容易に記事を探し出す事ができますのでご活用下さい。
下段にはコメントを掲載しております。
広告バナー
コメント
頂いたコメントを下記に掲載しております。更に下部にはコメント投稿フォームを設けております。
注意事項を確認・了承した上、コメント投稿お願いいたします。
注意事項に該当するコメントにつきましては、事前告知なしに投稿したコメントの削除を行う場合があります。
予めご了承下さい。
- 記事内容と無関係なコメント
- 公序良俗に反するコメント
- 個人情報や法令違反を含むコメント
- その他、管理者が不適切と判断したコメント
現在 頂いているコメントはありません
