在我的頁面上聲明我的CSS樣式是否重要？我應該在哪裏聲明我的頁面上的樣式？爲什麼？
是這樣的：
<style>
div{
height: 50px;
width: 200px;
}
</style>
<body>
<div>This div</div>
</body>
不同來呢？
<body>
<div>This div</div>
</body>
<style>
div{
height: 50px;
width: 200px;
}
</style>
如果是這樣，怎麼樣？
我見過兩個例子，從未真正注意到樣式在頁面加載時需要花費多長時間。儘管大約90％的時間，風格是在頁面頂部聲明的。
就我個人而言，我更喜歡包括一個單獨的樣式表，以避免以這種方式向頁面添加樣式。
將其放置在開始
您應該將在HEAD的STYLE元素有助於頁面加載速度，因爲這樣的頁面可以render as the HTML loads。
當網絡瀏覽器讀取網頁時，它會按照寫入HTML的順序讀取它。所以當你的樣式表首先出現時，就是先讀取的內容。然後，當瀏覽器到達HTML時，它已經知道如何設置它的樣式，因此不必等待在顯示內容之前加載CSS。
爲什麼不把樣式表在頁面
的底部。當你將在底部的樣式表，這樣可以防止許多瀏覽器，特別是Internet Explorer中，從做progressive rendering。 Internet Explorer甚至會阻止rendering of the page，直到添加了所有樣式爲止，以便它不必重新繪製頁面。這意味着客戶將看到一個空白頁面，直到所有元素和樣式都被加載完畢。
向html頁面添加樣式時，會在頁面加載並按照該順序相應地進行解析時加載它們。像第一個例子一樣，樣式首先加載，然後加載沒有意義的元素。在第二個元素中，元素首先加載默認樣式，然後進行樣式設置。 將文件添加到單獨的樣式表等待頁面加載，然後顯示樣式。在非常緩慢的連接或沉重頁面中，差異是顯着的。
你應該把你的樣式表頭
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
...
}
</style>
</head>
<body>
<div>
....
</div>
</body>
</html>
style元素應適用於整個文檔，無論放置在哪裏，但通常將其放入head元素中。如果你把它放在其他地方，瀏覽器的處理有點片面，我不會感到驚訝。
請注意，html5允許您指定style元素的作用域屬性，這意味着它僅適用於style元素的父元素及其所有子元素。
順便說一下，通常的做法是將css放在單獨的文件中，並使用<link>標記將CSS包含在文檔中。這樣你可以在多個頁面上共享CSS。
最好把樣式表放在頭部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 50px;
width: 200px;
}
</style>
</head>
<body>
建議這樣做，因爲當你在開始之前聲明CSS時，你的樣式已經實際加載了。所以用戶很快就會看到屏幕上顯示的內容（例如背景顏色）。如果沒有，用戶在CSS到達用戶之前會看到空白屏幕一段時間。另外，如果您將樣式放置在某處，瀏覽器必須在聲明的樣式已解析時重新呈現該頁面（加載時新舊）。
根據任何CSS規範，只有第一個替代品在body之前有效。在結束標記</body>之後沒有標記，除了結束標記</html>。
雖然瀏覽器是寬容的，但通常沒有理由甚至認爲偏離了正確的順序。在某些創作情況下，您可能無法在其所屬的元素（head部分）注入style元素，但即使如此，它仍應放置在結束標記</body>之前。
內部CSS文件只用於同一個文件。但在外部CSS文件的情況下，您可以在各種頁面中使用它。這是真正的因素。這也有助於更好地尋找。 – SkyWalker