<style>: The Style Information element
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Phần tử <style> trong HTML chứa thông tin style cho một tài liệu hoặc một phần của tài liệu. Nó chứa CSS, được áp dụng cho nội dung của tài liệu chứa phần tử <style>.
Try it
<style>
p {
color: #26b72b;
}
code {
font-weight: bold;
}
</style>
<p>
This text will be green. Inline styles take precedence over CSS included
externally.
</p>
<p style="color: blue">
The <code>style</code> attribute can override it, though.
</p>
p {
color: red;
}
Phần tử <style> phải được đặt bên trong <head> của tài liệu. Nhìn chung, tốt hơn là đặt các style của bạn trong các stylesheet ngoài và áp dụng chúng bằng các phần tử <link>.
Nếu bạn đưa nhiều phần tử <style> và <link> vào tài liệu, chúng sẽ được áp dụng vào DOM theo thứ tự chúng xuất hiện trong tài liệu — hãy đảm bảo bạn đưa chúng vào đúng thứ tự, để tránh các vấn đề cascade không mong muốn.
Giống như các phần tử <link>, các phần tử <style> có thể bao gồm các thuộc tính media chứa media queries, cho phép bạn áp dụng có chọn lọc các stylesheet nội bộ cho tài liệu của mình tùy thuộc vào các đặc điểm của phương tiện như chiều rộng viewport.
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục.
blocking-
Thuộc tính này chỉ định rõ ràng rằng một số thao tác nhất định cần bị chặn khi tải xuống các tài nguyên con quan trọng và áp dụng stylesheet cho tài liệu. Các stylesheet được nhập bằng
@importthường được coi là tài nguyên con quan trọng, trong khibackground-imagevà font thì không. Các thao tác cần bị chặn phải là danh sách các token chặn được phân tách bằng dấu cách như sau. Hiện tại chỉ có một token:render: Việc hiển thị nội dung trên màn hình bị chặn.
Note: Chỉ các phần tử
styletrong<head>của tài liệu mới có thể chặn hiển thị. Theo mặc định, một phần tửstyletrong<head>chặn hiển thị khi trình duyệt phát hiện ra nó trong quá trình phân tích cú pháp. Nếu phần tửstylenhư vậy được thêm động thông qua script, bạn phải đặt thêmblocking = "render"để nó chặn hiển thị. media-
Thuộc tính này xác định phương tiện nào mà style sẽ được áp dụng. Giá trị của nó là một media query, mặc định là
allnếu thuộc tính bị bỏ qua. nonce-
Một nonce mật mã (số dùng một lần) được dùng để cho phép các style inline trong Content-Security-Policy style-src. Máy chủ phải tạo một giá trị nonce duy nhất mỗi khi truyền chính sách. Điều quan trọng là cung cấp một nonce không thể đoán được vì nếu không thì việc bỏ qua chính sách của tài nguyên là điều rất dễ xảy ra.
title-
Thuộc tính này chỉ định các bộ stylesheet thay thế.
Các thuộc tính đã lỗi thời
typeDeprecated-
Không nên cung cấp thuộc tính này: nếu có, các giá trị được phép duy nhất là chuỗi rỗng hoặc kết quả khớp không phân biệt chữ hoa thường với
text/css.
Ví dụ
Một stylesheet cơ bản
Trong ví dụ sau, chúng ta áp dụng một stylesheet ngắn cho một tài liệu:
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
Kết quả
Nhiều phần tử style
Trong ví dụ này chúng ta đã bao gồm hai phần tử <style> — hãy chú ý cách các khai báo mâu thuẫn trong phần tử <style> sau ghi đè những khai báo trong phần tử trước đó, nếu chúng có độ ưu tiên bằng nhau.
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style>
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
Kết quả
Bao gồm một media query
Trong ví dụ này chúng ta dựa trên ví dụ trước, thêm thuộc tính media vào phần tử <style> thứ hai để nó chỉ được áp dụng khi viewport nhỏ hơn 500px về chiều rộng.
<!doctype html>
<html lang="vi">
<head>
<meta charset="UTF-8" />
<title>Test page</title>
<style>
p {
color: white;
background-color: blue;
padding: 5px;
border: 1px solid black;
}
</style>
<style media="(width < 500px)">
p {
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<p>This is my paragraph.</p>
</body>
</html>
Kết quả
Tóm tắt kỹ thuật
| Danh mục nội dung | Nội dung metadata. |
|---|---|
| Nội dung được phép |
Nội dung văn bản khớp với thuộc tính type, tức là
text/css.
|
| Bỏ qua thẻ | Không thể bỏ qua thẻ nào. |
| Phần tử cha được phép | Bất kỳ phần tử nào chấp nhận nội dung metadata. |
| Vai trò ARIA ngầm định | Không có vai trò tương ứng |
| Vai trò ARIA được phép | Không có role nào được phép |
| Giao diện DOM | HTMLStyleElement |
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-style-element |
Khả năng tương thích với trình duyệt
Xem thêm
- Phần tử
<link>, cho phép chúng ta áp dụng các stylesheet ngoài cho một tài liệu. - Stylesheet thay thế