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

1. BÀI 6
LÀM VIỆC VỚI THÀNH PHẦN MỞ RỘNG CỦA CSS3

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

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

4. CSS3 MEDIA QUERIES

5. 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
Là bước cải tiến của luật @media bằng cách kết hợp Media
Type và các thông số khác như độ phân giải, kích thước,
màu sắc,…
Đố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
Là bước cải tiến của luật @media bằng cách kết hợp Media
Type và các thông số khác như độ phân giải, kích thước,
màu sắc,…
Slide 6 - Làm việc với thành phần mở rộng của CSS3 5

6. 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;
}
Sử dụng CSS3 media queries để cung cấp layout
phù hợp với cho layout mobile
Slide 6 - Làm việc với thành phần mở rộng của CSS3 6
@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

7. 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)
Slide 6 - Làm việc với thành phần mở rộng của CSS3 7
Kết quả hiển thị trên trình duyệt của iPhone

8. 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
Đ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

9. 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
#mainnav {height: auto;}
#mainnav li {
float: none;
width: auto;
text-align: left;
border-top: 1px grey
solid;
border-bottom: 1px grey
solid;
}

10. CSS3 LAYOUT

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

12. 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
#introduction-content
{
width: 600px;
-moz-column-count:
3;
-webkit-column-
count: 3;
column-count: 3;
}

13. 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 (bố cục block – khối, bố cục inline –
nội tuyến, bố cục table – bảng và bố cục posisioned –
theo vị trí xác định)
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 (bố cục block – khối, bố cục inline –
nội tuyến, bố cục table – bảng và bố cục posisioned –
theo vị trí xác định)
Slide 6 - Làm việc với thành phần mở rộng của CSS3 13
#introduction-content { width: 600px; height: 150px; border: 1px solid
#821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -
moz-box; -moz-box-orient: horizontal;
}

14. CSS3 LAYOUT
Flexbox cung cấp các bộ chứa giúp tạo bố cục linh hoạt, có
tác dụng thay đổi và tương tác với các phần tử khác trên
trang hoặc với phần nội dung bên trong flexbox
Một số thuộc tính cần chú ý khi sử dụng flexbox:
Display  định nghĩa cách hiển thị của phần tử HTML
Slide 6 - Làm việc với thành phần mở rộng của CSS3 14
Giá trị Mô tả
None Các phần tử sẽ không được hiển thị
box (or flex-box) Các phần tử hiển thị theo mô hình flexbox
block Các phần tử hiển thị theo mô hình khối
inline Mặc định. Các phần tử hiển thị theo mô hình nội tuyến
cấp cao

15. CSS3 LAYOUT
Một số thuộc tính cần chú ý khi sử dụng flexbox:
box-orient  xác định phần tử con của box được đặt theo
chiều ngang hay dọc
Cấu trúc:
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
Slide 6 - Làm việc với thành phần mở rộng của CSS3 15
Giá trị Mô tả
horizontal Các phần tử con được hiển thị theo chiều ngang
vertical Các phần tử con được hiển thị theo chiều dọc
inline-axis Các phần tử con hiển thị dọc trục nội tuyến
block-axis Các phần tử con hiển thị dọc theo trục khối
inherit Kế thừa từ các thành phần cha

16. CSS3 LAYOUT
Một số thuộc tính cần chú ý khi sử dụng flexbox:
box-pack  xác định phần tử con sẽ được đặt khi khích
thước của box thay đổi
Cấu trúc:
box-pack: start|end|center|justify;
Slide 6 - Làm việc với thành phần mở rộng của CSS3 16
Giá trị Mô tả
start Cạnh trái của phần tử con đầu tiên được đặt phía bên trái
end Cạnh phải của phần tử con cuối cùng được đặt phía bên phải
center Các phần tử con hiển thị với khoảng cách đồng đều, không gian
thêm vào cả trước phần tử đầu tiên và sau phần tử cuối cùng
justify Các phần tử con hiển thị với khoảng cách đồng đều

17. CSS3 LAYOUT
Một số thuộc tính cần chú ý khi sử dụng flexbox:
box-align xác định cách thức sắp xếp các phần tử con
của box
Cấu trúc:
box-align: start|end|center|baseline|stretch;
Slide 6 - Làm việc với thành phần mở rộng của CSS3 17
Giá trị Mô tả
start Các phần tử con được căn theo cạnh trên của box
end Các phần tử con được căn theo cạnh dưới của box
center Các phần tử con hiển thị với khoảng cách đồng đều, không gian
thêm vào cả vào phần trên và dưới của hộp
Baseline Các phần tử con được căn theo đường cơ sở của box
stretch Các phần tử con được kéo dài để phù hợp với box

18. CSS3 USER INTERFACE
(GIAO DIỆN NGƯỜI DÙNG)

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

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

21. 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:
<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 21
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:
<div class="container">
<div class="box">This div occupies the left half.</div>
<div class="box">This div occupies the right half.</div>
</div>

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

23. 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; }
<p><b>Note:</b> Internet Explorer and Opera does not support the
outline-offset property.</p>
<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 23
div { margin:20px; width:150px; padding:10px; height:70px; border:2px
solid black; outline:2px solid red; outline-offset:15px; }
<p><b>Note:</b> Internet Explorer and Opera does not support the
outline-offset property.</p>
<div>This div has an outline border 15px outside the border edge.</div>

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