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

  

2.4.6       Thuộc tính Display

Nhắc lại một chút về hai kiểu hiển thị quen thuộc, một là kiểu block, hai là kiểu inline. Mặc định, phần tử kiểu block có chiều rộng chiếm trọn một hàng, chiều cao vừa đủ để chứa hết nội dung; phần tử kiểu inline nằm theo hàng, có chiều rộng và chiều cao vừa đủ để chứa hết nội dung. Không thể thay đổi được kích thước (width và height) của phần tử kiểu inline.

Tuy nhiên, không phải tất cả các ngôn ngữ XML đều gán kiểu hiển thị cho các phần tử, vì vậy cần phải có thuộc tính display để xác lập kiểu hiển thị cụ thể cho mỗi phần tử.

Sau đây là các đặc tính của display,

– Giá trị: inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | run-in | compact | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | none

– Mặc định: inline

– Áp dụng: mọi phần tử

– Kế thừa: có

Thuộc tính display sẽ xác định kiểu hiển thị của phần tử, ngoài hai kiểu quen thuộc là block và inline, còn có nhiều kiểu khác như list-item, inline-block, các kiểu liên quan đến table.

Nói chung, tổ chức W3C không khuyến khích việc thay đổi kiểu hiển thị mặc định của các phần tử. Tuy nhiên, trong nhiều trường hợp, việc thay đổi kiểu hiển thị đã trở thành phổ biến. Ví dụ, kiểu hiển thị mặc định của phần tử li là block, nhưng để tạo một menu ngang thì cần thiết lập kiểu hiển thị của li là inline. Hoặc kiểu hiển thị mặc định của phần tử a là inline, nhưng để có thể thiết lập chiều cao và chiều rộng cho nó thì cần thiết lập kiểu hiển thị là block. Ví dụ,

ul.navigation li { display: inline; }

ul.navigation li a { display: block; }

Lưu ý: việc thay đổi kiểu hiển thị chỉ có ý nghĩa làm thay đổi cách nó được trình bày trên giao diện, chứ không làm thay đổi bản chất kiểu phần tử (block hoặc inline) của nó. Vì vậy, sẽ không thể đặt một phần tử kiểu block vào trong một phần tử kiểu inline, dù đã đổi kiểu hiển thị bằng thuộc tính display.

Giá trị none của thuộc tính display được sử dụng khá phổ biến để cắt bỏ một nội dung nào đó trên giao diện (khi màn hình hiển thị nhỏ), tất nhiên trong mã nguồn và khi in nội dung trang kết quả thì vẫn có phần nội dung này. Khác với cách dùng display: none, nếu thiết lập một phần tử với visibility: hidden thì nội dung không được hiển thị nhưng nó vẫn chiếm một vùng trắng trên giao diện.

Lưu ý: thiết lập display: none cho một phần tử nghĩa là không cho hiển thị nội dung lên giao diện chứ không làm giảm dung lượng của mã nguồn, và do đó không thể tăng tốc độ tải trang về máy bằng cách này được.

2.4.7       Tạo bóng cho hộp

Ở phần định dạng văn bản, đã biết cách tạo bóng cho văn bản bằng thuộc tính text-shadow. Để tạo bóng cho hộp (tính từ đường viền vào trong, không tính vùng margin) sẽ sử dụng thuộc tính box-shadow, cách làm việc của thuộc tính này khá giống với  thuộc tính text-shadow.

Sau đây là các đặc tính của box-shadow,

– Giá trị: ‘horizontal-offset’ ‘vertical-offset’ ‘blur distance’ ‘spread distance’ color inset | none

– Mặc định: none

– Áp dụng: mọi phần tử

– Kế thừa: không

Trong đó,

– horizontal offset là khoảng dịch của bóng sang phía phải so với hộp ban đầu, nếu giá trị này là âm, bóng sẽ được dịch sang phía trái

– vertical offset là khoảng dịch của bóng xuống phía dưới so với hộp ban đầu, nếu giá trị này là âm, bóng sẽ được dịch lên phía trên

– color: màu của bóng, nếu bỏ qua giá trị này, bóng sẽ cùng màu với “màu mặt trước” (foreground color) của phần tử

– blur distance là độ mờ (khoảng mờ) của bóng, giá trị 0 là không mờ, giá trị càng cao càng mờ, đơn vị đo là px

– spread distance là độ tràn (khoảng tràn) của bóng, giá trị dương là tràn ra ngoài, giá trị âm là thu gọn vào trong. Dùng để tăng hoặc giảm kích thước của bóng

– inset là từ khóa, nếu được thiết lập, bóng sẽ đổ vào phía trong phần tử

Xem hình ví dụ dưới đây. Hình (A) là tạo bóng đơn giản, bóng sẽ dịch phải 5px, dịch xuống 10px so với hộp ban đầu. Hình (B) thêm độ mờ 4px. Hình (C) thêm độ tràn 8px. Hình (D) đổ bóng vào phía trong của hộp.

Cũng như thuộc tính text-shadow, có thể tạo nhiều bóng cho hộp, mỗi chuỗi giá trị của một bóng ngăn cách bằng dấu phẩy (,), bóng được tạo bởi chuỗi giá trị nằm trước sẽ nằm phía trên của hộp, sau đó đến bóng của các chuỗi tiếp theo.

Ví dụ,

box-shadow: 5px 10px 4px 10px green inset, 5px 10px yellow;

Lưu ý: text-shadow, box-shadow, và gradient sẽ đòi hỏi nhiều tài nguyên của CPU để xử lý, do đó, sẽ làm giảm tốc độ hiển thị kết quả của trình duyệt, vì vậy không nên lạm dụng quá nhiều các đặc tính này.

2.5       Bố trí các phần tử trên trang

Phần này sẽ tìm hiểu hai khái niệm quan trọng, liên quan đến vị trí hiển thị của các phần tử trên trang web, đó là float và position. Với hai khái niệm này, các phần tử sẽ không còn hiển thị theo một kiểu có sẵn, mà nó sẽ được sắp xếp theo chủ ý của người thiết kế.

Float làm trôi dạt các phần tử về phía trái, phía phải, hoặc dùng để căn chỉnh văn bản ở xung quanh một phần tử.

Position dùng để xác định vị trí hiển thị của một phần tử ở vị trí bất kì trên trang web.

2.5.1       Kiểu hiển thị thông thường

Thông thường, các phần tử sẽ được hiển thị theo cách sau:

– Các phần tử dạng văn bản được hiển thị từ trên xuống dưới, từ trái qua phải (không tính các ngôn ngữ hiển thị theo hướng từ phải sang trái) theo đúng thứ tự xuất hiện trong mã nguồn

– Các phần tử kiểu block sẽ được xếp chồng từng khối, theo thứ tự xuất hiện trong mã nguồn, với chiều rộng bằng với cửa sổ trình duyệt hoặc bằng với phần tử chứa nó

– Các phần tử kiểu inline và các phần tử dạng văn bản được xếp tuần tự theo hàng, nằm trong phần tử block chứa nó

– Khi cửa sổ trình duyệt hoặc phần tử block có thay đổi về kích thước thì kích thước các phần tử block bên trong cũng thay đổi theo, và các phần tử inline bên trong cũng sẽ tự sắp xếp lại cho vừa với phần tử block chứa nó

Xem hình minh họa,

Ở kiểu hiển thị thông thường, mỗi phần tử sẽ ảnh hưởng đến bố cục chung của các phần tử xung quanh nó, các phần tử sẽ nhường chỗ cho nhau, không có hiện tượng chồng lấn lên nhau. Tuy nhiên, kĩ thuật float và position sẽ làm thay đổi bố cục thông thường vốn có của các phần tử.

2.5.2       Kĩ thuật float

Thuộc tính float (trôi dạt) sẽ dịch chuyển một phần tử về phía trái hoặc phía phải xa nhất có thể và cho phép các nội dung phía sau bao phủ xung quanh nó.

Float là kĩ thuật chính được sử dụng để tạo ra bố cục nhiều cột, thanh điều hướng, biểu diễn dữ liệu giống dạng bảng.

Dưới đây là các đặc tính của float,

– Giá trị: left | right | none | inherit

– Mặc định: none

– Áp dụng: mọi phần tử

– Kế thừa: không

Quan sát ví dụ sau,

[HTML]

<p><img src="dalat.jpg" alt="">Thành phố Đà Lạt …</p>

[CSS]

img {

  float: right;

}

p {

  padding: 15px;

  background-color: #fff799;

  border: 2px solid red;

}

Xem hình minh họa,

Nếu nội dung văn bản nằm quá sát hình ảnh, có thể thêm margin: 10px cho phần tử img.

Dưới đây là một số đặc tính khi một phần tử được thiết lập float:

– Một phần tử khi được thiết lập float sẽ giống với một hòn đảo giữa dòng nước, nghĩa là nó không thuộc về dòng nước, nhưng nó nằm giữa dòng nước, dòng nước (nội dung) sẽ nhường cho nó một chỗ đứng, và chảy xung quanh nó. Đây là đặc điểm duy nhất chỉ có ở các phần tử được thiết lập float

– Một phần tử chỉ trôi dạt (phải/trái) trong vùng nội dung của phần tử chứa nó, nghĩa là không được trôi vào vùng padding

– Khi một phần tử trôi dạt, margin của nó vẫn được bảo toàn, nghĩa là toàn bộ không gian của phần tử vẫn được bảo toàn