Bài giảng công nghệ lập trình tích hợp chương 4 3 ts nguyễn quang uy

Chương 4.3 Định dạng XML sử dụng Cascading Style Sheets Mục lục chương • • • • • • Ví dụ tài liệu XML Giới thiệu CSS Kết nối tài CSS với XML Tạo Style sheet selectors Sử dụng inline style Tạo quy tắc đặc tả style sheet Tài liệuXML Tài liệuXML Cơ CSS • Style sheets tập hợp style rules • Mỗi style rule xác định cách thức trình duyệt hiển thị thành phần XML • Mỗi rule bao gồm selector (tên thành phần XML) đặc tả • Giả sử ta muốn định dạng cho thành phần title ta làm sau: – title {display: block; font-size: 36pt; font-weight: bold; text-align: center; text-decoration: underline} Ví dụ ch08_02.css • title {display: block; font-size: 36pt; fontweight: bold; text-align: center; textdecoration: underline} • philosopher {display: block; font-size: 16pt; text-align: center} • book {display: block; font-size: 28pt; textalign: center; font-style: italic} • paragraph {display: block; margin-top: 10} Kết nối CSS Style Sheets với XML • Có 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 có cách dùng dẫn: – Kết nối CSS Style Sheets với XML • Ví dụ ta kết nối đến style sheet sau: – Tạo style sheet selector • Khi tạo style rule, ta nhóm selector(các thành phần) lại với • Ví dụ: – title, book {display: block; font-size: 36pt; fontweight: bold; text-align: center; textdecoration: underline} – philosopher {display: block; font-size: 16pt; text-align: center} – paragraph {display: block; margin-top: 10} Tạo lớp selector • Ta tạo lớp selector 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} Tạo lớp selector • Sau ta dùng thuộc tính class để lớp cho thành phần tài liệu XML • Ví dụ: – The Discourses Epictetus Các đặc tả 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) Các đặc tả 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 Các đặc tả • 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) 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 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 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 points, or thin, medium, or thick 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 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 points, or thin, medium, or thick Các đặc tả 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 Các đặc tả 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 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)