Vậy làm thế nào để hiển thị các thành phần nội dung của một cuốn sách như tiêu đề thì font chữ phải lớn và đậm, chú thích thì chữ phải in nghiêng và đóng khung,… CSS hỗ trợ hiển thị những thành phần này gần như là hoàn hảo, và các thiết bị đều hỗ trợ chuẩn CSS này.
Mỗi thành phần của cuốn sách được quy định là một lớp trong CSS (Một lớp định nghĩa tất cả các thành phần như font chữ, cỡ chứ, viền, màu nền, ….). Cụ thể mỗi chương sách được chia thành các đoạn, mỗi đoạn được bao ngoài bởi thẻ p trong html và quy định bởi các lớp CSS khác nhau tùy thuộc vào thành phần đó. Hệ thống có 4 loại đoạn như sau
Title: Quy định cho tiêu đề của chương sách, của một hồi (trong truyện) được
quy định bởi các lớp CSS: title_1, title_2, title_3. Lớp title_1 có cỡ chữ to nhất rồi giảm dần xuống lớp title_2, lớp title_3.
Note: Quy định cho chú thích. Chữ in nghiêng và được đóng khung có nền xám.
Image: Quy định cho một hình ảnh có lớp CSS là title_normal
Normal: Quy định cho những đoạn chữ bình thường. Lớp CSS tương ứng là
title_normal.
Hình ảnh sau minh họa cho cấu trúc này.
Hình 12. Cấu trúc phân chia sách
Ví dụ cụ thể một chương sách:
<p class="title_3">Thần Gnome - Hòang tử của lòng đất</p>
<p class=”title_normal”> <img src="images/lucky.gif" alt="" width="50" height="59" /></p> <p class="title_normal">Hành trình tới được khu rừng Mê Hoặc quả là một chặng đường rất dài và mệt mỏi. Hai chàng hiệp sĩ phải mất hai ngày rong ruổi liên tục trên ngựa mới đến được nơi mình mong muốn. Như vậy, họ chỉ còn có năm ngày để tìm ra Cây Bốn Lá thần kỳ đó. Họ không được lãng phí thời gian. Tuy nhiên, cả hai đều quyết định nghỉ ngơi, chờ đến ngày hôm sau mới bắt đầu cuộc tìm kiếm loại cây thần kỳ đó.</p>
<p class="title_normal">Hai chàng hiệp sĩ mỗi người đều đi theo con đường riêng của mình. Không ai gặp ai, ngay cả ở những nơi họ nằm nghỉ hay cho ngựa dừng chân uống nước. Họ cũng không biết người kia đang ở đâu trong khu rừng.</p>
<p class="title_block">Ai cũng mong muốn có được may mắn và thành công. Nhưng chỉ có một số ít người quyết tâm theo đuổi nó.</p>
Các lớp CSS được định nghĩa như sau.
.title_normal{ font-size: 12px; } .title_3{ font-weight: bold; } .title_block{ padding: 10px; background: #ccc; }
Đây mới là những thành phần cơ bản nhất trong nội dung một cuốn sách. Quá trình số hóa sách sẽ sinh ra nhiều thành phần khác nữa như video, phần liệt kê theo
danh sách, … nhưng với một thiết kế hệ thống như hiện giờ thì việc mở rộng rất là dễ dàng.