XML: Bài 5.1. Style Sheet

• Định nghĩa và mô tả các biểu định kiểu.
• Định nghĩa và mô tả các biểu định kiểu xếp tầng (CSS).
• Giải thích cách triển khai kiểu với CSS.

5.1.1. Sự cần thiết của Style Sheet

Biểu định kiểu là một tập hợp các quy tắc mô tả sự xuất hiện của dữ liệu trong tài liệu XML.

XML được lấy cảm hứng từ các vấn đề đặt ra bằng cách đánh dấu trình bày. Đánh dấu trình bày không mô tả dữ liệu mà nó xác định sự xuất hiện của dữ liệu. Trong một tài liệu, nếu bạn phải thay đổi tất cả các danh từ riêng từ in đậm sang in nghiêng, bạn sẽ phải thực hiện thủ công cho từng danh từ riêng. Đánh dấu bản trình bày không thể cung cấp giao diện giống nhau trên nhiều thiết bị như máy tính, thiết bị Hỗ trợ kỹ thuật số cá nhân (PDA) và điện thoại di động.

Biểu định kiểu và XML giải quyết những vấn đề này. XML mô tả dữ liệu. Biểu định kiểu xác định sự xuất hiện của dữ liệu. Tuy nhiên, cả XML và biểu định kiểu đều được định nghĩa trong các tệp riêng biệt.

Hình 5.1: Định dạng tài liệu với Style Sheet

5.1.2. Các loại Style Sheet

Có một số bảng định kiểu có sẵn. Tuy nhiên, sau đây là hai style phổ biến nhất:

Ø Cascading Style Sheet (CSS)

CSS cho phép bạn kiểm soát sự xuất hiện của dữ liệu trong các tài liệu HTML và XML bằng cách cung cấp các thuộc tính khác nhau để xác định:

• Vị trí và kích thước của dữ liệu được hiển thị
• Nền trước và màu nền của dữ liệu
• Phông chữ được sử dụng để hiển thị dữ liệu
• Khoảng cách giữa các dữ liệu

Ø Biểu định kiểu có thể mở rộng (XSL)

XSL là một ngôn ngữ biểu định kiểu được sử dụng để xác định sự xuất hiện của dữ liệu chỉ chứa trong các tài liệu XML. Tuy nhiên, nó cũng cho phép bạn chuyển đổi các tài liệu XML.

 5.1.3. Cascading Style Sheets - CSS

Cascading style sheet là một ngôn ngữ dựa trên quy tắc được phát minh vào năm 1996 để viết hướng dẫn định dạng cho dữ liệu có trong tài liệu HTML.

CSS style sheet bao gồm một tập hợp các quy tắc cho các phần tử khác nhau trong một tài liệu. Mỗi quy tắc xác định cách dữ liệu trong phần tử sẽ được hiển thị.

Các quy tắc biểu định kiểu có thể được kết hợp từ các nguồn khác nhau hoặc có thể tạo các tập hợp con hoặc các quy tắc có thể được ghi đè. Thuật ngữ xếp tầng có nguồn gốc từ khả năng trộn và kết hợp các quy tắc này.

Hình 5.2 cho thấy một ví dụ về bảng kiểu xếp tầng.

Hình 5.2: Bảng kiểu xếp tầng

Một số lợi ích của các tấm kiểu xếp tầng là:

• Mọi thay đổi về kiểu dáng hoặc cách trình bày đối với dữ liệu có thể đạt được nhanh hơn vì các thay đổi được thực hiện ở một nơi.
• Có thể đạt được sự độc lập của thiết bị bằng cách xác định các bảng kiểu khác nhau cho các thiết bị khác nhau. Ví dụ: bạn có thể có các biểu định kiểu khác nhau cho máy tính để bàn, PDA và điện thoại di động.
• Giảm mã tài liệu vì thông tin bản trình bày được lưu trữ trong một tệp khác và có thể được sử dụng lại.

Lưu ý: CSS được hỗ trợ bởi hầu hết các trình duyệt hiện có. Một số trình duyệt này là Netscape (6.0 trở lên), Mozilla, Opera (4.0 trở lên) và Internet Explorer (5.0 trở lên). Tuy nhiên, các trình duyệt này chỉ hỗ trợ các phần của đặc tả CSS.

5.1.5. Quy tắc kiểu

Biểu định kiểu trong CSS bao gồm một tập hợp các quy tắc định kiểu. Các quy tắc này xác định cách hiển thị nội dung trong một phần tử. Các quy tắc này có thể áp dụng cho tất cả các phần tử con trong một phần tử. Quy tắc kiểu bao gồm một bộ chọn, một thuộc tính và một giá trị. Thuộc tính và giá trị được phân tách bằng dấu hai chấm được gọi là khai báo thuộc tính. Hình 5.3 mô tả quy tắc kiểu.

Hình 5.3: Quy tắc kiểu

Ø selector

Bộ chọn là tên phần tử của tài liệu XML. Tên phần tử điển hình có thể là CD, Tên hoặc Tiêu đề.

Ø property

Thuộc tính là một thuộc tính kiểu CSS xác định cách phần tử sẽ được hiển thị. Một số thuộc tính CSS là đường viền, phông chữ và màu sắc.

Ø value

Giá trị là giá trị được liên kết với một thuộc tính CSS. Một thuộc tính CSS có thể có nhiều giá trị. Các giá trị khác nhau cho thuộc tính font-family là các tên họ font khác nhau như "times", "arial" và "courier" để đặt tên cho một số.

Trong (CSS) thì quy tắc kiểu có thể bao gồm nhiều bộ chọn. Để gộp nhiều bộ chọn hoặc nhóm nhiều bộ chọn ta cần cung cấp danh sách tên phần tử được phân tách bằng dấu phẩy. Đoạn mã sau mô tả một tài liệu XML mẫu chứa thông tin về các loài có nguy cơ tuyệt chủng.

<?xml version="1.0" ?>
<Endangered_Species>
  <Animal>
    <Name language="English">Tiger</Name>
    <Threat>poachers</Threat>
    <Weight>500 pounds</Weight>
  </Animal>
</Endangered_Species>

Đoạn mã sau đây trình bày một cách lý tưởng để xác định các quy tắc kiểu bằng cách hiển thị từng phần tử trên một hàng riêng biệt.

Name { display: block }
Threat { display: block }
Weight { display: block }

Tuy nhiên, ba quy tắc kiểu này có thể được chuyển đổi thành một quy tắc kiểu duy nhất bằng cách nhóm các bộ chọn như được minh họa trong đoạn mã sau.

Name, Threat, Weight { display: block }

5.1.6. Các cách của quy tắc kiểu viết 

Một bộ chọn có thể có nhiều cặp thuộc tính-giá trị được liên kết với nó. Ví dụ, hình 5.4 cho thấy một phần tử CD có hai khai báo thuộc tính - một để đặt họ phông chữ thành sans-serif và một khai báo khác để đặt màu văn bản thành đen. Lưu ý rằng các cặp thuộc tính-giá trị được phân tách bằng dấu chấm phẩy.

Tương tự, tập hợp một hoặc nhiều cặp thuộc tính-giá trị có thể được liên kết với nhiều bộ chọn. Ví dụ, hình 5.4 cho thấy hai khai báo thuộc tính được gán cho ba phần tử là CD, Title và Name.

Hình 5.4: Các kiểu viết

5.1.7. Trang tính kiểu bên ngoài

Trong CSS, các quy tắc kiểu được viết trong một tệp có phần mở rộng là .css. Tệp này được liên kết với tài liệu XML bằng cách sử dụng hướng dẫn xử lý biểu định kiểu. Một số điểm cần lưu ý về hướng dẫn xử lý bảng định kiểu là:

• Nó sẽ xuất hiện trong phần prolog của tài liệu XML, tức là nó sẽ xuất hiện trước bất kỳ thẻ nào của một phần tử.

• Một tài liệu XML có thể có nhiều hướng dẫn xử lý biểu định kiểu, mỗi hướng dẫn được liên kết với một tệp .css.

Cú pháp:

<?xml-stylesheet href="url" [type="text/css"]?>

trong đó,

xml-stylesheet là hướng dẫn xử lý.

<?xml-stylesheet href="headers.css" type="text/css"?>