Bài giảng Thiết kế web bài 6: Làm việc với thành phần mở rộng của CSS3

BÀI 6 LÀ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: Làm việc với các thuộc tính mới trong CSS3:

Border-radius Border-radius Border-image Border-image Gradient Gradient

Transform, transition, animation Transform, transition, animation Làm việc với font web Làm việc với font web Chèn nhiều hình nền với CSS3 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

MỤC TIÊU BÀI HỌC

Giới thiệu CSS3 Media Queries Giới thiệu CSS3 Media Queries Làm việc với CSS3 layout dạng nhiều cột (Multi- 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) columns) và cấu trúc hộp Flex (Flexboxes) CSS3 user interface CSS3 user interface

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

CSS3 MEDIA QUERIES

Đối với tất cả các trình duyệt/ thiết bị giao tiếp với Đố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 máy chủ lưu trữ website và tự được định dạng với user agent String user agent String CSS3 media queries: CSS3 media queries:

Hình thức nhận biết thiết bị 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 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 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/ trình duyệt, thiết bị, thiết bị định hướng (phong cảnh/ chân dung), độ phân giải 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 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, Type và các thông số khác như độ phân giải, kích thước, màu sắc,… màu sắc,…

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

CSS3 MEDIA QUERIES

Sử dụng CSS3 media queries để cung cấp layout Sử dụng CSS3 media queries để cung cấp layout phù hợp với cho layout mobile phù hợp với cho layout mobile

@media only screen and (max-width: 480px) { @media only screen and (max-width: 480px) { body { padding: 5px; background-color:#FFF; background- body { padding: 5px; background-color:#FFF; background- image:url(images/smoothieworld_logo_mobile.jpg); background- image:url(images/smoothieworld_logo_mobile.jpg); background- repeat:no-repeat; repeat:no-repeat; } }

Quy định chiều rộng lớn nhất khi hiển thị : 480px

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

Sử dụng min-width, max-width để khai báo chiều rộ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ê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

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: Đ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 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 thị trên trình duyệt máy tính Gợi ý: Gợi ý:

• Nên có, nên để gần đầu màn hình để dễ truy cập • 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 • 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 • 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 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 • 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 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

CSS3 MEDIA QUERIES

Ví dụ:

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

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

solid; solid;

border-bottom: 1px grey border-bottom: 1px grey

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

solid; solid; } }

CSS3 LAYOUT

Layout nhiều cột sử dụng CSS3: 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 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: 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 • Column-count: quy định cụ thể số lượng các cột một

phần tử được chia thành. phần tử được chia thành.

• Column-width: quy định cụ thể chiều rộng của các cột • 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-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 • 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 tất cả các thuộc tính: chiều rộng, style, màu sắc giữa các cột các cột

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

CSS3 LAYOUT

Cách thiết lập:

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

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

CSS3 LAYOUT

Thiết lập layout dạng hộp Flexible (hộp linh hoạt): 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 Là dạng bố cục mới trong CSS3 Đại diện cho một trong bốn dạng layout đang được Đạ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 – 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 – nội tuyến, bố cục table – bảng và bố cục posisioned – theo vị trí xác định) theo vị trí xác định)

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

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

Giá trị None

box (or flex-box)

block

inline

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

Mô tả Các phần tử sẽ không được hiển thị Các phần tử hiển thị theo mô hình flexbox Các phần tử hiển thị theo mô hình khối Mặc định. Các phần tử hiển thị theo mô hình nội tuyến cấ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 theo chiều ngang hay dọc Cấu trúc:

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

Giá trị horizontal

vertical

inline-axis

block-axis

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

inherit Mô tả Các phần tử con được hiển thị theo chiều ngang Các phần tử con được hiển thị theo chiều dọc Các phần tử con hiển thị dọc trục nội tuyến Các phần tử con hiển thị dọc theo trục khối 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ích thước của box thay đổi Cấu trúc:

box-pack: start|end|center|justify;

Giá trị start

end

center

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

justify Mô tả Cạnh trái của phần tử con đầu tiên được đặt phía bên trái Cạnh phải của phần tử con cuối cùng được đặt phía bên phải 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 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ử con của box Cấu trúc:

box-align: start|end|center|baseline|stretch;

Giá trị start

end

center

Baseline

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

stretch Mô tả Các phần tử con được căn theo cạnh trên của box Các phần tử con được căn theo cạnh dưới của box 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 Các phần tử con được căn theo đường cơ sở của box 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ười CSS3 cung cấp một số tính năng về phía người dùng: dùng:

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

Các thuộc tính quy định: Các thuộc tính quy định:

Resize Resize box-sizing box-sizing outline-offset outline-offset

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

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

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

.show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; }

CSS3 USER INTERFACE

CSS3 box-sizing:

Cho xác định yếu tố phù hợp với một khu vực

CSS3: CSS3: div.Container { width:30em; border:1em solid;} div.Container { width:30em; border:1em solid;} div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box- div.box{box-sizing: border-box; -moz-box-sizing:border-box; -webkit-box- sizing:border-box; width:50%; border:1em solid red; float:left;} sizing:border-box; width:50%; border:1em solid red; float:left;} HTML: 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

CSS3 USER INTERFACE

CSS3 Outline Offset: CSS3 Outline Offset:

Quy định một đường biên, bao phía bên ngoài đường Quy định một đường biên, bao phía bên ngoài đường biên mặc định biên mặc định 2 cách tạo đường outline: 2 cách tạo đường outline: • không mất không gian • không mất không gian • Không phải dạng hình chữ nhật • 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