Giáo trình Thực hành CSS - Bài 5: Các thuộc tính định kích cỡ và các thuộc tính dùng để dàn trang trong CSS

LAB 5: CSS (CB)
CÁC THUỘC TÍNH ĐỊNH KÍCH CỠ VÀ CÁC THUỘC TÍNH DÙNG ĐỂ DÀN TRANG TRONG CSS
A – LÝ THUYẾT
I – HEIGHT & WIDTH
1 – Thuộc tính width trong CSS
Định nghĩa
Width là một thuộc tính CSS dùng để quy định chiều rộng cho một thành phần web
Cách sử dụng
width: value. Trong đó value là giá trị của đơn vị độ dài
2 – Thuộc tính height trong CSS
Định nghĩa
Height là một thuộc tính CSS dùng để quy định chiều cao cho một thành phần web
Cách sử dụng
height: value. Trong đó value là giá trị của dơn vị độ dài
Mã code:
Hình ảnh hiển thị tương ứng:
II – FLOAT & CLEAR
1 – Thuộc tính float trong CSS
Định nghĩa
Float là một thuộc tính CSS dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó. Cách sử dụng cũng như tác dụng của nó tương tự thuộc tính align của một số thẻ HTML
Cách sử dụng
float: value. Trong đó value là một trong các giá trị sau:
left: Cố định thành phần vào bên trái 
right: Cố định thành phần vào bên trái
none: Không áp dụng float (đây là giá trị mặc định khi không khai báo Float)
Mã code:
Hình ảnh hiển thị tương ứng:
2 – Thuộc tính clear trong CSS
Định nghĩa
Thuộc tính clear trong css có tác dụng hủy bỏ tác dụng mà thuộc tính float đã gây ra trước đó
Cách sử dụng
clear: value. Trong đó value nhận giá trị là both
Mã code:
Hình ảnh hiển thị tương ứng:
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ề Width & Height - Float và một số thuộc tính khác nữa trong CSS để thiết một bảng hiển thị sản phẩm “Điện Thoại Di Động” như thiết kế mẫu ở hình 2 dưới đây. Yêu cầu thiết kế như sau:
Mỗi một sản phẩm điện thoại phải được thiết kế từ một Bảng (table) riêng biệt
Độ rộng của mỗi bảng là 120px
Trường hiển thị ảnh mô tả cách trường hiển thị thông tin dưới nó 10px
Trường hiển thị tên sản phẩm điện thoại cách các đối tượng bên ngoài nó 5px
Xem file bài giải bai_tap_2.html để thiết kế được chính xác hơn
II – BÀI TẬP VỀ NHÀ
Bài 2:
	Hoàn thành mẫu giao diện như hình dưới đây với các yêu cầu thiết kế như sau:
Đường viền bao ngoài của website có độ dầy 5px và có mầu trắng (#FFFFFF)
Mỗi Menu item đều cách các đối tượng bên trên và dưới nó 5px
Xem kỹ file bài giải bai_tap_2.html để việc thiết kế được chính xác hơn