Học làm web (57) - CSS căn bản (33)

Tiếp theo của: Học làm web (56) - CSS căn bản (32)
----

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:

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:

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:


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ị % 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 widthheight 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: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (58) - CSS căn bản (34)