4/8/14

HTML Style

HTML Style
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.
Xem những ví dụ sau
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”.
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.
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>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
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>
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
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>
Thẻ style
ThẻMiêu tả đặc tính
<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

0 nhận xét:

Post a Comment