7242


`<style>`タグは通常`<head></head>`内に置くものといった説明がされていますが、`<body>`  
内に置いたときの動作がどうなるかの説明はどこかにないでしょうか？  
対象はメジャーな最新ブラウザのみでよいです。  
試しに、Safari8.0.3で以下のhtmlを表示すると、`<div>hoge</div>`の内容が赤くスタイリングされました。

[code]

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
      <div>hoge</div>
      <style>
        div { border: 2px solid red; }
      </style>
    </body>
    </html>
    
[/code]

![画像の説明をここに入力](https://i.stack.imgur.com/s3Nxp.png)  
こちらのHTML5 `<style scoped>`の説明はscoped属性の説明なのでちょっと違う気がします。  
<http://hyper-text.org/archives/2013/02/style_scoped_attr.shtml>

**`<head></head>`内におけばいいんだよ。細けえことはいいんだよ**という意見もありますが、HTML5で許可されている？ような気もして、気になったので。


CC BY-SA 3.0
2015-02-28T00:38:51.063
7241
2015-02-28T02:12:00.627
8601
question
html css
<body>内に<style>を設定したときの動作仕様


検証してみました。検証につかったページは[こちら](http://aduca.org/stackoverflow/7241/)です。

結論を先に述べると、モダンブラウザにおいて、`<body>` 内の `<style>` がなんらかの特別扱い(`<head>`
にあるのとないのとの違い)を受けることはなく、順当に上から順に評価されていくようです。

`scoped` 属性を持ったものは Firefox 以外では考慮されず、平気で上書きされてしまいました(未対応なので当たり前ですね)。

以下、とりあえず手元ですぐ出来そうな検証だけ行ないました。環境は OS X Yosemite 10.10.2 上です。Internet Explorer
だけ、OS X 上の Parallels で起動した Windows 8.1 の中で動いたものを利用しています。

各ブラウザのバージョンもぱっとわかる限り表記しておいたので、不足があれば[検証ページ](http://aduca.org/stackoverflow/7241/)をご自分でご覧になって確認してみてください。

# Chrome

40.0.2214.115(64-bit)

![Chrome](https://i.stack.imgur.com/83HiA.png)

# Safari

8.0.3 (10600.3.18)

![Safari](https://i.stack.imgur.com/JNJMl.png)

# Firefox

36.0

![Firefox](https://i.stack.imgur.com/L9HLm.png)

# Opera

27.0.1689.76

![Opera](https://i.stack.imgur.com/Y0GCf.png)

# Internet Explorer

11.0.9600.17631

![IE](https://i.stack.imgur.com/rrrHS.png)

# iOS Safari

iOS 8.1

![iOS](https://i.stack.imgur.com/OgMMF.png)

# Android 5

Genymotion 上なので不正確な可能性があります。

![Android](https://i.stack.imgur.com/7VW0K.png)


CC BY-SA 3.0
2015-02-28T02:12:00.627
7242
2015-02-28T02:12:00.627
8602
7241
answer