Meer over styles

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:31.203Reacties: 12(Bekijken)
  Log in om zelf te reageren
 Waardering:7/10 (3 stemmen)

Uitgebreide cursus CSS» Inleiding: wat is CSS? | Linked stylesheets | Embedded stylesheets | Inline stylesheets | Je eigen styles maken | Meer over styles | Tekst en CSS | Achtergronden met CSS




Links omschrijf je in CSS als volgt

#Code
1
2
3
4
5
6
7
8
a:link { 
font-size: 11pt; color: blue; text-decoration: underline;}
a:visited {
font-size: 11pt; color: black; text-decoration: none;}
a:hover { 
font-size: 11pt; color: red; text-decoration: underline;}
a:active {
font-size: 11pt; color: black; text-decoration: underline;}

Dat is even heel wat informatie, we zullen het eerst bespreken. a.link geeft aan dat als we te maken hebben met een link, dus alles wat tussen <a href="blabla"> en </a> staat, 11 punten groot moet zijn, de kleur blauw moet zijn en dat er een streepje onder moet zitten. dat laatste geven we aan met text-decoration: underline;

Vervolgens zie je a.visited, a.over en a.active. De eerste geeft een link aan die door de bezoeker al eens bezocht is, de tweede geeft aan wat er moet gebeuren als je met je muis over de link zweeft (zweven=to hover) en de derde geeft de eigenschappen van een link aan die is aangeklikt. Let op: de vier linkproperties moeten altijd in deze volgorde worden gebruikt, omdat anders het effect van hover en active verdwijnen!

Verder kunnen we zo'n beetje iedere tag wel een een style meegeven. Bij de body kan dat ook, hier kunnen we wat meer mee dan met gewone tags. Ten eerste kun je door
#Code
1
2
body{
font-size: 11pt; color: black;}

op te geven alle tekst die niet binnen een <p> of een ander attribuut staat een kleur, grootte en dergelijke meegeven.

Ten tweede, en nu wordt het leuk, kunnen we de randen van de pagina opgeven. Zoals je ook op deze site ziet, is er links een witte rand. Wil je boven geen rand, dan kun je dat ook opgeven. Dit kan overigens ook in HTML, maar we leren het je nu in een stylesheet te doen.

#Code
1
2
3
4
5
body { 
margin-left:0.5%;
margin-right:0.5%;
margin-bottom:0.5%;
margin-top:0%;}

Dit spreek allemaal voor zich, maar toch nog even: left is de linkerkant, right de rechter, bottom is de onderkant en top, je raadt het nooit, de bovenkant. Verder kun je de marges opgeven in pixels maar ook zoals hierboven in procenten. Pixels doe je door bijvoorbeeld margin-left: 2px;.

De margins kun je ook bij andere elementen gebruiken, zoals de <p>-tag. Dan krijg je een soort inspring-effect. Je kunt op de pixel nauwkeurig bepalen waar de tekst begint. Dit is met HTML onmogelijk.

«Je eigen styles maken Tekst en CSS »

12 reacties
Lucvg Geplaatst op 04-05-2010 om 09:24
 

Regular
Met deze tutorial kon ik mijn nieuwe project beginnen. Heel duidelijk, bedankt!
baske123 Geplaatst op 19-04-2009 om 13:36
 

Regular
kan je er ook voor zorgen dat de randen van de pagina een andere kleur hebben?
baske123 Geplaatst op 19-04-2009 om 12:27
 

Regular
kan je er ook voor zorgen dat de randen van de pagina een andere kleur hebben?
ThePlague Geplaatst op 25-04-2007 om 20:49
 

Regular
waarschijnlijk wel
Susanh Geplaatst op 24-01-2007 om 17:24
 

Regular
Jeej.. dit is zo duidelijk! Geweldig!
En toch heb ik nog een vraagje:
Werkt font-family ook in body??

Alvast bedankt!
Susan.

Pagina 1 2 3 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder