Xem chi tiết hướng dẫn buổi 8 qua video
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:
a) 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) 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:
a) 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) 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.
- 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 LÀM THÊM
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
(FILE ẢNH CẦN THIẾT LẤY Ở BÀI HỌC SỐ 4)
>>Xem bài trước: Bài 7 - CSS (CB) LÀM VIỆC VỚI CÁC THUỘC TÍNH VỀ FONT CHỮ VÀ TEXT
>>Xem bài tiếp theo: Bài 9 - CSS (CB) CÁC THUỘC TÍNH CỦA BOX MODEL NHƯ: BORDER – MARGIN – PADDING
No comments:
Post a Comment