Bài giảng Công nghệ XML và WEB ngữ nghĩa - Bài 3: Định dạng tài liệu XML dùng bảng định kiểu (CSS) cung cấp những kiến thức về giới thiệu CSS, kết hợp CSS với tài liệu XML, tạo bộ chọn cho bảng định kiểu, tạo bộ chọn cho bảng định kiểu.
Định dạng tài liệu XML dùng bảng định kiểu (CSS) Ví dụ Ta có file data.xml sau: Giáo trình XML Nguyễn Thiện Bằng Chào mừng bạn đến với XML XML ngôn ngữ dùng để quản lý liệu hình thức ngắn gọn, dễ dàng cho việc quản lý Thuật ngữ đánh dấu nói đến mã hay dấu hiệu bạn đưa vào tài liệu để cách hiển thị liệu cho tài liệu Ví dụ Dùng trình duyệt hiển thị tài liệu data.xml: Giới thiệu CSS CSS chuẩn hóa W3C, có cấp CSS có sẵn: CSS1, CSS2, CSS3 CSS1 có tất cần cho hiển thị tài liệu XML Các trình duyệt IE hỗ trợ tốt cho CSS1 CSS chủ yếu dùng bảng định kiểu Bảng định kiểu tập hợp quy tắc kiểu định dạng phần tử Giới thiệu Ví dụ: Để quy tắc cho phần tử chữ đậm, cỡ chữ 36, canh ta định nghĩa CSS sau: title {display:block; font-size: 36pt; fontweight: bold; text-align: center;} Trong đó: title gọi chọn Dislpay, font-size, font-weight,text-align thuộc tính CSS Giới thiệu Tạo bảng định kiểu cho ví dụ sau: title { display:block; font-size: 36pt; font-weight: bold; text-align:center; } author { display:block; font-size:16pt; text-align:center; text-decoration:underline } paragraph { display:block; margin-top:10 } Giới thiệu Hiển thị trình duyệt ví dụ kết hợp với bảng định kiểu CSS: Kết hợp CSS với tài liệu XML Có hai cách để đưa CSS vào tài liệu HTML: dùng bảng định kiểu chung với tài liệu HTML dùng bảng định kiểu lưu thành file riêng biệt với HTML Với XML có cách đưa CSS vào tài liệu lưu thành tập tin riêng đưa vào tài liệu XML thị xử lý sau: Ví dụ trước,chỉ thị xử lý tài liệu XML là: Tạo chọn cho bảng định kiểu Quy tắc tạo bộ: Để phần tử muốn định dạng bạn dùng chọn bảng định kiểu CSS Bộ chọn có tên tên phần tử bạn muốn định kiểu Ví dụ: đặc tả title sau: title { display:block; font-size: 36pt; font-weight: bold; textalign:center;} Nếu phần tử có đặc tả giống nhau, bạn nhóm chúng lại phân cách dấu “,” Ví dụ: giả sử title book có đặc tả title, book { display:block; font-size: 36pt; font-weight: bold; text-align:center;} Tạo chọn cho bảng định kiểu Tạo lớp định kiểu: Có thể khơng cần tên phần tử phần tử theo thứ tự để tạo chọn Thay vào bạn dùng định nghĩa lớp định kiểu Tạo lớp cách có dấu “.” trước tên lớp Ví dụ: file data.css, ta định nghĩa lớp standout sau: standout { color:cyan; background-color: coral} Áp dụng lớp vào phần tử title tài liệu data.xml sau: Giáo trình XML Kết duyệt: Tạo chọn cho bảng định kiểu Tạo chọn cho bảng định kiểu Định dạng ID: ngồi cách tạo lớp định kiểu ta cịn chọn phần tử cần định dạng định danh ID sử dụng giá trị ID cho phần tử Cú pháp: elementName#idValue Ví dụ: ví dụ trên, file data.css ta định nghĩa paragraph sau: paragraph#first{text-indent:40; margin-top: 30} tài liệu data.xml ta sửa nhưsau: ... đậm, cỡ chữ 36 , canh ta định nghĩa CSS sau: title {display:block; font-size: 36 pt; fontweight: bold; text-align: center;} Trong đó: title gọi chọn Dislpay, font-size, font-weight,text-align thuộc... display:block; font-size: 36 pt; font-weight: bold; text-align:center; } author { display:block; font-size:16pt; text-align:center; text-decoration:underline } paragraph { display:block; margin-top:10 }... file data .xml sau: < ?xml version="1.0" encoding="utf-8" ?> Giáo trình XML< /title> Nguyễn Thiện Bằng Chào mừng bạn đến với XML XML ngôn ngữ dùng để