Khi một trình duyệt đọc một tài liệu CSS, nó sẽ định dạng tài liệu HTML theo thông tin trong tài liệu CSS.
Ba cách để chèn CSS
Có ba cách chèn một tài liệu CSS:
- External CSS
- Internal CSS
- Inline CSS
External CSS
Với một tài liệu CSS bên ngoài, chúng ta có thể thay đổi giao diện của toàn bộ một website bằng cách chỉ thay đổi một tập tin duy nhất!
Mỗi trang HTML phải bao gồm một tham chiếu tới tập tin CSS, thông qua phần tử <link>, bên trong phần head của tài liệu HTML.
Ví dụ:
Đoạn mã CSS ở bên ngoài được định nghĩa ở trong phần tử <link>, bên trong phần <head> của một 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>
Một tập tin CSS có thể được viết bằng bất kỳ text editor nào, và phải được lưu với phần mở rộng là *.css.
Tập tin có phần mở rộng là *.css sẽ không chứa bất kỳ thẻ HTML nào.
Sau đây là nội dung của tập tin "mystyle.css":
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Ghi chú: Đừng thêm khoảng trắng vào giữa giá trị của thuộc tính (20) và đơn vị (px):
Không chính xác (có khoảng trắng): margin-left: 20 px;
Chính xác (không có khoảng trắng): margin-left: 20px;
Internal CSS
Một Internal CSS có thể được sử dụng nếu như một trang HTML đơn có một style duy nhất.
Internal CSS được định nghĩa ở bên trong phần tử <style>, ở bên trong phần head của tài liệu HTML.
Ví dụ:
Các Internal CSS được định nghĩa ở bên trong phần tử <style>, ở bên trong phần <head> của một 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>
Inline CSS
Một inline CSS có thể được sử dụng để áp dụng một style duy nhất cho một phần tử đơn lẻ.
Để sử dụng inline CSS, hãy thêm thuộc tính style vào phần tử 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ụ:
Inline CSS được định nghĩa ở bên 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>
Mẹo: Một inline CSS đánh mất nhiều lợi thế của CSS (bằng cách trộn nội dung với phần trình bày). Hãy sử dụng phương thức này một cách tiết kiệm.
Multiple Style Sheets
Nếu như một số thuộc tính được định nghĩa cho cùng một selector (cùng một phần tử) trong các khai báo CSS khác nhau, giá trị từ lần đọc CSS cuối cùng sẽ được sử dụng.
Giả sử rằng một external style sheet có style sau cho phần tử <h1>:
h1 {
color: navy;
}
Sau đó, giả sử rằng một internal style sheet cũng có style sau cho phần tử <h1>:
h1 {
color: orange;
}
Nếu như internal CSS được định nghĩa sau liên kết đến external CSS, thì tất cả các phần tử <h1> sẽ có màu chữ là "màu da cam":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Tuy nhiên, nếu như internal CSS được định nghĩa trước liên kết tới external CSS, thì tất cả các phần tử <h1> sẽ có màu chữ là "màu xanh nước biển":
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Thứ tự xếp tầng
Style nào sẽ được sử dụng khi có nhiều hơn một style được chỉ định cho một phần tử HTML?
Tất cả các style trong một trang sẽ xếp tầng theo các quy tắc sau, ở đó vị trí số một có mức ưu tiên cao nhất:
- Inline CSS (ở bên trong một phần tử HTML)
- External và internal CSS (trong phần head)
- Mặc định của trình duyệt
Vậy nên, inline CSS có mức ưu tiên cao nhất, và sẽ ghi đè external và internal CSS và mặc định của trình duyệt.
Không có nhận xét nào:
Đăng nhận xét