----
2.8.5 Kĩ thuật định dạng bảng
Ở các phần trước đã tìm hiểu hầu hết các thuộc tính quan trọng
của CSS, với các thuộc tính này, lập trình viên có thể thực hiện định dạng phần
nội dung của bảng. Cụ thể, lập trình viên có thể thay đổi cách hiển thị và căn
chỉnh nội dung bên trong mỗi ô (cell) bằng các thuộc tính liên quan đến font,
text, background và các thuộc tính khác. Ngoài ra, cũng có thể định dạng bảng
và các ô bằng padding, margin và border.
Phần này sẽ chỉ tập trung tìm hiểu một số thuộc tính có ảnh
hưởng trực tiếp đến việc hiển thị của bảng, đặc biệt là các đường viền.
Đường viền kiểu
separated và kiểu collapsed
CSS cung cấp hai kiểu để hiển thị đường viền của các ô trong
bảng, đó là separated và collapsed. Với kiểu separated (tách rời), cả bốn cạnh
của mỗi ô đều được vẽ đường viền, và có thể thiết lập khoảng cách (khoảng trắng)
giữa các đường viền. Với kiểu collapsed (thu gọn), khi có hai đường viền nằm cạnh
nhau, chúng sẽ được thu gọn lại, chỉ hiển thị một đường, khoảng trắng giữa hai
đường viền sẽ bị gỡ bỏ.
Xem hình minh họa,
Để chọn kiểu đường viền cho các ô, sử dụng thuộc tính border-collapse. Dưới đây là các đặc
tính của border-collapse,
– Giá trị (values): separate
| collapse | inherit
– Mặc định: separate
– Áp dụng: các phần tử
table và inline-table
– Kế thừa: có
Kiểu hiển thị separated là kiểu mặc định, ở kiểu này, có thể
thiết lập khoảng cách giữa các ô bằng thuộc tính border-spacing. Dưới đây là các đặc tính của border-spacing,
– Giá trị (values): đơn
vị đo chiều dài | inherit
– Mặc định: 0
– Áp dụng: các phần tử
table và inline-table
– Kế thừa: có
Border-spacing gồm hai giá trị, giá trị đầu tiên là khoảng
cách giữa các cột, giá trị thứ hai là khoảng cách giữa các hàng. Nếu chỉ cung cấp
một giá trị thì giá trị đó sẽ được dùng cho cả cột và hàng. Giá trị mặc định là
0, do vậy sẽ thấy đường viền giữa các ô có độ dày tăng gấp đôi.
Ví dụ, đoạn mã CSS sau sẽ tạo ra đường viền kiểu separated ở
hình minh họa phía trên,
table {
border-collapse:
separate;
border-spacing:
15px 3px;
border: none;
/*bỏ viền xung quanh bảng*/
}
td {
border: 2px
solid red; /*đường viền của các ô*/
}
Khi kiểu hiển thị là collapse, sẽ chỉ có một đường viền giữa
các ô. Ví dụ , đoạn mã CSS sau sẽ tạo ra đường viền kiểu collapse ở hình minh họa
phía trên,
table {
border-collapse:
collapse;
border: none;
/*bỏ viền xung quanh bảng*/
}
td {
border: 2px
solid red; /*đường viền của các ô*/
}
Chú ý: với kiểu collapsed, mặc dù trong mã CSS, đường viền của
mỗi ô được thiết lập là 2px, tuy nhiên, trên giao diện, đường viền giữa hai ô cạnh
nhau vẫn chỉ là 2px chứ không phải là 4px. Và đường viền sẽ nằm giữa hai ô.
Định dạng hiển thị ô
trống
Đối với kiểu hiển thị separated, với các ô trống (không có dữ
liệu), có thể sử dụng thuộc tính empty-cell
để quyết định có cho ô đó hiển thị hay không. Nếu được hiển thị, ô đó sẽ chỉ gồm
background và border.
Dưới đây là các đặc tính của empty-cell,
– Giá trị (values): show
| hide | inherit
– Mặc định: show
– Áp dụng: các ô của bảng
– Kế thừa: có
2.8.6 Kĩ thuật responsive
Responsive nghĩa là tùy chỉnh, tự động điều chỉnh. Trong thiết
kế web, responsive là kĩ thuật sử dụng CSS để tùy chỉnh bố cục (layout) của
trang web theo kích thước màn hình. Đây chỉ là một trong nhiều cách để thích ứng
với việc người dùng sử dụng các màn hình có kích thước khác nhau để duyệt web.
Để dễ hiểu, sẽ làm một ví dụ về kĩ thuật responsive. Hình dưới
đây là giao diện của một trang web, thiết kế theo kiểu responsive, được hiển thị
ở các màn hình có kích thước khác nhau.
Ở màn hình smartphone, trang web chỉ gồm một cột, với margin
rất nhỏ. Ở màn hình tablet, trang web vẫn chỉ có một cột, với margin rộng hơn. Ở
màn hình lớn (1024px), trang web gồm hai cột. Ở màn hình lớn hơn 1024px, trang
web gồm hai cột và có áp dụng max-width để khống chế chiều rộng, nhằm tránh vỡ
giao diện.
Responsive gồm những
gì?
Theo đề xuất của Mr. Marcotte, responsive gồm 3 thành phần,
gồm: bố cục kiểu fluid (fluid layout), hình ảnh co dãn (flexible images) và thực
hiện CSS dựa trên môi trường hiển thị (CSS media queries).
Bố cục kiểu fluid đã tìm hiểu ở phần 2.6.1 Các loại bố cục. Đặc điểm quan trọng nhất của loại bố cục
fluid là sử dụng đơn vị % để thiết lập kích thước của các thành phần.
Hình ảnh co dãn: nghĩa là khi kích thước màn hình nhỏ lại
thì hình ảnh hoặc các đối tương media khác cũng phải nhỏ theo, nhằm tránh bị
tràn ra ngoài giao diện.
CSS dựa trên môi trường hiển thị: là kĩ thuật CSS dựa trên
việc kiểm tra trước, xem môi trường sẽ hiển thị là gì? Trang web sẽ được in ra,
hay được hiển thị trên màn hình? Nếu là màn hình, thì kích thước là bao nhiêu?
Tùy theo môi trường hiển thị, sẽ có các định dạng CSS riêng.
Thiết lập viewport
Để có thể hiển thị một trang web trên các màn hình nhỏ,
trình duyệt trên các thiết bị di động sẽ kết xuất trang web ra một khung tạm
(canvas), gọi là viewport. Sau đó trình duyệt sẽ thu nhỏ viewport lại cho vừa với
chiều rộng màn hình (device width). Ví dụ, trên iPhone, trình duyệt Mobile
Safari sẽ thiết lập kích thước của viewport là 960px, và trang web sẽ được kết
xuất ra canvas kích thước 960px. Tuy nhiên, khi hiển thị lên màn hình iPhone rộng
320px thì rất nhiều thông tin sẽ bị thu nhỏ lại, rất khó đọc.
Để khắc phục tình trạng trên, các trình duyệt trên thiết bị
di động sẽ sử dụng thẻ meta để thiết
lập viewport bằng đúng kích thước của thiết bị. Thẻ này được đặt trong vùng
head của tài liệu HTML. Đây là công việc đầu tiên cần thực hiện của kĩ thuật
responsive.
<meta
name="viewport" content="width=device-width,
initial-scale=1">
Đoạn mã trên có nghĩa là độ rộng của viewport đúng bằng độ rộng
của thiết bị (width=device-width), và
tỉ lệ phóng to (initial-scale) là 1
(100%).
Lab 2.8 (exercise 18-1, p.446, [3])
Tạo bố cục kiểu fluid
Tạo bố cục kiểu fluid là công việc thứ hai cần thực hiện của
kĩ thuật responsive. Bố cục kiểu fluid được thiết kế dựa trên đơn vị đo là %,
do vậy các thành phần của trang web có thể tự thay đổi kích thước sao cho vừa với
màn hình hoặc cửa sổ trình duyệt.
Sẽ không thực tế, nếu tạo ra bố cục cho từng kích thước màn
hình. Thông thường, người lập trình chỉ tạo ra hai hoặc ba bố cục cho một số loại
màn hình chính (ví dụ smartphone, tablet, desktop). Sau đó, nhờ vào tính co dãn
của bố cục fluid, nên trang web có thể tùy chỉnh để phù hợp với các kích thước
màn hình còn lại. Bố cục kiểu fluid sẽ đảm bảo cho giao diện trang web không bị
dư thừa vùng trắng bên trái và bị cắt xén nội dung bên phải.
Giao diện trong bài Lab 2.8 ở trên đã được thiết kế theo bố
cục kiểu fluid. Để ý trong tập tin CSS sẽ thấy các thành phần được tính bằng
đơn vị % và em.
Tạo hình ảnh co dãn
Để thiết lập một hình ảnh có tính chất co dãn, sử dụng thuộc
tính max-width. Ví dụ,
img {
max-width: 100%;
}
Với max-width=100%,
nếu “phần tử chứa” nhỏ lại thì hình ảnh sẽ được thu nhỏ, nếu phần tử chứa lớn
hơn hình ảnh thì hình ảnh sẽ không thể lớn hơn, mà nó sẽ đạt 100% kích thước gốc.
Khi thiết lập thuộc tính max-width
thì không được thiết lập thuộc tính width
và height cho phần tử img trong mã HTML, nếu không, hình ảnh sẽ
không thể co dãn. Có thể áp dụng thuộc tính max-width
cho các đối tượng khác như object, embed,
video.
Tuy nhiên, thực tế không phải đơn giản như vậy. Vấn đề là
màn hình của thiết bị di động thường rất nhỏ, và cần phải tối giản kích trước của
hình ảnh để tăng tốc độ của trang web. Do vậy, cần tìm hiểu kĩ hơn liên quan đến
hình ảnh co dãn.
Lab 2.8 (tt) (exercise 18-2, p.447,
[3])
-----------
Cập nhật [19/8/2018]
-----------
Xem thêm: Học làm web (58) - CSS căn bản (34)