Tải bản đầy đủ

Giao trinh DH FPT_Slide6

BËI 6
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 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

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 6 - Lˆm việc với thˆnh phần mở rộng của CSS3

CuuDuongThanCong.com

3

https://fb.com/tailieudientucntt


CSS3 MEDIA QUERIES

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


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

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 6 - Lˆm việc với thˆnh phần mở rộng của CSS3

CuuDuongThanCong.com

6

https://fb.com/tailieudientucntt


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

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 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

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 6 - Lˆm việc với thˆnh phần mở rộng của CSS3

CuuDuongThanCong.com

9

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 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

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 6 - Lˆm việc với thˆnh phần mở rộng của 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 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

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 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

https://fb.com/tailieudientucntt


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

https://fb.com/tailieudientucntt


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:

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

CuuDuongThanCong.com

17

https://fb.com/tailieudientucntt


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

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 6 - Lˆm việc với thˆnh phần mở rộng của 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 đượ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

https://fb.com/tailieudientucntt



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay

×