Khái niệm stylesheet

Vai trò của stylesheet

Stylesheet (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ởi đánh dấu trình bày. Đánh dấu trình bày không mô tả dữ liệu; 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 gọi.

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 xác định trong các tệp riêng biệt.

Các loại stylesheet khác nhau:

Có một stylesheet có sẵn. Tuy nhiên, hai stylesheet nhất sau đây:

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 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ị
• Màu nền trước và màu nền của dữ liệu
• Font chữ dùng để hiển thị dữ liệu
• Khoảng cách giữa các dữ liệu

Extensible Style Sheet (XSL)

XSL là ngôn ngữ biểu định kiểu được sử dụng để xác định hình thức của dữ liệu chỉ có trong 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.

Cascading Style Sheets

Cascading style sheets là 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.

Cascading style sheets bao gồm một bộ quy tắc cho các thành phần khác nhau trong tài liệu. Mỗi quy tắc xác định cách hiển thị dữ liệu trong phần tử.

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ó thể ghi đè các quy tắc. Thuật ngữ xếp tầng bắt nguồn từ khả năng kết hợp và kết hợp các quy tắc này.

Lợi ích của CSS

Một số lợi ích của cascading stylesheet là:

• Mọi thay đổi về kiểu dáng hoặc cách trình bày đối với dữ liệu đều có thể đạt được nhanh hơn vì các thay đổi sẽ đượ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 biểu định kiểu khác nhau cho các thiết bị khác nhau. Ví dụ: bạn có thể 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 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 nay. 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. Đặc tả CSS hiện tại là CSS 2. Đặc tả CSS 3 đang được phát triển.

Style rules

Một sylesheet trong CSS bao gồm một tập hợp các quy tắc về định kiểu. Các quy tắc này xác định cách hiển thị nội dung trong phần tử. Các quy tắc này được á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 bộ chọn, thuộc tính và 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.

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à 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ị khác nhau cho thuộc tính font-family là các tên họ phông chữ khác nhau, chẳng hạn như “times” và “courier” để đặt tên cho một số.

Trong Cascading Style Sheets (CSS), các quy tắc kiểu có thể bao gồm nhiều bộ chọn. Để bao gồm nhiều bộ chọn hoặc nhóm nhiều bộ chọn, người ta cần cung cấp danh sách tên thành phần đượ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.

Mã sau minh họa một cách để xác định 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.

Tương tự như CSS bình thường , chúng ta hoàn toàn có thể xử lý theo giải pháp:

Name,Thread,Weight {display: block;}

Cách viết quy tắc định kiểu

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 dưới 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 để đặt màu của văn bản thành màu đen. Lưu ý rằng các cặp attribute-value được phân tách bằng dấu chấm phẩy

.Tương tự, một tập hợp gồm 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 dưới hiển thị hai khai báo thuộc tính được gán cho ba phần tử là CD, Title và Name.

External Style Sheets (định kiểu file bên ngoài)

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

Trong đó

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

url là URL của tệp .css; tệp .css có thể trên hệ thống cục bộ hoặc bất kỳ đâu trên Internet.

type=”text/css” là tùy chọn. Tuy nhiên, nếu một trình duyệt không hỗ trợ CSS, nó sẽ thông báo cho trình duyệt rằng nó không phải tải xuống tệp .css.

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

Selector trong CSS

Bộ chọn đơn giản Simple Selection

Bộ chọn đơn giản bao gồm một tên thành phần theo sau bởi một hoặc nhiều khai báo thuộc tính. Các khai báo thuộc tính giống nhau có thể được gán cho nhiều phần tử bằng cách tách các tên phần tử bằng dấu phẩy, Bộ chọn đơn giản khớp với mọi lần xuất hiện của phần tử trong tài liệu.

/* Simple selector */

CD { color: black; }

/* Single element, multiple property declarations */

CD { color: white; background-color: blue; }

/* Multiple elements, multiple property declarations */

CD, Name, Title ( color: white; background-color: blue; }

Universal Selector – bộ chọn chung

Universal Selector bao gồm dấu hoa thị theo sau là khai báo thuộc tính. Nó được sử dụng khi bạn muốn gán các quy tắc kiểu giống nhau cho tất cả các thành phần trong tài liệu. Bộ chọn phổ khớp với tất cả các phần tử trong tài liệu. Đoạn mã sau hiển thị nội dung của tất cả các phần tử trong tài liệu bằng màu xanh lam.

* { color : blue; }

Bộ chọn ID

Bộ chọn ID bao gồm ký hiệu hàm băm (#), ngay sau đó là giá trị của thuộc tính, sau đó là khai báo thuộc tính. Nó được sử dụng để xác định kiểu cho các thành phần duy nhất trong tài liệu. Ví dụ: nếu bạn muốn dữ liệu của một phần tử duy nhất có kiểu khác, bạn sẽ xác định bộ chọn ID cho phần tử đó. Phần tử duy nhất là phần tử có một trong các thuộc tính của nó được đặt tên là id như trong hình.

Cú pháp:

#attribute_value { property_declarations }

Bộ chọn ID được sử dụng để nhấn mạnh dữ liệu chứa trong các thành phần duy nhất trong tài liệu XML. Tuy nhiên, tất cả các trình duyệt đều hỗ trợ bộ chọn ID. Trình duyệt phải đọc định nghĩa loại tài liệu (DTD) để xác định thuộc tính nào có loại ID. Các trình duyệt như Safari, Mozilla và Netscape không đọc các tập con DTD bên ngoài. Opera cũng thiếu khả năng đọc các DTD nội bộ. Do đó, các trình duyệt này có thể bạo loạn áp dụng các quy tắc kiểu liên quan đến bộ chọn ID. Internet Explorer không hỗ trợ bộ chọn ID khi nó đọc các DTD bên ngoài.

Properties và values

Color Properties

Bảng mô tả thuộc tính màu:

Thuộc tính color

Đặc tả CSS cung cấp các thuộc tính color và background-color để đặt background và của forceground của văn bản được bao trong các phần tử

selector {background-color: red;}
selector {color:black;}

Thuộc tính font

Thuộc tính font-family

Ví dụ:

selector {font-family: "font-name";}

Thuộc tính font-size

Ví dụ:

selector {font-size: 15px;}

Thuộc tính font-style và font-weight

Ví dụ:

selector {font-style: italic;}
selector {font-weight: bold;}

Margins trong CSS

Mọi phần tử trong tài liệu XML được hiển thị trong hộp riêng của nó. CSS cung cấp bốn thuộc tính là lề trái, lề phải, lề trên và lề dưới để chèn khoảng trống xung quanh hộp của phần tử.

Ví dụ:

selector {margin-left: 15px;}
selector {margin-right: 15px;}
selector {margin-top: 15px;}
selector {margin-bottom: 15px;}

Thuộc tính border trong CSS

Ví dụ:

selector {border: 1px solid red;}

Padding trong CSS

Thuộc tính đường viền bao quanh văn bản trong phần tử có đường viền. Để chèn khoảng cách giữa đường viền và văn bản của phần tử, CSS cung cấp thuộc tính padding (đệm/lề)

.Ví dụ:

selector {padding-top: 15px;}
selector {padding-bottom: 15px;}
selector {padding-left: 15px;}
selector {padding-right: 15px;}

Đơn vị trong CSS

Kiểu đơn vị	Định danh đơn vị
Tương đối	em,ex,px,%
Tuyệt đối	in,cm,mm,pt,pc

Thuộc tính position

Bảng mô tả:

Thuộc tính display

Ví dụ:

selector {display: none;}
selector {display: block;}

Thuộc tính text align và text-indent

selector {text-align: center;}
selector {text-indent: 15px;}

Xếp tầng (cascading) trong CSS

Có một số cách mà các biểu định kiểu có thể được xác định. Ví dụ: một tài liệu có thể có nhiều biểu định kiểu được xác định cho nó. Một trình duyệt có biểu định kiểu riêng. Trong những trường hợp như vậy, có thể tồn tại nhiều hơn một quy tắc kiểu dáng cho một phần tử. Do đó, World Wide Web Consortium (W3C) xác định các quy tắc sau để xác định kiểu nào sẽ áp dụng cho một phần tử. Việc sắp xếp các quy tắc định kiểu bắt đầu với quy tắc số 1. Nếu quy tắc định kiểu phù hợp với quy tắc số 1, thì quá trình tìm kiếm kết thúc; mặt khác, việc tìm kiếm tiếp tục với quy tắc số 2, v.v.

Độ ưu tiên của việc áp dụng định kiểu được xét theo các yếu tố sau:

1. Tìm tất cả các khai báo thuộc tính cho một phần tử được đề cập. Áp dụng quy tắc kiểu nếu tên phần tử khớp với phần tử trong bộ chọn. Nếu không có quy tắc kiểu nào được xác định cho một phần tử, thì phần tử đó sẽ kế thừa các quy tắc kiểu được xác định cho phần tử cha. Tuy nhiên, nếu phần tử gốc không có bất kỳ quy tắc kiểu nào được xác định, thì phần tử đó được hiển thị với các giá trị mặc định.

2. Các quy tắc định kiểu được khai báo là !important sẽ được xem xét tiếp theo.

Xét ví dụ:

Threat { display: block ! important }

Khai báo thuộc tính important có quyền ưu tiên cao hơn so với khai báo thuộc tính bình thường.

3. Nguồn gốc của stylesheet được xác định. Một stylesheet có thể có các nguồn sau:

Tác giả(Author): Tác giả của tài liệu XML có thể định nghĩa một biểu định kiểu trong tài liệu bên ngoài để định dạng tài liệu XML.

Người dùng/Người đọc (User/Reader): Người dùng cuối xem tài liệu XML có thể chỉ định biểu định kiểu cá nhân của mình sẽ được sử dụng để định dạng tài liệu XML.

Tác nhân người dùng (User-Agent): Trình duyệt được gọi là tác nhân người dùng. Một trình duyệt có biểu định kiểu mặc định của riêng nó.

Các quy tắc định kiểu được xác định trong stylesheet của tác giả sẽ ghi đè các quy tắc kiểu được xác định trong stylesheet của người dùng. Cả stylesheet của tác giả và người dùng đều ghi đè stylesheet của tác nhân người dùng.

4. Tiếp theo, tính cụ thể của bộ chọn được xác định trong đó bộ chọn cụ thể hơn sẽ ghi đè lên bộ chọn chung. Tính đặc hiệu được xác định bằng cách thực hiện ba hoạt động sau:

• Đếm số thuộc tính ID trong bộ chọn.
• Đếm số thuộc tính class trong một bộ chọn.
• Đếm số tên phần tử trong bộ chọn.

5. Tiếp theo, viết ba số không có dấu phẩy hoặc dấu cách và theo cùng một trình tự như được hiển thị trước đó. Con số càng cao, độ đặc hiệu càng cao. Các quy tắc có độ đặc hiệu cao hơn sẽ ghi đè các quy tắc có độ đặc hiệu thấp hơn. Ví dụ: sau đây là danh sách các bộ chọn được sắp xếp theo tính đặc hiệu,

6. Nếu hai quy tắc có cùng trọng số, thì quy tắc được chỉ định cuối cùng sẽ thắng.

Kế thừa trong CSS

Kế thừa là khả năng của một thực thể có được các đặc điểm của một thực thể khác. Trong CSS, các phần tử con kế thừa các quy tắc kiểu được xác định cho phần tử cha. Tuy nhiên, điều này chỉ có thể áp dụng nếu phần tử con không có quy tắc kiểu dáng rõ ràng nào được xác định cho nó. Mặt khác, quy tắc kiểu được xác định cho phần tử con sẽ ghi đè quy tắc kiểu được xác định cho phần tử cha.

Ví dụ mô phỏng kế thừa thuộc tính font-italic: