Cách thêm CSS
Khi trình duyệt đọc một style sheet, nó sẽ định dạng tài liệu HTML theo thông tin trong style sheet.
Ba cách để chèn CSS
Có ba cách để chèn một style sheet:
- CSS bên ngoài
- CSS nội bộ
- CSS nội tuyến
CSS bên ngoài
Với biểu định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp!
Mỗi trang HTML phải bao gồm một tham chiếu đến tệp biểu định kiểu bên ngoài bên trong phần tử <link>, bên trong phần đầu.
Ví dụ
Kiểu bên ngoài được xác định trong phần tử <link>, bên trong phần <head> của trang HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Hãy tự mình thử »Một biểu định kiểu 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 và phải được lưu bằng phần mở rộng .css.
Tệp .css bên ngoài không được chứa bất kỳ thẻ HTML nào.
Tệp "mystyle.css" trông như sau:
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
} Lưu ý: Không thêm khoảng trắng giữa giá trị thuộc tính (20) và đơn vị (px):
Không chính xác (dấu cách): margin-left: 20 px;
Đúng (không có khoảng trắng): margin-left: 20px;
CSS nội bộ
Một biểu định kiểu nội bộ có thể được sử dụng nếu một trang HTML có một kiểu duy nhất.
Kiểu bên trong được xác định bên trong phần tử <style>, bên trong phần đầu.
Ví dụ
Kiểu bên trong được xác định trong phần tử <style>, bên trong phần <head> của trang HTML:
<!DOCTYPE html>
<html>
<head>
<style>
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> Hãy tự mình thử »CSS nội tuyến
Kiểu nội tuyến có thể được sử dụng để áp dụng một kiểu duy nhất cho một phần tử.
Để sử dụng kiểu nội tuyến, hãy thêm thuộc tính style vào thành phần có liên quan. Thuộc tính style có thể chứa bất kỳ thuộc tính CSS nào.
Ví dụ
Kiểu nội tuyến được xác định trong thuộc tính "style" của phần tử có liên quan:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This
is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html> Hãy tự mình thử »Mẹo: Kiểu nội tuyến mất đi nhiều ưu điểm của biểu định kiểu (bằng cách trộn nội dung với bản trình bày). Sử dụng phương pháp này một cách tiết kiệm.
Nhiều tờ định kiểu
Nếu một số thuộc tính đã được xác định cho cùng một bộ chọn (phần tử) trong các biểu định kiểu khác nhau, thì giá trị từ biểu định kiểu đã đọc cuối cùng sẽ được sử dụng.
Giả sử rằng một biểu định kiểu bên ngoài có kiểu sau cho phần tử <h1>:
h1
{
color: navy;
}Sau đó, giả sử rằng một biểu định kiểu bên trong cũng có kiểu sau cho phần tử <h1>:
h1
{
color: orange;
}Ví dụ
Nếu kiểu bên trong được xác định sau liên kết tới biểu định kiểu bên ngoài, các phần tử <h1> sẽ có màu "cam":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head> Hãy tự mình thử »Ví dụ
Tuy nhiên, nếu kiểu bên trong được xác định trước liên kết tới biểu định kiểu bên ngoài, các phần tử <h1> sẽ là "navy":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>Hãy tự mình thử »Thứ tự xếp tầng
Kiểu nào sẽ được sử dụng khi có nhiều kiểu được chỉ định cho một phần tử HTML?
Tất cả các kiểu trong một trang sẽ "xếp tầng" thành một biểu định kiểu "ảo" mới theo các quy tắc sau, trong đó số một có mức độ ưu tiên cao nhất:
- Kiểu nội tuyến (bên trong phần tử HTML)
- Bảng định kiểu bên ngoài và bên trong (trong phần đầu)
- Trình duyệt mặc định
Vì vậy, kiểu nội tuyến có mức độ ưu tiên cao nhất và sẽ ghi đè các kiểu bên ngoài và bên trong cũng như mặc định của trình duyệt.
Bạn đã bao giờ nghe nói về Example.com.vn Spaces chưa? Tại đây, bạn có thể tạo trang web của riêng mình hoặc lưu các đoạn mã để sử dụng sau này miễn phí.
Bắt đầu miễn phí ❯* Không cần thẻ tín dụng
Video: Cách thêm CSS vào HTML
