THÔNG TIN TÀI LIỆU
BËI LËM VIỆC VỚI THËNH PHẦN MỞ RỘNG CỦA CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt NHẮC LẠI BËI TRƯỚC ! Lˆm việc với c‡c thuộc t’nh CSS3: ! Border-radius ! Border-image ! Gradient ! Transform, transition, animation ! Lˆm việc với font web ! Ch•n nhiều h“nh với CSS3 Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 (Multicolumns) vˆ cấu trœc hộp Flex (Flexboxes) ! CSS3 user interface Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES ! Đối với tất c‡c tr“nh duyệt/ thiết bị giao tiếp với m‡y chủ lưu trữ website vˆ tự đị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 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 tr“nh duyệt, thiết bị, thiết bị định hướng (phong cảnh/ ch‰n dung), độ ph‰n giải Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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; backgroundimage:url(images/smoothieworld_logo_mobile.jpg); backgroundrepeat: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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES ! Quy định chiều rộng trang 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 hiển thị tr•n tr“nh duyệt m‡y tnh ! Gi !: Ơ Nn c, nn gần đầu mˆn h“nh để dễ truy cập ¥ Lặp lại iều hướng ph’a trang ¥ Với thiết bị cảm ứng, sử dụng k’ch thước lớn cho link 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 LAYOUT CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 phần tử chia thˆnh ¥ Column-width: quy định cụ thể chiều rộng c‡c cột ¥ Column-gap: quy định khoảng c‡ch 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 thuộc t’nh: chiều rộng, style, mˆu sắc c‡c cột Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 11 https://fb.com/tailieudientucntt CSS3 LAYOUT ! C‡ch thiết lập: #introduction-content { width: 600px; -moz-column-count: 3; -webkit-columncount: 3; column-count: 3; } Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 12 https://fb.com/tailieudientucntt CSS3 LAYOUT ! Thiết lập layout dạng hộp Flexible (hộp linh hoạt): ! Lˆ dạng bố cục CSS3 ! Đại diện cho bốn dạng layout ang hỗ trợ 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 13 https://fb.com/tailieudientucntt CSS3 USER INTERFACE (GIAO DIỆN NGƯỜI DôNG) CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 USER INTERFACE ! CSS3 cung cấp số t’nh n ng 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 15 https://fb.com/tailieudientucntt CSS3 USER INTERFACE ! CSS3 resize: ! Quy định thˆnh phần c— thể hay kh™ng thể thay đổi k’ch thước người d•ng show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 16 https://fb.com/tailieudientucntt CSS3 USER INTERFACE ! CSS3 box-sizing: ! Cho x‡c định yếu tố ph• hợp với khu vực CSS3: div.Container { width:30em; border:1em solid;} div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-boxsizing:border-box; width:50%; border:1em solid red; float:left;} HTML: This div occupies the left half. This div occupies the right half. Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 17 https://fb.com/tailieudientucntt CSS3 USER INTERFACE ! CSS3 Outline Offset: ! Quy định đường bi•n, bao ph’a b•n ngoˆi đường bi•n mặc định ! c‡ch tạo đường outline: ¥ kh™ng kh™ng gian ¥ Kh™ng phải dạng h“nh chữ nhật Slide - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 18 https://fb.com/tailieudientucntt 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 19 https://fb.com/tailieudientucntt 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 dạng layout nhiều cột Giœp bố tr’ th™ng tin thuận tiện, r› rˆng cho người d•ng ! CSS3 cung cấp số thuộc t’nh để tương t‡c với người d•ng 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 - Lˆm việc với thˆnh phần mở rộng CSS3 CuuDuongThanCong.com 20 https://fb.com/tailieudientucntt ... CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 MEDIA QUERIES ! Đối với tất c‡c tr“nh duyệt/ thiết bị giao tiếp với m‡y chủ lưu trữ website vˆ tự định dạng với user agent String ! CSS3 media queries:... phần mở rộng CSS3 CuuDuongThanCong.com 13 https://fb.com/tailieudientucntt CSS3 USER INTERFACE (GIAO DIỆN NGƯỜI DôNG) CuuDuongThanCong.com https://fb.com/tailieudientucntt CSS3 USER INTERFACE
Ngày đăng: 27/12/2019, 19:00
Xem thêm: