1 / 26

4.1 CSS - Cascading Style Sheets

4.1 CSS - Cascading Style Sheets. Overview of 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. CSS - Cascading Style Sheets. A stylesheet language

erv
Télécharger la présentation

4.1 CSS - Cascading Style Sheets

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. 4.1 CSS - Cascading Style Sheets • Overview of 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 • A stylesheet language • mainly to specify the representation of web pages by attaching style (fonts, colours, margins, …) to HTML/XML documents • also used for "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, aural • extended selection mechanism • generated content, automatic numbering • formatting of tables, … • Level 3 (CSS3) • ongoing work; split into 26 modules in 05/2001 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 rules:H1 {color: blue}/* blue text for 1st-level heads */H1,H2,H3 {font-style:bold;}/* bold for alternative heads */.CODE {font-family: monospace; color: red }/* for all elems with class="CODE" */ 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 this ”cascading” (porrastus) • 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, audio-synthesize, ... 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 (positive) vertically adjoining 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 • CSS Level 2 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 }(as a special case, a negative value is added to positive adjoining margin above) • 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 assigning style properties to elements + numbering list items on a single level • CSS2 adds counters, and generated content before and after 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 • Browser implementations lag behind CSS specs • for a review (out-dated; 2001), see http://www.ddj.com/webreview/style/ • Netscape Navigator 6 supports most of CSS2 selectors • For more recent announcements, seehttp://www.w3.org/Style/CSS/#browsers • Full CSS usable, if at all, only in controlled environments (intranets) with known browsers Notes 4.1: CSS

More Related