Thẻ <style> HTML

Định nghĩa và cách sử dụng

<style> thẻ được sử dụng để định nghĩa thông tin样式 của tài liệu (CSS).

Trong <style> Trong thẻ, bạn có thể chỉ định cách trình duyệt hiển thị các element HTML.

Lưu ý rằng thẻ style định nghĩa các样式 CSS được chèn vào tài liệu HTML, trong khi thẻ link được sử dụng để nhập样式 từ biểu mẫu样式 bên ngoài.

Thẻ style có thể xuất hiện ở bất kỳ phần nào của tài liệu HTML. Một tài liệu có thể chứa nhiều thẻ style, vì vậy không cần phải đặt tất cả các định nghĩa样式 vào phần head. Tính năng này rất hữu ích trong trường hợp sử dụng mô hình để tạo trang, vì như vậy có thể cung cấp thêm样式 cho các định nghĩa của mô hình bằng cách sử dụng样式 đặc trưng cho trang.

Xin xem thêm:

Giáo trình HTML:HTML CSS

Giáo trình CSS:Giáo trình CSS

HTML DOM Tham khảo:Đối tượng Style

Mô hình

Ví dụ 1

Sử dụng <style> Element áp dụng biểu mẫu样式 đơn giản cho tài liệu HTML:

<html>
<head>
<style>
  h1 {màu: đỏ;}
  p {màu: xanh dương;}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>

Thử ngay

Ví dụ 2

Nhiều kiểu样式 cho cùng một element:

<html>
<head>
<style>
  h1 {màu: đỏ;}
  p {màu: xanh dương;}
</style>
<style>
  h1 {màu: xanh lá cây;}
  p {màu:pink;}
</style>
</head>
<body>
<h1>Đây là tiêu đề</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>

Thử ngay

Hướng dẫn và chú thích

Lưu ý:Khi trình duyệt đọc biểu mẫu样式, nó sẽ định dạng tài liệu HTML dựa trên thông tin trong biểu mẫu样式. Nếu trong các biểu mẫu样式 khác nhau đã định nghĩa một số thuộc tính cho cùng một bộ lọc (element), thì sẽ sử dụng giá trị từ biểu mẫu样式 được đọc gần đây nhất (xin xem ví dụ trên)!

Lưu ý:Để liên kết đến bảng phong cách bên ngoài, hãy sử dụng <link> nhãn.

Lưu ý:Để biết thêm thông tin về bảng phong cách, hãy đọc Giáo trình CSS.

Thuộc tính

Thuộc tính Giá trị Mô tả
media Truy vấn phương tiện Định nghĩa phương tiện mà樣式 sử dụng.
type text/css Định nghĩa loại phương tiện của nhãn <style>.

Thuộc tính toàn cục

<style> Nhãn cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<style> Nhãn cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị với các giá trị mặc định sau: <style> Thành phần:

style {
  display: none;
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ