Phụ đề - Thủ thuật CSS

Mục lục

Các caption-sidebất động sản trong CSS cho phép bạn xác định nơi để xác định vị trí của HTML

, được sử dụng trên các bảng HTML. Thuộc tính này cũng có thể áp dụng cho bất kỳ phần tử nào có thuộc displaytính được đặt thành caption-side.

table ( caption-side: top; )

Giá trị

  • top: mặc định. Đặt chú thích ở đầu bảng.
  • bottom: đặt chú thích ở cuối bảng.
  • inherit: chỉ ra rằng giá trị được kế thừa từ caption-sidegiá trị của giá trị gốc của nó

Các caption-sidebất động sản có thể áp dụng một trong hai đến


element or the

display table-caption text-align

Lưu ý rằng các giá trị trên cho caption-sidelà liên quan đến chế độ ghi của bảng. Ví dụ: nếu một bảng được đặt ở chế độ viết dọc, thì các giá trị topvà bottomgiá trị sẽ có liên quan đến hướng của bảng.

Bản trình diễn bên dưới bao gồm nút "chuyển đổi" để chuyển đổi thuộc tính của bảng caption-sidegiữa topvà bottom, vì vậy bạn có thể thấy sự khác biệt khi sử dụng bảng có nhiều hàng dữ liệu:

Xem Bản trình diễn bút
của thuộc tính bên phụ đề của CSS-Tricks (@ css-trick)
trên CodePen.

Trong bản demo tiếp theo, giá writing-modetrị cho bảng được đặt thành vertical-rl. Như được chứng minh bằng cách sử dụng nút chuyển đổi, các giá trị topvà bottomgiá trị có liên quan đến chế độ ghi của bảng:

Xem Bản trình diễn bút
của thuộc tính bên phụ đề với chế độ viết khác nhau bằng CSS-Tricks (@ css-trick)
trên CodePen.

Giá trị không chuẩn chỉ dành cho Firefox

Firefox từ lâu đã hỗ trợ và vẫn hỗ trợ bốn giá trị không chuẩn cho caption-side:

  • left: đặt chú thích ở bên trái bảng.
  • right: đặt chú thích ở bên phải bảng.
  • top-outside: đặt chú thích ở đầu bảng, với kích thước của nó không phụ thuộc vào bảng
  • bottom-outside: đặt chú thích ở cuối bảng, với kích thước của nó không phụ thuộc vào bảng

Bản trình diễn bên dưới chỉ hoạt động trong Firefox và cho phép bạn sử dụng bốn nút để đặt các giá trị không chuẩn khác nhau:

Xem bản
trình diễn chỉ dành cho Pen Firefox về thuộc tính phụ đề của CSS-Tricks (@ css-trick)
trên CodePen.

Giá trị tiêu chuẩn mới

Trong dự thảo mới nhất của đặc tả CSS, các caption-sidetài sản là một phần của CSS logic Thuộc tính Level 1 và bao gồm các giá trị block-start, block-end, inline-start, và inline-end. Hai giá trị sau tương ứng với các giá trị leftvà rightgiá trị không chuẩn và chỉ được yêu cầu hỗ trợ bởi các tác nhân người dùng hỗ trợ các giá trị không chuẩn đó.

Thêm thông tin

  • thuộc tính caption-side trong CSS2.1 spec
  • thuộc tính bên chú thích trong thông số kỹ thuật CSS2.2
  • caption-side trong Thuộc tính logic CSS 1

Hỗ trợ trình duyệt

phần tử, có cùng tác dụng. Mặc dù thuộc tính này sẽ ảnh hưởng đến vị trí của toàn bộ hộp phụ đề (giá trị của phụ đề được tính thành), nhưng nó sẽ không ảnh hưởng đến sự căn chỉnh của văn bản bên trong hộp. Văn bản bên trong hộp có thể được căn chỉnh bằng cách sử dụng thuộc tính.
Trình duyệt Chrome Safari Firefox Opera I E Android iOS
1+ 1+ 1+ 9,2+ 8+ 2.1+ 3.2+

Hỗ trợ trong bảng trên đề cập đến hỗ trợ cơ bản cho tiêu chuẩn topvà bottomgiá trị. Firefox cũng bổ sung hỗ trợ các phi tiêu chuẩn left, right, top-outside, và bottom-outsidecác giá trị. Không có trình duyệt hỗ trợ cho cái mới block-start, block-end, inline-start, và inline-endcác giá trị.

thú vị bài viết...