Cách Trình Bày Trang Web
CSS Giúp đỡ và gợi ý

Bảng chọn Công-phét-ti

Bảng chọn màu bạn nhìn thấy bên dưới chỉ là một thành phần của thẻ DIV với một vài thành phần P bên trong. Hiệu ứng trực quan là mỗi thành phần P được đặt cố định lần lượt từng thành phần và có phông chữ, màu chữ riêng. Nó làm việc tốt nhất với những đoạn văn ngắn vì hiệu ứng trực quan dựa trên phần gối lên nhau nhưng nếu đoạn văn quá dài, nó sẽ chồng chéo đến nỗi trở lên khó đọc.

Trang mẫu cho phép một bảng chọn lên đến 10 thành phần, ví dụ trên là 8. Đây là nguồn HTML của ví dụ trên:

<div class="map">
<p id="p1"><a href="../../CSS/#news">What's new?</a>
<p id="p2"><a href="../../CSS/#learn">Learning CSS</a>
<p id="p3"><a href="../../CSS/#browsers">CSS Browsers</a>
<p id="p4"><a href="../../CSS/#editors">Authoring Tools</a>
<p id="p10"><a href="../../CSS/#specs">Specs</a>
<p id="p6"><a href="../../CSS/Test">CSS1 Test Suite</a>
<p id="p9"><a href="/StyleSheets/Core">W3C Core Styles</a>
<p id="p8"><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a>
</div>

Chú ý rằng lớp “map” trong thành phần của thẻ DIV, dùng để tạo các thành phần P trong một bảng chọn và đặt thuộc tính ID cho mỗi thành phần P. Mỗi thành phần P phải có ID (khác nhau), gọi là p1, p2, ... hay p10. Không nhất thiết phải dùng ID theo thứ tự (như ví dụ chỉ ra). Bạn có thể dùng trang mẫu bằng cách sao chép nó vào trang mẫu của riêng bạn hoặc bằng cách dùng @import hoặc thành phần LINK nhập trực tiếp đến tệp map.css từ trang W3C.

@import "https://www.w3.org/Style/map.css";

of

<link rel="stylesheet" href="https://www.w3.org/Style/map.css">

Giải thích trang mẫu

Đây là cách trang mẫu hoạt động. Trang mẫu bắt đầu bởi định nghĩa một thành phần của thẻ DIV với lớp “map”. Nó tạo một vùng cao 190px mà bao gồm các thành phần P sẽ bị thay thế. Mỗi thành phần P sẽ có ID là p1 đến p10 với màu và phông được chỉ định và mỗi thành phần được cố định trong vùng tạo bởi thẻ DIV với các ý nghĩa của thuộc tính ‘margin’: vô hiệu hoá lề trên di chuyển thành phần lên trên trong vùng thẻ DIV tạo ra và xác thực lề dưới để chắc chắn thành phần tiếp theo bắt đầu lại ở vị trí bên dưới của thẻ DIV.

(Nhược điểm của trang mẫu này là nó làm tất cả mọi thứ trong px. Nếu bạn có một trình duyệt đủ mạnh để thi hành các lệnh CSS, có thể bạn muốn thay đổi để dùng tỉ lệ khác.)

DIV.map {                        /* Reserve some room for the links */
  padding-top: 190px;
  margin-left: -2em;             /* Adapt this to your own page... */
  margin-right: -2em;            /* Adapt this to your own page... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

Tất nhiên, bạn thoải mái thay đổi trang mẫu để thử với các phông, màu và vị trí khác nhau hoặc để tạo một quy tắc mẫu mở rộng cho hơn 10 thành phần. Ngoài ra cần xem xét các lề trái và phải của thẻ DIV: nếu chúng vô hiệu hoá, thì bảng chọn rộng hơn vùng văn bản, nhưng trong trang của bạn lề trang có thể không đủ rộng để hiển thị và vì thế có thể bạn phải huỷ những quy tắc này.

Nếu bạn thử duyệt trang mẫu, bạn có thể thấy rằng nó không làm việc thật tốt trên Netscape 4. Tất nhiên đó là lỗi của Netscape 4. Tuy nhiên, tệp map-ns.css là một trang mẫu gần giống và dường như làm việc tốt trong trình duyệt đó. Thủ thuật dưới đây trong phần đầu tài liệu HTML của bạn sẽ cho phép phiên bản Netscape 4 và phiên bản trên nữa thi hành các lệnh CSS tốt hơn để cùng tồn tại:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" rel="nofollow" type="text/css" media="all">

Các thực hiện CSS đúng sẽ đọc cả hai trang mẫu nhưng các quy tắc trong trang mẫu thứ hai sẽ ghi đè lên trang mẫu thứ nhất, vì vậy tách rời công việc không cần thiết, sẽ không có thay đổi. Tuy nhiên, Netscape 4 sẽ không tải trang mẫu thứ hai vì nó không hiểu thuộc tính "media".

Ngoài ra, bạn có thể muốn biết tại sao các thành phần được đặt cố định bằng các ý nghĩa của lề (vô hiệu hoá) trong khi điều này dường như đã là một ứng cử ban đầu cho thuộc tính đặt vị trí tuyệt đối. Quả thật, bạn có thể làm giống như với thuộc tính ‘position’, ‘left’ và ‘right’. Nguyên nhân trang mẫu này sử dụng thuộc tính lề thay vào đó là vì với cách này trang mẫu làm việc trong các trình duyệt mà chỉ thi hành lệnh CSS1.