CSS Introductie

Introductie

CSS (Cascading Style Sheets) wordt gebruikt voor de opmaak aspecten van HTML pagina’s. Aspecten als fonts, kleuren, afmetingen, maar ook gedragsaspecten zoals muisbeweging over een element (hoover) kunnen met CSS worden gestyled.
CSS is een taal die in de basis erg eenvoudig is en bestaat uit zogenaamde stijldefinities.
CSS stijldefinities kunnen aan HTML elementen direct worden toegevoegd met het “style” attribuut. Het beste worden ze echter opgenomen in aparte CSS bestanden.
Een CSS stijldefinitie bevat 2 delen: een stijlselector en een stijldeclarator:

stijlselector { stijldeclarator;}

  • Stijlselector : geeft aan op welk HTML element of verzameling elementen de stijldeclaratie betrekking heeft. Er zijn zeer veel manieren om selecties van soorten of specifieke elementen te maken.
  • Stijldeclarator : specificeert de visuele eigenschappen die worden toegepast. Daarbij wordt een CSS property en de waarde daarvoor gespecificeerd  bijv: “color:red;” en “font-family:Pristina;” Er zijn zeer veel CSS properties.

Stijlselector

Er wordt onderscheid gemaakt tussen

  • Element selector : refereert naar specifieke (soorten) HTML elementen
  • Attribuut selector : refereert naar specifieke (soorten) attributen van HTML elementen
  • Id selector: refereert naar specifieke elementen via de identifier van het element.
  • Class selector : refereert naar classes die als attribuut zijn toegevoegd aan HTML elementen

Element Selector

Er wordt verwezen naar een specifiek soort element. Bijv de volgende selector refereert naar het element <body> en specificeert de fontkleur rood voor alle daarin liggende teksten.

body {color:red;}

Elementen kunnen ook worden gecombineerd, bijv de volgende selector specificeert zowel <html> als <body> element:

html,body {height: 100%;}

De volgende conventies gelden voor element combinaties:

  • EL1 , EL2 : alle EL1 en alle EL2 elementen
  • EL1   EL2 : alle E2 elementen binnen EL1 elementen
  • EL1>EL2 : alle E2 elementen waarvan de vader een EL1 element is
  • EL1+EL2 : alle E2 elementen die direct achter het E1 element zijn geplaatst

Attribuut Selector

Er wordt verwezen naar elementen met een specifiek soort attribuut en attribuut waarde. Bijv de volgende selector refereert naar <img> elementen met het attribuut “align” met de waarde “left” en specificeert daarvoor een rechter marge van 10px .

img[align=”left”] { margin-right: 10px}

Een attribuut kan ook zonder element en zonder waarde worden gespecificeerd. Dan worden dus alle elementen met dat attribuut geselecteerd.

Class Selector

Er wordt verwezen naar classes die als attribuut zijn toegevoegd aan HTML elementen.
Class definities beginnen altijd met een punt :  “.class”.
Bijv. de volgende selector selecteert elementen met de class “.container”.

     .container {
        height: 100%;
        position:relative;
     }

De class “container” wordt als volgt voor een HTML element gedefinieerd:

<div id="container">   </div>

Class selector kan ook gecombineerd met een element, bijv “img.myclass {}”, waarbij elk <img> element met de class “myclass” wordt aangeduid.

Id Selector

Er wordt verwezen naar een specifiek HTML element via de Id van het element.
Id selectors beginnen altijd met een hash  : “#address”.
Bijv. de volgende selector selecteert het element met id “address”.

#address { color:white; background-color:black; }

Het id wordt als volgt gedefinieerd in het HTML element:

<input id="address">

Selector Combinaties

Verschillende stijl selectoren kunnen ook worden gecombineerd om een soort pad te vormen, bijv.

.speciaal ul a {}

Hierbij gaat het om alle <a> elementen binnen alle <ul> elementen binnen de class “.speciaal”. Let op: als de class “.speciaal” is gedefinieerd voor een <ul> element dan doet dat element zelf niet mee in bovenstaand voorbeeld. Alleen ul elementen die binnen het element liggen waarvoor de class is gedefinieerd doen mee.

Muis effecten (hover, visited etc.)

Na een class of attribuut selector kun je, na dubbele punt, een effect specificeren, bijv voor de class “.test” wordt hier effect “hover” gespecificeerd.

.test:hover {
background-color:black;
color:yellow;
}

In onderstaand voorbeeld wordt een Inputbox gehighlight (blauwe achtergrond met dubbel rode rand) als de cursor er in staat:

HTML:

<input name="searchword" id="ids" type="text" class="inputfocus" value="search..."/>

CSS:

.inputfocus {
   lenght:200px;
   border:1px solid;
}

.inputfocus:focus{
   border:2px double red;
   background-color:blue;
   color:green;
}

Mogelijke effecten:

  • active : Tekst of afbeelding waarop je klikt.
  • hover : Mouse-over effect: tekst of afbeelding waar je met muis overheen gaat
  • link : een link, voordat deze is bezocht
  • visited : een link, nadat deze is bezocht
  • focus : element wat is geselecteerd, bijv een Input waar cursor in staat
  • after : effect komt na afsluitende element tag
  • before : effect komt voor afsluitende element tag
  • first-child : effect bij eerst voorkomende element met een class, id of tag.
  • first-letter : effect bij eerste karakter van elk element met een class, id of tag
  • first-line : Effect bij eerste regel van elk element met een class, id of tag

Voor een uitgebreide toelichting op alle mogelijke selectors zie :

http://www.w3schools.com/cssref/css_selectors.asp

CSS Locaties

Voor locatie van de CSS stijldefinitie zijn 3 opties mogelijk:

Optie 1: Inline
de CSS Stijldefinities worden per HTML element gespecificeerd.

<p style=”color:sienna;margin-left:20px”>BlaBlaBla</p>

Optie 2: Interne Stijldefinitie (in HEAD)
de CSS Stijldefinities worden gespecificeerd in de head.

<head>
  <style type=”text/CSS”>
    body {font-family:Pristina;}
    p1 {text-align:center; color:red; }
  </style>
</head>

Optie 3: Externe Stijldefinitie (in CSS bestand)
de CSS Stijldefinities worden gespecificeerd in een apart CSS bestand. In de head wordt middels een link hiernaar gerefereerd:

<head>
  <link rel="stylesheet" href="/css/my.css" type="text/css" />
</head>

Het CSS bestand “my.css” bevat dan de stijl definities per type HTML tag:

body {
   font-family: Pristina;
}

p1 {
   color:red;
}

Cascading

De 3 mogelijke locaties van stijldefinities kunnen ook tegelijkertijd worden toegepast en daarbij voor één element verschillende stijlen definiëren. Omdat deze verschillende stijlen kunnen conflicteren moet er een mechanisme zijn dat bepaalt welke stijl uiteindelijk wordt aangehouden. Bij CSS heet dat mechanisme “cascading” waarbij meer specifieke selectors prioriteit hebben boven minder specifieke selectors. De volgorde van afnemende specificiteit is daarbij:

1. Inline stijl,
2. Interne/Externe stijl via ID-selector
3. Interne/Externe stijl via CLASS-selector
4. Interne/Externe stijl via Element-selector.

Wanneer twee of meer selectors dezelfde stijlen verschillend specificeren, dan wordt de stijl aangehouden, die in de verschillende interne stijlblokken of externe stijlbladen als laatste is gedefinieerd.

Overerving

Bij een groot aantal eigenschappen wordt de stijl van een parent element geërfd door elementen van een lager niveau. Het BODY element tekst kleur stijlregel geldt ook voor elementen als P, PRE, en UL.
Om dit te voorkomen moet je voor lagere niveau elementen een nieuwe stijl definiëren.

Boxmodel

Een belangrijk concept is het CSS box model. Elk element is ingebed in het box model waarbij de begrippen in de volgende figuur een rol spelen:

  • Content : de feitelijke inhoud zoals teksten, figuren.
  • Padding: de ruimte die om de content heen wordt gemaakt tot de border.
  • Border: de rand om de content + padding heen. Deze kan zichtbaar zijn of niet
  • Margin: de ruimte om de box heen. Deze is altijd transparant.

Dit model wordt ingevuld met CSS properties, bijv:

{ width:250px;
  padding:10px;
  border:5px solid gray;
  margin:10px;
}

In dit geval wordt de totale breedte 300px. Want de properties tellen allemaal op:
250 + 2x border + 2x padding + 2x margin.

De gekleurde breedte is 280, want de margin wordt niet gekleurd.

This entry was posted in CSS and tagged , . Bookmark the permalink.

Geef een reactie

Je e-mailadres wordt niet gepubliceerd.

De volgende HTML tags en attributen zijn toegestaan: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>