Giáo trình Thực hành CSS - Bài 3: Class, ID và điều khiển hover

LAB 3: CSS (CB)
CLASS, ID VÀ ĐIỀU KHIỂN HOVER
A – LÝ THUYẾT
I – THUỘC TÍNH CLASS TRONG CSS
1 – Ý nghĩa của việc sử dụng Class trong CSS
Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần 
2 – Làm việc với Class trong CSS
Để làm việc với Class trong CSS chúng ta thường trài qua 2 bước sau:
Bước 1: Tìm những thẻ HTML nào mà chúng ta muốn áp dụng cho chúng cùng một kiểu Style và cho chúng một thuộc tính chung đó là class=”class_name” với class_name là tên của Class mà chúng ta muốn đặt tùy thích
Bước 2: Gọi tới tên của Class mà chúng ta đã khởi tạo để tiến hành áp dụng Style thay vì gọi từng thẻ HTML một như chúng ta thường làm trong các bài trước với cách thức như sau
.class_name{
	Áp dụng Style cho nhóm thẻ HTML được đặt tên class_name
}
Chú ý: Nên đặt tên của Class liên quan đến vấn đề mà Class đang giải quyết
II – THUỘC TÍNH ID TRONG CSS
1 – Ý nghĩa của việc sử dụng ID trong CSS
ID dùng để nhận dạng một đối tượng đặc trưng và duy nhất. Trong một văn bản HTML thì mỗi một đối tượng chỉ có duy nhất một ID. Đây là đặc điểm chính để phân biệt cũng như cách thức sử dụng giữa ID và Class
2 – Làm việc với ID trong CSS
Để làm việc với ID trong CSS chúng ta thường trài qua 2 bước sau:
Bước 1: Tìm thẻ HTML mà chúng ta muốn áp dụng Style cho nó khác với tất cả các đối tượng còn lại và cho nó một thuộc tính id=”id_name” với id_name là tên của ID mà chúng ta muốn đặt tùy thích
Bước 2: Gọi tới tên của ID mà chúng ta vừa khởi tạo trên để áp dụng Style
#id_name{
	Áp dụng Style cho thẻ HTML được đặt tên id_name
}
Chú ý: Nên đặt tên của ID liên quan đến vấn đề mà ID đang giải quyết
III – ĐIỀU KHIỂN HOVER
1 – Điều khiển Hover dành cho link
	Điều khiển này xác định trạng thái khi con trỏ chuột được đưa tới liên kết. Điều khiển này chạy được trên tất cả các trình duyệt.
2 – Điều khiển Hover dành cho thẻ các thẻ HTML khác
	Điều khiển này xác định trạng thái khi con trỏ chuột được đưa tới một thẻ HTML bất kỳ. Điều khiển này không thể thực hiện được trên các phiên bản của trình duyệt IE, nếu muốn sử dụng điều khiển này cho IE thì chúng ta cần phải can thiệp bằng một số biện pháp khác nữa
B – THỰC HÀNH
I – BÀI TẬP THỰC HÀNH
Bài 1:
	Sử dụng tối đa các kiến thức về CSS đã học cùng với các kiến thức khác về HTML để thiết kế một biểu mẫu “thăm dò ý kiến” như hình dưới. Xem bài giải bai_tap_1.html để thấy được đầy đủ các hiệu ứng Hover công việc thiết kế được chính xác hơn. Cho biết các thông số thiết kế như sau:
Bảng có độ rộng 220px
Các thuộc tính Border, Cellpadding, Cellspacing có giá trị 0px
Độ cao của TR chứa tiêu đề là 26px
Độ cao của TR chứa câu hỏi là 40px
Độ cao của các TR chứa các câu trả lời là 30px
Độ cao của TR chứa Button là 30px
II – BÀI TẬP VỀ NHÀ
Bài 2:
	Hoàn thành giao diện website như hình dưới đây với các yêu cầu về thiết kế như sau:
Phần Menu bên Trái và bên Phải
Font chứ arial
Phần Intro (Giới thiệu)
Phần nội dung hiển thị vắn tắt bài viết
Phần Footer