Chƣơng 2 : NGễN NGỮ ĐỊNH DẠNG MỞ RỘNG XML
2.5. Bảng định kiểu CSS
2.5.1. Giới thiệu về CSS
Khỏi niệm bảng định kiểu CSS (Cascading Style Sheet) là mụ hỡnh định nghĩa kiểu định dạng dựng cho việc hiển thị tài liệu. CSS đƣợc dựng cho mục đớch tỏch rời định dạng với nội dung tài liệu và dựng nú để hiển thị tài liệu XML nhƣ cỏc trang HTML. CSS tƣơng tự nhƣ một tập mẫu quy định kiểu định dạng cỏc thẻ trong tài liệu HTML. Nú quy định về màu sắc, font chữ, màu nền,...
Điểm khỏc biệt chủ yếu giữa việc ỏp dụng CSS vào XML và ỏp dụng CSS vào HTML là thẻ HTML cú sẵn thụng tin định dạng, cũn thẻ XML thỡ khụng cú.
Bản chất của CSS chớnh là bổ sung thụng tin định dạng theo lớp, trong đú từng lớp sau bỏc bỏ lớp trƣớc. Tài liệu XML sẽ tham chiếu đến tập tin định kiểu file.css, định nghĩa kiểu thể hiện cho cỏc thành phần XML trong tài liệu bằng chỉ thị sau:
<?xml-stylesheet type = “text/css” herf = “file.css”>
Nội dung tập tin định kiểu file.css định nghĩa kiểu định dạng cho cỏc thành phần XML theo cỳ phỏp sau:
ElementName {display:block; attName1:attValue1;
AttName2:attValue2;... ; attNamen:attValuen; .className {attName1:attValue1;
attName2:attValue2;... ; attNamen:attValuen;} }
Trong đú, định nghĩa trực tiếp cho từng thành phần với ElementName là tờn thành phần; attName là tờn thuộc tớnh cú giỏ trị thuộc tớnh attValue; Cú thể gom cỏc thuộc tớnh định kiểu lại thành một nhúm gọi là lớp và một lớp bắt đầu bằng ký tự dấu chấm (.) tiếp đến là tờn lớp (className); display:block hiển thị thành phần theo cấp khối (bắt đầu ở đầu dũng và thành phần theo sau nú sẽ bắt đầu ở đầu dũng tiếp theo), hoặc display:inline hiển thị thành phần theo nội dũng. Thớ dụ định nghĩa cho cỏc thành phần HOCPHAN, TENBAI và định nghĩa kiểu vào lớp cú tờn
BLUE_IB nhƣ sau: HOCPHAN{display:block;font-size:24pt;font-weight:bold; text- align:center} TENBAI{display:block;font-size:18pt;font-style:italic; font- weight: bold;text-align:center} .BLUE_IB{color:blue;font-style=italic;font-weight=blod}
Một tập tin định dạng kiểu CSS khụng chỉ ỏp dụng cho một tài liệu XML cụ thể, mà cú thể cho phộp ỏp dụng nú cho nhiều tài liệu XML. Hoặc, cú thể ỏp dụng nhiều CSS cho một tài liệu XML. Tuy nhiờn, CSS đƣợc dựng cho dữ liệu XML cú cấu trỳc đơn giản, nhƣng lại khụng cung cấp cấu trỳc hiển thị cho tài liệu XML [3,10].
2.5.2. Trỡnh bày và định dạng văn bản với CSS
Do thành phần XML khụng cú định dạng mặc định, vỡ vậy cần phải quy định những xỏc lập trỡnh bày rất cơ bản. Mỗi thành phần định kiểu bằng CSS cú thể đƣợc xỏc lập về kớch thƣớc, màu sắc cũng nhƣ hƣớng di chuyển của nú đối với những thành phần khỏc trong tài liệu khi hiển thị trờn trỡnh duyệt Web,...
Tờn thuộc tớnh Diễn giải
top (bottom,right,left):x Dịch chuyển hiển thị thành phần với x là khoảng cỏch dịch chuyển trong tài liệu (thớ dụ: 125px), đƣa position:relative hoặc position:absolute và để kớch hoạt dịch chuyển.
With (height):x Ấn định chiều cao hay chiều rộng cho thành phần với x là chiều cao hay chiều rộng (thớ dụ: 340px) Boder Ấn định đƣờng viền với cỏc giỏ trị nhằm giới hạn
vị trớ đƣờng viền, độ dày đƣờng viền, kiểu đƣờng viền và màu sắc. (Thớ dụ: boder: thin dashed red) Padding Thờm khụng gian xung quanh nội dung thành phần nhƣng bờn trong đƣờng viền. (thớ dụ: padding: 5px)
Margin Ấn định lề thành phần. (thớ dụ: margin-top:5px) Color Cú thể đổi màu của thành phần bất kỳ, kể cả
đƣờng ngang, thành phần form và bảng. (thớ dụ: color:red)
vertical-align Canh dọc nội dung thành phần page-break-after:always Quy định ngắt trang sau thẻ đó cho. page-break-before:always Quy định ngắt trang trƣớc thẻ đó cho. Font-family:familyname Ấn định nhiều kiểu phụng chữ.
Font-style:italic Định dạng in nguyờn. Font-weight:bold Định dạng in đậm.
Font-size:x Ấn định cỡ chữ với giỏ trị x cú thể là small, medium, large hoặc giỏ trị cụ thể (thớ dụ: 14pt) Line-height:x Ấn định chiều cao của dũng với giỏ trị x là số
muốn.
Text-align:x Canh chỉnh văn bản với giỏ trị x cú thể là left, right, center, justify.
Bảng 2.5.2.1. Một số thuộc tớnh cơ bản của CSS
2.5.2.2. Thớ dụ tài liệu Bai1_Pascal.xml ỏp dụng bảng định kiểu data.css
Nội dụng một đoạn mó của tập tin data.css
HOCPHAN{display:block;color:red;text-align:center;font- weight:bold} TENBAI{display:block;color:red;text-align:center;font- style:italic;font-weight:bold} MUCDICH{display:block;position:relative;left:40px;text- align:justify} YEUCAU{display:block;position:relative;left:40px;text- align:justify} NOIDUNG{display:block} TENMUC{display:block;font-weight:bold} NDMUC{display:block;position:relative;left:40px;text- align:justify} ……
Tài liệu bai1_pascal.xml tham chiếu đến tập tin định kiểu data.css bằng chỉ thị sau:
<?xml version="1.0"?>
<?xml-stylesheet href="data.css" type="text/css"?>
Nội dung tài liệu bai1_pascal.xml đƣợc hiển thị ra trỡnh duyệt Web nhƣ hỡnh sau: