Ngôn ngữ đánh dấu mở rộng - Chương 04 Cascade Style Sheets

CSS1 được W3C giới thiệu năm 1996, là ngôn ngữ dùng để định dạng cho tài liệu HTML.Năm 1998, W3C đưa ra CSS2, được xây dựng dựa trên CSS1 và có hỗ trợthêm các chức năng mới
Nội dung trích xuất từ tài liệu:
Ngôn ngữ đánh dấu mở rộng - Chương 04 Cascade Style Sheets NGÔN NGỮ ĐÁNH DẤU MỞ RỘNG CHƯƠNG 04 Cascade Style Sheets12/27/13 Cascade Style Sheets 1 Mục tiêuSau chương này, người học có thể:  Trình bày cú pháp sử dụng một tập tin CSS để định dạng cách hiển thị tài liệu XML  Trình bày các cú pháp cơ bản của ngôn ngữ CSS  Tạo ra được các tập tin CSS để định dạng cho từng tài liệu XML theo yêu cầu12/27/13 Cascade Style Sheets 2 Nội dung1) Giới thiệu CSS.2) Cách gán CSS vào tài liệu XML.3) Cách chọn nội dung định dạng4) Kế thừa.5) Các ưu tiên.6) Các đơn vị trong CSS.7) Các thuộc tính display.8) Thuộc tính font.9) Thuộc tính color.10) Thuộc tính background.11) Thuộc tính text.12) Thuộc tính box. 12/27/13 Cascade Style Sheets 3 Giới thiệuCSS: Cascading Style Sheets.CSS1 được W3C giới thiệu năm 1996, là ngôn ngữ dùng để định dạng cho tài liệu HTML.Năm 1998, W3C đưa ra CSS2, được xây dựng dựa trên CSS1 và có hỗ trợ thêm các chức năng mới.12/27/13 Cascade Style Sheets 4 Giới thiệu (2)CSS cũng có thể được dùng để định dạng cách hiển thị tài liệu XML.Một tài liệu XML có thể được hiển thị theo nhiều cách khác nhau, tùy thuộc vào tập tin CSS mà ta sử dụng.12/27/13 Cascade Style Sheets 5 Nội dung1) Giới thiệu CSS.2) Cách gán CSS vào tài liệu XML.3) Cách chọn nội dung định dạng4) Kế thừa.5) Các ưu tiên.6) Các đơn vị trong CSS.7) Các thuộc tính display.8) Thuộc tính font.9) Thuộc tính color.10) Thuộc tính background.11) Thuộc tính text.12) Thuộc tính box. 12/27/13 Cascade Style Sheets 6 Cách gán CSS vào tài liệu XML(1)Cách 1: liên kết đến tập tin CSS bên ngoàiTrong đó:  type= kiểu style sheet. • text/css : dùng cho css. • text/xsl : dùng cho xsl.  href= đường dẫn đến tập tin css.12/27/13 Cascade Style Sheets 7 Cách gán CSS vào tài liệu XML(2)Từ khóa @import:Dùng để nhúng nội dung tập tin CSS này vào một tập tin CSS khác (liên kết nhiều nội dung CSS với nhau) @import url(đường dẫn đến tập tin CSS);VD:  @import url(/styles/truonghoc.css);  @import url(http://www.google.com/xml/styles/truonghoc.css);12/27/13 Cascade Style Sheets 8 Cách gán CSS vào tài liệu XML(3)Cách 2: chèn trực tiếp vào tài liệu XML (inline styles) Cú pháp: nội dung của thẻ 12/27/13 Cascade Style Sheets 9 Cách gán CSS vào tài liệu XML(4.)Ví dụ:12/27/13 Cascade Style Sheets 10 Chú thích trong CSSGiống với ngôn ngữ C/C++! Lời chú thích được đặt trong cặp dấu /* */ VD: /* Kieu hoc sinh*/ hocsinh { display:block; /*Mau nen cua hocsinh la mau den*/ background-color:black; }12/27/13 Cascade Style Sheets 11 Nội dung1) Giới thiệu CSS.2) Cách gán CSS vào tài liệu XML3) Cách chọn nội dung định dạng4) Kế thừa.5) Các ưu tiên.6) Các đơn vị trong CSS.7) Các thuộc tính display.8) Thuộc tính font.9) Thuộc tính color.10) Thuộc tính background.11) Thuộc tính text.12) Thuộc tính box. 12/27/13 Cascade Style Sheets 12 Chọn nội dung định dạng (1)Cú pháp chung: Selector { property:value;...}  Selector: đối tượng mà ta sẽ áp dụng các thuộc tính trình bày. • Thường dùng nhất chính là tên của phần tử.  Property: thuộc tính quy định cách trình bày.  Value: giá trị của thuộc tính. VD: ten { color:blue; display:inline; height:20%; }12/27/13 Cascade Style Sheets 13 Chọn nội dung định dạng (2)Tạo nhóm selector: Ta có thể gộp các phần tử có chung thuộc tính vào cùng selector, và các phần tử tách biệt nhau bởi dấu phẩy. VD1: ten,monhoc {font-size: 16pt; display:block} VD2: ten,monhoc,noidung{ display: block ;} ten,maso{ font-style:bold;} maso {font-size: 16pt; color:red;}12/27/13 Cascade Style Sheets 14 Chọn nội dung định dạng (3)Phần tử giả (pseudo element): Phần tử giả cho phép chúng ta định kiểu một phần nội dung của phần tử, như kí tự đầu tiên, dòng đầu tiên. VD1: sach:first-letter {font-size: 30pt;} VD2: sach:first-line {font-style: italic;}12/27/13 Cascade Style Sheets 15 Chọn nội dung định dạng (4)Lớp giả (pseudo class): Trong cùng một phần tử, nếu ta muốn định kiểu cho từng loại nội dung trong phần tử thì ta thêm ...