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: