Cách chèn CSS để tạo kiểu cách cho trang HTML
Khi trình duyệt đọc tập tin định dạng (stylesheet), nó sẽ định dạng văn bản HTML theo thông tin trong tập tin định dạng đó.
3 cách thêm CSS
Có 3 cách để thêm tập tin định dạng cho văn bản HTML.
- Tập tin định dạng nội bộ
- Tập tin định dạng ngoài
- Nội dòng
Tập tin định dạng ngoài
Với một style sheet ngoài, bạn có thay đổi diện mạo của cả website mà chỉ cần thay đổi một tập tin duy nhất, Mỗi trang sẽ có tham chiếu tới tập tin ngoài này trong phần tử <link>
nằm trong phần <head>
.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Tập tin định dạng ngoài có thể được viết trên bất kì trình soạn thảo nào, không chứa phần tử HTML và phải được lưu với phần mở rộng là .css.
Đây là ví dụ về một phần trong tập tin style sheet.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Lưu ý: Không thêm khoảng trắng giữa giá trị đặc tính và đơn vị (như thế này margin-left: 20 px
;). mà phải viết như sau: margin-left: 20px;
Tập tin định dạng nội bộ
Nên dùng tập tin này khi mỗi trang có một kiểu định dạng khác nhau, được định nghĩa bằng phần tử <style>
và nằm trong phần <head>
của trang HTML.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Định dạng nội dòng
Nên dùng kiểu định dạng này nếu áp dụng một kiểu định dạng riêng cho một phần tử riêng. Để áp dụng, thêm thuộc tính style cho phần tử liên quan, thuộc tính style có thể chứa đặc tính CSS. Ví dụ dưới đây cho thấy cách thay đổi màu sắc và căn lề cho phần tử <h1>.
<h1 style="color:blue;margin-left:30px;">Tiêu đề</h1>
Nhiều tập tin định dạng
Nếu nhiều đặc tính được định nghĩa cho cùng một Selector (phần tử) trong các tập tin định dạng khác nhau, có thể dùng giá trị từ lần đọc style sheet gần nhất. Giả sử một style sheet ngoài định dạng phần tử <h1>
như sau:
h1 {
color: navy;
}
rồi một style sheet nội bộ định dạng cho phần tử <h1> như thế này:
h1 {
color: orange;
}
Nếu định dạng nội bộ được định nghĩa sau đường dẫn tới style sheet ngoài, phần tử <h1>
sẽ có màu da cam.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Nhưng nếu định dạng nội bộ được định nghĩa trước thì phần tử <h1> sẽ có màu xanh navy.
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Thứ tự phân tầng
Nên dùng kiểu định dạng nào khi có nhiều hơn một kiểu cho một phần tử HTML? Thường thứ tự áp dụng kiểu định dạng tuân theo cấp bậc từ cao xuống thấp như sau:
- Định dạng nội dòng (bên trong phần tử HTML)
- Các tập tin định dạng nội bộ và bên ngoài (trong phần head)
- Mặc định của trình duyệt
Định dạng nội dòng (bên trong phần tử HTML) được ưu tiên cao nhất, tức là có thể ghi đè định dạng được định nghĩa trong thẻ <head>
hoặc tập tin style sheet ngoài hoặc giá trị mặc định của trình duyệt.
Bài trước: Cú pháp và Selector trong CSS
Bài sau: Màu sắc trong CSS
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách tắt kiểm tra chính tả trong Word
Hôm qua 1 -
Dynamic System Updates là gì?
Hôm qua -
Cách ẩn, hiện ghi chú trong bảng trên Excel
Hôm qua -
Các cách làm, tùy chỉnh trong bài sẽ giúp tăng tốc Windows 10 của bạn "nhanh như gió"
Hôm qua 6 -
Gét gô là gì? Thử thách 6 ngày 6 đêm là gì?
Hôm qua 6 -
Cách gỡ huy hiệu Threads khỏi trang cá nhân Instagram
Hôm qua -
PING là gì? Test PING như thế nào?
Hôm qua -
Code Tiểu Yêu Tầm Đạo mới nhất
Hôm qua -
Điểm ưu tiên, điểm khuyến khích, khu vực ưu tiên khi xét tuyển năm 2022
Hôm qua -
DRAM và DRAM-less SSD có gì khác nhau?
Hôm qua