CSS: Figures & Captions

Posted on by mtoplistChuyên mục:Top List

Hình ảnh & phụ đề

Eiffel Tower

Điều chỉnh tỷ lệ mô hình tháp Eiffel tại Parc Mini- Pháp

HTML không có phần tử nào cho phép chèn hình ảnh với phụ đề. Vấn đề này từng được
đề xuất một lần (xin xem HTML3),
nhưng chưa bao giờ được đưa vào HTML4. Đây là một
cách để mô phỏng một phần tử hình ảnh như vậy: 

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the Eiffel tower in Parc Mini-France
</div>

Khi đó, trong bảng mẫu bạn sử dụng lớp “figure” để định dạng hình ảnh
theo cách bạn muốn. Ví dụ, để hình ảnh trôi về bên phải, trong một khoảng
trống bằng khoảng 25% độ rộng của các đoạn xung quanh, áp dụng
các quy tắc này sẽ có hiệu quả:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

Thực tế, chỉ có hai khai báo đầu tiên (trôi và độ rộng)
là cần thiết, phần còn lại chỉ để trang trí.

mtoplist