Câu trả lời:
Chỉ cần thêm vào những gì jdelStrother đã đề cập về thông số kỹ thuật w3 và ARTstudio về kết xuất trình duyệt.
Đó là khuyến cáo vì khi bạn khai báo CSS trước khi <body>bắt đầu, kiểu của bạn đã thực sự được tải. Vì vậy, rất nhanh người dùng nhìn thấy một cái gì đó xuất hiện trên màn hình của họ (ví dụ như màu nền). Nếu không, người dùng sẽ thấy màn hình trống trong một thời gian trước khi CSS đến tay người dùng.
Ngoài ra, nếu bạn để các kiểu ở đâu đó trong <body>trình duyệt, trình duyệt phải kết xuất lại trang (mới và cũ khi tải) khi các kiểu được khai báo đã được phân tích cú pháp.
linkvà stylekhông được xuất hiện trong cơ thể trừ khi chúng có phạm vi (kiểu) hoặc có thuộc tính itemprop(liên kết) được khai báo.
stylelà một yếu tố dòng chảy trong html5 và html4.1 (ngay cả khi nó không có phạm vi) và có thể được đưa vào cơ thể.
scopedthuộc tính đã bị lỗi thời.
Các phiên bản gần đây nhất của thông số HTML hiện cho phép <style>thẻ trong các thành phần cơ thể. https://www.w3.org/TR/html5/dom.html#flow-content
Ngoài ra, scopedthuộc tính từng là điều kiện tiên quyết để có một stylethẻ trong bodyhiện đã lỗi thời.
Điều này có nghĩa là, bạn có thể sử dụng stylethẻ ở mọi nơi bạn muốn, ý nghĩa duy nhất là hiệu suất trang bị giảm do phản xạ / sơn lại có thể xảy ra khi trình duyệt nhấn các kiểu xuống sâu hơn trong cây trang.
Câu trả lời lỗi thời:
Các <style>thẻ không được phép trong phạm vi <body>theo thông số kỹ thuật w3. (Tất nhiên, bạn có thể áp dụng các kiểu nội tuyến thông qua <div style="color:red">nếu cần, nhưng nó thường được coi là phân tách phong cách và nội dung kém)
<style>là một phần tử luồng trong html 5 và 4.1 và có thể được đặt trong phần thân (như tất cả các phần tử luồng khác).
Đưa CSS vào phần thân có nghĩa là nó được tải sau. Đây là một kỹ thuật được sử dụng để cho phép trình duyệt bắt đầu vẽ giao diện nhanh hơn (nghĩa là loại bỏ một bước chặn). Điều này rất quan trọng đối với trải nghiệm người dùng trên SmartPhones.
Tôi làm hết sức mình để giữ một css nhỏ trên <head>và tôi di chuyển phần còn lại ở phía dưới. Ví dụ: nếu một trang sử dụng CSS UI của JQuery, tôi luôn di chuyển nó ở dưới cùng <body>, ngay trước các liên kết đến javascript của JQuery. Ít nhất, tất cả các mục không Jquery đã có thể được rút ra.
Đầu được thiết kế cho (Trích dẫn W3C):
"thông tin về tài liệu hiện tại, chẳng hạn như tiêu đề của nó, các từ khóa có thể hữu ích cho các công cụ tìm kiếm và các dữ liệu khác không được coi là nội dung tài liệu "
Xem cấu trúc toàn cầu của một tài liệu HTML . Vì CSS không phải là nội dung tài liệu, nên nó nằm trong đầu.
Ngoài ra, mọi nhà phát triển Web khác sẽ mong đợi nhìn thấy nó ở đó, vì vậy đừng nhầm lẫn mọi thứ bằng cách đặt nó vào cơ thể, ngay cả khi nó hoạt động!
CSS duy nhất bạn nên đặt trong phần thân là CSS nội tuyến , mặc dù tôi thường tránh các kiểu nội tuyến.
Các tiêu chuẩn ( HTML 4.01: thành phần kiểu ) xác định rõ rằng thẻ kiểu chỉ được phép bên trong thẻ đầu. Nếu bạn đặt các thẻ kiểu trong thẻ body, các trình duyệt sẽ cố gắng tận dụng nó tốt nhất nếu có thể.
Có thể trình duyệt sẽ bỏ qua thẻ kiểu trong phần thân nếu bạn chỉ định loại tài liệu nghiêm ngặt. Tôi không biết liệu có trình duyệt hiện tại nào thực hiện việc này không, nhưng tôi sẽ không tin vào tất cả các phiên bản trong tương lai để có thể thoải mái về nơi bạn đặt yếu tố kiểu dáng.
stylethẻ HTML5 được cho phép trong phần thân nếu chúng có scopedthuộc tính.
Mặc dù stylethẻ không được phép trong phần thân, linkthẻ vẫn vậy, miễn là bạn đang tham khảo biểu định kiểu bên ngoài, tất cả các trình duyệt sẽ kết xuất và sử dụng CSS chính xác khi được sử dụng trong body.
Nguồn: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
Ngoài các câu trả lời trước đó, mặc dù đặt khối mã kiểu bên trong phần tử có thể hoạt động trong các trình duyệt hiện đại (mặc dù điều đó vẫn không đúng), luôn có một mối nguy hiểm, đặc biệt với các trình duyệt cũ hơn, trình duyệt sẽ hiển thị mã dưới dạng văn bản trừ khi phần kiểu được bao gồm trong phần CDATA.
Tất nhiên, điều khác với việc đưa nó vào bên trong phần tử, ngoại trừ kiểu nội tuyến, là vì nó không đáp ứng với thông số kỹ thuật W3C HTML / XHTML là bất kỳ trang nào có nội dung trong phần thân sẽ không thành công trên trình xác nhận W3C. Việc tìm kiếm các sự cố hiển thị không mong muốn luôn dễ dàng hơn nếu tất cả mã của bạn hợp lệ, giúp phát hiện lỗi dễ dàng hơn. Một phần tử HTML không hợp lệ có thể ảnh hưởng xấu đến việc chạy của bất kỳ và tất cả phần tử nào ngoài mã xảy ra trong mã, do đó bạn có thể nhận được các hiệu ứng không mong muốn có các phần tử ở những nơi không nên, bởi vì khi trình duyệt tìm thấy phần tử không hợp lệ, nó chỉ là làm cho nó đoán tốt nhất về cách nó sẽ hiển thị nó và các trình duyệt khác nhau có thể đưa ra các quyết định khác nhau về cách chúng hiển thị nó.
Cho dù bạn sử dụng một loại tài liệu chuyển tiếp hay nghiêm ngặt, nó vẫn sẽ không hợp lệ theo thông số kỹ thuật (X) HTML.
Bạn thực sự sẽ đánh bại mục đích sử dụng CSS bằng cách đặt các kiểu trong cơ thể. Vấn đề sẽ là tách nội dung khỏi phần trình bày (và chức năng). Bằng cách này, mọi thay đổi về kiểu có thể được thực hiện trong biểu định kiểu, không phải trong nội dung. Khi bạn sử dụng phương thức kiểu nội tuyến, mỗi trang có kiểu dáng nội tuyến cần thay đổi từng cái một. Tàn nhẫn và mạo hiểm vì bạn có thể bỏ lỡ một hoặc ba hoặc mười trang.
Sử dụng biểu định kiểu, bạn chỉ cần thay đổi biểu định kiểu; các thay đổi lan truyền tự động đến mọi trang HTML liên kết đến biểu định kiểu.
quan điểm của neonble cũng là một lý do tuyệt vời khác; nếu bạn làm rối HTML bằng cách thêm CSS nội tuyến, kết xuất sẽ trở thành một vấn đề. HTML không ném ngoại lệ cho mã của bạn. Thay vào đó, nó đi ra ngoài và tái hiện nó theo cách tốt nhất có thể, và tiếp tục.
Tuân thủ các tiêu chuẩn web bằng cách sử dụng biểu định kiểu sẽ giúp trang web tốt hơn. Và khi bạn cần trợ giúp vì mọi thứ trên trang của bạn không chính xác theo cách bạn muốn, việc đặt CSS của bạn vào đầu trái ngược với cơ thể sẽ giúp bạn tự khắc phục sự cố tốt hơn và cho bất kỳ ai bạn yêu cầu trợ giúp.
Hai câu trả lời trái ngược nhau:
Từ trang MDN trên thẻ liên kết:
Một
<link>phần tử có thể xuất hiện trong phần tử<head>hoặc<body>phần tử, tùy thuộc vào việc nó có loại liên kết có thân không. Ví dụ: loại liên kết biểu định kiểu là body-ok, và do đó a<link rel="stylesheet">được phép trong cơ thể. Tuy nhiên, đây không phải là cách thực hành tốt nhất; nó có ý nghĩa hơn để tách các<link>yếu tố của bạn khỏi nội dung cơ thể của bạn, đặt chúng trong đầu của bạn.
Từ CSS Hướng dẫn dứt khoát (Phiên bản thứ 4/2017) trang 10
Để tải thành công biểu định kiểu bên ngoài, liên kết phải được đặt bên trong phần tử đầu nhưng không được đặt trong bất kỳ phần tử nào khác.
nó sẽ làm cho sự khác biệt gì?
Ưu điểm: Đôi khi dễ dàng hơn để áp dụng các thuộc tính nhất định ở một số nơi nhất định, đặc biệt là nếu mã được tạo nhanh chóng (chẳng hạn như xây dựng qua php và mỗi danh sách có kích thước động cần có lớp riêng của nó ... chẳng hạn như định thời gian cho các biến đổi).
Nhược điểm: Hơi chậm, có thể không hoạt động vào một ngày nào đó trong tương lai xa.
Ý kiến chung của tôi về nó: Đừng làm điều đó bạn không cần phải làm, nhưng nếu bạn phải làm, đừng mất bất kỳ giấc ngủ nào trên nó.
Đưa phần <style>thân vào hoạt động tốt với tất cả các trình duyệt hiện đại.
Tôi đã sử dụng cái này ở eBay.
Nếu nó hoạt động, đừng đá nó.