intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE

Bài giảng Công nghệ lập trình tích hợp: Chương 4.3 - TS. Nguyễn Quang Uy

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:20

6
lượt xem
1
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Công nghệ lập trình tích hợp: Chương 4.3 Định dạng XML sử dụng, cung cấp cho người đọc những kiến thức như: Ví dụ về tài liệu XML; Giới thiệu về CSS; Kết nối tài CSS với XML; Tạo ra các Style sheet selectors; Sử dụng inline style; Tạo các quy tắc đặc tả trong style sheet;... Mời các bạn cùng tham khảo!

Chủ đề:
Lưu

Nội dung Text: Bài giảng Công nghệ lập trình tích hợp: Chương 4.3 - TS. Nguyễn Quang Uy

  1. Chương 4.3 Định dạng XML sử dụng Cascading Style Sheets 1
  2. Mục lục chương • 1. Ví dụ về tài liệu XML • 2. Giới thiệu về CSS • 3. Kết nối tài CSS với XML • 4. Tạo ra các Style sheet selectors • 5. Sử dụng inline style • 6. Tạo các quy tắc đặc tả trong style sheet 2
  3. Tài liệuXML trong bài
  4. Tài liệuXML trong bài
  5. Cơ bản về CSS • Style sheets là một tập hợp các style rules • Mỗi style rule sẽ xác định cách thức trình duyệt hiển thị các thành phần của XML • Mỗi rule bao gồm các selector (tên các thành phần của XML) và các đặc tả • Giả sử ta muốn định dạng cho thành phần title ta có thể làm như sau: – title {display: block; font-size: 36pt; font-weight: bold; text-align: center; text-decoration: underline}
  6. Ví dụ ch08_02.css • title {display: block; font-size: 36pt; font- weight: bold; text-align: center; text- decoration: underline} • philosopher {display: block; font-size: 16pt; text-align: center} • book {display: block; font-size: 28pt; text- align: center; font-style: italic} • paragraph {display: block; margin-top: 10}
  7. Kết nối giữa CSS Style Sheets với XML • Có 3 cách để ta kết nối CSS với HTML – Sử dụng internal style sheet – Sử dụng external style sheet – Sử dụng HTML STYLE attribute • Tuy nhiên với XML ta chỉ có một cách duy nhất đó là dùng chỉ dẫn: –
  8. Kết nối giữa CSS Style Sheets với XML • Ví dụ ta có thể kết nối đến style sheet như sau: –
  9. Tạo các style sheet selector • Khi tạo các style rule, ta cũng có thể nhóm các selector(các thành phần) lại với nhau • Ví dụ: – title, book {display: block; font-size: 36pt; font- weight: bold; text-align: center; text- decoration: underline} – philosopher {display: block; font-size: 16pt; text-align: center} – paragraph {display: block; margin-top: 10}
  10. Tạo các lớp selector • Ta cũng có thể tạo ra các lớp selector bằng cách đặt ký hiệu . Trước tên selector • Ví dụ: – title {display: block; font-size: 36pt; font-weight: bold; text-align: center; text-decoration: underline} – philosopher {display: block; font-size: 16pt; text-align: center} – book {display: block; font-size: 28pt; text-align: center; font-style: italic} – paragraph {display: block; margin-top: 10} – .standout {color:cyan; background-color:coral}
  11. Tạo các lớp selector • Sau đó ta có thể dùng thuộc tính class để chỉ ra các lớp cho mỗi thành phần trong tài liệu XML • Ví dụ: – The Discourses Epictetus
  12. Các đặc tả về text • font-family— Specifies the font face. You can list a number of options, separated by commas. The first face supported by the browser will be used. • font-size— Specifies the size of the font. You can set this property to a size; for example, 36pt is 36 points. • font-style— Specifies whether to use normal, italic, or oblique face. • font-weight— Specifies the boldness of text relative to other fonts in the same font family. You can set it to bold for bold text. • line-height— Specifies the height of each line of text. You can set it to an absolute size or to a percentage, such as 150% (which creates 11/2 spacing).
  13. Các đặc tả về text • text-align— Specifies the alignment of text. You can assign this property values such as left, right, center, and justify. • text-decoration— Specifies underlining and overlining. You can set it to underline, overline, line-through, or blink; to get rid of text inherited decorations, you can set it to none. • text-indent— Specifies the indentation of the first line of block-level elements. You can set it to a size. • text-transform— Specifies whether to display text in all uppercase, in all lowercase, or with initial letters capitalized. The possible values for this property are capitalize, uppercase, lowercase, and none. • vertical-align— Specifies the vertical alignment of text. You can set this property to baseline, sub, super, top, text-top, middle, bottom, or text-bottom.
  14. Các đặc tả về • background-attachment— Specifies whether the background scrolls with the rest of the document. • background-color— Specifies the background color. You can set this property to a color. • background-image— Specifies the background image. You can set this property to a URL. • background-repeat— Specifies whether the background image should be tiled. You can set this property to repeat, repeat-x, repeat-y, or no-repeat. • color— Specifies the foreground color (that is, the color of text).
  15. Các đặc tả kiểu đường biên • border-bottom-width— Specifies the width of the bottom of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick. • border-color— Specifies the color to use for the border (using a predefined color or a color triplet). Setting this property sets the color of the whole border. • border-left-width— Specifies the width of the left edge of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick. • border-right-width— Specifies the width of the right edge of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.
  16. Các đặc tả kiểu đường biên • border-style— Specifies the border style. You can set this property to dotted, dashed, solid, double, groove, ridge, inset, or outset. Most browsers support only solid. • border-top-width— Specifies the width of the top of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick. • border-width— Specifies the width of the border. You can set this property to a size such as 12px for 12 pixels, 6pt for 6 points, or thin, medium, or thick.
  17. Các đặc tả căn chỉnh • line-height— Specifies the height of each line. You can set this property to an absolute size or to a percentage, such as 150% (which creates 11/2 spacing). • margin-bottom— Specifies the bottom margin of a block element. You can set this property to a size. • margin-left— Specifies the left margin of a block element. You can set this property to a size. • margin-right— Specifies the right margin of a block element. You can set this property to a size.
  18. Các đặc tả căn chỉnh • margin-top— Specifies the top margin of a block element. You can set this property to a size. • text-align— Specifies the alignment of text. You can set this property to left, right, center, or justify. • text-indent— Specifies the indentation of the first line of block-level elements. You can set this property to an absolute value such as 12px (12 pixels) or 6pt (6 points). • vertical-align— Specifies the vertical alignment of text. You can set this property to baseline, sub, super, top, text-top, middle, bottom, or text-bottom.
  19. Các đặc tả kiểu ảnh • background-image— Specifies a background image for the element. You can set this property to a URL. • background-repeat— Specifies whether the background image should be tiled in a repeating fashion. You can set this property to repeat, repeat-x, repeat-y, or no-repeat. • background-attachment— Specifies whether the background scrolls when the rest of the document is scrolled. • background-position— Specifies the initial position of the background image. You can set this property to an x,y coordinate, keeping in mind that the origin is at the upper left (for example, background-position: 10px 20px).
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
4=>1