Các trang Web mẫu
Một vài thủ thuật và lời khuyên trong CSS

Bảng chọn đối tượng (của CSS)

Bảng chọn nằm ở góc trên bên phải của trang web này chỉ là một thẻ DIV với một số thành phần A bên trong. Toàn bộ công việc để đặt bảng chọn vào một vị trí cố định trong trang theo các chỉ dẫn. Tại đó sẽ có đánh dấu kết nối thẳng tới nguồn của trang mẫu này:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="https://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

Trong trình duyệt không có CSS, hay CSS đã tắt, trang web chỉ hiển thị đoạn văn thông thường với các liên kết. Tuy nhiên nhờ chỉ dẫn dưới đây, nó sẽ làm xuất hiện một “hình động” ở phía trên đầu trang, được cố định ở phía trên bên phải của cửa sổ trình duyệt:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}

div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }
div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Chỉ dẫn thú vị ở đây là 'position: fixed', fixed' làm thẻ DIV được cố định trên màn hình, và 'display: block', nhóm những thành phần A bên trong thẻ DIV thành một khối và những thành phần này sẽ được hiển thị bên dưới theo nhiều dòng (thứ tự các dòng từ trên xuống dưới).

Xin thận trongj với thứ tự của ba chỉ dẫn cuối cùng. Chúng có đặc điểm giống nhau, vì thế chỉ dẫn cuối cùng dùng xác định màu. Nếu muốn hình ảnh con trỏ chuột uốn lượn (thành vết) quanh liên kết, chúng ta cần chỉ dẫn :hover và đó phải là chỉ dẫn cuối.

Khoảng trống (để mắt nghỉ), lề trang, đường biên, màu sắc, … có thể được gỡ bỏ hoặc thay đổi theo ý thích. Tuy nhiên, lưu ý cách chúng ta đã làm để tuỳ chỉnh các liên kết với nhau: có đường biên ở trên tất cả các liên kết trừ liên kết đầu tiên, bởi chỉ dẫn ‘:first-child’. Một cặp quy luật giống như thế (đường biên bên trên tất cả các thành phần nổi và đường biên ‘none’ trên thành phần con đầu tiên) rất tiện để tạo đường biên giữa các thành phần.

(Nếu bạn quan sát những trang mẫu thông thường, được liên kết từ trang banner-k.css và banner.css bạn sẽ thấy một vài quy luật bổ sung rõ ràng mâu thuẫn nhau. Điều này nhằm khắc phục những lỗi trong trình duyệt cũ hơn. Đặc biệt, trong tệp banner-o.css, biểu ngữ được ẩn đi và trong tệp banner.css biểu ngữ được hiển thị trong một khối. Đây là hệ quả của việc làm ẩn biểu ngữ từ Netscape 4, vì nó bỏ qua @import của tệp banner.css.

Các câu hỏi thường gặp: IE 5 và 6 trên Windows?

Nếu bạn xem trang mẫu này với Microsoft Internet Explorer 5 hoặc 6 trên Windows ("WinIE5" và "WinIE6"), thì bạn sẽ thấy rằng nó sẽ không được hiển thị. Ít nhất là nó không xuất hiện với phiên bản tháng 9 năm 2002. Nhiều người hỏi tôi về điều đó, vì vậy đây là một chút lý giải. Tóm lại: lỗi là do trình duyệt, không phải trong trang này.

WinIE5 và WinIE6 chưa bổ sung thuộc tính 'fixed'. Điều đó thật bất tiện, nhưng vấn đề lớn hơn là chúng cũng không phân tách thuộc tính 'position' thật chính xác. Một trình duyệt không có thuộc tính 'fixed' thì sẽ bỏ qua chỉ dẫn 'position: fixed' và sẽ lấy lại giá trị bất kì trước đó của thuộc tính 'position' trong trang mẫu. Chúng ta có thể thêm chỉ dẫn 'position: absolute' ngay trước thuộc tính 'fixed' để trình duyệt làm việc. Nhưng trong WinIE 5 và 6 điều này chưa từng xảy ra. Dường như từ khoá 'fixed' được dịch như thế nào đó là 'static'.

Bạn không thế tạo thuộc tính 'fixed' hỗ trợ WinIE5 và 6, nhưng có một vấn đề xung quanh bài toán tách. Johannes Koch đã cảnh báo tôi về thủ thuật này (từ bài giảng tuyển tập các giải pháp thay thế). của ông ấy). Đầu tiên, thay thế 'position: fixed' trong chỉ dẫn mẫu ở trên bằng 'position: absolute' và sau đó chèn chỉ dẫn dưới đây thấp hơn một chút vào trang mẫu

body>div.banner {position: fixed}

(Nếu thuộc tính DIV.banner nằm trong một thành phần khác, không phải BODY, hãy thay thế BODY bởi thành phần đó.) Kết quả của việc làm này là các trình duyệt hiểu kí tự '>' (thành phần con) của CSS và sẽ sử dụng chỉ dẫn này, nhưng các trình duyệt không hiểu, nhất là WinIE5 và WinIE6, thì sẽ bỏ qua nó. Chỉ dẫn 'position: absolute' sẽ được dùng thay thế và bảng chọn sẽ đặt ở bên phải, ngoại trừ việc nó sẽ không cố định khi bạn kéo thanh cuộn.

Điều quan trọng là không có kí tự trống nào bên cạnh kí tự '>'.