Embedded Files
Khái niệm property, value, selector. Property là thuộc tính của phần tử HTML, ví dụ như: 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. Ví dụ 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>
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>utnhan.wap.sh</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>utnhan.wap.sh</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.
Ví dụ: Ở đ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">utnhan.wap.sh</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. Ví dụ: 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>utnhan.wap.sh</h1>
</div>
<div style="color:red">
<div style="color:green">
<h1>utnhan.wap.sh</h1>
</div>
</div>
<div style="color:red">
<div style="color:green">
<h1 style="color:blue">utnhan.wap.sh</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 /* */. Ví dụ: Đ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*/
}
Google Sites
Report abuse