Thẻ <kiểu> HTML
Ví dụ
Sử dụng phần tử <style> để áp dụng 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>
Hãy tự mình thử »Thêm 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 dáng (CSS) cho tài liệu.
Bên trong phần tử <style>
, bạn chỉ định cách các phần tử HTML sẽ hiển thị trong trình duyệt.
Phần tử <style>
phải được đưa vào bên trong phần <head>
của tài liệu.
Lời khuyên và ghi chú
Lưu ý: Khi trình duyệt đọc một style sheet, nó sẽ định dạng tài liệu HTML theo thông tin trong style sheet. 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 đến 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ề 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 chung
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 .
Thêm ví dụ
Ví dụ
Nhiều kiểu cho cùng một thành phần:
<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>
Hãy tự mình thử »Trang liên quan
Hướng dẫn về 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ị phần tử <style>
với các giá trị mặc định sau:
style {
display: none;
}