Giáo trình HTML5 - Bài 6: Làm việc với thành phần mở rộng của CSS3

 BÀI 6 
LÀM VIỆC VỚI THÀNH PHẦN MỞ RỘNG CỦA CSS3 
 NHẮC LẠI BÀI TRƯỚC 
   Làm việc với các thuộc tính mới trong CSS3: 
   Border-radius 
   Border-image 
   Gradient 
   Transform, transition, animation 
   Làm việc với font web 
   Chèn nhiều hình nền với CSS3 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 2 
 MỤC TIÊU BÀI HỌC 
   Giới thiệu CSS3 Media Queries 
   Làm việc với CSS3 layout dạng nhiều cột (Multi-
 columns) và cấu trúc hộp Flex (Flexboxes) 
   CSS3 user interface 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 3 
CSS3 MEDIA QUERIES 
 CSS3 MEDIA QUERIES 
   Đối với tất cả các trình duyệt/ thiết bị giao tiếp với 
 máy chủ lưu trữ website và tự được định dạng với 
 user agent String 
   CSS3 media queries: 
   Hình thức nhận biết thiết bị 
   Kiểm tra khả năng của người dùng truy cập vào trang 
 web 
   Nhận biết (phát hiện) được: chiều cao, chiều rộng 
 của trình duyệt, thiết bị, thiết bị định hướng (phong 
 cảnh/ chân dung), độ phân giải 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 5 
 CSS3 MEDIA QUERIES 
   Sử dụng CSS3 media queries để cung cấp layout 
 phù hợp với cho layout mobile 
 @media only screen and (max-width: 480px) { 
 body { padding: 5px; background-color:#FFF; background- 
 image:url(images/smoothieworld_logo_mobile.jpg); background-
 repeat:no-repeat; 
 } 
 Quy	định	chiều	rộng	lớn	nhất	khi	
 hiển	thị	:	480px	
 Sử	dụng	min-width,	max-width	để	khai	báo	chiều	
 rộng	hiển	thị	sẽ	chỉ	trong	khoảng	
Slide 6 - Làm việc với thành phần mở rộng của CSS3 6 
 CSS3 MEDIA QUERIES 
   Quy định chiều rộng của trang được hiển thị trên 
 thiết bị 
 @media only screen and (max-device-width: 480px) 
 Kết	quả	hiển	thị	trên	trình	duyệt	của	iPhone	
Slide 6 - Làm việc với thành phần mở rộng của CSS3 7 
 CSS3 MEDIA QUERIES 
   Điều hướng trên thiết bị di động: 
   Nên thiết kế vị trí điều hướng đơn giản hơn khi hiển 
 thị trên trình duyệt máy tính 
   Gợi ý: 
 •  Nên có, nên để gần đầu màn hình để dễ truy cập 
 •  Lặp lại điều hướng ở phía dưới trang 
 •  Với thiết bị cảm ứng, sử dụng kích thước lớn cho link 
 của điều hướng 
 •  Tránh điều hướng từ hình ảnh, nên dựa trên danh sách 
 chuyển hướng dạng CSS 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 8 
 CSS3 MEDIA QUERIES 
   Ví dụ: 
 #mainnav {height: auto;} 
 #mainnav li { 
 float: none; 
 width: auto; 
 text-align: left; 
 border-top: 1px grey solid; 
 border-bottom: 1px grey 
 solid; 
 } 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 9 
CSS3 LAYOUT 
 CSS3 LAYOUT 
   Layout nhiều cột sử dụng CSS3: 
   CSS3 cung cấp các thuộc tính để thuận tiện cho việc 
 thiết kế layout dạng nhiều cột: 
 •  Column-count: quy định cụ thể số lượng các cột một 
 phần tử được chia thành. 
 •  Column-width: quy định cụ thể chiều rộng của các cột 
 •  Column-gap: quy định khoảng cách giữa các cột 
 •  Column-rule: là thuộc tính viết tắt, cho phép thiết lập 
 tất cả các thuộc tính: chiều rộng, style, màu sắc giữa 
 các cột 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 11 
 CSS3 LAYOUT 
   Cách thiết lập: 
 #introduction-content 
 { 
 width: 600px; 
 -moz-column-count: 
 3; 
 -webkit-column-
 count: 3; 
 column-count: 3; 
 } 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 12 
 CSS3 LAYOUT 
   Thiết lập layout dạng hộp Flexible (hộp linh hoạt): 
   Là dạng bố cục mới trong CSS3 
   Đại diện cho một trong bốn dạng layout đang được 
 hỗ trợ bởi CSS2.1 
 #introduction-content { width: 600px; height: 150px; border: 1px solid 
 #821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -
 moz-box; -moz-box-orient: horizontal; 
 } 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 13 
 CSS3 USER INTERFACE 
(GIAO DIỆN NGƯỜI DÙNG) 
 CSS3 USER INTERFACE 
   CSS3 cung cấp một số tính năng về phía người 
 dùng: 
   Thay đổi kích thước thành phần trên trang 
   Thay đổi kích thước hộp 
   Phác thảo 
   Các thuộc tính quy định: 
   Resize 
   box-sizing 
   outline-offset 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 15 
 CSS3 USER INTERFACE 
   CSS3 resize: 
   Quy định một thành phần có thể hay không thể thay 
 đổi kích thước bởi người dùng 
 .show_boxre{ border:2px solid; padding:10px 40px; width:300px; 
 resize:both; overflow:auto; } 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 16 
 CSS3 USER INTERFACE 
   CSS3 box-sizing: 
   Cho xác định yếu tố phù hợp với một khu vực 
 CSS3: 
 div.Container { width:30em; border:1em solid;} 
 div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box-
 sizing:border-box; width:50%; border:1em solid red; float:left;} 
 HTML: 
 This div occupies the left half. 
 This div occupies the right half. 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 17 
 CSS3 USER INTERFACE 
   CSS3 Outline Offset: 
   Quy định một đường biên, bao phía bên ngoài 
 đường biên mặc định 
   2 cách tạo đường outline: 
 •  không mất không gian 
 •  Không phải dạng hình chữ nhật 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 18 
 CSS3 USER INTERFACE 
   CSS3 Outline Offset: 
 div { margin:20px; width:150px; padding:10px; height:70px; border:2px 
 solid black; outline:2px solid red; outline-offset:15px; } 
 Note: Internet Explorer and Opera does not support the 
 outline-offset property. 
 This div has an outline border 15px outside the border edge. 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 19 
 TỔNG KẾT 
   Sử dụng CSS3 media queries để thiết kế layout phù 
 hợp với trình duyệt, thiết bị 
   CSS3 giúp người thiết kế tạo được dạng layout 
 nhiều cột hơn. Giúp bố trí thông tin thuận tiện, rõ 
 ràng cho người dùng 
   CSS3 cung cấp một số thuộc tính để tương tác với 
 người dùng khi duyệt web. Người dùng có thể thay 
 đổi kích thước các thành phần trên trang 
Slide 6 - Làm việc với thành phần mở rộng của CSS3 20