cascading style sheets 2009
TRANSCRIPT
Cascading Style Sheets
CSS basicsCSS in Macromedia
Dreamweaver
Wat zit er in deze les?
• Het wat en waarom van CSS• Tips• Link een externe style sheet aan een HTML
pagina.• CSS code: tag, class & ID selectors• lettertype en andere teksteigenschappen • stijlbepalingen voor links• kleur & achtergrond• kaders & blokken• CSS 2: positioneren
Wat is CSS?
• Cascading Style Sheets – een middel om stijlelementen aan web documenten
toe te voegen– “Cascade”: voorrangsregels
• Taakverdeling:
HTML = structural mark-up
CSS = presentational mark-up
–Paragrafen–Lijsten–Hoofdingen– …
–Lettertypes–Lettergrootte–Kleuren–Achtergrondbeelden– …
Waar zet je CSS?- 4 manieren -
• Link een externe stylesheet (= te verkiezen!)– Via de <link> tag binnen de <head> sectie van een
HTML document
• @import • embedded style sheet of ook document
style sheet– <style type=“text/css”> </style> element in de
body van je HTML document
• Inline Styles– via style attribuut <p style=“color:green;”> </p>
Voorrangsregels: de cascade
• wanneer er meerdere CSS bepalingen of regels (rules) gelden voor hetzelfde element
• hiërarchie van stijlbepalingen– volgens de bron van de regels
• bvb: inline styles krijgen voorrang op externe stylesheet
– naar volgorde van de regels• Binnen dezelfde stylesheet of een groep van stylesheets,
krijgen latere bepalingen voorrang op eerdere bepalingen met hetzelfde gewicht.
– naar de specificiteit van de regels• die is vastgelegd in een puntensysteem van 0 tot 100
– bvb: class (10) krijgt voorrang op een selector (1).– ID (specificiteit 100) krijgt voorrang op class (10)
• !important krijgt voorrang op alles
Hou overzicht!
• Om niet verstrikt te raken in de cascade :– gebruik 1 externe stylesheet
• Wanneer je al weet dat een deel van de stylesheet goed werkt: Hou de stylesheet bondig dmv– groeperen– shorthand
• Voeg commentaar tussen: – /* hier begint de stijl voor navigatie-items */
• Debuggen: pas telkens 1 element aan en kijk naar het resultaat in je browser.
Link externe style sheet aan html-pagina
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd">
<HTML> <HEAD> <LINK
rel="stylesheet" type="text/css" media=“screen” href=“mijnstyles.css">
</HEAD> <BODY>
<H1>Dit is een grote titel</H1> <P>Dit is een paragraaf.</P> </BODY></HTML>
• LINK tag : mag enkel binnen de <HEAD> sectie. Geeft een relatie met een document weer.
• attribuut REL : het linktypeW3C “This attribute describes the relationship from the current document to the anchor specified by the href attribute.” bvb: alternate stylesheet
• attribuut TYPE : =REQUIRED geeft stylesheet taal weer, altijd “text/css”
• attribuut MEDIA : W3C “This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is "screen". ”
• attribuut HREF : W3C “This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.”
NOOTBij een XHTML-document moet je /> toevoegen aan de link.
CSS comments
• komen voor in de stylesheet• worden door browsers genegeerd, net zoals
HTML comments• gebruik ze
– om je stylesheet in te delen – of om regels die je even niet wil gebruiken “uit” te
zetten.
• je kan comments niet nesten– Fout:/* als je comments probeert in elkaar te zetten /* op deze
manier */ gebeuren er ongelukken */
• Goed:/* =====vanaf hier begint navigatiestijl======== */
CSS code
• Regel (rule) structuur
h1 {color: green; }p {font-size: small;}.mijnclass {background: yellow;}#navigatie {border: 1pt green;}
declaration
selector {property: value; }
Spaties worden genegeerd in stylesheets
h1 {color: green; }
Doet hetzelfde als:
h1 {
color: green;
}
Voorbeelden
h1 {color: green; } /* Tag selector */
p {font: small Tahoma;} /* Tag selector. separate multiple keywords with spaces */
.mijnclass {background: yellow;} /* Class selector */
#navigatie {border: 1pt green;} /* ID selector */
declaration
selector {property: value; }
Selectors groeperen
selectorA {propertyX: valueY;}
selectorB {propertyX: valueY;}
selectorC {propertyX: valueY;}
=
selectorA, selectorB, selectorC {propertyX: valueY; }
H1, H2, H3 {color: blue;}
Declarations groeperen
selectorA {propertyX: valueY;}
selectorA {propertyZ: valueU;}
selectorA {propertyF: valueR;}
=
selectorA { propertyX: valueY; propertyZ: valueU; propertyF: valueR;}
Selectors én Declarations groeperen
P, H1, H2, H3 {color: gray;background: white;border: black 1px;font-family: Arial, sans-serif;
}P {
font-size: small;}
Class & ID selectors
• Class en ID worden toegevoegd aan markup.
• Je kan ze samen gebruiken op één element.
• Wanneer te gebruiken?– Om speciale gevallen te definiëren:
• Bv. Een groep links die de navigatie vormen, krijgen een bepaalde kleur en achtergrond.
• Bv. Een bepaalde kleur duidt belangrijke woorden of zinssneden aan.
Class selectors
• Hoe herken je een “class”?– In het document heeft een tag het
attribuut class=“”• Bv. <p class=“belangrijk”>Je moet dit hoofdstuk niet kennen voor het examen.</p>
– In de CSS staat er “.myclass”• Bv. .belangrijk { font-weight: bold; color: red; }
ID selectors
• Hoe herken je een “ID”?– In het document heeft een tag het
attribuut id=“myid”• Bv. <h1 id=“eerstetitel”>Welkom</h1>
– In de CSS staat er “#myid”• Bv. #eerstetitel { font-weight: bold; color: red; }
Verschil tussen classes en ID’s
• # of .• ID mag in hetzelfde document
maar één keer voorkomen.• Een ID weegt zwaarder door dan
een class.
Pseudo-classes
• Status-afhankelijk.• Wordt vooral gebruikt voor links
– A:link– A:visited– A:hover– A:active
• Voor veel browsers is de volgorde belangrijk (LVHA)
• Er zijn ook 2 pseudo-elements, of fictional tags, in CSS1– :first-letter Bv. H1:first-letter– :first-line Bv. P:first-line
Eenheden en waarden
• lengte-eenheden• kleurwaarden
Afmetingen• Absolute waarden
– in =inch (2,54 cm)– cm =centimeter– mm =millimeter– pt =point (typografische term)– pc =pica (typografische term)
• Relatieve waarden– em = de font-size waarde die gegeven of ingesteld is voor
een bepaald element.– ex = x-height = de hoogte van de x van een gegeven
lettertype (ex wordt zelden gebruikt)– % = percentage– px = pixels = afhankelijk van de resolutie en andere
scherminstellingen
Kleurwaarden
• Benoemde kleuren of Named Colors– grey, red, etc. (zie lijsten)
• Hexadecimale waarden (3 hexadecimale koppels)– voluit: #ef9966– verkort: #ffeecc wordt #fec
• RGB waarden (rood groen blauw licht)– percentages: wit = rgb(100%, 100%, 100%)– numeriek: wit = rgb(255,255,255)
lettertypes
• font-family: serif, sans-serif, [font naam]– bv. h1 {font-family: Arial, ‘Courier New’, sans-serif
}
• font-weight: normal, bold, bolder, lighter• font-size:
– relatief: x-small, small, smaller, larger, %– absoluut: [een maateenheid]
andere teksteigenschappen
• text-indent (met een maateenheid)• text-align (left, center, right, justify)• line-height• vertical-align• word-spacing• letter-spacing• text-transform (uppercase, lowercase,
capitalize)• text-decoration (none, underline, overline, line-
through)• font-variant: small-caps
stijlbepalingen voor links
• Zie “pseudo classes”
kleur & achtergrond
• color: voorgrondkleur• background-color• background-image• background-position• background-attachment
p {background-image: url(http://www.maerlant.be/img/bg_blue.gif
);background-repeat: no-repeat;background-position: top center;background-color: blue;color: white;}
kaders & blokken
http://www.w3.org/TR/REC-CSS2/box.html• padding• margin• border
CSS 2: positioneren
• het css-alternatief voor tabellen als basis voor bladschikking
• Struikelblok: IE’s interpretatie van het box model.
Browserbeperkingen
• Netscape: beperkte css ondersteuning in NS4
• Internet Explorer (IE): box model problem
• Mozilla of Firebird: zeer goede CSS ondersteuning
Division tags + CSS = layout
WRAPPER DIVSIDEBAR DIV
Maincontent div
HTML<div id="container">
<div id="sidebar">
<ul>
<li>Sidebar </li>
<li>ContentLorem ipsum </li>
</ul>
</div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,.</p>
</div>
</div>
HTML design view
Afgewerkt:
voorbereiding
• Maak een nieuwe folder• Definieer een nieuwe site in DW• Maak een nieuwe blanco HTML-
pagina• Zet er tekst in• Structureer die tekst:
– kleine list bovenaan– H1– Paragrafen