Các Trang Mẫu Web
Thủ thuật và lời khuyên CSS

Tài liệu nầy được phiên dịch từ W3C's Các trang Web mẫu Một vài thủ thuật và lời khuyên trong CSS. Tài liệu nầy có thể có những phiên dịch sai sót. Quí vị có thể tham khảo với bản chính tiếng Anh ở:
https://www.w3.org/Style/Examples/007/target.html


Người phiên dịch:
Manh Nguyen, www.trinity-florida-real-estate.com
Homes for Sale in Trinity
Cabins For Sale In Pigeon Forge

(This page uses CSS style sheets)

bộ chọn target:

Thành phần tab

Lời cám ơn

Giả lớp ':target'

Một địa chỉ URL thường chỉ đến một trang. Nhưng khi địa chỉ URL kết thúc trong "#something" nó chỉ đến một thành phần cụ thể trong trang đó. Các trình duyệt điển hình cố gắng làm chắc chắn rằng các thành phần đích được hiển thị và nếu có thể sẽ hiển thị ở phía trên màn hình.

Với bộ chọn ':target', bạn có thể thêm một mẫu cụ thể vào thành phần đích, như vậy nó sẽ được chú ý hơn.

Nhưng bạn có thể làm hơn thế nữa. Bạn có thể làm ẩn hoặc hiển thị các thành phần dựa trên thành phần đó có phải là địa chỉ đích hay không. Dưới đây là một ví dụ. Nó chỉ ra rằng một bảng chọn nhỏ với 4 mục chọn và mỗi mục được liên kết tới một số đoạn văn. Nhưng ban đầu văn bản không được hiển thị. Mỗi mục là một liên kết tới một thành phần với một địa chỉ ID đích (#item1, #item2...) và các thành phần này chỉ hiển thị khi chúng là đích của địa chỉ URL hiện hành.

Hãy thử bấm chuột vào các mục trên bảng chọn và cũng quan sát vị trí của thanh trình duyệt để xem địa chỉ URL hiện tại.

Đây là thành phần tương ứng với mục 1. Nó không nên xuất hiện trừ khi bạn đã theo dõi một liên kết mà đích rõ ràng là "#item1".

Nếu bạn chuyển sang mục 2, thì thành phần này nên được hiển thị.

Thành phần này được hiển thị nếu bạn bấm chuột vào mục chọn thứ ba. Thành phần này có một địa chỉ URL mà bạn có thể sử dụng ở nơi nào khác. Bạn có thể đặt nó trên một vài trang Web khác và chuyển thẳng tới mục này.

Đây là cách nó hoạt động như thế nào. Có hai phần quan trọng, nguồn HTML và thuộc tính 'display'. Đầu tiên là văn bản HTML. Nó có một số liên kết và một số thành phần với các ID tương ứng:

<p>  <a href="#item1">item 1</a>  <a href="#item2">item 2</a>  <a href="#item3">item 3</a>  <a href="#default">clear</a><div class="items">  <p id="item1">... item 1...  <p id="item2">... item 2...  <p id="item3">...  <p id="default"><!-- by default, show no text --></div>

Các quy tắc mẫu đầu tiên làm ẩn tất cả các thành phần P bên trong thẻ DIV, nhưng sau đó ghi đè lên thành phần P là đích của địa chỉ hiện tại:

div.items p {display: none}div.items p:target {display: block}

Tất cả chỉ có vậy. Ví dụ trên dẫn tới việc thêm một số màu, lề, đường biên, …, vì vậy nó trông giống một bảng chọn hơn. Bạn có thể xem nguồn của trang này để biết nó được làm như thế nào.

Trên thực tế, chúng ta đã thêm thuộc tính ':not(:target)', để đảm bảo rằng chỉ các trình duyệt CSS3 sẽ ẩn thành phần này. Vì vậy các quy tắc tốt hơn là:

div.items p:not(:target) {display: none}div.items p:target {display: block}

Giao diện tab

Một khi bạn hiểu vấn đề ở trên, thì sẽ không quá khó để tạo một giao diện "tab" thực sự: một tập các quy tắc mẫu không những hiển thị nội dung khác nhau dựa trên nút được bấm, mà còn thay đổi diện mạo của chính bản thân nút đó.

Đây là một ví dụ. Nó không dùng thuộc tính 'display: none' mà dùng 'z-index'. Nếu bạn muốn nó hoạt động như thế nào, chỉ cần "view source"…

Tab 1
Điều này có thể gây tranh luận, đó là ...
Tab 2
... 30 dòng CSS phần nào hơi nhiều và ...
Tab 3
... rằng 2 đã là đủ, nhưng ...
Default
... nó hoạt động!

Lời cảm ơn

Trang này dựa trên một ý tưởng ban đầu của Daniel Glazman.. Xem lời giải thích trong "blog" của ông ngày 9/1/2003 và đoạn demo ngày 13/1.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
Viết ngày 6/2/2003;
Cập nhật ngày: 3/3/2009 12:46:42 $ GMT