Bài giảng XML và CSS - Phạm Thị Phương Anh

ĐỀ TÀI MÔN HỌC XMLXML VÀ CSS www.viethanit.edu.vn TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT HÀN GVHD : Phạm Thị Phương Anh Khoa : Khoa học máy tinh www.viethanit.edu.vn Mục lục Các thuộc tính của CSS Cơ bản về Style Sheet trong XML Cú pháp cho một CSS trong XML www.viethanit.edu.vn XML VÀ CSS 1.1 ) Cơ bản về Style Sheet trong XML Ưu điểm lớn nhất của XML là tách rời phần nội dung và phần hiển thị nội dung. Do đó nếu chúng ta muốn hiển thị nội dung chứa trong XML chúng ta cần phải có các phương pháp để thể hiện, đó chính là Style Sheet. XML VÀ CSS www.viethanit.edu.vn                               1.2) Các dạng Style Sheet:      Chúng ta có nhiều dạng Style Sheet có thể dùng để hiển thị thông tin trong file XML. Tuy nhiên có 2 phương pháp được sử dụng nhiều nhất đó là CSS và XSLT:      Cascading Style Sheet (CSS): là phương pháp dùng để thể hiện thông tin trong HTML và XMLthông qua khai báo các thuộc tính về vị trí, màu sắc, khoảng cách giữa các dữ liệu….    Extensible Style Sheet (XSLT): là phương pháp dùng để thể hiện thông tin trong XML, chúng ta có thể sử dụng XSLT để chuyển đổi XML sang dạng file khác. www.viethanit.edu.vn XML VÀ CSS 1.3) Ưu điểm của CSS:        Khi chúng ta muốn thay đổi cách thể hiện dữ liệu chúng ta chỉ cần thay đổi tại một nơi    Không phụ thuộc vào thiết bị      Có thể tái sử dụng www.viethanit.edu.vn XML VÀ CSS 2) Cú Pháp một file CSS trong XML 2.1) Cú pháp khai báo file Css trong XML. Cú pháp bắt đầu của một khai báo. Css bao gồm thẻ mở đầu (1). Sau đó tới thuộc tính type (2) thường được thiết lập kiểu text/css (3). Tiếp theo là link liên kết của file css (4) href. (5) là đường dẫn tới file css. Kết thúc là dấu đóng thẻ (6). www.viethanit.edu.vn XML VÀ CSS 2.2) Cú pháp khai báo Css. selector } property1 : value1 ; property2 : value2 ; Một Css bao gồm một hay nhiều selector (1) có tên trùng với tên thẻ XML mà chúng ta muốn thể hiện. Tiếp theo là phần khai báo mô tả kiểu (2). Khai báo này là một danh sách các thuộc tính và giá trị đi cùng thuộc tính đó (3). Thuộc tính (4) và giá trị (5) được ngăn cách với nhau bằng dấu “:”. www.viethanit.edu.vn XML VÀ CSS Css cũng có cú pháp cho chú thích. Chú thích được bao bọc bằng cặp thẻ /* và */. - Ký tự Space dùng để cung cấp các giá trị của mỗi thuộc tính. /* vi du*/ /* CSS Document */ name { color: red; font-style: italic; } class { font-weight: bold; font-size: 24; } 2.2) Cú pháp khai báo Css. www.viethanit.edu.vn XML VÀ CSS   Khai báo CSS cho 1 thẻ: tên thẻ   Khai báo CSS cho nhiều thẻ: tên thẻ 1, tên thẻ 2,…    Khai báo CSS cho tất cả các thẻ: “*”    Khai báo CSS cho attribute id: #giá trị attribute id 2.2) Cú pháp khai báo Css. /* CSS Document */ * { color: red; font-style: italic; } class,hocsinh { font-weight: bold; font-size: 24; } #abc { font-weight: bold; font-size: 24; } www.viethanit.edu.vn XML VÀ CSS 3) Các thuộc tính (Property) 3.1) Sự thừa kế thuộc tính. - Các thuộc tính CSS có thể được chuyển từ element cha xuống các element con được chứa trong element cha đó, để làm đơn giản thiết kế. Ví dụ ta có thể thiết lập font cho tài liệu XML và dùng xuyên suốt tài liệu. Chỉ khi muống thay đổi font tại một element con nào đó thi ta sẽ thêm thuộc tính tại điểm đó để che đi thuộc tính toàn cục. www.viethanit.edu.vn XML VÀ CSS 3.2) Đơn vị đo trong Css Đơn vị đo tuyệt đối (absolute) : là các đơn vị đo lường chuẩn: milimeter (mm), centimeter (cm), inche (in), hoặc các đơn vị đo dùng trong ngành in như: point (pt) (1/72 inches), và pica (pc) (12pt). Đơn vị đo quan hệ (relative) : tính với kích thước Element chứa nó, tính theo %, hoặc tính bằng em (1 em tính băng kích thước nguyên thủy, ví dụ font xuất hiện với font la 12pt thì 1 em =12pt). 	ví dụ: 	b{ font- size : 200%} www.viethanit.edu.vn 3.3) Kiểu hiển thị (Display) Thuộc tính Display có 3 kiểu hiển thị là: block : hình chữ nhật cô lập đoạn văn bản trước và sau nó, ví dụ đoạn văn bản, nhãn, section tài liệu. inline : nội dung không ngắt dòng, ví dụ như từ khóa, siêu liên kết. none : CSS processor sẽ bỏ qua đoạn này. XML VÀ CSS www.viethanit.edu.vn 3.4) Thuộc tính khối. Các thuộc tính khối mô tả trong một hình chữ nhật vô hình ngăn cách nội dung của khối với các khối lân cận. Margin (lề) 	- Margin là khoảng cách 4 bên của khối và các khôi ân cận. Có 4 thuộc tính thiết lập là: margin-left, margin-rigth, margin-top, margin-bottom. 	- Margin có thể viết tắc theo các dang 1 giá trị, 2 giá trị hoặc 3 giá trị. Ví dụ:	para{	margin-left : 10em; margin-right: 10em; 	margin-top: 5%} 	para{ 	margin: 5% 10em 0} XML VÀ CSS www.viethanit.edu.vn Có 3 tham số để định nghĩa thuộc tính Border. wigth: độ dày mỏng của viền, bằng đơn vị tuyệt đối hay tương đối, hoặc một trong 3 giá trị: thin (mỏng), medium (trung binh mặc định) ,think (dày). Style : kiểu viền, có 8 giá trị: solid (liền), dashed(đứt), dotted (chấm liên tục), groove (khắc chìm ), ridge (răng cưa), double (đường đôi), inset (trong dày ngoài mỏng), outset (trong mỏng ngoài dày). Color : màu viền. Ví dụ: 	border: thin solid greed; border: red groove thick; border: inset blue 12pt; b) Thuộc tính Border XML VÀ CSS www.viethanit.edu.vn c)Padding (đệm) Padding là khoảng cách giữa viền và khối, còn gọi là lề trong. Có 4 thuộc tính: Padding-top, padding-right, padding-bottom, padding-left, hoặc viết tắt như margin. Cách thiết lập tương tự margin. d) Alignthment indentation (cân chỉnh và thụt đầu dòng) Dùng thuộc tính text-align để cân chỉnh các dòng trong một đoạn. Có các trị: Left : canh lề trái, mặc định. Right: canh lề phải. Center: canh giữa. Justify: canh đều 2 lề. Dùng thuộc tính text- indent để thụt đầu dòng dòng đầu tiên của khối. Có thể dùng trị âm, đơn vị đo tuyệt đối hoặc tính bằng % chiều ngang của khối. XML VÀ CSS www.viethanit.edu.vn 3.5) Thuộc tính văn bản. Font Thuộc tính font- family khai báo danh sách các font được tham chiếu, cách nhau bởi dấu phẩy. Bắt đầu bởi font chỉ định và kết thúc bởi font chung nhất, danh sách liệt kê các font theo ưu tiên sử dụng. Tên font có dấu space phải đặt trong dấu “”. b) Kích thước font Kích thước font sát định nhờ vào thuộc tính font-size. Thường dùng dơn vị đo tuyệt đối là point, hoặc đổi ra đơn vị đo tương đối là (%). Hoặc các từ khóa như sau: xx-small, x-small, small, medium, large, và smaller (tăng giảm theo ti lệ nào đó). c) Chiều cao dòng và hiệu chỉnh kích thước font Thuộc tính line – height ảnh hưởng đến khoảng cách các dòng. Thuộc tinh font-size-adjust có thể dùng để biến đổi kích thước của font trong thuộc tính font- family. Giá trị tỉ lệ là tỷ lệ x-height của kích thước font. XML VÀ CSS www.viethanit.edu.vn d) Style (kiểu) và weight (dạng) font Thuộc tính font –style cho phép tăng chú ý đến đoạn văn bản. Có 4 thiết lập có thể là: normal (bình thường). Italic (nghiêng), oblique (lệch), inherit (thừa kế thuộc tính từ element cha). Thuộc tính font- weight điều khiển độ đậm nhạt của font. Có các giá trị là: light (mỏng), normal (bình thường), bold (đậm), lighter ( giảm weight một cấp), border(tăng weight một cấp). Có 9 cấp tăng giảm. e) Color Màu sắc là thuộc tính quan trọng của văn bản. Có 2 thuộc tính: color dùng cho màu chữ, background-color cho màu nền. Giá trị có thể là một tên màu được định nghĩa trước, công thức rgb() vơi giá trị % hoặc 0-225, chuỗi # với các màu rgb với giá trị 00 đến FF. ví dụ:  XML VÀ CSS www.viethanit.edu.vn XML VÀ CSS www.viethanit.edu.vn www.viethanit.edu.vn