ࡱ > q s p ` ! jbjb *4 d d { p p p 8 . , s ^ f | ( +s -s -s -s -s -s -s , v R dx p Ys p Ys ! ns ! ! ! v 8 p +s ! 4 " +s ! ! k X p +s Z 2O o F +s s 0 s ao x ! x +s ! p CSS Visuele opmaak van HTML CSS staat voor Cascading Style Sheets. CSS is een webstandaard en wordt gebruikt om HTML visueel vorm te geven. De opmaak staat dan in een los bestand (bijvoorbeeld opmaak.css) en is volledig gescheiden van de content. Een van de grote voordelen hiervan is dat de vormgeving van de gehele site centraal aanpasbaar is. Een ander groot voordeel is dat je vormgeving media-afhankelijk kan zijn: dezelfde site ziet er op een pda, een tv, een computer of geprint telkens anders uit. Bekijk HYPERLINK "http://www.csszengarden.com" www.csszengarden.com in de browser Firefox. Kies uit de verschillende stylesheets, of bekijk de pagina zonder stylesheet. Een voorbeeld van een CSS-instructie in gewone taal Als voorbeeld maken we alle paragrafen van de site als volgt: zonder witregel vooraf, lettertype Verdana, interlinie 1.6 x de fontgrootte, de letters zijn grijs en 0.85 em groot. Dit wordt in de css in code als volgt opgeschreven: p { margin-top:0; font-family:Verdana; line-height:1.6; color:grey; font-size:0.85em; } Alle paragrafen in de site zullen dan deze vormgeving krijgen. Als je iets verandert, bijvoorbeeld de kleur naar rood, veranderen alle paragrafen van de hele site. Op dezelfde manier worden ook de koppen H1 t/m H6 gedefinieerd. Ook alle andere onderdelen van de site worden zo vormgegeven, zoals de indeling in kolommen, de plaats en afmetingen van het menu, et cetera. Verschillende CSS op dezelfde site Door een ander stylesheet te kiezen kun je dezelfde site met een druk op de knop volledig aanpassen. Denk hierbij aan: Een knop voor grotere letters Een knop print die een aangepaste vormgeving voor uitprinten gebruikt Een andere indeling van de site indien die op een PDA (of TV) wordt getoond Een versie zonder plaatjes Een versie voor een bepaalde browser Deze alternatieve versies van de site hoeven dus nooit gemaakt te worden. Ze worden automatisch uit de HTML opgebouwd met een andere vormgeving (een ander stylesheet). De investering in een gewijzigd stylesheet is eenmalig. Als de inhoud maar goed in HTML gestructureerd is! De syntax In de css staat bijvoorbeeld (let ook op de inspringers, niet verplicht maar wel overzichtelijk en handig): h1, h2, h3, h4, #menu li { font-size: 175%; text-transform: uppercase; color: yellow} h1 is de selector en zijn properties staan tussen {}. De properties staan tussen accolades {} gescheiden met een punt-komma ; Je kunt selectors groeperen door er een komma tussen te zetten: h1, h2 {} Als je in plaats van een komma een spatie zet betekent het wat anders: #menu li betekent dan: een li die BINNEN iets met id=menu staat. Mogelijke selectors De selector kan een HTML-element zijn, zoals p, h1, img et cetera. De selector kan een custom class zijn, daarvan mag je zelf de naam kiezen, er moet dan wel een punt voor staan. .rodeletters {color:red} De selector kan een unieke id zijn, daarvan mag je zelf de naam kiezen, er moet dan een hekje voor staan, en een id kan maar 1x aangeroepen worden in de HTML. #menu {width: 100px} De selector kan een pseudeo-class zijn, zoals de staat van links:, er staat dan een dubbele punt a:link, a:hover {text-decoration:none} /*let ook op de volgorde: LoVe HAte*/ a:hover, a:active {text-decoration:underline} /*anders werkt het niet*/ Je kan commentaar toevoegen zoals hierboven, tussen deze tekens: /* */ Je kan CSS op drie plekken definieren Inline: direct in de code, toegevoegd aan een willekeurige tag: bijvoorbeeld
De opmaak geldt dan alleen voor de betreffende tag in de head: nu geldt de opmaak alleen voor de huidige pagina extern: in een apart .css bestand; nu geldt de opmaak voor de hele site. Gebruik bij voorkeur altijd een extern stylesheet. Inhoud en vormgeving worden zo gescheiden en de vormgeving van de gehele site is centraal aanpasbaar. Wat is Cascading? Cascading betekent dat dat wat de browser als laatste inleest de vorige stijl overruled. Een voorbeeld: In het externe css staat dat elke paragraaf voorafgegaan wordt door een witregel (een marge boven ofwel margin-top:1em). Als je nu toch een bepaalde paragraaf zonder deze marge wil, kun je dat als volgt in de pagina toevoegen:
De browser leest dan eerst de algemene externe css (want die staat bovenaan, in de head) en later pas deze handmatige stijl, die de vorige stijl overruled. Alle andere eigenschappen van de p blijven wel bewaard, zoals de kleur, want die worden niet overruled. CSS positioning CSS kun je gebruiken om de pagina in te delen in blokken. In HTML zou je dat met tabellen kunnen doen, maar dat is trager, lastiger qua code en onderhoud, het voordeel van meerdere stylesheets voor verschillende media vervalt, en het voordeel van centraal aanpassen vervalt, zodat je niet meer duizenden paginas in een keer kunt wijzigen. Deel je pagina op in blokken, en baken die blokken in de HTML-code af met de code