1 / 22

XML AND CSS

XML AND CSS. CSC1310 Fall 2009. STYLESHEETS. Stylesheets map style properties to elements in documents ( rule ). Property is anything that affects the appearance or behavior of the document (typeface, color, size, etc.)

glenys
Download Presentation

XML AND 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. XML AND CSS CSC1310 Fall 2009

  2. STYLESHEETS • Stylesheets map style properties to elements in documents (rule). • Property is anything that affects the appearance or behavior of the document (typeface, color, size, etc.) • For each element it can be multiple rules that match, so processor either apply all of them or try to find the best fit. • Stylesheets: • Making design changes easier by separating details from document • Enabling multiple uses for one document. • Giving the end user more control and accessibility.

  3. CASCADING STYLE SHEETS • Cascading Style Sheets (CSS) is recommendation of W3C (1994, Hakon Lee) • The goal is to create a simple yet expressive language that could combine style descriptions from different sources. • CSS1 has 50 properties which is widely supported (1996) • CSS2 has 120 properties which is supported by the most browsers (1998) • CSS3 is in progress.

  4. STYLESHEETS EMBEDDING • Processing instruction <?xml-stylesheet?> : • <?xml-stylesheet • type=“text/css” • href=“url-of-stylesheet” • ?>

  5. CSS AND XML EXAMPLE

  6. CSS SYNTAX • Selector tells processor what element this rule matches. • Items inside of the brackets are called property declarations. • selector • { • property1: value1; • property2: value2; • } • Comments: /* comment text */ • Universal selector is an asterisk (*) • * {color: blue}

  7. PROPERTY INHERITANCE • In XML: • <sect1> <para>Inheritance Example</para> </sect1> • In CSS: • sect1{ • margin-left: 25pt; • margin-right: 25pt; • font-size: 18pt; • color: navy; } • para { • margin-top: 10pt; • margin-bottom: 10pt; • font-size: 12 pt;} • Margins are never inheritable.

  8. COMBINING STYLESHEETS • Reusability • Modularity • @import links current stylesheet to another and causes the style settings in the target to be imported. • @import url(http://www.example.org/math.css) • @import url(http://www.example.org/text.css) • To override imported rules, you need to redefine them in your local stylesheet. • @import url(http://www.example.org/math.css) • h1: { font-size: 3em; }

  9. SELECTOR • Universal selector(*) • Element selector (list of element selectors) • Attribute selector: element [attribute refinement]: • element[attribute] • [attribute] • element[attribute=“value”] • element[attribute~=“value”] • # space-separated list of strings • element[attribute|=“value”] • # hyphen-separated value list • element[attribute1=“value”] [attribute2=“value”] • #IDvalue

  10. CONTEXTUAL SELECTION • Ancestry: (>) • book > title {font-size: 24pt;} • chapter > title {font-size: 20pt;} • title {font-size: 18pt;} • table para {color: green} • para {color: black} • Position: • para:first-child {font-variant: uppercase;} • para:before {content: “element”;} • para:after {content: “element”;} • url:link{color:red;} • url:visited{color:blue;} • para:first-child:first-line {color:red;} • para:first-child:first-letter {color:red;}

  11. UNITS OF MEASUREMENTS • Absolute measurements use units that have a predefined size (inches, points, picas): • mm, cm, in, pt, pc • Relative measurements use percentages and fractions of some variable distance: • em (size of current font), ex (x-height), % • b {font-size:200%} • In general, relative measurements are better since they do not need to be rewritten if default properties are changed.

  12. DISPLAY TYPES • block is a rectangular region of text isolated form the content preceding and following by spacing. It has boundaries (margins) to keep text in the shape (paragraphs, titles, sections). • inline is content that doesn’t interrupt the flow of text in a block (emphasis, keywords, hypertext links). • none is skipped by processor (children of such element are ignored as well) • It is recommended to declare the display property for XML.

  13. BLOCKISH PROPERTIES • Margins are distances between the bounding box and any neighboring element. • margin-left • margin-right • margin-top • margin-left • margin v1 • margin v1 v2 • margin v1 v2 v3 • margin v1 v2 v3 v4 margin-top margin-left This is a text inside of block. margin- bottom margin-right padding • Negative values are acceptable. • Unspecified values margins default to 0. • para {margin: 5% 10em 0 } • para{margin-left: 10em; margin-right:10em; margin-top: 5%}

  14. BLOCKISH PROPERTIES • border • width: thin, medium, thick, value • style: solid, dashed, dotted, groove, ridge, double, inset, outset • color • padding • The value is a space-separated list of between one and four length measurements (see margin) • text-align: left, right, center, justify • text-indent • Indents the first line of a block.

  15. TEXT PROPERTIES • font-family has a comma-separated list of font preferences, starting with the most specific and desirable, and finishing with the generic • serif (Times), sans-serif (Helvetica), monospace (Courier), cursive, fantasy (Comic Strip) • font-family: Palantino, “Times New Roman”, serif; • font-size has absolute or relative units or measured by keywords: xx-small, x-small, small, medium, large, x-large, xx-large • line-height affects font size and whitespace above it. • para1{line-height: 1} • para2{line-height: 1.5} • para3{line-height: 2}

  16. TEXT PROPERTIES • font-style: normal, italic, oblique, inherit • font-weight:light, normal, bold, lighter, bolder • color • color • background-color • RGB (red-green-blue): rgb(v1,v2,v3) (0-255), #000000 - #FFFFFF • Predefined colors: • aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

  17. BACKGROUND • background • background-attachment • sets whether a background image is fixed or scrolls with the rest of the page • scroll, fixed • background-color • Color or transparent • background-image • url(URL) or none • background-position • background-repeat

  18. LIST • display: list-item; • list-style • list-style-image • url(URL) or none • list-style-position • inside or outside • list-style-type

  19. LIST EXAMPLE

  20. TABLE • display: • table • table-row • table-row-group • table-header-group • table-column • table-column-group • table-cell • table-caption

  21. TABLE EXAMPLE

  22. TABLE PROPERTIES • border-collapse: collapse or separate • empty-cells: show or hide

More Related