Bài 46: HTML và CSS từ Zero đến Hero(Bài 23 CSS)

  

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

CSS dựa trên môi trường hiển thị

CSS dựa trên môi trường hiển thị (media queries) cho phép lập trình viên tạo ra mã CSS cho từng loại môi trường (hay thiết bị) hiển thị khác nhau. Các môi trường hiển thị gồm: in (print), màn hình máy tính (screen), thiết bị cầm tay (handheld), thiết bị liên quan đến hệ thống chữ nổi (braille), màn chiếu (screen projection), thiết bị xử lý văn bản qua đường điện thoại (tty), Ti vi (TV). Sử dụng từ khóa all nếu muốn áp dụng định dạng CSS cho toàn bộ các loại môi trường. Media queries cũng xét đến các đặc trưng khác như: độ rộng của thiết bị (device-width), hướng (ngang, dọc) của màn hình (orientation) và độ phân giải (resolution).

Đây là danh sách các thuộc tính có thể kiểm tra trong chế độ media queries: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid. Có thể kiểm tra giá trị nhỏ nhất hoặc lớn nhất của hầu hết các thuộc tính bằng tiếp đầu ngữ min- hoặc max- tương ứng. Ví dụ: min-width: 480px dùng để kiểm tra kích thước màn hình có lớn hơn hoặc bằng 480px hay không? Như vậy, màn hình kích thước 768px sẽ thỏa điều kiện này và được áp dụng CSS, trong khi màn hình kích thước 320px sẽ không thỏa điều kiện.

Đoạn mã của media queries được viết trong tập tin CSS như các luật CSS thông thường khác. Ví dụ,

@media screen and (min-width: 480px;) {

/* các luật CSS được đặt tại đây */

}

Đoạn mã trên sẽ kiểm tra xem môi trường hiển thị có phải là screen không và kích thước có phải từ 480px trở lên hay không?

Cú pháp của câu lệnh truy vấn môi trường bắt đầu bằng @media, tiếp theo là “tên thiết bị”, sau đó là các đặc trưng và các giá trị cần kiểm tra được đặt trong ngoặc đơn (), cuối cùng, các luật CSS được đặt trong dấu ngoặc nhọn {}.

Từ khóa “and” là toán tử logic, được dùng để nối các điều kiện kiểm tra. Như ở ví dụ trên, câu lệnh truy vấn sẽ trả về kết quả là “true” nếu môi trường hiển thị là screen và có độ rộng tử 480px trở lên.

Ví dụ câu lệnh truy vấn sau kiểm tra cùng lúc ba điều kiện: là screen, độ rộng từ 700px trở lên, và màn hình xoay ngang (landscape).

@media screen and (min-width: 700px;) and (orientation: landscape) {

/* các luật CSS được đặt tại đây */

}

Đặt lệnh truy vấn trong thẻ link

Lệnh @media ngoài việc đặt trong một tập tin CSS, còn có thể đặt trong thẻ link của tài liệu HTML. Mục đích là để tải tập tin CSS nếu thỏa điều kiện cho trước.

Ví dụ, đoạn mã dưới đây sẽ tải tập tin định dạng cơ bản trước (styles.css), nếu màn hình có độ rộng từ 780px trở lên thì tải thêm tập tin định dạng mở rộng (2column-styles.css).

<head>

<link rel="stylesheet" href="styles.css">

<link rel="stylesheet" href="2column-styles.css" media="screen and

(min-width:780px)">

</head>

Lưu ý: Việc đặt lệnh truy vấn trong thể link cũng có nhược điểm là cần thêm một request về server, do vậy có thể ảnh hưởng đến tốc độ hiển thị trang web.

Mobile First

Trong kĩ thuật responsive, phương pháp được sử dụng nhiều là ưu tiên thiết bị di động trước (mobile first). Nghĩa là, thực hiện định dạng cho thiết bị nhỏ nhất, đơn giản nhất trước, sau đó sử dụng media queries để thiết lập riêng cho các trường hợp còn lại (trường hợp có màn hình lớn hơn, có thêm nhiều đặc trưng hơn).

Theo phương pháp mobile-first, người ta thường sử dụng từ khóa min- trong các câu truy vấn kích thước màn hình, nghĩa là nếu thiết bị có độ rộng ít nhất là xyz hoặc lớn hơn thì sẽ áp dụng thêm những CSS tương ứng. Điều này đảm bảo tính kế thừa của định dạng CSS, các định dạng sau sẽ dựa trên các định dạng trước đó.

Cần lưu ý đến thứ tự ưu tiên khi thực thi mã CSS để đặt các tập tin CSS cho phù hợp, cụ thể, các tập tin định dạng cơ bản sẽ áp dụng trước, sau đó đến CSS cho màn hình nhỏ và cuối cùng là CSS cho màn hình lớn.

Lab 2.8 (tt) (exercise 18-3, p.450, [3])

Một số kích thước màn hình

Một câu hỏi được đặt ra là: với kích thước màn hình bao nhiêu thì nên thiết lập một định dạng CSS riêng?

Như đã biết, các thiết bị duyệt web có kích thước rất đa dạng, có thể xoay đứng hoặc xoay ngang. Do vậy, làm định dạng CSS cho từng trường hợp như vậy là không thể. Trong thực tế, thường tạo ba thiết kế CSS cho ba loại màn hình chính (mobile phone, tablet và desktop). Hình sau liệt kê các kích thước của mỗi loại thiết bị, dựa vào thông tin này để quyết định chọn kích thước cho mỗi media queries.

2.8.7       Câu hỏi & bài tập

1. Mục đích của reset CSS là gì?

a. Ghi đè các định dạng mặc định của trình duyệt

b. Để lập trình viên luôn kiểm soát được định dạng CSS của họ

c. Ngăn ngừa phần tử kế thừa các định dạng CSS không mong muốn

d. Tất cả đáp án trên

2. Mục đích của CSS sprites là gì?

a. Tăng tốc độ tải và hiển thị trang web

b. Gom nhiều ảnh nhỏ vào một ảnh lớn để giảm kích thước tập tin

c. Giảm số lượng HTTP request về server

d. a và c

e. Tất cả đáp án trên

3. Mục đích của kĩ thuật “dùng hình ảnh thay thế chữ” là gì?

a. Để thụt đầu hàng cho các văn bản có kích thước lớn

b. Sử dụng đối tượng đồ họa thay thế cho văn bản

c. Gỡ bỏ nội dung văn bản, thay vào đó là một hình ảnh

d. Giúp duy trì nội dung và ngữ nghĩa của tài liệu

e. b và d

f. Tất cả đáp án trên

4. Ứng với mỗi câu lệnh truy vấn (cột trái), chọn ngữ nghĩa tương ứng (cột phải)

a. @media screen and (max-width: 800px) { }	Áp dụng định dạng này khi in trên trang giấy xoay đứng
b. @media screen and (min-device-width: 800px) { }	Áp dụng định dạng này cho tất cả thiết bị hiển thị đen-trắng
c. @media print and (orientation: portrait) { }	Áp dụng tập tin CSS mở rộng này khi màn hình hiển thị có kích thước 800px trở lên
d. <link rel="stylesheet" href="special.css" media="screen and (min-width: 800px)">	Áp dụng định dạng này khi thiết bị hiển thị có độ rộng nhỏ hơn 800px
e. @media all and (monochrome) { }	Áp dụng định dạng này khi thiết bị hiển thị có độ rộng tử 800px trở lên

5. Ứng với mỗi đoạn mã, hãy chọn hình kết quả tương ứng.

(1.) table { border-collapse: collapse;}

td { border: 2px black solid; }

(2.) table { border-collapse: separate; }

td { border: 2px black solid; }

(3.) table {

border-collapse: separate;

border-spacing: 2px 12px; }

td { border: 2px black solid; }

(4.) table {

border-collapse: separate;

border-spacing: 5px;

border: 2px black solid; }

td { background-color: #99f; }

(5.) table {

border-collapse: separate;

border-spacing: 5px; }

td {

background-color: #99f;

border: 2px black solid; }

3         Tài liệu tham khảo chính

[1] Jon Duckett, HTML&CSS design and build websites, John Wiley & Son, 2011

[2] Tutorials Point, HTML hypertext markup language, ebook, 2015

[3] Jennifer Niederst Robbins, Learning web design, O’Reilly, 2012

[4] W3schools, https://www.w3schools.com/

[5] https://developer.mozilla.org/

10) Mini project 4. Tự làm theo mẫu có sẵn:

https://eco-nature.cmsmasters.net/onepage/

Hướng dẫn, gợi ý:

– Xem bố cục trang web gồm mấy vùng, tên mỗi vùng, cấu trúc cha-con

Đăt outline cho phần tử body để thấy được bố cục trên trang mẫu, thấy được quan hệ phân cấp của các phần tử

– Viết HTML, và CSS cho từng vùng

Do tính chất kế thừa của CSS, nên sẽ thực hiện CSS cho các phần tử cha trước sau đó đến các phần tử con.

Một bố cục tham khảo:

<body>

    <section id="page">

        <div id="main">

            <header id="header">

                <div class="header_top"></div>

                <div class="header_mid"></div>

                <div class="header_bot"></div>

            </header>

            <section id="middle"></section>

        </div>

        <footer id="footer"></footer>

    </section>

</body>