Cách sử dụng CSS
Khi một trình duyệt đọc một style sheet (bảng
định kiểu), nó sẽ định dạng tài liệu HTML theo các thông tin mô tả trong style
sheet.
Ba cách để chèn mã CSS
Hiện có ba cách để chèn mã style sheet vào trang web:
·
Style sheet
nằm bên ngoài tài liệu HTML
·
Style sheet
nằm trong tài liệu HTML
·
Inline
style
Style sheet độc lập (bên ngoài)
Với một style sheet độc lập, bạn có thể thay đổi giao
diện của toàn bộ trang web bằng cách thay đổi chỉ là một tệp tin!
Mỗi trang phải bao gồm một tham chiếu đến tệp tin
style sheet độc lập bên ngoài bằng phần tử <link>. Phần tử <link> đặt
trong phần tử <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Style sheet bên ngoài có thể được viết bằng bất kỳ
trình soạn thảo văn bản nào. Tệp không chứa bất kỳ thẻ html nào. Style sheet độc
lập cần được lưu trong một tệp có đuôi (phần mở rộng) là .css.
Ví dụ về một tệp tin style sheet có tên là
"myStyle.css" dưới đây:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Style sheet nội bộ
Một style sheet nội bộ có thể được sử dụng nếu bạn chỉ
có một trang HTML với kiểu là duy nhất.
Kiểu (style) nội bộ được định nghĩa trong phần tử
<style>, phần tử này đặt trong phần đầu của một trang HTML (nằm trong
<head>):
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline style
Inline style (kiểu nội tuyến) có thể được sử dụng để
áp dụng duy nhất một kiểu cho chỉ một phần tử.
Inline style sẽ làm mất nhiều lợi thế của style sheet
(bởi trộn nội dung với cách trình bày). Không nên lạm dụng phương pháp này!
Để sử dụng inline style, bạn chỉ cần thêm thuộc tính
"style" cho phần tử liên quan. Thuộc tính "style" có thể chứa
bất kỳ thuộc tính nào của CSS.
Ví dụ dưới đây cho thấy cách hay đổi màu sắc và canh
lề trái của phần tử <h1>:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Đa kiểu (multiple style sheet)
Nếu một số thuộc tính đã được xác định cho cùng một bộ
chọn (selector) (phần tử) trong các style sheet khác nhau, các giá trị style
sheet được đọc cuối cùng sẽ được sử dụng.
Ví dụ
Giả sử rằng một style sheet bên ngoài có định nghĩa
kiểu sau đây cho các phần tử <h1>:
h1 {
color: navy;
}
sau đó, giả sử rằng có một style sheet nội bộ cũng đã
định nghĩa kiểu cho <h1> như sau:
h1 {
color: orange;
}
Nếu style sheet nội bộ được xác định sau khi liên kết
tới style sheet bên ngoài, phần tử <h1> sẽ có văn bản màu
"orange"(cam):
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Tuy nhiên, nếu style sheet nội bộ được xác định trước
khi liên kết với style sheet bên ngoài, các phần tử <h1> sẽ có văn bản
màu "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet"
type="text/css" href="mystyle.css"> </head>
Đăng nhận xét