Lý thuyết lập trình ngôn ngữ html5 và css3 6.

Lý thuyết lập trình ngôn ngữ html5 và css3 từ cơ bản đến nâng cao phần 6.

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:

!   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

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

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

CSS3 MEDIA QUERIES

!   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 

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 

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

}

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

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

tất cả c‡c thuộc t’nh: chiều rộng, style, mˆu sắc giữa c‡c cột

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 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 được

hỗ trợ bởi CSS2.1

#introduction-content { width: 600px; height: 150px; border: 1px solid

#821738; display: webkitbox; webkitboxorient: horizontal; display:

-moz-box; -moz-box-orient: horizontal;

}

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

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 16

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

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

đườ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; 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>

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 20