Upload
erv
View
30
Download
0
Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
SDPL 2005 Notes 4.1: CSS 1
4.1 CSS - Cascading Style Sheets4.1 CSS - Cascading Style Sheets
Overview of main ideas and essential Overview of main ideas and essential featuresfeatures
» 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 2005 Notes 4.1: CSS 2
CSS - Cascading Style SheetsCSS - Cascading Style Sheets
A stylesheet languageA stylesheet language– mainly to specify the representation of web pages mainly to specify the representation of web pages
by attaching style (fonts, colours, margins, …) to by attaching style (fonts, colours, margins, …) to HTML/XML documentsHTML/XML documents
– also used for "WYSIWYG" presentation in some also used for "WYSIWYG" presentation in some commercial XML editors, e.g., 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 2005 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 types: paged, aural different media types: paged, aural – 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 into 26 modules in 05/2001ongoing work; split into 26 modules in 05/2001
SDPL 2005 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 2005 Notes 4.1: CSS 5
CSS Style RulesCSS Style Rules
Example rules:Example rules:
H1 H1 {color: blue}{color: blue} /* blue text for 1st-level heads *//* blue text for 1st-level heads */ H1H1,,H2H2,,H3 H3 {font-style:bold;}{font-style:bold;}/* bold for alternative heads *//* bold for alternative heads */
.CODE .CODE {font-family: monospace; {font-family: monospace; color: red } color: red }
/* for all elems with class="CODE" *//* for all elems with class="CODE" */
SDPL 2005 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 2005 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 2005 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 2005 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 this ”Problems of this ”cascadingcascading” (” (porrastusporrastus))
» 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 2005 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, audio-synthesize, ...display, print, audio-synthesize, ...
SDPL 2005 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 2005 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 2005 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 2005 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 2005 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 2005 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 ofmaximum of(positive) (positive) vertically vertically adjoining adjoining margins margins
SDPL 2005 Notes 4.1: CSS 17
Main types of elementsMain types of elements
InlineInline elements ( 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 2005 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
CSS Level 2 adds ... CSS Level 2 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 2005 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 adds ...CSS2 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 2005 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 }(as a special case, a negative value is added to (as a special case, a negative value is added to
positive adjoining margin above)positive adjoining margin above) 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 2005 Notes 4.1: CSS 21
Counters and generated contentCounters and generated content
CSS1 restricted to assigning style properties CSS1 restricted to assigning style properties to elementsto elements+ numbering list items on a single level+ numbering list items on a single level
CSS2 adds counters, and generated content CSS2 adds counters, and generated content before and after elementsbefore and after 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 2005 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 2005 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 images: before images:
IMGIMG:before { content: attr(:before { content: attr(ALTALT) }) }
SDPL 2005 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 2005 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 2005 Notes 4.1: CSS 26
Browser ImplementationsBrowser Implementations
Browser implementations lag behind CSS specsBrowser implementations lag behind CSS specs – for a review (out-dated; 2001), see for a review (out-dated; 2001), see
http://www.ddj.com/webreview/style/http://www.ddj.com/webreview/style/– Netscape Navigator 6 supports most of CSS2 selectorsNetscape Navigator 6 supports most of CSS2 selectors
For more recent announcements, seeFor more recent announcements, seehttp://www.w3.org/Style/CSS/#browsershttp://www.w3.org/Style/CSS/#browsers
Full CSS usable, if at all, only in controlled Full CSS usable, if at all, only in controlled environments (intranets) with known browsers environments (intranets) with known browsers