Những khái niệm về HTML 5,Giáo trình HTML5 css3,HTML căn bản,giáo trình html cơ bản,định dạng HTML,ngôn ngữ HTML, HTML, CSS, HTML và CSS, JAVASCRIPT, JAVA, cơ bản về HTML, kiến thức cơ bản về HTML, lập trình tin học, công nghệ thông tin,Làm việc với thành phần mở rộng của CSS3
BÀI 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 thuộc tính CSS3: ! Border-radius ! Border-image ! Gradient ! Transform, transition, animation ! Làm việc với font web ! Chèn nhiều hình với CSS3 Slide - Làm việc với thành phần mở rộng CSS3 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) cấu trúc hộp Flex (Flexboxes) ! CSS3 user interface Slide - Làm việc với thành phần mở rộng CSS3 CSS3 MEDIA QUERIES CSS3 MEDIA QUERIES ! ðối với tất trình duyệt/ thiết bị giao tiếp với máy chủ lưu trữ website 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 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 trình duyệt, thiết bị, thiết bị ñịnh hướng (phong cảnh/ chân dung), ñộ phân giải Slide - Làm việc với thành phần mở rộng CSS3 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; } !∀#∃%&∋(∃)(∗+∀∃,−∋.∃/0∋∃∋(12∃3(∗∃ (∗4∋∃2(&∃5∃6789:∃ ;∋.∃?∗∋≅Α∗=2(Β∃?Χ:≅Α∗=2(∃%4∃3(Χ∗∃∆ΕΦ∃)(∗+∀∃ ,−∋.∃(∗4∋∃2(&∃ΓΗ∃)(Ι∃2,Φ∋.∃3(Φϑ∋.∃ Slide - Làm việc với thành phần mở rộng CSS3 CSS3 MEDIA QUERIES ! Quy ñịnh chiều rộng trang ñược hiển thị thiết bị @media only screen and (max-device-width: 480px) ΚΛ2∃Μ∀ϑ∃(∗4∋∃2(&∃2,Ν∋∃2,Ο∋(∃=∀#Π2∃)ΘΧ∃∗Ρ(Φ∋Σ∃ Slide - Làm việc với thành phần mở rộng CSS3 CSS3 MEDIA QUERIES ! iều hướng thiết bị di ñộng: ! Nên thiết kế vị trí iều hướng ñơn giản hiển thị trình duyệt máy tính ! Gợi ý: • Nên có, nên ñể gần ñầu hình ñể dễ truy cập • Lặp lại iều hướng phía trang • Với thiết bị cảm ứng, sử dụng kích thước lớn cho link iều hướng • Tránh iều hướng từ hình ảnh, nên dựa danh sách chuyển hướng dạng CSS Slide - Làm việc với thành phần mở rộng CSS3 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 - Làm việc với thành phần mở rộng CSS3 CSS3 LAYOUT CSS3 LAYOUT ! Layout nhiều cột sử dụng CSS3: ! CSS3 cung cấp 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ột phần tử ñược chia thành • Column-width: quy ñịnh cụ thể chiều rộng cột • Column-gap: quy ñịnh khoảng cách cột • Column-rule: thuộc tính viết tắt, cho phép thiết lập tất thuộc tính: chiều rộng, style, màu sắc cột Slide - Làm việc với thành phần mở rộng CSS3 11 CSS3 LAYOUT ! Cách thiết lập: #introduction-content { width: 600px; -moz-column-count: 3; -webkit-columncount: 3; column-count: 3; } Slide - Làm việc với thành phần mở rộng CSS3 12 CSS3 LAYOUT ! Thiết lập layout dạng hộp Flexible (hộp linh hoạt): ! Là dạng bố cục CSS3 ! ðại diện cho bốn dạng layout ang ñược hỗ trợ 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 - Làm việc với thành phần mở rộng CSS3 13 CSS3 USER INTERFACE (GIAO DIỆN NGƯỜI DÙNG) CSS3 USER INTERFACE ! CSS3 cung cấp số tính n ng phía người dùng: ! Thay ñổi kích thước thành phầ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 - Làm việc với thành phần mở rộng CSS3 15 CSS3 USER INTERFACE ! CSS3 resize: ! Quy ñịnh thành phần hay thay ñổi kích thước người dùng show_boxre{ border:2px solid; padding:10px 40px; width:300px; resize:both; overflow:auto; } Slide - Làm việc với thành phần mở rộng CSS3 16 CSS3 USER INTERFACE ! CSS3 box-sizing: ! Cho xác ñịnh yếu tố phù hợp với 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 - Làm việc với thành phần mở rộng CSS3 17 CSS3 USER INTERFACE ! CSS3 Outline Offset: ! Quy ñịnh ñường biên, bao phía bên ñường biên mặc ñịnh ! cách tạo ñường outline: • không không gian • Không phải dạng hình chữ nhật Slide - Làm việc với thành phần mở rộng CSS3 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; } Note: Internet Explorer and Opera does not support the outline-offset property. This div has an outline border 15px outside the border edge. Slide - Làm việc với thành phần mở rộng CSS3 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 Giúp bố trí thông tin thuận tiện, rõ ràng cho người dùng ! CSS3 cung cấp số thuộc tính ñể tương tác với người dùng duyệt web Người dùng thay ñổi kích thước thành phần trang Slide - Làm việc với thành phần mở rộng CSS3 20 [...]... } Slide 6 - Làm việc với thành phần mở rộng của CSS3 13 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 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 15 CSS3 USER INTERFACE... 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 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 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... the right half. Slide 6 - Làm việc với thành phần mở rộng của CSS3 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 18 CSS3 USER INTERFACE ! CSS3 Outline Offset: div { margin:20px;... Slide 6 - Làm việc với thành phần mở rộng của CSS3 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... của CSS3 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 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... 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 20 .. .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: