Cascading Style Sheets 2009

Cascading Style Sheets CSS basics CSS 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 linktype

W3C “ 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. ”

NOOT Bij 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 DIV SIDEBAR 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