style 要素型の要素を使うと、
文書の頭部 (
STYLE element
CDATA PCDATA head (なし) (継承) title [HTML 4] 無効化 非標準 (なし) 唯一識別子 (継承) title [HTML 4] (継承) 自然言語 [XHTML 1] %適用媒体 [HTML 4] スタイル言語 xml:[XHTML 1.0] (なし) スタイル指定 %(なし) 注釈的題 [HTML 4] %(必須) [HTML 4] W3C 勧告 scoped
style
の<) や
&) も含めてstyle 要素の内容として扱うことを意味します。
ですから、例えば
<styletype="text/css"> <!--p{color: red; background-color: white} --> </style>
と記述したとしても、強調した部分は SGML のstyle が CDATA
と知らない古い UA からは注釈宣言に見えるので、中身を隠すことができるのです。)
CDATA
にすることができません。そこで、 style
の内容は (# と宣言されています。
これは、通常の内容の扱いと同じになる、つまり
< や & は
この場合、 style は実質空になってしまいます。
意図した通りに解釈させるためには
<styletype="text/css">p{color: red; background-color: white} </style>
としなければなりません。 (当然、古い UA から隠すという機能は失われます。)
< や
& を書きたいとき、
しかし、いちいち escape するのが面倒な場合には、
CDATA区間
<styletype="text/css"><![CDATA[/* -- Question of Q & A -- */p{color: red; background-color: white}]]></style>
のように書くことができます。 CDATA 区間の中では
]]>)
を除いてそのままの文字データと解釈されます。
隠し方
は HTML の一部ではなく、
スタイル言語の一部です。スタイル言語によっては使えないこともありますから、
注意してください。
style の内容は、 type
で識別される
CSS style sheets are often embedded in HTML documents, and to be able to hide style sheets from older UAs, it is convenient put the style sheets inside HTML comments. The HTML comment tokens "<!--" and "-->" may occur before, after, and in between the statements. They may have whitespace around them. CSS1 7.1 Forward-compatible parsing
http://www.w3.org/TR/REC-CSS1#forward-compatible-parsing
和訳 (参考): CSS スタイル・シートはしばしば HTML 文書に埋込まれまして、 古めの UA からスタイル・シートを隠すことができるように、 スタイル・シートを HTML 注釈の中に入れるのが便利です。 HTML 注釈字句
<!--と-->は文の前・後・間に出現できます。 そのまわりに空白を入れても構いません。
CSS also allows the SGML comment delimiters ("<!--" and "-->") in certain places, but they do not delimit CSS comments. They are permitted so that style rules appearing in an HTML source document (in the STYLE element) may be hidden from pre-HTML 3.2 user agents. See the HTML 4.0 specification ([HTML40]) for more information. CSS2 4.1.9 Comments
http://www.w3.org/TR/REC-CSS2/syndata.html#comments
和訳 (参考): CSS はある場所で SGML 注釈区切子 (
<!--および-->) をも認めていますが、この両者は CSS 注釈を区切るものではありません。 両者を認めることによって、 HTML 原始文書 (のstyle要素) に出現するスタイル規則を HTML 3.2 以前の利用者エージェントから隠すことができます。 詳しくは HTML 4.0 仕様書をご覧ください。
更に、 CSS2 附属書 D の文法規則でも規則など ({ 〜 })
の部分の外側ならどこにでも書けるように書かれています。
style 要素以外の場所で使う時にも
SGML 注釈区切子
を書けるように思えますが、
試しに外部スタイル・シートなどで使ってみると正しく処理できない UA
も少なくないようです。
CDATA
マーク区間で包むのは使えませんし、
注釈宣言での隠蔽などもってのほかです。
更に、陽に文書型宣言を行っている場合には適当に
type
で指定されたスタイル言語に対応しない UA は、
style の内容を隠さなければなりません。
文章の一部としてレンダリングするのは誤りです。 [HTML 4]
対応していたらレンダリングしても良いようにも読める書き方ですが、 そういう意図ではないはずです。
stylestyle
がある。
注釈によるとよりも前に追加された。
style 要素は次のように定義されています。
<!ENTITY % style-notations "dsssl-lite | w3c-style">
<!NOTATION dsssl-lite PUBLIC
"ISO/IEC 10179:1995//NOTATION DSSSL Style Language//EN">
<!NOTATION w3c-style PUBLIC
--"IETF/RFC nnn//NOTATION W3C Style Language//EN"--
"ISO/IEC 10179:1995//NOTATION DSSSL Style Language//EN">
<!ELEMENT STYLE - O (#PCDATA)>
<!ATTLIST STYLE
notation NOTATION (%style-notations;) #REQUIRED
>これを次のようにして使うつもりでした。
<stylenotation=dsssl-lite> (DSSSL) </style>
w3c-style はおそらく
<style> を実装していたらしい。
これは独自言語? それとも
HTML 3.2 DTD より:
<!ELEMENTSTYLE- - CDATA -- placeholder for style info -->
style 要素に type 属性 (省略可能),
media 属性 (列挙値
(print | screen | projection | braille | aural | all),
既定値 all), title 属性 (省略可能)
を規定していました。
media 属性は読点区切りの複数指定が出来るように
CDATA に改められました。
2007-01-28 00:07:26 +09:00 版)
stylestyle
と
<HEAD>
<TITLE>Example of STYLE</TITLE>
<STYLE type="text/css">
H1.myclass {border-width: 1px; border: solid; text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1 class="myclass"> This H1 is affected by our style </H1>
<H1> This one is not affected by our style </H1>
</BODY>2008-06-07 17:21:07 +09:00 版)
The only
<style type=text/css title="plaza" media="screen,print">
(
style 要素に
2007-01-27 21:50:41 +09:00 版)
(
sheet null text/css sheet (
(
(
; U+000A U+000D U+0009 U+0020 U+000B U+000C text/css (
2008-03-22 11:26:31 +09:00 版)
<style><!--
body,td,a,p,.h{font-family:arial,sans-serif}
.h{color:#224499}
.q{color:#0000cc}
//-->
</style><script><!--
function sf(){document.f.q.focus();}
// -->
</script>style 要素 (XFrames)
<style type="text/css/" media="print"><!-- @media
Then, add the module attribute to your <style>:
<style module>
Now in addition to being able to import 'style.scss', we can use SCSS in Vue components as well:
<style lang="scss">
/* write SCSS here */
</style>
Additionally, standard
<style>tags can now be included in HTML bodies, eliminating the need to use inline styles.
<!-- META FOR IOS & HANDHELD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/stylesheet">
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
<script type="text/javascript">
//<!
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
// >
</script>
<meta name="HandheldFriendly" content="true"/>
<meta name="apple-mobile-web-app-capable" content="YES"/>
<!-- //META FOR IOS & HANDHELD -->