XML: Bài 5.3. Thuộc tính và Giá trị

Trong bài học thứ ba này, Thuộc tính và Giá trị, bạn sẽ học cách:

• Sử dụng các tính chất của màu.
• Mô tả thuộc tính phông chữ.
• Mô tả các thuộc tính khác như lề, đường viền, phần đệm.
• Giải thích ngắn gọn về định vị và căn chỉnh.

CSS cung cấp các thuộc tính để thiết lập nền trước và màu nền của văn bản. CSS sử dụng tên màu, các giá trị đỏ-lục-lam (RGB), tỷ lệ phần trăm RGB và giá trị thập lục phân để chỉ định các giá trị màu. Các cách khác nhau trong đó các giá trị màu được chỉ định được trình bày trong bảng 5.1.

Tên màu	Phần trăm RGB	Giá trị RGB	Giá trị Hexadecimal
aqua	rgb(0%,65%,65)	rgb(0,160,160)	#00a0a0
black	rgb(0%,0%,0%)	rgb(0,0,0)	#000000
blue	rgb(0%,32%,100)	rgb(0,80,255)	#0050ff
gray	rgb(65%,65%,65%)	rgb(160,160,160)	#a0a0a0
green	rgb(0%,100%,0%)	rgb(0,255,0)	#00ff00
lime	rgb(0%,65%,0%)	rgb(0,160,0)	#00a000
maroon	rgb(70%,0%,32%)	rgb(176,0,80)	#b00050
navy	rgb(0%,0%,65%)	rgb(0,0,160)	#0000a0
olive	rgb(65%,65%,0%)	rgb(160,160,0)	#a0a000
purple	rgb(65%,0%,65%)	rgb(160,0,160)	#a000a0
red	rgb(100%,0%,32%)	rgb(255,0,80)	#ff0050
silver	rgb(90%,90%,90%)	rgb(225,225,255)	#d0d0d0
teal	rgb(0%,65%,100%)	rgb(0,160,255)	#00a0ff
white	rgb(100%,100%,100%)	rgb(255,255,255)	#ffffff
yellow	rgb(100%,100%,0%)	rgb(255,255,0)	#ffff00

Bảng 5.1: Giá trị màu

5.3.1. Thiết lập thuộc tính color

Đặc tả CSS cung cấp màu thuộc tính và màu nền để đặt màu nền trước và màu nền của văn bản nằm trong các phần tử.

Hình 5.6 mô tả cú pháp thiết lập thuộc tính.

Hình 5.6: Cú pháp để thiết lập thuộc tính

trong đó,

color: Thuộc tính để đặt màu nền của văn bản trong một phần tử.

background-color: Thuộc tính để đặt màu nền của văn bản trong một phần tử.

Hình 5.7 cho thấy mã cho các quy tắc kiểu được xác định trong tệp Colors.css.

Hình 5.7: Tệp XML

Hình 5.8 mô tả biểu định kiểu cho tệp Colors.css.

Hình 5.8: Tệp Colors.css

trong đó,

Cars { background-color: rgb(0%,32%,100%); color: #ffffff }

Làm cho văn bản trong phần tử Cars được hiển thị bằng màu trắng với màu nền là xanh lam.

Price { color: yellow; }

Làm cho văn bản trong phần tử Price được hiển thị bằng màu vàng.

5.3.3. Các thuộc tính font

Đặc tả CSS định nghĩa một số thuộc tính phông chữ để thiết lập họ phông chữ, kích thước phông chữ, kiểu phông chữ như in đậm, in nghiêng, v.v. Một số thuộc tính này được liệt kê trong bảng 5.2.

Thuộc tính	Mô tả
font-family	Để chỉ định họ phông chữ
font-size	Để chỉ định kích thước của phông chữ
font-style	Để chỉ định kiểu phông chữ
font-weight	Để chỉ định độ dày mỏng của chữ

Bảng 5.2: Một số thuộc tính font

 5.3.4. Thuộc tính font-family

Thuộc tính font-family được sử dụng để chỉ định loại font chữ của họ font được áp dụng cho một phần tử. Hình 5.10 cho thấy cú pháp của thuộc tính font-family.

Hình 5.10: Thuộc tính font-family

trong đó,

font-family: Thuộc tính để chỉ định họ phông chữ sẽ được sử dụng.

font-family name(s): Danh sách các tên phông-chữ được phân tách bằng dấu phẩy như serif, san-serif, monospace, cursive, và fantasy. Danh sách nên bắt đầu bằng phông chữ cụ thể nhất mà bạn muốn hiển thị dữ liệu và kết thúc bằng phông chữ chung nhất.

Hình 5.11: File XML

Hình 5.12 mô tả biểu định kiểu cho tệp fontfamily.css.

Hình 5.12: Tệp FontFamily.css

Đầu ra được hiển thị trong hình 5.13.

Hình 5.13: Kết quả của việc sử dụng thuộc tính font-family

 5.3.4. Thuộc tính font-size

Thuộc tính font-size được sử dụng để chỉ định kích thước phông chữ được sử dụng để hiển thị dữ liệu phần tử. Hình 5.14 thể hiện cú pháp cho thuộc tính font-size.

Hình 5.14: Cú pháp cho thuộc tính font-size

font-size: Thuộc tính để chỉ định kích thước của phông chữ.

xx-small | x-small | small | medium | large | x-large | xx-large: Một trong các giá trị khác nhau có thể được gán cho thuộc tính font-size.

Hình 5.15 thể hiện đoạn mã cho các quy tắc kiểu được xác định trong tệp FontSize.css.

Hình 5.15: Tệp XML

Hình 5.16 mô tả biểu định kiểu cho tệp fontsize.css.

Hình 5.16: Tệp FontSize.css

trong đó,

Cars {font-size: medium}: Tất cả văn bản trong phần tử Cars và các phần tử con của nó sẽ được hiển thị với kích thước phông chữ medium.

Văn bản trong phần tử Cars sẽ được hiển thị bằng phông chữ arial, times hoặc serif. Quy tắc có thể áp dụng cho tất cả các phần tử có trong phần tử Cars. Nếu hệ thống không hỗ trợ phông chữ arial, thì times sẽ được chọn; nếu times không được hỗ trợ thì serif sẽ được chọn.

Hình 5.17: Kết quả của việc sử dụng thuộc tính font-size

5.3.6. font-style và font-weight

CSS cung cấp hai thuộc tính là font-style và font-weight để thêm phần nhấn mạnh hoặc ý nghĩa cho các phần của dữ liệu.

Hình 5.18 cho thấy cú pháp cho font-style và font-weight.

Hình 5.18: font-style và font-weight

trong đó,

font-style: Thuộc tính để chỉ định kiểu văn bản trong một phần tử.

normal | oblique | italic: Một trong những giá trị có thể được gán cho font-style.

font-weight: Thuộc tính để chỉ định độ đậm (dày mỏng) của văn bản trong một phần tử.

light | normal | bold: Một trong những giá trị có thể được gán cho thuộc tính font-weight.

Hình 5.19: Tệp XML

Hình 5.20 mô tả bảng định kiểu cho tệp FontStyle.css.

Hình 5.20: Tệp FontStyle.css

trong đó,

Manufacturer {font-weight: bold}: Văn bản trong phần tử Manufacturer sẽ được in đậm.

Location {font-style: italic}: Văn bản trong phần tử Location sẽ được in nghiêng.

Kết quả được thể hiện trong hình 5.21.

Hình 5.21: Kết quả của việc sử dụng font-style và font-weight

Liverpool: văn bản được in nghiêng

5.3.7. margin trong CSS

Mọi phần tử trong tài liệu XML được hiển thị trong khối riêng của nó. CSS cung cấp bốn thuộc tính là margin-left, margin-right, margin-top và margin-bottom để chèn khoảng trắng xung quanh khối của phần tử.

Hình 5.22 cho thấy cú pháp cho margin trong css.

Hình 5.22: Cú pháp cho margin trong CSS

trong đó,

margin-left | margin-right | margin-top | margin-bottom: Các thuộc tính lề khác nhau để đặt các lề trái, phải, trên và dưới.

marginValue: Giá trị được gán cho một trong các thuộc tính margin. Giá trị này có thể là một giá trị cố định hoặc một tỷ lệ phần trăm.

Hình 5.23: Tệp XML

Hình 5.24 mô tả bảng định kiểu cho tệp margin.css.

Hình 5.24: Tệp margin.css

trong đó,

Manufacturer {margin-left: 20; margin-right: 50; }: Chèn một khoảng trống 20 pixel vào bên trái và một khoảng trống 50 pixel vào bên phải văn bản trong phần tử Manufacturer.

Manufacturer {background-color: aqua}: Đặt nền của văn bản trong phần tử Manufacturer thành aqua.

Vehicle {background-color: cam}: Đặt nền của văn bản trong phần tử Vehicle thành màu cam.

Hình 5.25 thể hiện kết quả.

Hình 5.25: Kết quả sử dụng margin

5.3.8. border trong CSS

Đường viền là các đường viền ngoài hình chữ nhật bao quanh hộp của một phần tử. CSS cung cấp các thuộc tính để tạo đường viền chấm (dotted), liền mạch (solid) và đường rãnh (dashed) để đặt tên cho một số.

Hình 5.26 thể hiện cú pháp cho các thuộc tính đường viền.

Hình 5.26: Cú pháp cho thuộc tính border

 

trong đó,

border: Thuộc tính để đặt đường viền của khối bao quanh dữ liệu của phần tử.

border_witdth: Chỉ định độ dày của đường viền. Các giá trị có thể là thin, medium, thick, hoặc một giá trị pixel cụ thể.

border_style: Chỉ định kiểu của đường viền. Các giá trị có thể có là solid, dashed, dotted, groove, ridge, double, inset, outset.

border_color: Chỉ định màu của đường viền. Tất cả các giá trị áp dụng cho thuộc tính màu CSS đều được phép.

Hình 5.27: Tệp XML

Hình 5.28 mô tả bảng định kiểu cho tệp Border.css.

Hình 5.28: Tệp Border.css

trong đó,

Manufacturer {border: thick dashed magenta }: Hiển thị đường viền dày và đứt nét màu đỏ tươi xung quanh nội dung của phần tử Manufacturer.

Model { border: thick solid olive }: Hiển thị đường viền ô liu dày và chắc chắn xung quanh nội dung của phần tử Model.

Color { border: thick groove aqua }: Hiển thị đường viền dày và có rãnh xung quanh nội dung của phần tử Color.

Price { border: thick inset gray }: Hiển thị đường viền dày và màu xám xung quanh nội dung của phần tử Price.

Hình 5.29: Kết quả của việc sử dụng border

 

trong đó,

BMW: Đường viền màu đỏ tươi đậm nét đứt

M3: Viền ô liu dày đặc

Metallic Silver: Đường viền thủy tinh có rãnh dày

40.000: Đường viền dày màu xám

5.3.9. padding trong CSS

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

Hình 5.30 cho thấy cú pháp của thuộc tính padding.

Hình 5.30: Cú pháp cho thuộc tính padding

trong đó,

padding: Thuộc tính chỉ định khoảng đệm giữa văn bản và đường viền của một phần tử.

Hình 5.31 thể hiện ví dụ cho các quy tắc kiểu được xác định trong tệp Padding.css.

Hình 5.31: Tệp XML

Hình 5.32 mô tả bảng định kiểu cho tệp padding.css.

Hình 5.32: Tệp Padding.css

trong đó,

Manufacturer { padding: 2 }: Chèn phần đệm 2 pixel giữa bốn đường viền và văn bản của phần tử Manufacturer. Bốn đường viền có thể áp dụng là top, right, bottom, và left.

Model { padding: 2 5 }: Chèn phần đệm giữa các đường viền và văn bản của phần tử Model. Giá trị 2 được áp dụng cho đường viền trên và dưới và 5 được áp dụng cho đường viền trái và phải.

Color {padding: 2 5 8}: Chèn phần đệm giữa các đường viền và văn bản của phần tử Color. Giá trị 2 được áp dụng cho đường viền trên cùng, 5 cho đường viền trái và phải và giá trị 8 cho đường viền dưới cùng.

Price {padding: 2 5 8 10}: Chèn phần đệm giữa các đường viền và văn bản của phần tử Price. Giá trị 2 được áp dụng cho đường viền trên, đường viền 5 sang phải, 8 đường viền dưới cùng và 10 cho đường viền bên trái.

Kết quả được hiển thị trong hình 5.33.

Hình 5.33: Kết quả của việc sử dụng padding

5.3.10. Các đơn vị CSS

Các giá trị được gán cho thuộc tính CSS được biểu thị bằng đơn vị độ dài.

Bảng 5.3 mô tả các đơn vị này.

Loại đơn vị	Bộ chỉ định đơn vị
Relative	em – định nghĩa chiều cao font chữ của phần tử. ex – định nghĩa x-height của font chữ của phần tử. px – định nghĩa pixel liên quan đến thiết bị hiển thị. % - tỷ lệ phần trăm.
Absolute	in – inch cm – centimet mm – millimet pt – 1/72 inch pc – 12 pt

Bảng 5.3: Các đơn vị CSS

5.3.11. Thuộc tính position

Mỗi văn bản của phần tử được đặt trong một riêng riêng của nó. Bảng 5.4 liệt kê các thuộc tính định vị CSS để định vị văn bản bên trong khối. Lưu ý rằng các thuộc tính trên top, left, bottm, và right chỉ được sử dụng nếu giá trị của thuộc tính vị trí không tĩnh.

Thuộc tính	Mô tả	Giá trị khả thi
position	Thuộc tính đặt một phần tử ở vị trí tĩnh (static), tương đối (relative), tuyệt đối (absolute) hoặc cố định (fixed)	static, fixed, relative  hoặc absolute
top	Thuộc tính chỉ định khoảng cách cạnh trên cùng của một phần tử nằm trên/dưới cạnh trên cùng của phần tử cha	Các giá trị auto, số nguyên hoặc số thập phân tuân theo đơn vị độ dài CSS
left	Thuộc tính chỉ định cách cạnh trái của một phần tử ở bên phải/trái của cạnh trái của phần tử cha	Các giá trị auto, số nguyên hoặc số thập phân tuân theo đơn vị độ dài CSS
bottom	Thuộc tính chỉ định cách cạnh dưới cùng của một phần tử nằm trên/dưới cạnh dưới cùng của phần tử cha	Các giá trị auto, số nguyên hoặc số thập phân tuân theo đơn vị độ dài CSS
right	Thuộc tính chỉ đinh cách cạnh bên phải của một phần tử nằm trái/phải của cạnh bên phải của phần tử cha	Các giá trị auto, số nguyên hoặc số thập phân tuân theo đơn vị độ dài CSS

Bảng 5.4: Thuộc tính position

5.3.12. Ví dụ về thuộc tính position

Ta hãy tìm hiểu một ví dụ dựa trên các thuộc tính định vị của CSS.

Hình 5.34 thể hiện ví dụ cho các quy tắc kiểu được xác định trong tệp Position.css.

Hình 5.34: Tệp XML

Hình 5.35 mô tả CSS cho tệp Position.css.

Hình 5.35: Tệp Position.css

trong đó,

Location { position: relative; top:20; left :20 }: Định vị văn bản của phần tử Location so với phần tử trước đó. Tuy nhiên, bên trong khối, nội dung được đặt ở 20 pixel từ trên cùng và 20 pixel từ trái.

Price { position: absolute; top:40; left :20 }: Định vị văn bản của phần tử Price ở vị trí tuyệt đối 40 pixel từ trên cùng và 20 pixel từ trái.

Kết quả được hiển thị trong hình 5.36.

Hình 5.36: Kết quả của việc sử dung position

trong đó,

40,000: Văn bản được hiển thị bằng định vị tuyệt đối

Liverpool: Văn bản được hiển thị bằng cách sử dụng định vị tương đối

Trong HTML, nếu bạn muốn văn bản xuất hiện dưới dạng đoạn mới, bạn sẽ sử dụng thẻ <P>. Điều tương tự cũng có thể đạt được trong XML bằng cách sử dụng thuộc tính display.

Hình 5.37 thể hiện cú pháp của thuộc tính display.

Hình 5.37: Cú pháp cho thuộc tính display

trong đó,

display: Thuộc tính để chỉ định cách phần tử được hiển thị.

none: Không có kết xuất nào được áp dụng cho phần tử.

inline: Hiển thị văn bản phần tử dưới dạng trong dòng. Đây là giá trị mặc định nếu không có giá trị nào được chỉ định.

block: Hiển thị văn bản phần tử trên một dòng mới trong một khối của chính nó.

Hình 5.39 mô tả biểu định kiểu cho tệp Display.css.

Hình 5.39: Tệp Display.css

trong đó,

Price {display: block}: Chèn một dòng mới trước và sau văn bản của phần tử Price.

Hình 5.40: Kết quả của việc dùng display: block

Dữ liệu trong mỗi phần tử được hiển thị trên một hàng riêng biệt trong khối của chính nó.

5.3.14. text-align và text-indent

Thuộc tính display: block hiển thị văn bản của một phần tử trong một khối riêng biệt. Bên trong khối này, bạn có thể căn chỉnh và thụt lề văn bản bằng cách sử dụng các thuộc tính CSS text-align và text-indent tương ứng.

Hình 5.41 cho thấy cú pháp để căn lề và thụt lề văn bản dùng text-align và text-indent.

Hình 5.41: Cú pháp text-align và text-indent

trong đó,

text-align: Thuộc tính căn chỉnh văn bản trong một khối.

alignment_value: Có thể là một trong những giá trị sau: left (mặc định), right, center và justify.

text-indent: Thuộc tính thụt lề văn bản trong một khối.

Hình 5.42 thể hiện ví dụ cho các quy tắc kiểu được xác định trong Align.css.

Hình 5.42: Tệp XML

Hình 5.43 mô tả bảng định kiểu cho tệp Align.css.

Hình 5.43: Tệp Align.css

trong đó

Price {display: block}: Chèn một dòng mới trước và sau văn bản của phần tử Price và hiển thị văn bản trong một khối riêng biệt.

Kết quả được hiển thị trong hình 5.44.

Hình 5.44: Kết quả của việc sử dụng text-indent

trong đó,

40,000: Văn bản trong phần tử Price được hiển thị trên một hàng riêng biệt và được thụt lề trái ở 20 pixel.

Kiểm tra kiến thức bài 5.3

1. Bạn có thể kết hợp các thuộc tính với các mô tả tương ứng?

Mô tả			Thuộc tính
(A)	Để hiển thị dữ liệu của một phần tử ở dạng in nghiêng	(1)	font-family
(B)	Để hiển thị dữ liệu của một phần tử được in đậm	(2)	font-size
(C)	Để hiển thị dữ liệu của một phần tử trong một phông chữ nhỏ	(3)	font-style
(D)	Để hiển thị dữ liệu của một phần tử trong Times New Roman	(4)	font-weight
(E)	Để hiển thị dữ liệu của một phần tử, một phông chữ lớn	(5)	font-size: small

2. Bạn có thể viết các quy tắc kiểu để hiển thị dữ liệu "XML by Example" ở định dạng được hiển thị trong hình sau không?

Lưu ý: Trong hình ảnh, kiểu hiển thị là khối, màu nền là xanh lam, màu trắng, viền là màu đỏ tươi đậm vừa phải, thụt lề văn bản là 20.