Upload
patrick-leach
View
59
Download
7
Embed Size (px)
DESCRIPTION
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. CSS - Cascading Style Sheets. Main usage: - PowerPoint PPT Presentation
Citation preview
SDPL 2004 Notes 4.1: CSS 1
4.1 CSS - Cascading Style Sheets4.1 CSS - Cascading Style Sheets
Main ideas and essential featuresMain ideas and essential features» as a preliminary for XSL as a preliminary for XSL
– What is it?What is it?– Use and statusUse and status– Processing modelProcessing model– Rules, selectors, generated contentRules, selectors, generated content– Usability in practise Usability in practise
SDPL 2004 Notes 4.1: CSS 2
CSS - Cascading Style SheetsCSS - Cascading Style Sheets
Main usage:Main usage:– to specify the representation of web pages by to specify the representation of web pages by
attaching style (fonts, colours, margins, …) to attaching style (fonts, colours, margins, …) to HTML/XML documentsHTML/XML documents
– also used to specify a "WYSIWYG" presentation in also used to specify a "WYSIWYG" presentation in some commercial XML editors, e.g., some commercial XML editors, e.g., » SofQuad SofQuad XMetal XMetal (of Corel; Windows)(of Corel; Windows)» MorphonMorphon (of Morphon Technologies; Java) (of Morphon Technologies; Java)
SDPL 2004 Notes 4.1: CSS 3
W3C CSS RecommendationsW3C CSS Recommendations
Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999)Level 1 (CSS1), Dec. 1996 (Rev. Jan. 1999)– basic features, from the point of view of HTMLbasic features, from the point of view of HTML
Level 2 (CSS2), May 1998Level 2 (CSS2), May 1998– different media typesdifferent media types
» paged media (for printing), paged media (for printing), » aural style sheets (for speech synthesis)aural style sheets (for speech synthesis)
– extended selection mechanismextended selection mechanism– generated content, automatic numberinggenerated content, automatic numbering– formatting of tables, … formatting of tables, …
Level 3 (CSS3)Level 3 (CSS3)– ongoing work; split in May 2001 into 26 modulesongoing work; split in May 2001 into 26 modules
SDPL 2004 Notes 4.1: CSS 4
CSS Style SheetsCSS Style Sheets
Style sheet is a set of Style sheet is a set of style rulesstyle rules Style rule syntax:Style rule syntax:
selector selector {{ declarations declarations }}– selectorselector locates elements affected by the rule locates elements affected by the rule
declarationsdeclarations syntax: syntax: propprop11::valval11;; … … ;; prop propnn::valvalnn
– sets values for style properties sets values for style properties – CSS1 defines about 50 properties, CSS1 defines about 50 properties,
CSS2 about 120CSS2 about 120
SDPL 2004 Notes 4.1: CSS 5
CSS Style RulesCSS Style Rules
Example rulesExample rules H1 H1 {color: blue}{color: blue} /* blue text for first-level HTML headers *//* blue text for first-level HTML headers */
H1H1,,H2H2,,H3 H3 {font-style:bold;}{font-style:bold;} /* Alternative selectors grouped together: *//* Alternative selectors grouped together: */
/* bold font for all HTML headers *//* bold font for all HTML headers */
CODE CODE {font-family: monospace; {font-family: monospace; color: red } color: red }
SDPL 2004 Notes 4.1: CSS 6
CSS1 Properties (1/2)CSS1 Properties (1/2)
Font properties:Font properties:fontfont, (, (-family-family//-style-style//-variant-variant//-weight-weight//-size-size))
Color and background properties:Color and background properties:colorcolor; ; backgroundbackground ( (-color-color//-image-image//-repeat-repeat//--
attachementattachement// -position-position))
Text properties:Text properties:word-spacingword-spacing, , letter-spacingletter-spacing, , text-decorationtext-decoration, ,
vertical-alignvertical-align, , text-transformtext-transform, , text-aligntext-align, , text-text-indentindent, , line-heightline-height
helvetica/serif/…helvetica/serif/…
normal/italic/obliquenormal/italic/oblique
normal/bold/bolder/ ...normal/bold/bolder/ ...
sub/super/...sub/super/...
left/right/center/justifyleft/right/center/justify
SDPL 2004 Notes 4.1: CSS 7
CSS1 Properties (2/2)CSS1 Properties (2/2)
Box properties:Box properties:– for controlling size, margins, borders etc. of for controlling size, margins, borders etc. of
““boxesboxes” (see later)” (see later)
Classification properties:Classification properties:display display (values:(values: blockblock | | inlineinline | | list-itemlist-item | | nonenone)), ,
white-space white-space (values:(values: normalnormal | | prepre | | nowrapnowrap)), ,
list-stylelist-style, (, (-type-type//-image-image//-position-position))
inside/outsideinside/outsidedecimal/lower-alpha/decimal/lower-alpha/disk/...disk/...
SDPL 2004 Notes 4.1: CSS 8
Attaching CSS Style to HTMLAttaching CSS Style to HTML
Four ways:Four ways: 1. with a1. with a LINKLINK element; element; 2. with a2. with a STYLESTYLE element in document element in document HEADHEAD; ; 3. by an3. by an importimport mechanism; 4. in amechanism; 4. in a STYLESTYLE attributeattribute
<HTML><HEAD><TITLE>A sample page</TITLE><HTML><HEAD><TITLE>A sample page</TITLE><<LINKLINK REL="STYLESHEET" TYPE="text/css" REL="STYLESHEET" TYPE="text/css"
HREF="my_style.css" > HREF="my_style.css" ><<STYLESTYLE TYPE="text/css"> TYPE="text/css"> @import@import url(http://style.com/basic);url(http://style.com/basic); H1 H1 { color: blue }{ color: blue } </ </STYLESTYLE></HEAD>></HEAD> <BODY> <H1>Headline is blue</H1> <BODY> <H1>Headline is blue</H1> <P <P STYLESTYLE="="color: greencolor: green">but this is green.">but this is green. </BODY> </BODY></HTML></HTML>
SDPL 2004 Notes 4.1: CSS 9
Attaching CSS Style ...Attaching CSS Style ...
W3C Rec for linking styles to W3C Rec for linking styles to XMLXML:: <?<?xml-stylesheetxml-stylesheet href="example.css" href="example.css"
type="text/css" ?>type="text/css" ?>
Rules from different sources merged togetherRules from different sources merged together– including browser defaults and user preferencesincluding browser defaults and user preferences– Problems of ”Problems of ”cascadingcascading” ”
» author: blue background + user: blue textauthor: blue background + user: blue text ? ?» Should Should authorauthor have control of style? have control of style?
What if visually disabled user needs large font size?What if visually disabled user needs large font size?» Should Should useruser have control of style? What if readability have control of style? What if readability
depends on detailed size and placement of text?depends on detailed size and placement of text?
SDPL 2004 Notes 4.1: CSS 10
CSS Processing Model (simplified)CSS Processing Model (simplified)
0. Parse the document into a tree0. Parse the document into a tree1. Match style rules to elements of the tree1. Match style rules to elements of the tree
– annotate each element with a value assigned for annotate each element with a value assigned for each relevant propertyeach relevant property
» inheritance and, in case of competing rules, elaborate inheritance and, in case of competing rules, elaborate "cascade" rules applied to select which value is assigned"cascade" rules applied to select which value is assigned
2. Generate a formatting structure of the 2. Generate a formatting structure of the annotated document treeannotated document tree– consists of nested rectangular boxesconsists of nested rectangular boxes
3. Render the formatting structure3. Render the formatting structure– display, print, speak, ...display, print, speak, ...
SDPL 2004 Notes 4.1: CSS 11
Inheritance (1/2)Inheritance (1/2)
Most properties are inherited by subelementsMost properties are inherited by subelements– can be overriddencan be overridden– can be modified (e.g. increase indent, set font size can be modified (e.g. increase indent, set font size
to 150% of current)to 150% of current) Some non-inherited properties: Some non-inherited properties:
– backgroundbackground properties properties » by default shine through the boxes of decendantsby default shine through the boxes of decendants
– paddingpadding, , marginmargin and and borderborder properties properties» but they effect the placement of sub-elementsbut they effect the placement of sub-elements
(See CSS Box Model a bit later)(See CSS Box Model a bit later)
SDPL 2004 Notes 4.1: CSS 12
Inheritance (2/2)Inheritance (2/2)
Consider document fragmentConsider document fragment <chap><title>… </title><chap><title>… </title>
<section> … </section> <section> … </section></chap></chap>
and rulesand rules chap chap {{ font-size: 12pt; font-size: 12pt;
font-family: serif }font-family: serif } title title { font-size: 150% }{ font-size: 150% }
Now both Now both titletitle and and section section will be formatted will be formatted using a serif font, but using a serif font, but titletitle with a 50% larger font with a 50% larger font size size
SDPL 2004 Notes 4.1: CSS 13
CSS Box ModelCSS Box Model
Transcription maps document elements into Transcription maps document elements into nested rectangular boxes, which havenested rectangular boxes, which have– a core a core content areacontent area– optional surrounding optional surrounding marginmargin, , borderborder and and
paddingpadding areas areas– controlled by corresponding propertiescontrolled by corresponding properties
marginmargin, , borderborder and and paddingpadding,,and and widthwidth andand heightheight (last two most useful for scaling images) (last two most useful for scaling images)
SDPL 2004 Notes 4.1: CSS 14
Dimensional properties of boxesDimensional properties of boxes
________________________________________________________________________| margin (transparent) || margin (transparent) || _______________________________ || _______________________________ || | border | || | border | || | __________________________ | || | __________________________ | || | | padding | | || | | padding | | || | | _____________________ | | || | | _____________________ | | || | | | content | | | || | | | content | | | || | | |_____________________| | | || | | |_____________________| | | || | |__________________________| | || | |__________________________| | || |_______________________________| || |_______________________________| ||____________________________________||____________________________________| | content width || content width || box width || box width |
SDPL 2004 Notes 4.1: CSS 15
CSS1 Properties (2/2)CSS1 Properties (2/2)
Box properties:Box properties:
widthwidth, , heightheight, , floatfloat, , clearclear;;
marginmargin, (, (-top-top//-right-right//-bottom-bottom//-left-left););
paddingpadding, (, (-top-top//-right-right//-bottom-bottom//-left-left););
border-widthborder-width, (, (-top--top-//-right--right-//-bottom--bottom-//-left--left-););
border-colorborder-color, , border-styleborder-style;;
borderborder, (, (-top-top//-right-right//-bottom-bottom//-left-left););
SDPL 2004 Notes 4.1: CSS 16
Boxes: ExampleBoxes: Example
B o x fo r chapter
C o ntent fo r title
C o ntent fo r sectio n
padding
paddingm argin
m argin
m arginpadding
maximum of maximum of vertically vertically overlapping overlapping margins margins
SDPL 2004 Notes 4.1: CSS 17
Main types of elementsMain types of elements
Inline elements (Inline elements (display:inlinedisplay:inline))– default; can occur on the same line with other default; can occur on the same line with other
elements; e.g., elements; e.g., EM EM in HTMLin HTML Block-levelBlock-level
– formatted as boxes separated by line breaksformatted as boxes separated by line breaks» default formatting of, e.g., default formatting of, e.g., P,H1,H2P,H1,H2 in HTMLin HTML
– specified by specified by display:blockdisplay:block– display:list-item display:list-item
block preceded by list-item markerblock preceded by list-item marker Element suppressionElement suppression: : display:nonedisplay:none
SDPL 2004 Notes 4.1: CSS 18
CSS Selectors: SimpleCSS Selectors: Simple
Application of style rules determined by matching Application of style rules determined by matching selectors to elements of the document treeselectors to elements of the document tree
Element type name, e.g. Element type name, e.g. P P oror H1 H1– matches any instance of the element typematches any instance of the element type
CSS2 adds CSS2 adds – a universal selector a universal selector ** matching any element matching any element– tests for attributes:tests for attributes:figfig[[filefile=="fig1.jpg""fig1.jpg"]]: :
figure with given value for attribute figure with given value for attribute filefile*[*[filefile=="fig1.jpg""fig1.jpg"]]: :
any element with that value for attributeany element with that value for attribute filefilefigfig[[filefile]]: : element element figfig with attribute with attribute file file
SDPL 2004 Notes 4.1: CSS 19
CSS Selectors: ContextualCSS Selectors: Contextual
Element inclusion by listing simple selectors Element inclusion by listing simple selectors for ancestorsfor ancestors– e.g: items in ordered lists in paragraphs:e.g: items in ordered lists in paragraphs:
P OL LI P OL LI { … }{ … } CSS2 addsCSS2 adds
– direct inclusion: direct inclusion: Parent Parent >> Child Child– conditions on siblings:conditions on siblings:E E ++ A: A: element element A A preceded by an element preceded by an element
satisfying selector satisfying selector E EBB:first-child:first-child: :
B B as the first element childas the first element child
SDPL 2004 Notes 4.1: CSS 20
Examples of CSS2 SelectorsExamples of CSS2 Selectors
Don’t indent a Don’t indent a PP immediately following immediately following MATHMATH::MATH MATH ++ P P { text-indent: 0 }{ text-indent: 0 }
Reduce vertical space btw an Reduce vertical space btw an H1H1 and an and an H2H2 immediately following it:immediately following it:
H1 H1 ++ H2 H2 { margin-top: -5mm }{ margin-top: -5mm } Don’t indent the first Don’t indent the first PP of a of a DIVDIV::
DIV DIV >> P P:first-child { text-indent: :first-child { text-indent: 0 }0 }
SDPL 2004 Notes 4.1: CSS 21
Counters and generated contentCounters and generated content
CSS1 restricted to adorning elements with CSS1 restricted to adorning elements with assigned style propertiesassigned style properties+ automatic numbering of list items on a single level+ automatic numbering of list items on a single level
CSS2 adds insertion of generated content CSS2 adds insertion of generated content before and after selected elementsbefore and after selected elements
Example: Example: – Number Number theoremtheorems within each s within each chapterchapter– Precede each theorem by "Precede each theorem by "TheoremTheorem" and its " and its
numbernumber– Follow the Follow the theoremtheorem by a little box by a little box
SDPL 2004 Notes 4.1: CSS 22
Generated content: ExampleGenerated content: Example
Style rules for the task:Style rules for the task:
chapter chapter { counter-reset: { counter-reset: theorCntrtheorCntr } }theoremtheorem:before {:before {
content: "content: "Theorem Theorem " " counter(counter(theorCntrtheorCntr) ") ". . ";";
counter-increment:counter-increment: theorCntr theorCntr;;font-weight: bold; }font-weight: bold; }
theoremtheorem:after { content: url(":after { content: url("box.gifbox.gif");"); float: right} float: right}
SDPL 2004 Notes 4.1: CSS 23
Inserting attribute valuesInserting attribute values
Also possible to include attribute values of the Also possible to include attribute values of the selected element in generated selected element in generated contentcontent using using attr(Name)attr(Name)
ExampleExample
Insert value of attribute Insert value of attribute ALTALT before before images:images:
IMGIMG:before { content: attr(:before { content: attr(ALTALT) }) }
SDPL 2004 Notes 4.1: CSS 24
Limitations of CSSLimitations of CSS
Limited transcription capabilitiesLimited transcription capabilities– limited transposition of elements limited transposition of elements
((float:leftfloat:left//rightright))– calls of parameterised formatting taskscalls of parameterised formatting tasks the major the major
transcription type supported transcription type supported In CSS1 context specification limited:In CSS1 context specification limited:
– no sibling or parent/child relationshipsno sibling or parent/child relationships– limited use of attributes (CSS1: only limited use of attributes (CSS1: only classclass))– CSS2 more powerful, but CSS2 more powerful, but
» no access to element’s children or contentno access to element’s children or content» unable to access targets of cross referencesunable to access targets of cross references
SDPL 2004 Notes 4.1: CSS 25
Limitations of CSSLimitations of CSS
Non-programmable Non-programmable – no decision structuresno decision structures– unable to store calculated quantitiesunable to store calculated quantities– non-extensiblenon-extensible– > relatively simple> relatively simple
Western-language orientation (left-to-right)Western-language orientation (left-to-right) XSL allows unrestricted transformations of XSL allows unrestricted transformations of
the document to precede a CSS-like the document to precede a CSS-like formattingformatting
SDPL 2004 Notes 4.1: CSS 26
Browser ImplementationsBrowser Implementations
CSS support in major browsers is rather discouragingCSS support in major browsers is rather discouraging (See, e.g., (See, e.g., http://www.ddj.com/webreview/style/http://www.ddj.com/webreview/style/))
– > full CSS not usable on the Internet> full CSS not usable on the Internet– (Almost) complete implementations of CSS1(Almost) complete implementations of CSS1
» Netscape Navigator 6Netscape Navigator 6 implements also most of CSS2 selectorsimplements also most of CSS2 selectors
» MS Internet Explorer 5 on Macintosh(!) MS Internet Explorer 5 on Macintosh(!) – MS policy of developing own extensions, instead of MS policy of developing own extensions, instead of
completing conformance with recommendations completing conformance with recommendations strongly criticisedstrongly criticised