CSS - Bao gồm
Có bốn cách để liên kết các kiểu với tài liệu HTML của bạn. Hầu hết các phương pháp thường được sử dụng là CSS nội tuyến và CSS bên ngoài.
CSS nhúng - Phần tử <style>
Bạn có thể đặt các quy tắc CSS của mình vào tài liệu HTML bằng phần tử <style>. Thẻ này được đặt bên trong các thẻ <head> ... </head>. Các quy tắc được xác định bằng cú pháp này sẽ được áp dụng cho tất cả các phần tử có sẵn trong tài liệu. Đây là cú pháp chung -
<!DOCTYPE html>
<html>
<head>
<style type = "text/css" media = "all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Nó sẽ tạo ra kết quả sau:
Thuộc tính
Các thuộc tính được liên kết với các phần tử <style> là -
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| kiểu | text / css | Chỉ định ngôn ngữ biểu định kiểu là kiểu nội dung (kiểu MIME). Đây là thuộc tính bắt buộc. |
| phương tiện truyền thông | màn tty TV hình chiếu cầm tay in chữ nổi âm thanh tất cả |
Chỉ định thiết bị mà tài liệu sẽ được hiển thị. Giá trị mặc định là tất cả . Đây là một thuộc tính tùy chọn. |
CSS nội tuyến - Thuộc tính kiểu
Bạn có thể sử dụng thuộc tính style của bất kỳ phần tử HTML nào để xác định các quy tắc kiểu. Các quy tắc này sẽ chỉ được áp dụng cho phần tử đó. Đây là cú pháp chung -
<element style = "...style rules....">Thuộc tính
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| Phong cách | quy tắc phong cách | Giá trị của thuộc tính style là một tổ hợp các khai báo style được phân tách bằng dấu chấm phẩy (;). |
Thí dụ
Sau đây là ví dụ về CSS nội tuyến dựa trên cú pháp trên:
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;">
This is inline CSS
</h1>
</body>
</html>Nó sẽ tạo ra kết quả sau:
CSS bên ngoài - Phần tử <link>
Phần tử <link> có thể được sử dụng để bao gồm tệp biểu định kiểu bên ngoài trong tài liệu HTML của bạn.
Biểu định kiểu bên ngoài là một tệp văn bản riêng biệt với .csssự mở rộng. Bạn xác định tất cả các quy tắc Kiểu trong tệp văn bản này và sau đó bạn có thể đưa tệp này vào bất kỳ tài liệu HTML nào bằng cách sử dụng phần tử <link>.
Đây là cú pháp chung của việc bao gồm tệp CSS bên ngoài -
<head>
<link type = "text/css" href = "..." media = "..." />
</head>Thuộc tính
Các thuộc tính được liên kết với các phần tử <style> là -
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| kiểu | văn bản css | Chỉ định ngôn ngữ biểu định kiểu là kiểu nội dung (kiểu MIME). Thuộc tính này là bắt buộc. |
| href | URL | Chỉ định tệp bảng định kiểu có quy tắc Kiểu. Thuộc tính này là bắt buộc. |
| phương tiện truyền thông | màn tty TV hình chiếu cầm tay in chữ nổi âm thanh tất cả |
Chỉ định thiết bị mà tài liệu sẽ được hiển thị. Giá trị mặc định là tất cả . Đây là thuộc tính tùy chọn. |
Thí dụ
Hãy xem xét một tệp bảng định kiểu đơn giản có tên mystyle.css có các quy tắc sau:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}Bây giờ bạn có thể đưa tệp mystyle.css này vào bất kỳ tài liệu HTML nào như sau:
<head>
<link type = "text/css" href = "mystyle.css" media = " all" />
</head>CSS đã nhập - Quy tắc @import
@import được sử dụng để nhập biểu định kiểu bên ngoài theo cách tương tự như phần tử <link>. Đây là cú pháp chung của quy tắc @import.
<head>
@import "URL";
</head>Đây là URL của tệp định kiểu có quy tắc kiểu. Bạn cũng có thể sử dụng một cú pháp khác -
<head>
@import url("URL");
</head>Thí dụ
Sau đây là ví dụ hướng dẫn bạn cách nhập tệp biểu định kiểu vào tài liệu HTML:
<head>
@import "mystyle.css";
</head>Ghi đè các quy tắc CSS
Chúng tôi đã thảo luận về bốn cách để đưa các quy tắc biểu định kiểu vào tài liệu HTML. Đây là quy tắc để ghi đè bất kỳ Quy tắc Trang tính Kiểu dáng nào.
Bất kỳ biểu định kiểu nội tuyến nào cũng được ưu tiên cao nhất. Vì vậy, nó sẽ ghi đè bất kỳ quy tắc nào được xác định trong thẻ <style> ... </style> hoặc quy tắc được xác định trong bất kỳ tệp trang định kiểu bên ngoài nào.
Bất kỳ quy tắc nào được xác định trong thẻ <style> ... </style> sẽ ghi đè các quy tắc được xác định trong bất kỳ tệp biểu định kiểu bên ngoài nào.
Bất kỳ quy tắc nào được xác định trong tệp biểu định kiểu bên ngoài đều có mức ưu tiên thấp nhất và các quy tắc được xác định trong tệp này sẽ chỉ được áp dụng khi hai quy tắc trên không được áp dụng.
Xử lý các trình duyệt cũ
Vẫn còn nhiều trình duyệt cũ không hỗ trợ CSS. Vì vậy, chúng ta nên cẩn thận khi viết CSS nhúng của mình trong tài liệu HTML. Đoạn mã sau đây cho thấy cách bạn có thể sử dụng thẻ nhận xét để ẩn CSS khỏi các trình duyệt cũ hơn -
<style type = "text/css">
<!--
body, td {
color: blue;
}
-->
</style>Nhận xét CSS
Nhiều lần, bạn có thể cần phải thêm các nhận xét bổ sung vào các khối biểu định kiểu của mình. Vì vậy, rất dễ dàng để nhận xét bất kỳ phần nào trong style sheet. Bạn có thể đơn giản đặt bình luận của mình vào bên trong /*..... đây là bình luận trong biểu định kiểu ..... * /.
Bạn có thể sử dụng / * .... * / để nhận xét các khối nhiều dòng theo cách tương tự như bạn làm trong ngôn ngữ lập trình C và C ++.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Nó sẽ tạo ra kết quả sau: