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;
}