CSS. CSS - Inleiding. Scheiding van inhoud en vorm

Transcriptie

1 CSS <cursus> <hoofdstuk> <titel>opmaken met Cascading stylesheets</titel> <deel>inleiding</deel> <deel>style sheet declaratie</deel> <deel>stijl declaratie</deel> <deel>stijl eigenschappen</deel> <deel>commentaar</deel> <deel>css contra s</deel> <deel>css On the web</deel> <deel>opgave</deel> </hoofdstuk> </cursus> <p>1</p> 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 : wat gebruik je wanneer. <p>2</p> 1

2 CSS - Inleiding CSS is geschreven in zijn eigen niet-xml taal Specifieert de opmaak van de tags Historiek 1996 : CSS1(CSS, level1), : 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 : <p>3</p> CSS - Inleiding <?xml version= = 1.0?> <?xml:stylesheet type="text/css" href="bach.css"?> <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE> INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 14pt } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 5px } <p>4</p> 2

3 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 <?xml:stylesheet type= text/css href= styles.css?> Bevat Stijlen voor elementen Stijlen voor attributen CSS commentaar <p>5</p> 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) <p>6</p> 3

4 CSS - Stijleigenschappen CSS properties Lettertype font A shorthand property for setting all of the properties for a font in one declaration font-style, font-variant, fontweight, font-size/lineheight, font-family font-family A prioritized list of font family names and/or generic family names for an element family-name, genericfamily. Ex. Arial font-size Sets the size of a font xx-small, x-small, small, medium, large, x-large, xxlarge, smaller, larger, length,% font-style Sets the style of the font Normal, italic, oblique font-variant Displays text in a small-caps font or a normal Normal, small-caps font font-weight Sets the weight of a font Normal,bold, bolder, lighter, 100, 200, 300, 400,... <p>7</p> CSS - Stijleigenschappen Tekst Property Description Possible Values color Sets the color of a text color letter-spacing Increase or decrease the space between characters Normal, length(nbr of pixels) text-align Aligns the text in an element Left, right, center text-decoration Adds decoration to text None, underline, overline, line-through, blink text-indent Indents the first line of text in an element 0,Length(nbr of pixels), % text-transform Controls the letters in an element None, capitalize, uppercase, lowercase white-space Sets how white space inside an element is Normal, pre, nowrap handled word-spacing Increase or decrease the space between words Normal, length (nbr of pixels) <p>8</p> 4

5 CSS - Stijleigenschappen Achtergrond background A shorthand property for setting all background properties in one declaration background-color, 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 image top left, top center, top right, 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 <p>9</p> CSS - Stijleigenschappen Randen border A shorthand property for setting all of the properties for the four borders in one declaration border-width, border-style, border-color border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration Repeat, repeat-x, repeaty,no-repeat border-bottomwidth,border-style, bordercolor border-bottom-color Sets the color of the bottom border border-color border-bottom-style Sets the style of the bottom border border-style border-bottom-width Sets the width of the bottom border Thin, medium,thick,length border-color Sets the color of the four borders, can have from one to four colors Color border-style border-width Sets the style of the four borders, can have from one to four styles A shorthand property for setting the width of the four borders in one declaration, can have from one to four values None, hidden,dotted, dashed, solid, double, groove,ridge,inset,outset Thin, medium, thick, length Border-left, border-right, border-top : idem als border-bottom <p>10</p> 5

6 CSS - Stijleigenschappen Padding padding A shorthand property for setting all of the padding properties in one declaration padding-top, paddingright, paddingbottom,padding-left padding-bottom Sets the bottom padding of an element Length, % padding-left Sets the left padding of an element Length, % padding-right Sets the right padding of an element Length, % padding-top Sets the top padding of an element Length, % <p>11</p> CSS - Stijleigenschappen Marges margin A shorthand property for setting the margin margin-top, margin-right, properties in one declaration margin-bottom, margin-left margin-bottom Sets the bottom margin of an element Auto, length, % margin-left Sets the left margin of an element Auto, length, % margin-right Sets the right margin of an element Auto, length, % margin-top Sets the top margin of an element Auto, length, % <p>12</p> 6

7 CSS - Stijleigenschappen Afstand en ruimte height Sets the height of an element Auto, length,% line-height Sets the distance between lines Normal,number,length,% max-height Sets the maximum height of an element None, length, % max-width Sets the maximum width of an element None, length, % min-height Sets the minimum height of an element Length, % min-width Sets the minimum width of an element Length, % width Sets the width of an element Auto, %, length <p>13</p> CSS - Stijleigenschappen Classificatie display Controls display of element block, inline, list-item float Sets where an image or a text will appear in Left, right, none another element position Places an element in a static, relative, absolute or fixed position Static, relative, absolute, fixed visibility controls visibility of element inherit, visible, hidden white-space white-spacing formatting normal, pre, nowrap <p>14</p> 7

8 CSS - Stijleigenschappen Plaatsing bottom Sets how far the bottom edge of an element is Auto, %, length above/below the bottom edge of the parent element clip Sets the shape of an element. The element is Shape, auto clipped into this shape, and displayed left Sets how far the left edge of an element is to Auto, %, length the right/left of the left edge of the parent element overflow Sets what happens if the content of an element Visible, hidden, scroll,auto overflow its area right Sets how far the right edge of an element is to Auto,%,length the left/right of the right edge of the parent element top Sets how far the top edge of an element is Auto,, %,length above/below the top edge of the parent element vertical-align Sets the vertical alignment of an element Baseline, sub,super, top, z-index Sets the stack order of an element Auto, number <p>15</p> CSS - Stijleigenschappen Tabellen border-collapse Sets the border model of a table Collapse, separate Sets the distance between the borders of length length border-spacing adjacent cells (only for the "separated borders" model) Sets the position of the caption according to the Top, bottom, left, right caption-side table Sets whether cells with no visible content Show, hide should have borders or not (only for the empty-cells "separated borders" model) table-layout Sets the algorithm used to lay out the table Auto, fixed <p>16</p> 8

9 CSS - Commentaar Commentaar /* commentaar */ <p>17</p> 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 Oplossing : XSL <p>18</p> 9

10 CSS - Opgave Maak de CSS voor het bestand cd_catalogus.xml <?xml version="1.0" encoding="utf-8"?> <boekenlijst> <boek> <titel isbn=" ">het grote Office 2000 boek</titel> <auteur> <voornaam>helmut</voornaam> <naam>vanhaegen</naam> </auteur> <auteur> <voornaam>helmut</voornaam> <naam>kraus</naam> </auteur> <uitgever>easy Computing</uitgever> <prijs munt="dollar">20</prijs> </boek> <boek> <titel isbn=" ">de beste Office 2000 geheimen</titel> <auteur> <voornaam>hohann</voornaam> <voornaam>christian</voornaam> <naam>hanke</naam> </auteur> <uitgever>easy Computing</uitgever> <beschrijving>tips voor alle Office programma's</beschrijving> <prijs>25</prijs> </boek> <p>19</p> CSS On the web W3C CSS Specificaties : W3C CSS Validator : CSS Tutorial : <p>20</p> 10