Geplaatst: 8 mei 200619 jaren comment_411267 Hallo. In volgende tutorial zal ik de basisfuncties van CSS even uitleggen. Basis Waarom wordt CSS gebruikt? Om layouts te maken , om stijlen te definieren , ... . Nu denken jullie zeker en vast : 'Dit kan je met HTML ook.' Dit klopt , maar om het jezelf en andere webscripters gemakkelijk te maken gebruiken we CSS. Simpel voorbeeldje Jantje wil een pagina maken voor WikiGTA.com maar hij wil dat al zijn links een rode kleur hebben en niet onderlijnd zijn en als je er met je cursor over gaat dat de link oranje word en wel onderlijnd. Dit kan hij het beste doen met dit : ----BEGIN HTML CODE---- (wegens kleurtjes niet in codetags!) <html> <head> <style type="text/css"> a { font-color: red; text-decoration: none; } a:hover { font-color: orange; text-decoration: underline; } </style> </head> <body> Voor meer info kan je terecht op <a href="http://gtagames.nl">gtagames.nl</a>. </body> </html> ----EINDE HTML CODE---- (wegens kleurtjes niet in codetags!) Nu heeft Jantje bereikt wat hij wilde bereiken. We gaan de code even ontleden: 1..CSS wordt altijd tussen de <style type="text/css"> en de </style> tags geplaatst. 2. De properties (opties , eigenschappen) zetten we tussen { en }. 3.Eigenschappen Dit zijn de eigenschappen. Hieronder volgt een beknopte lijst van de meest gebruikte eigenschappen : font-color: uwkleur;==> uw tekst kleur geven. font-family: uwfont; ==> uw lettertype. font-size: 12px; height: 100px; uw div een hoogte geven. width: 100px; uw div een breedte geven. ...en zo bestaan er nog veel meer... Op http://www.w3schools.com/css/css_reference.asp staan ze bijna allemaal. ------------------------------------------------------------------------ Een eigen div creeeren. U kan ook een eigen div maken. Simpel voorbeeldje ----BEGIN HTML CODE---- (wegens kleurtjes niet in codetags!) <html> <head> <style type="text/css"> div#content { height: 200px; width: 400px; font-family: georgia; font-size: 8px; } </style> </head> <body> <div id="content"> Hallo , <br> Dit is mijn content vlak! </body> </html> ----EINDE HTML CODE---- (wegens kleurtjes niet in codetags!) Hieronder wordt nog de code ontleed. Dit is voor later . ------------------------------------------------------------------------ Een extern CSSbestand linken. Hoe kan ik een extern CSSbestand linken aan mijn HTML-pagina? Via dit stukje code : <link rel="stylesheet" type="text/css" href="uwsheet.css"> Wat plaats ik daar dan in? Alles wat u normaal tussen de <style> tags zet. Simpel Voorbeeldje <html> <head> <link rel="stylesheet" type="text/css" href="uwsheet.css"> </head> <body> Voor meer info kan je terecht op <a href="http://gtagames.nl">gtagames.nl</a>. </body> </html> Wat is dan bv. uw code in uw CSS bestand?(voorbeeld) <style type="text/css"> a { font-color: red; text-decoration: none; } a:hover { font-color: orange; text-decoration: underline; } </style> Dan bekomt u dezelfde output als uw bestand met uw CSS erin. To Do List Button m.b.v CSS Layout m.b.v. CSS ... Updates 08/05/06 : Extern CSS bestand linken op aanvraag. Bewerkt: 11 mei 200619 jaren door Nicsan
Geplaatst: 17 juni 200618 jaren Auteur comment_442813 Misschien door dit toe te voegen : height: 200px; width: 100px
Geplaatst: 17 juni 200618 jaren comment_442873 Eerste div groter maken ? leg uit aub... De eerste div, in jouw geval zo te zien <DIV class=Contentbg>, kan je breder maken zodat het wel past. Je hebt nu staan: .Contentbg { PADDING: 0px; BACKGROUND: #FFFFFF; MARGIN: 0px auto 0px auto; WIDTH: 600px; voice-family: inherit; text-align: left; } De width kan je groter maken, zodat het wel gaat passen.
comment_411267Hallo.
In volgende tutorial zal ik de basisfuncties van CSS even uitleggen.
Basis
Waarom wordt CSS gebruikt?
Om layouts te maken , om stijlen te definieren , ... .
Nu denken jullie zeker en vast : 'Dit kan je met HTML ook.'
Dit klopt , maar om het jezelf en andere webscripters gemakkelijk te maken gebruiken we CSS.
Simpel voorbeeldje
Jantje wil een pagina maken voor WikiGTA.com maar hij wil dat al zijn
links een rode kleur hebben en niet onderlijnd zijn en als je er met je cursor over gaat
dat de link oranje word en wel onderlijnd.
Dit kan hij het beste doen met dit :
----BEGIN HTML CODE---- (wegens kleurtjes niet in codetags!)
<html>
<head>
<style type="text/css">
a
{
font-color: red;
text-decoration: none;
}
a:hover
{
font-color: orange;
text-decoration: underline;
}
</style>
</head>
<body>
Voor meer info kan je terecht op <a href="http://gtagames.nl">gtagames.nl</a>.
</body>
</html>
----EINDE HTML CODE---- (wegens kleurtjes niet in codetags!)
Nu heeft Jantje bereikt wat hij wilde bereiken.
We gaan de code even ontleden:
1..CSS wordt altijd tussen de
en de
tags geplaatst.
2. De properties (opties , eigenschappen) zetten we tussen
{ en }.
3.Eigenschappen
Dit zijn de eigenschappen.
Hieronder volgt een beknopte lijst van de meest gebruikte eigenschappen :
...en zo bestaan er nog veel meer...
Op http://www.w3schools.com/css/css_reference.asp staan ze bijna allemaal.
------------------------------------------------------------------------
Een eigen div creeeren.
U kan ook een eigen div maken.
Simpel voorbeeldje
----BEGIN HTML CODE---- (wegens kleurtjes niet in codetags!)
<html>
<head>
<style type="text/css">
div#content
{
height: 200px;
width: 400px;
font-family: georgia;
font-size: 8px;
}
</style>
</head>
<body>
<div id="content">
Hallo , <br>
Dit is mijn content vlak!
</body>
</html>
----EINDE HTML CODE---- (wegens kleurtjes niet in codetags!)
Hieronder wordt nog de code ontleed. Dit is voor later
.
------------------------------------------------------------------------
Een extern CSSbestand linken.
Hoe kan ik een extern CSSbestand linken aan mijn HTML-pagina?
Via dit stukje code :
Wat plaats ik daar dan in?
Alles wat u normaal tussen de <style> tags zet.
Simpel Voorbeeldje
Wat is dan bv. uw code in uw CSS bestand?(voorbeeld)
<style type="text/css"> a { font-color: red; text-decoration: none; } a:hover { font-color: orange; text-decoration: underline; } </style>Dan bekomt u dezelfde output als uw bestand met uw CSS erin.
To Do List
Button m.b.v CSS
Layout m.b.v. CSS
...
Updates
08/05/06 : Extern CSS bestand linken op aanvraag.
Bewerkt: door Nicsan