Slide6 html5

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
  Đố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
@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

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

CSS3 LAYOUT
  Cách thiết lập:
#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: -webkit-box; -webkit-box-orient: 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
.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

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

Slide6 html5

More Related Content

What's hot (17)

Viewers also liked (15)

Similar to Slide6 html5 (20)

More from tuanduongcntt (20)

Slide6 html5