<style>要素の定義
英語で「様式」「文体」を表す、”style”より。
HTML文書で使用するスタイル情報を記述するための要素です。
スタイル情報は CSS の記述ルールに沿って記載します。
文書内に複数の<style>要素、あるいはスタイルシートへのリンクを指定した <link> 要素が複数ある場合、DOM上の順序で適用されます。
CSSのセレクタは基本的に「後出し」したものが優先されるので、記述の順位は意識しましょう。
子要素として使って良いもの
HTML要素として子要素に出来るものはありません。<style>要素の中には、CSS のみを記述します。
親要素として使えるもの
メタデータコンテンツを受け入れるすべての要素。
許可されているARIAロール
なし
DOMインターフェース
HTMLStyleElement
属性
グローバル属性が指定できます。
type
スタイル言語を ”MIMEタイプ” で指定します。デフォルトは ”text/css” です。
media
スタイルを適用するメディアを指定します。値は「メディアクエリ」で指定します。
nonce
script-src コンテンツセキュリティポリシー内の行内スクリプトをホワイトリストに入れるために使われる暗号（ワンタイム番号）です。
サーバーはポリシーを送信するたびに一意のnonce値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないnonceを提供することが重要です。
title
代替スタイルシートのセットを指定します。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Webページの表題を記載します</title>
<link rel='stylesheet' href='style.css' />
<style>
body { color: darkred; }
</style>
</head>
<body>
style.css では color: darkblue; が指定されていますが、<style>要素内で color: darkred; が指定されているので、「後出し優先」となり、文字色が暗い赤になっています。
</body>
</html>
サンプルを表示
style.css では color: darkblue; が指定されていますが、<style>要素内で color: darkred; が指定されているので、「後出し優先」となり、文字色が暗い赤になっています。
このサイトでは、HTML要素や属性の定義は下記サイトを参考にしています。
MDN Web Docs： https://developer.mozilla.org/ja/
W3C仕様の正確な定義、最新情報は上記サイトをご覧ください。
コメント