BÀI 6LÀ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-radiusBorder-imageGradient

Transform, transition, animationLàm việc với font webChè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-radiusBorder-imageGradient

Transform, transition, animationLàm việc với font webChè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 QueriesLà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 QueriesLà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ớimáy chủ lưu trữ website và tự được định dạng vớiuser agent StringCSS3 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 webNhận biết (phát hiện) được: chiều cao, chiều rộng củatrình duyệt, thiết bị, thiết bị định hướng (phong cảnh/chân dung), độ phân giảiLà bước cải tiến của luật @media bằng cách kết hợp MediaType 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ớimáy chủ lưu trữ website và tự được định dạng vớiuser agent StringCSS3 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 webNhận biết (phát hiện) được: chiều cao, chiều rộng củatrình duyệt, thiết bị, thiết bị định hướng (phong cảnh/chân dung), độ phân giảiLà bước cải tiến của luật @media bằng cách kết hợp MediaType 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

CSS3 MEDIA QUERIES

Sử dụng CSS3 media queries để cung cấp layoutphù 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 layoutphù 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 khihiển thị : 480px

Sử dụng min-width, max-width để khai báo chiềurộng hiển thị sẽ chỉ trong khoảng

CSS3 MEDIA QUERIES

Quy định chiều rộng của trang được hiển thị trênthiế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

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ểnthị trên trình duyệt máy tínhGợ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ểnthị trên trình duyệt máy tínhGợ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

#mainnav {height: auto;}#mainnav li {

float: none;width: auto;text-align: left;border-top: 1px grey

solid;border-bottom: 1px grey

solid;}

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ệcthiết kế layout dạng nhiều cột:

• Column-count: quy định cụ thể số lượng các cột mộtphầ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ữacá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ệcthiết kế layout dạng nhiều cột:

• Column-count: quy định cụ thể số lượng các cột mộtphầ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ữacá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

#introduction-content{width: 600px;-moz-column-count:3;-webkit-column-count: 3;column-count: 3;}

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 đượchỗ 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 đượchỗ 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;}

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êntrang hoặc với phần nội dung bên trong flexboxMộ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ếncấp cao

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 theochiều ngang hay dọcCấ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

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íchthước của box thay đổiCấ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 gianthê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

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ử concủa boxCấ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 gianthê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

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ườidùng:

Thay đổi kích thước thành phần trên trangThay đổi kích thước hộpPhác thảo

Các thuộc tính quy định:Resizebox-sizingoutline-offset

CSS3 cung cấp một số tính năng về phía ngườidùng:

Thay đổi kích thước thành phần trên trangThay đổi kích thước hộpPhác thảo

Các thuộc tính quy định:Resizebox-sizingoutline-offset

Slide 6 - Làm việc với thành phần mở rộng của CSS3 19

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

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>

CSS3 USER INTERFACE

CSS3 Outline Offset:Quy định một đường biên, bao phía bên ngoài đườngbiên mặc định2 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 đườngbiên mặc định2 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

CSS3 USER INTERFACE

CSS3 Outline Offset:div { margin:20px; width:150px; padding:10px; height:70px; border:2pxsolid black; outline:2px solid red; outline-offset:15px; }

<p><b>Note:</b> Internet Explorer and Opera does not support theoutline-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:2pxsolid black; outline:2px solid red; outline-offset:15px; }

<p><b>Note:</b> Internet Explorer and Opera does not support theoutline-offset property.</p>

<div>This div has an outline border 15px outside the border edge.</div>

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 layoutnhiều cột hơn. Giúp bố trí thông tin thuận tiện, rõràng cho người dùngCSS3 cung cấp một số thuộc tính để tương tác vớingườ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 layoutnhiều cột hơn. Giúp bố trí thông tin thuận tiện, rõràng cho người dùngCSS3 cung cấp một số thuộc tính để tương tác vớingườ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