Giao trinh DH FPT_Slide6
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.27 MB, 20 trang )
BËI 6
LËM VIỆC VỚI THËNH PHẦN MỞ RỘNG CỦA CSS3
CuuDuongThanCong.com
/>
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
CuuDuongThanCong.com
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 (Multicolumns) 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
CuuDuongThanCong.com
3
/>
CSS3 MEDIA QUERIES
CuuDuongThanCong.com
/>
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
CuuDuongThanCong.com
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; 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 6 - Lˆm việc với thˆnh phần mở rộng của CSS3
CuuDuongThanCong.com
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
CuuDuongThanCong.com
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
CuuDuongThanCong.com
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
CuuDuongThanCong.com
9
/>
CSS3 LAYOUT
CuuDuongThanCong.com
/>
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
CuuDuongThanCong.com
11
/>
CSS3 LAYOUT
! C‡ch thiết lập:
#introduction-content
{
width: 600px;
-moz-column-count:
3;
-webkit-columncount: 3;
column-count: 3;
}
Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3
CuuDuongThanCong.com
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
CuuDuongThanCong.com
13
/>
CSS3 USER INTERFACE
(GIAO DIỆN NGƯỜI DôNG)
CuuDuongThanCong.com
/>
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
CuuDuongThanCong.com
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
CuuDuongThanCong.com
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-boxsizing:border-box; width:50%; border:1em solid red; float:left;}
HTML:
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>
Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3
CuuDuongThanCong.com
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
CuuDuongThanCong.com
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; }
<b>Note:</b> Internet Explorer and Opera does not support the
outline-offset property.
<div>This div has an outline border 15px outside the border edge.</div>
Slide 6 - Lˆm việc với thˆnh phần mở rộng của CSS3
CuuDuongThanCong.com
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
CuuDuongThanCong.com
20
/>
