4.1 CSS - Cascading Style Sheets - PowerPoint PPT Presentation

4 1 css cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
4.1 CSS - Cascading Style Sheets PowerPoint Presentation
Download Presentation
4.1 CSS - Cascading Style Sheets

play fullscreen
1 / 26
4.1 CSS - Cascading Style Sheets
166 Views
Download Presentation
patrick-leach
Download Presentation

4.1 CSS - Cascading Style Sheets

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. 4.1 CSS - Cascading Style Sheets • Main ideas and essential features • as a preliminary for XSL • What is it? • Use and status • Processing model • Rules, selectors, generated content • Usability in practise Notes 4.1: CSS

  2. CSS - Cascading Style Sheets • Main usage: • to specify the representation of web pages by attaching style (fonts, colours, margins, …) to HTML/XML documents • also used to specify a "WYSIWYG" presentation in some commercial XML editors, e.g., • SofQuad XMetal (of Corel; Windows) • Morphon (of Morphon Technologies; Java) Notes 4.1: CSS

  3. W3C CSS Recommendations • Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999) • basic features, from the point of view of HTML • Level 2 (CSS2), May 1998 • different media types • paged media (for printing), • aural style sheets (for speech synthesis) • extended selection mechanism • generated content, automatic numbering • formatting of tables, … • Level 3 (CSS3) • ongoing work; split in May 2001 into 26 modules Notes 4.1: CSS

  4. CSS Style Sheets • Style sheet is a set of style rules • Style rule syntax:selector { declarations } • selector locates elements affected by the rule • declarations syntax:prop1:val1; … ; propn:valn • sets values for style properties • CSS1 defines about 50 properties, CSS2 about 120 Notes 4.1: CSS

  5. CSS Style Rules • Example rulesH1 {color: blue}/* blue text for first-level HTML headers */H1,H2,H3 {font-style:bold;}/* Alternative selectors grouped together: *//* bold font for all HTML headers */ CODE {font-family: monospace; color: red } Notes 4.1: CSS

  6. normal/italic/oblique helvetica/serif/… normal/bold/bolder/ ... sub/super/... left/right/center/justify CSS1 Properties (1/2) • Font properties: font, (-family/-style/-variant/-weight/-size) • Color and background properties: color; background (-color/-image/-repeat/-attachement/-position) • Text properties: word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, text-align, text-indent, line-height Notes 4.1: CSS

  7. decimal/lower-alpha/disk/... inside/outside CSS1 Properties (2/2) • Box properties: • for controlling size, margins, borders etc. of “boxes” (see later) • Classification properties: display (values:block | inline | list-item | none), white-space (values:normal | pre | nowrap), list-style, (-type/-image/-position) Notes 4.1: CSS

  8. Attaching CSS Style to HTML • Four ways:1. with aLINK element; 2. with aSTYLEelement in document HEAD; 3. by animportmechanism; 4. in aSTYLEattribute <HTML><HEAD><TITLE>A sample page</TITLE><LINK REL="STYLESHEET" TYPE="text/css" HREF="my_style.css" ><STYLE TYPE="text/css">@importurl(http://style.com/basic); H1 { color: blue } </STYLE></HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green">but this is green. </BODY></HTML> Notes 4.1: CSS

  9. Attaching CSS Style ... • W3C Rec for linking styles to XML:<?xml-stylesheet href="example.css" type="text/css" ?> • Rules from different sources merged together • including browser defaults and user preferences • Problems of ”cascading” • author: blue background + user: blue text -> ? • Should author have control of style? What if visually disabled user needs large font size? • Should user have control of style? What if readability depends on detailed size and placement of text? Notes 4.1: CSS

  10. CSS Processing Model (simplified) 0. Parse the document into a tree 1. Match style rules to elements of the tree • annotate each element with a value assigned for each relevant property • inheritance and, in case of competing rules, elaborate "cascade" rules applied to select which value is assigned 2. Generate a formatting structure of the annotated document tree • consists of nested rectangular boxes 3. Render the formatting structure • display, print, speak, ... Notes 4.1: CSS

  11. Inheritance (1/2) • Most properties are inherited by subelements • can be overridden • can be modified (e.g. increase indent, set font size to 150% of current) • Some non-inherited properties: • background properties • by default shine through the boxes of decendants • padding, marginand border properties • but they effect the placement of sub-elements(See CSS Box Model a bit later) Notes 4.1: CSS

  12. Inheritance (2/2) • Consider document fragment<chap><title>… </title> <section> … </section></chap> • and ruleschap { font-size: 12pt; font-family: serif } title { font-size: 150% } • Now both title and section will be formatted using a serif font, but title with a 50% larger font size Notes 4.1: CSS

  13. CSS Box Model • Transcription maps document elements into nested rectangular boxes, which have • a core content area • optional surrounding margin, border and padding areas • controlled by corresponding propertiesmargin, borderand padding,and widthandheight(last two most useful for scaling images) Notes 4.1: CSS

  14. Dimensional properties of boxes ____________________________________| margin (transparent) || _______________________________ || | border | || | __________________________ | || | | padding | | || | | _____________________ | | || | | | content | | | || | | |_____________________| | | || | |__________________________| | || |_______________________________| ||____________________________________|| content width || box width | Notes 4.1: CSS

  15. CSS1 Properties (2/2) • Box properties:width, height, float, clear;margin, (-top/-right/-bottom/-left);padding, (-top/-right/-bottom/-left);border-width, (-top-/-right-/-bottom-/-left-);border-color, border-style;border, (-top/-right/-bottom/-left); Notes 4.1: CSS

  16. maximum of vertically overlapping margins Boxes: Example Notes 4.1: CSS

  17. Main types of elements • Inline elements (display:inline) • default; can occur on the same line with other elements; e.g., EM in HTML • Block-level • formatted as boxes separated by line breaks • default formatting of, e.g., P,H1,H2in HTML • specified by display:block • display:list-item ->block preceded by list-item marker • Element suppression: display:none Notes 4.1: CSS

  18. CSS Selectors: Simple • Application of style rules determined by matching selectors to elements of the document tree • Element type name, e.g. P or H1 • matches any instance of the element type • CSS2 adds • a universal selector * matching any element • tests for attributes:fig[file="fig1.jpg"]: figure with given value for attribute file*[file="fig1.jpg"]: any element with that value for attribute filefig[file]: element fig with attribute file Notes 4.1: CSS

  19. CSS Selectors: Contextual • Element inclusion by listing simple selectors for ancestors • e.g: items in ordered lists in paragraphs:P OL LI { … } • CSS2 adds • direct inclusion: Parent > Child • conditions on siblings:E + A: element A preceded by an element satisfying selector EB:first-child: B as the first element child Notes 4.1: CSS

  20. Examples of CSS2 Selectors • Don’t indent a P immediately following MATH: MATH + P { text-indent: 0 } • Reduce vertical space btw an H1 and an H2 immediately following it: H1 + H2 { margin-top: -5mm } • Don’t indent the first P of a DIV: DIV > P:first-child { text-indent: 0 } Notes 4.1: CSS

  21. Example: • Number theorems within each chapter • Precede each theorem by "Theorem" and its number • Follow the theorem by a little box Counters and generated content • CSS1 restricted to adorning elements with assigned style properties + automatic numbering of list items on a single level • CSS2 adds insertion of generated content before and after selected elements Notes 4.1: CSS

  22. Generated content: Example • Style rules for the task:chapter { counter-reset: theorCntr }theorem:before { content: "Theorem " counter(theorCntr) ". "; counter-increment: theorCntr; font-weight: bold; }theorem:after { content: url("box.gif"); float: right} Notes 4.1: CSS

  23. Inserting attribute values • Also possible to include attribute values of the selected element in generated content using attr(Name) • ExampleInsert value of attribute ALT before images: IMG:before { content: attr(ALT) } Notes 4.1: CSS

  24. Limitations of CSS • Limited transcription capabilities • limited transposition of elements (float:left/right) • calls of parameterised formatting tasks the major transcription type supported • In CSS1 context specification limited: • no sibling or parent/child relationships • limited use of attributes (CSS1: only class) • CSS2 more powerful, but • no access to element’s children or content • unable to access targets of cross references Notes 4.1: CSS

  25. Limitations of CSS • Non-programmable • no decision structures • unable to store calculated quantities • non-extensible • > relatively simple • Western-language orientation (left-to-right) • XSL allows unrestricted transformations of the document to precede a CSS-like formatting Notes 4.1: CSS

  26. Browser Implementations • CSS support in major browsers is rather discouraging(See, e.g., http://www.ddj.com/webreview/style/) • > full CSS not usable on the Internet • (Almost) complete implementations of CSS1 • Netscape Navigator 6 • implements also most of CSS2 selectors • MS Internet Explorer 5 on Macintosh(!) • MS policy of developing own extensions, instead of completing conformance with recommendations strongly criticised Notes 4.1: CSS