Thẻ HTML <style>


Thí dụ

Sử dụng phần tử <style> để áp dụng một biểu định kiểu đơn giản cho tài liệu HTML:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
</head>
<body>

<h1>A heading</h1>
<p>A paragraph.</p>

</body>
</html>

Thêm các ví dụ "Hãy tự mình thử" bên dưới.


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

Thẻ <style>được sử dụng để xác định thông tin kiểu (CSS) cho một tài liệu.

Bên trong <style>phần tử, bạn chỉ định cách các phần tử HTML sẽ hiển thị trong trình duyệt.


Mẹo và lưu ý

Lưu ý: Khi trình duyệt đọc một biểu định kiểu, nó sẽ định dạng tài liệu HTML theo thông tin trong biểu định kiểu. Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn (phần tử) trong các biểu định kiểu khác nhau, thì giá trị từ biểu định kiểu đọc cuối cùng sẽ được sử dụng (xem ví dụ bên dưới)!

Mẹo: Để liên kết với một biểu định kiểu bên ngoài, hãy sử dụng thẻ <link> .

Mẹo: Để tìm hiểu thêm về các biểu định kiểu, vui lòng đọc Hướng dẫn CSS của chúng tôi .


Hỗ trợ trình duyệt

Element
<style> Yes Yes Yes Yes Yes


Thuộc tính

Attribute Value Description
media media_query Specifies what media/device the media resource is optimized for
type text/css Specifies the media type of the <style> tag

Thuộc tính toàn cầu

Thẻ <style>cũng hỗ trợ Thuộc tính chung trong HTML .


Thuộc tính sự kiện

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


Các ví dụ khác

Thí dụ

Nhiều kiểu cho các phần tử giống nhau:

<html>
<head>
<style>
  h1 {color:red;}
  p {color:blue;}
</style>
<style>
  h1 {color:green;}
  p {color:pink;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Các trang liên quan

Hướng dẫn HTML: HTML CSS

Hướng dẫn CSS: Hướng dẫn CSS

Tham chiếu DOM HTML: Đối tượng kiểu


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

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

style {
  display: none;
}