Với HTML 4.0 tất cả định dạng có thể được di chuyển ra khỏi tài liệu HTML và cho vào một file riêng biệt là Style Sheet.
Một số ví dụ
Styles trong HTML: Ví dụ này hướng dẫn bạn cách định dạng một tài liệu HTML với thông tin style được thêm vào phần <head>.
Đường liên kết không có gạch chân: Sử dụng thuộc tính style để tạo ra hiệu ứng đường link không có gạch chân.
Liên kết đến một style sheet "ngoại": Cách sử dụng thẻ <link> để liên kết đến một style sheet "ngoại vi".
1. Cách sử dụng Style
Khi trình duyệt đọc thông tin của Style Sheet, nó sẽ định dạng tài liệu theo style đó. Có 3 cách để chèn style sheet vào tài liệu HTML.
a, Style Sheet "ngoại"
Khi bạn có nhiều trang cần áp dụng style thì style sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi một file. Mỗi trang phải liên kết đến style sheet bằng cách sử dụng thẻ <link>. Thẻ <link> được đặt ở phần head của mỗi trang.
b, Style sheet "nội"
Nếu một tài liệu nào đó chỉ cần duy nhất một style thì Style Sheet nội nên được sử dụng. Bạn có thể xác định style nội trong phần head với thẻ <style>
c, Style "địa phương"
Style "địa phương" nên được sử dụng nếu bạn muốn dùng một style duy nhất cho một thành phần nào đó của trang.
Để sử dụng style "địa phương" bạn sử dụng thuộc tính style với những thẻ tương thích. Thuộc tính của style có thể bao gồm nhiều tính nắng CSS. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi màu và canh lề trái của đoạn văn.
2. Thẻ style
Một số ví dụ
Styles trong HTML: Ví dụ này hướng dẫn bạn cách định dạng một tài liệu HTML với thông tin style được thêm vào phần <head>.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>Tiêu đề trong h1 sẽ có màu đỏ</h1>
<h2>Tiêu đề trong h2 sẽ có màu xanh</h2>
<p>Đoạn text trong p sẽ có màu xanh lá cây</p>
</body>
</html>
Đường liên kết không có gạch chân: Sử dụng thuộc tính style để tạo ra hiệu ứng đường link không có gạch chân.
<a href="http://www.dxoan.blogspot.com" style="text-decoration:none;">Blog DX</a>
Liên kết đến một style sheet "ngoại": Cách sử dụng thẻ <link> để liên kết đến một style sheet "ngoại vi".
<html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Thẻ h1 hiển thị theo css của file styles.css</h1> </body> </html>
1. Cách sử dụng Style
Khi trình duyệt đọc thông tin của Style Sheet, nó sẽ định dạng tài liệu theo style đó. Có 3 cách để chèn style sheet vào tài liệu HTML.
a, Style Sheet "ngoại"
Khi bạn có nhiều trang cần áp dụng style thì style sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi một file. Mỗi trang phải liên kết đến style sheet bằng cách sử dụng thẻ <link>. Thẻ <link> được đặt ở phần head của mỗi trang.
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
b, Style sheet "nội"
Nếu một tài liệu nào đó chỉ cần duy nhất một style thì Style Sheet nội nên được sử dụng. Bạn có thể xác định style nội trong phần head với thẻ <style>
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
c, Style "địa phương"
Style "địa phương" nên được sử dụng nếu bạn muốn dùng một style duy nhất cho một thành phần nào đó của trang.
Để sử dụng style "địa phương" bạn sử dụng thuộc tính style với những thẻ tương thích. Thuộc tính của style có thể bao gồm nhiều tính nắng CSS. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi màu và canh lề trái của đoạn văn.
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
2. Thẻ style
| Thuộc tính | Ý nghĩa |
|---|---|
| <style> | Xác định đặc tính của style |
| <link> | Xác định nguồn của style |
| <div> | Xác định phần vùng trong tài liệu |
| <span> | Xác định phần vùng trong tài liệu |
| <font> | Không được ưa chuộng, dùng Style |
| <basefont> | Không được ưa chuộng, dùng Style |
| <center> | Không được ưa chuộng, dùng Style |
Tags
HTML