CSS <cursus>
Opmaken met Cascading stylesheets <deel>Inleiding <deel>Style sheet declaratie <deel>Stijl declaratie <deel>Stijl eigenschappen <deel>Commentaar <deel>CSS – contra’s <deel>CSS – On the web <deel>Opgave CSS
1
CSS - Inleiding • Scheiding van inhoud en vorm • XML: data-inhoud • Presentatietechnologieën • CSS (Cascading Style Sheets) – Idem als voor HTML – Definieert hoe elk element moet worden opgemaakt • XSL (Extensible Stylesheet Language) – Biedt veel meer mogelijkheden – Elementen kunnen in een andere volgorde geplaatst worden, getransformeerd worden,... • Zie http://www.w3.org/Style/Css-vs-XSL.html : wat gebruik je wanneer.
CSS
2
1
CSS - Inleiding • CSS is geschreven in zijn eigen niet-XML taal • Specifieert de opmaak van de tags • Historiek • 1996 : CSS1(CSS, level1), http://www.w3.org/TR/REC-CSS1 • 1998 : CSS2, http://www.w3.org/TR/REC-CSS2
• Bestaat uit properties met geassocieerde waarden slides {display: block; font-family: Times;} • Voor alle elementen "slides" de property "display" is ingesteld op "block" di de standaard paragraaf style • En het gebruikte font : "Times“
• On the web : http://www.w3.org/Style/styling-XML.html
CSS
3
CSS - Inleiding
Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 14pt } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 5px }
CSS
4
2
CSS – Style Sheet declaratie • Style Sheet Declaratie • Externe stylesheet • Een tekstbestand met extensie .css • In XML bestand verwijs je naar CSS direct onder de declaratie • Bevat • Stijlen voor elementen • Stijlen voor attributen • CSS commentaar
CSS
5
CSS – Stijl declaratie • Stijl declaratie • CSS rule : aanmaken voor de elementen in XML document Selector {eigenschap:waarde;eigenschap:waarde}
• Kenmerken kunnen gegroepeerd worden element1, element2 {eigenschap:waarde;eigenschap:waarde}
• Kenmerken kunnen geërfd worden • De stijl van de parent-element wordt geërfd door een child element, tenzij een child-element zijn eigen stijldeclaratie heeft • Onthou : “General rules are placed first and overridden where
necessary with more specific rules” • Attribute selectors
Published[publisher=“Harmony Books”]{color:red;}
• In XML is witruimte belangrijk • Dus je dient in CSS mee te geven welke elementen voorafgegaan worden door een nieuwe lijn {display:block} en welke niet {display:inline} (is de default)
CSS
6
3
CSS - Stijleigenschappen • CSS properties • Lettertype Property font
Description A shorthand property for setting all of the properties for a font in one declaration
font-family
A prioritized list of font family names and/or generic family names for an element Sets the size of a font
font-size
font-style font-variant
Sets the style of the font Displays text in a small-caps font or a normal font Sets the weight of a font
font-weight
Values font-style, font-variant, fontweight, font-size/lineheight, font-family family-name, genericfamily. Ex. Arial xx-small, x-small, small, medium, large, x-large, xxlarge, smaller, larger, length,% Normal, italic, oblique Normal, small-caps Normal,bold, bolder, lighter, 100, 200, 300, 400,...
CSS
7
CSS - Stijleigenschappen • Tekst Property color letter-spacing text-align text-decoration
Description Sets the color of a text Increase or decrease the space between characters Aligns the text in an element Adds decoration to text
text-indent text-transform
Indents the first line of text in an element Controls the letters in an element
white-space
Sets how white space inside an element is handled Increase or decrease the space between words Normal, length (nbr of pixels)
word-spacing
CSS
Possible Values color Normal, length(nbr of pixels) Left, right, center None, underline, overline, line-through, blink 0,Length(nbr of pixels), % None, capitalize, uppercase, lowercase Normal, pre, nowrap
8
4
CSS - Stijleigenschappen • Achtergrond Property background
Description Values A shorthand property for setting all background background-color, properties in one declaration background-image, background-repeat, background-attachment background-position background-attachment Sets whether a background image is fixed or Scroll, fixed scrolls with the rest of the page background-color Sets the background color of an element color-rgb, color-hex, colorname, transparent background-image Sets an image as the background url, none background-position Sets the starting position of a background top left, top center, top right, image center left, center center, center right, bottom left, bottom center,bottom right, x-% y-% , x-pos y-pos background-repeat
Sets if/how a background image will be repeated
Repeat, repeat-x, repeaty,no-repeat
CSS
9
CSS - Stijleigenschappen • Randen Property border
border-bottom
border-bottom-color border-bottom-style border-bottom-width border-color border-style
border-width
Description A shorthand property for setting all of the properties for the four borders in one declaration A shorthand property for setting all of the properties for the bottom border in one declaration Sets the color of the bottom border Sets the style of the bottom border Sets the width of the bottom border Sets the color of the four borders, can have from one to four colors Sets the style of the four borders, can have from one to four styles
Values border-width, border-style, border-color border-bottomwidth,border-style, bordercolor border-color border-style Thin, medium,thick,length Color
None, hidden ,dotted, dashed, solid, double, groove,ridge,inset,outset A shorthand property for setting the width of the Thin, medium, thick, length four borders in one declaration, can have from one to four values
• Border-left, border-right, border-top : idem als border-bottom
CSS
10
5
CSS - Stijleigenschappen • Padding
Property padding
Description A shorthand property for setting all of the padding properties in one declaration
padding-bottom padding-left padding-right padding-top
Sets the bottom padding of an element Sets the left padding of an element Sets the right padding of an element Sets the top padding of an element
Values padding-top, paddingright, paddingbottom,padding-left Length, % Length, % Length, % Length, %
CSS
11
CSS - Stijleigenschappen • Marges
Property margin
Description A shorthand property for setting the margin properties in one declaration
Values margin-top, margin-right, margin-bottom, margin-left
margin-bottom margin-left margin-right margin-top
Sets the bottom margin of an element Sets the left margin of an element Sets the right margin of an element Sets the top margin of an element
Auto, length, % Auto, length, % Auto, length, % Auto, length, %
CSS
12
6
CSS - Stijleigenschappen • Afstand en ruimte
Property height line-height max-height max-width min-height min-width width
Description Sets the height of an element Sets the distance between lines Sets the maximum height of an element Sets the maximum width of an element Sets the minimum height of an element Sets the minimum width of an element Sets the width of an element
Values Auto, length,% Normal,number,length,% None, length, % None, length, % Length, % Length, % Auto, %, length
CSS
13
CSS - Stijleigenschappen • Classificatie
Property display float position visibility white-space
Description Controls display of element Sets where an image or a text will appear in another element Places an element in a static, relative, absolute or fixed position controls visibility of element white-spacing formatting
CSS
Values block, inline, list-item Left, right, none Static, relative, absolute, fixed inherit, visible, hidden normal, pre, nowrap
14
7
CSS - Stijleigenschappen • Plaatsing Property bottom
Description Sets how far the bottom edge of an element is above/below the bottom edge of the parent element Sets the shape of an element. The element is clipped into this shape, and displayed Sets how far the left edge of an element is to the right/left of the left edge of the parent element Sets what happens if the content of an element overflow its area Sets how far the right edge of an element is to the left/right of the right edge of the parent element Sets how far the top edge of an element is above/below the top edge of the parent element Sets the vertical alignment of an element Sets the stack order of an element
clip left
overflow right
top
vertical-align z-index
Values Auto, %, length
Shape, auto Auto, %, length
Visible, hidden, scroll,auto Auto,%,length
Auto,, %,length
Baseline, sub,super, top,… Auto, number
CSS
15
CSS - Stijleigenschappen • Tabellen Property border-collapse
border-spacing caption-side
empty-cells table-layout
Description Sets the border model of a table Sets the distance between the borders of adjacent cells (only for the "separated borders" model) Sets the position of the caption according to the table Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) Sets the algorithm used to lay out the table
CSS
Values Collapse, separate length length
Top, bottom, left, right Show, hide
Auto, fixed
16
8
CSS - Commentaar • Commentaar /* commentaar */
CSS
17
CSS – Contra’s • Nadelen van CSS • CSS is een client-side rendering proces, en je bent dus afhankelijk van de browser ondersteuning voor CSS • Stijlen kan je enkel toewijzen aan elementen, niet aan attributen. In CSS2 heb je conditionele verwerking o.b.v. inhoud attribuut. • Elk input element kan je maar 1 keer verwerken • De volgorde van het tonen van de elementen is dezelfde als in XML document • Rekenkundige of logische bewerkingen zijn onmogelijk • CSS kan ook geen extra elementen genereren, maar CSS2 kan extra tekst genereren of nummers voor of na een specifiek element. (zie http://www.w3.org/TR/Css2/generate.html)
• Oplossing : XSL
CSS
18
9
CSS - Opgave • Maak de CSS voor het bestand “cd_catalogus.xml”
Het grote Office 2000 boek Helmut Vanhaegen Helmut Kraus Easy Computing <prijs munt="dollar">20 De beste Office 2000 geheimen Hohann Christian Hanke Easy Computing Tips voor alle Office programma's <prijs>25
CSS
19
CSS – On the web • W3C CSS Specificaties : http://www.w3.org/Style/css • W3C CSS Validator : http://jigsaw.w3.org/css-validator • CSS Tutorial :http://www.w3schools.com/css/
CSS
20
10
