Cách sử dụng CSS trong trang web HTML
Khái niệm property, value, selector Property là thuộc tính của phần tử HTML, ví dụ: font-size (kích cỡ chữ của phần tử) color (màu chữ của phần tử) background-color (màu nền của phần tử) ..... Value là giá trị của thuộc tính. Selector (bộ chọn) là phần tử mà bạn muốn định ...
Khái niệm property, value, selector
Property là thuộc tính của phần tử HTML, ví dụ:
- font-size (kích cỡ chữ của phần tử)
- color (màu chữ của phần tử)
- background-color (màu nền của phần tử)
- .....
Value là giá trị của thuộc tính.
Selector (bộ chọn) là phần tử mà bạn muốn định dạng.
Trong đoạn mã phía dưới:
- Bộ chọn là h1
- Có 3 thuộc tính là font-size, color, background-color với giá trị lần lượt là 30px, white, red
h1 {
font-size:30px;
color:white;
background-color:red;
}
Cú pháp định dạng phần tử
Để định dạng cho một phần tử, ta sử dụng cú pháp như sau:
selector {
property1: value;
property2: value;
property3: value;
.....
propertyN: value;
}h1 {
font-size:30px;
color:white;
background-color:red;
}
p {
background-color:gray;
}
Lưu ý:
- Phía sau mỗi cặp property:value phải được kết thúc bởi dấu chấm phẩy (;)
- Vấn đề xuống dòng và khoảng cách trong CSS là không quan trọng, đoạn mã ở ví dụ phía trên có thể viết lại như sau.
h1{font-size:30px;color:white;background-color:red;}p{background-color:gray;}Cách sử dụng CSS
Có ba cách sử dụng css: Inline CSS, Internal CSS, External CSS
1) Inline CSS
Ta đặt các cặp property:value vào bên trong thuộc tính style nằm ở thẻ mở của phần tử.
<p style="color:red;font-size:25px;background-color:blue">Web cơ bản</p>
Bạn có thể tham khảo thêm về thuộc tính style tại đây
2) Internal CSS
Đặt các bộ định dạng CSS vào bên trong <style type="text/css"></style>
<style type="text/css"></style> đặt bên trong phần <head></head>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
font-size:30px;
color:white;
background-color:red;
}
p {
background-color:gray;
}
</style>
</head>
<body>
<h1>code24h.com (WEB CƠ BẢN .VN)</h1>
<p>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</p>
</body>
</html>
3) External CSS
Đặt các bộ định dạng CSS vào bên trong một tập tin css
Trong phần <head>, ta sử dụng cú pháp phía dưới để nhúng tập tin css vào trang web.
<link rel="stylesheet" type="text/css" href="đường dẫn đến tập tin CSS">
Ví dụ, tôi có một tập tin css nằm cùng cấp với tập tin html
Tập tin css có tên là dinhdang và chứa nội dung như sau:
h1 {
font-size:30px;
color:white;
background-color:red;
}
p {
background-color:gray;
}Để nhúng tập tin css phía trên vào trang web thì ở tập tin html sẽ có nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dinhdang.css">
</head>
<body>
<h1>code24h.com (WEB CƠ BẢN .VN)</h1>
<p>Hướng dẫn học lập trình web từ cơ bản đến nâng cao</p>
</body>
</html>Lưu ý:
- Cách tạo tập tin css giống với cách tạo tập tin html (chỉ thay .html bằng .css)
- Trong tập tin css không được chứa cặp thẻ <style type="text/css"></style>
Thứ tự ưu tiên giữa các cách sử dụng CSS
Nếu một thuộc tính nào đó của phần tử được thiệt lập giá trị bởi nhiều cách, thì thuộc tính đó sẽ nhận giá trị của cách sử dụng CSS dựa theo độ ưu tiên như sau:
- 1) Inline
- 2) Internal
- 3) External
Ở đoạn mã phía dưới, thuộc tính color của phần tử <h1> được thiết lập giá trị bởi 2 cách sử dụng CSS.
Trong đó, kiểu Inline có độ ưu tiên cao hơn Internal, nên thuộc tính color sẽ nhận giá trị blue
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
color:red;
}
</style>
</head>
<body>
<h1 style="color:blue">code24h.com (WEB CƠ BẢN .VN)</h1>
</body>
</html>
Thứ tự ưu tiên trong một bộ định dạng
Trong một bộ định dạng của một phần tử, nếu một thuộc tính nào đó bị viết lập lại nhiều lần, thì thuộc tính đó sẽ nhận giá trị ở lần viết cuối cùng.
Thuộc tính color của phần tử <h1> sẽ nhận giá trị ở lần viết cuối cùng là green
h1 {
color:red;
font-size:25px;
color:green;
}
Kế thừa giá trị thuộc tính từ phần tử tổ tiên
Thông thường, nếu một phần tử không thiết lập giá trị cho thuộc tính thì thuộc tính đó sẽ nhận giá trị từ giá trị thuộc tính của phần tử chứa nó và ở gần nó nhất.
<!DOCTYPE html>
<html>
<body>
<div style="color:red">
<h1>code24h.com (WEB CƠ BẢN .VN)</h1>
</div>
<div style="color:red">
<div style="color:green">
<h1>code24h.com (WEB CƠ BẢN .VN)</h1>
</div>
</div>
<div style="color:red">
<div style="color:green">
<h1 style="color:blue">code24h.com (WEB CƠ BẢN .VN)</h1>
</div>
</div>
</body>
</html>
Cách ghi chú thích
Khi bạn muốn vô hiệu hóa một số mã CSS với mục đích nào đó (chẳng hạn như để ghi nhớ, chú thích, hoặc test code) thì bạn đặt chúng vào bên trong cặp dấu /* */
Đoạn CSS nào nằm bên trong cặp dấu /* */ sẽ bị vô hiệu hóa
h1 {
/*color:red;
font-size:50px;*/
background-color:blue;
/*Đây cũng là một câu chú thích*/
}
