Stylesheets

Stylesheets (CSS)

Stylesheets zijn kleine stukjes HTML die je tussen de <HEAD> tags van je pagina plaatst. Deze hebben een hele grote invloed op het uiterlijk van je Website.
Hierin kun je bepalen wat voor lettertype je gebruikt, de achtergrondafbeelding(en), het uiterlijk van de links etc.
Als je dus een keer de lay out van je site wilt veranderen, besparen stylesheets je een hoop werk.

Ik zal hier wat voorbeelden plaatsen en zo proberen je het één en ander duidelijk te maken over stylesheets.
Je kunt de voorbeelden natuurlijk ook zo in je pagina plakken en vervolgens je voorkeuren aanpassen.

De achtergrond

Heb je het ook wel eens? dan heb je een hele mooie grafische achtergrondafbeelding gemaakt,
je plaats hem als achtergrond en je ziet de zelfde afbeelding een 50 keer op je pagina verschijnen.
Dat is nu net niet wat je bedoelde.
Je kunt er met stylesheets bijvoorbeeld voor zorgen dat je één rij met die afbeelding horizontal of verticaal over je pagina laat lopen.

Dit zijn de attributen die je daarvoor kunt gebruiken (bij de positie) :

  • no-repeat  = Dit zorgt ervoor dat je afbeelding maar 1 keer verschijnt op werkelijke grootte in de linker bovenhoek van de pagina.
  • repeat-y = Dit zorgt ervoor dat de afbeeldingen verticaal naast de linkerrand geplaatst worden.
  • repeat-x = Dit zorgt ervoor dat de afbeeldingen horizontaal over je pagina gaan

    Gekleurde scrollbar

    Gekleurde scrollbars zijn op het moment echt een rage, het nadeel hiervan is dat ze alleen zichtbaar zijn met internet explorer 5.5 en hoger.


Geen onderstreepte links (IE 5.5 + )

Verandering van kleur als je over een link gaat met de pijl van de muis (mouse-over)
  • link= de gewone link
  • visited= als de linkt al eens aangeklikt is
  • hover= als je erover gaat met de pijl vd muis


Als je nu de links wel onderstreept wilt, verander je bij text decoration none in underline


Gekleurde tekst als je er met de pijl van de muis overgaat (dus dat hoeven geen links te zijn)

Dit is een VOORBEELD dat de kleur verander met een mouse over zonder link