[Tự Học CSS] Bài 2: Bộ Chọn

Bài 1 Tổng quan về CSS đã qua, bạn phải nắm chắc kiến thức bài 1 để bước vào bài 2 không phải bỡ ngỡ, lúng túng khi code.

1. Khái niệm và phân loại bộ chọn:

Trở lại với ví dụ về việc vẽ tranh, giả sử bạn vẽ một cái cây có quả, cô giáo yêu cầu bạn tô màu ( định dạng) cho lá màu xanh, quả màu đỏ thì chắc chắn bạn phải xác định đâu là lá, đâu là quả. Nôm na trong CSS cũng như vậy, chúng ta sẽ chọn phần nào của website cần định dạng.

Cú pháp:

Đối với CSS nội tuyến:

<ten_the style= “thuoctinh:giatri; thuoctinh1:giatri;”>Nội dung</ten_the>

Đối với CSS ngoại tuyến và CSS trong:

Bo_chon{
Thuoctinh:giatri;
}
Trong CSS có ba bộ chọn chính: bộ chọn thẻ, bộ chọn mã, bộ chọn lớp.

2. Bộ chọn thẻ:

Nghĩa là xác định thẻ cần định dạng:
Bo_chon sẽ là tên thẻ HTML.
Ten_the{
Thuoctinh:giatri;
}

Ví dụ: 

Định dạng đoạn text “Thiet ke giao dien web OSVN.” Chữ mà àu đỏ và căn giữa theo CSS trong.
Ta cần xác định đoạn text trên nằm trong thẻ nào, ở đây là thẻ <p>.

Tương tự các bạn định dạng theo cách CSS ngoại tuyến.

3. Bộ chọn mã:

Mã hay còn gọi là ID, id là một thuộc tính trong thẻ HTML.

Cú pháp HTML:

<ten_the id= “ten_id”>Nội dung</ten_the>
ID được đặt cho các thành phần duy nhất (id trong tài liệu HTML không được trùng nhau). Có thể hiểu như mã học sinh, sinh viên của chúng ta vậy, sẽ không có 2 mã học sinh, sinh viên trùng nhau.

Ví dụ:

Cú pháp đúng:
<div id= “header”> Nội dung 1</div>
<div id= “content”> Nội dung 2</div>
<div id=”footer”> Nội dung 3</div>
Cú pháp sai:
<div id= “header”> Nội dung 1</div>
<div id= “footer”> Nội dung 2</div>
<div id=”footer”> Nội dung 3</div>

Cú pháp CSS:

#ten_id{
Thuoctinh=giatri;
}

Ví dụ:

Các bạn làm tương tự với CSS ngoại tuyến nhé.

4. Bộ chọn lớp:

Chúng ta lại tiếp tục vẽ cây, trên cây có nhiều lá, có nhiều qủa, tất cả các lá trên cây bạn tô xanh, tất cả các quả bạn tô đỏ. Trong một trang web có thể có nhiều thành phần giống nhau, để chọn tất các thành phần đó và định dạng chung cho chúng thì ta đặt nó cùng lớp (class).

Cú pháp HTML:

<ten_the class= “ten_class”>Nội dung</ten_the>
Chú ý: Class có thể trùng nhau nhưng ID thì không.

Cú pháp CSS:

.ten_class{
Thuoctinh=giatri;
}

Ví dụ: 

Trong một website, tất cả các đoạn văn đều có chữ màu đỏ.

Các bạn tự làm theo CSS ngoại tuyến nhé.

Bài tập thực hành.

1. Định dạng đoạn văn bản sau

<div>
Vô Đề
Thời gian tựa một khúc du
Phong ba bão táp đánh đu lòng người
Lê chân trải bước đường đời
Lòng ta thắt lại, kẻ buồn thiên thu.
Gia Linh
</div>
Yêu cầu:
- Dùng bộ chọn thẻ để định dạng màu chữ đoạn trên là xanh ( thuộc tính color), cỡ chữ là 40px( thuộc tính font-size), căn giữa (thuộc tính text-align).

2. Định dạng cho các khối sau

<div>Đây là header</div>
<div>Đây là content</div>
<div>Đây là  footer</div>
- Header, content, footer có độ rộng đều là 800px( thuộc tính width).
- Độ cao của header là 200px, content là 600px, footer là 100px (thuộc tính height).
- Màu nền của header và footer là vàng, content là xanh ( thuộc tính background-color).

3. Định dạng cho các khối sau ( dùng thẻ div để chứa nội dung).

- Tên bài hát có màu xanh, tên ca sỹ có màu đỏ (thuộc tính coler).
Chúc các bạn học tốt!