1 / 19

ĐỀ TÀI MÔN HỌC XML XML VÀ CSS

ĐỀ TÀI MÔN HỌC XML XML VÀ CSS. www.viethanit.edu.vn. GVHD : Phạm Thị Phương Anh Khoa : Khoa học máy tinh. TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT HÀN. Mục lục. Cơ bản về Style Sheet trong XML. Cú pháp cho một CSS trong XML. Các thuộc tính của CSS. XML VÀ CSS. 1.1 ) Cơ bản về Style Sheet trong XML.

patrick-mullins
Download Presentation

ĐỀ TÀI MÔN HỌC XML XML VÀ CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. ĐỀ TÀI MÔN HỌC XMLXML VÀ CSS www.viethanit.edu.vn GVHD : Phạm Thị Phương Anh Khoa : Khoa học máy tinh TRƯỜNG CĐ CNTT HỮU NGHỊ VIỆT HÀN

  2. Mục lục Cơ bản về Style Sheet trong XML Cú pháp cho một CSS trong XML Các thuộc tính của CSS

  3. 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à StyleSheet.

  4. XML VÀ CSS 1.2) Cácdạng Style Sheet: • Chúng ta có nhiều dạng StyleSheet 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à CSSvà XSLT: • CascadingStyleSheet (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…. • ExtensibleStyleSheet (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.

  5. XML VÀ CSS 1.3) Ưu điểmcủ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

  6. XML VÀ CSS 2) CúPhápmột file CSS trong XML 2.1) Cú pháp khai báo file Css trong XML. <?xml-stylesheet 1 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). 2 3 type = text/css 4 6 5 href = "url-of-stylesheet" ?>

  7. XML VÀ CSS www.viethanit.edu.vn 2.2) Cú pháp khai báo Css. • 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 “:”. selector 1 { 2 property1 : value1 ; 3 property2 : value2 ; 5 4 }

  8. XML VÀ CSS 2.2) Cú pháp khai báo 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; }

  9. XML VÀ CSS 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; } •   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

  10. XML VÀ CSS 3) Cácthuộctí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.

  11. 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%}

  12. XML VÀ CSS 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.

  13. XML VÀ CSS 3.4) Thuộc tính khối. • Cácthuộctínhkhốimôtảtrongmộthìnhchữnhậtvôhìnhngăncáchnội dung củakhốivớicáckhốilâncận. • Margin (lề) • - Margin làkhoảngcách 4 bêncủakhốivàcáckhôiâncận. Có 4 thuộctínhthiếtlậplà: margin-left, margin-rigth, margin-top, margin-bottom. • - Margin cóthểviếttắctheocá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}

  14. XML VÀ CSS b) Thuộc tính Border • Có 3 thamsốđểđịnhnghĩathuộctính Border. • wigth: độdàymỏngcủaviền, bằngđơnvịtuyệtđối hay tươngđối, hoặcmộttrong 3 giátrị: thin (mỏng), medium (trungbinhmặcđịnh) ,think (dày). • Style : kiểuviền, có 8 giátrị: solid (liền), dashed(đứt), dotted (chấmliêntục), groove (khắcchìm ), ridge (răngcưa), double (đườngđôi), inset (trongdàyngoàimỏng), outset (trongmỏngngoàidày). • Color : màuviền. • Vídụ: • border: thin solid greed; • border: red groove thick; • border: inset blue 12pt;

  15. XML VÀ CSS • c)Padding (đệm) • Padding làkhoảngcáchgiữaviềnvàkhối, còngọilàlềtrong. Có 4 thuộctính: Padding-top, padding-right, padding-bottom, padding-left, hoặcviếttắtnhư margin. Cáchthiếtlậptươngtự margin. • d) Alignthment indentation (cânchỉnhvàthụtđầudòng) • Dùngthuộctínhtext-alignđểcânchỉnhcácdòngtrongmộtđoạn. Cócáctrị: • Left : canhlềtrái, mặcđịnh. • Right: canhlềphải. • Center: canhgiữa. • Justify: canhđều 2 lề. • Dùngthuộctínhtext- indent đểthụtđầudòngdòngđầutiêncủakhối. Cóthểdùngtrịâm, đơnvịđotuyệtđốihoặctínhbằng % chiềungangcủakhối.

  16. XML VÀ CSS 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.

  17. XML VÀ CSS • 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ụ: 

  18. XML VÀ CSS

  19. Thank You ! www.viethanit.edu.vn

More Related