Lists en custom bullets
Om voor een list ipv de standaard blokjes en circeltjes te zetten kun je ook een image nemen:
<UL STYLE="list-style-image: url(paw.gif)"> <LI>Bullet 1</LI> <LI>Bullet 2</LI> </UL>
- Bullet 1
- Bullet 2
Opacity rollover zonder CSS
1 van de weinige filters die in FF wel werkt is opacity en kan gebruikt worden voor een rollovereffect zonder JS
De CSS:
div.FilterUit {width: 100%; background-color: silver;border:1px solid
black; }
div.FilterAan {width: 100%; background-color: silver;opacity:.50;filter:
alpha(opacity=20); -moz-opacity: 0.5;border:1px solid black; }
De HTML:
<div class="FilterAan" style="width:50px;height:50px;"
onmouseover="this.className='FilterUit'"
onmouseout="this.className='FilterAan'" >
<a href="http://www.reizendooramerika.com"> <img src="no.gif" style="border:1px
solid black;" width="50" height="50"></a></div>
Met een paar van deze rollovers kan ook een menu samengesteld worden.
 |
|
 |
 |
Multicolor Links , of hoe de verschillende links andere kleuren en/of vormen kunnen aannemen door een class atribuut .
de CSS:
a.box:link {color: #ff0000; background: #ffffff; font-style: normal;text-decoration:none;}
a.box:active {color: #ff0000; background: #ffffff; font-style: normal;text-decoration:none;}
a.box:visited {color: #ff0000; background: #ffffff; font-style: normal;text-decoration:none;}
a.box:hover {color: #000; background: #ffffff; border:solid 1px
#000;text-decoration:none;}
de HTML bijv:
<a href="http://www.reizendooramerika.com" class="blue">Blauw Bold Link</a>
ink met een boxje en een kleurtje
Rollover zonder Javascript maar met CSS
de CSS:
a.image { /* definition of the "image" class in the <a> tag */
display: block; /* a tag must be a block */
width: 100px; /* width of reactive image */
height: 100px; /* height of reactive image */
background-image: url(schots.gif); /* source for start image */
background-repeat: no-repeat;
}
a.image:hover { /* definition of the "image" class for <a> tag when hovered onto
*/
background-image: url(schots1.gif); /* source for target image */
}
De HTML bijv:
<a class="image" href="http://www.reizendooramerika.com"></a>
Tussen <head> en </head>, ofwel waar komt de CSS?
<html>
<head>
<style type="text/css">
body { color:#c5c5c5; font-family:verdana;}
H1 { background:#fff; font-size:24pt; padding:0;}
etc, etc, etc.
</style>
</head>
<body>
<p>Your pages content!</p>
</body>
</html>
Laten we het buiten de deur houden: External CSS.
Schrijf de CSS, bijv:
body {
background-color : #fff;
color : #0c0;
}
Sla dit op als bijv: layout.css
De aanroep in het programma is:
<link href="layout.css" rel="stylesheet" type="text/css" />
Het is een goed idee om styles in een aparte subdirectory te zetten en dusdanig aan te roepen:
<link href="/styles/layout.css" rel="stylesheet" type="text/css" />
Bij simpele stylesheets voldoet het vaak om alles in 1 external te zetten. Bij grotere projecten is het aan te bevelen o de stylesheets op te delen in bijvoorbeeld een stylesheet voor de layout, een stylesheet voor de kleuren, een stylesheet voor de menu's, etc. Geen vaste regels, maarstructuur en dus overzicht is belangrijk en vergemakkelijkt onderhoud aan websites.
Het kan dus niet, het beveiligen van foto's op internet.
Als je niet wilt dat je foto's of graphics of wat dan ook van je webpagina gecopieerd worden, dan moet je het niet op het internet zetten! Wat je ook doet, als je het op het scherm ziet dan staat het ook in je cache. Het enige dat je kunt doen om je foto's te beschermen tegen onrechtmatig gebruik, is het toevoegen van een watermerk.
Het gebruiken van user id / password client side is niet effectief. Een stukje script op de server, CGI of PHP of wat dan ook, doet wonderen.
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
<body>
<p><b>
<a href="http://www.reizendooramerika.com" class="xlink">CROSS LINK</a>
<br>
<a href="http://www.reizendooramerika.com" class="hlink">HELP LINK</a>
</b>
</body>
</html>
Scrollbar kleuren kunnen ingesteld worden naar believen; maar de enige browser die dat laat zien is Internet Explorer. Dus als je de effecten voor een ieder zichtbaar wil hebben; Forget it! Maar voor de mensen die het toch willen:
<style>
BODY {
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
overflow: auto;
}
</style>
Geluiden afspelen of downloaden
Maak een knop met de verwijzing naar de locatie van het bestand. Invoegen: Webcomponent: Interactieve knop.
Maak een knop met een link en verwijs naar het zip-bestand.
bijv: <a href="black.zip"><img border="0" src="schots1.gif" width="51" height="51"></a>
1 van de eerste dingen die met CSS gedaan worden is het uiterlijk van de tekst veranderen.
Welk lettertype gebruikt wordt, wordt bepaald door de FONT-FAMILY.
P { font-family:verdana }
H2 { font-family: verdana }
p {font-family: verdana, "Times New Roman", serif; }
Een beetje Kleur.
Met color kun je kleur aan de gebruikte font geven.
H2 { color:red }
P { color:#c5c5c5 }
Je kunt de meest uiteenlopende kleuren gebruiken, maar het is aan te bevelen om web safe colours te gebruiken zodat de kleur die je gebruikt ook door anderen zo gezien worden.
Classes
Met Classes kun je (bijna) alles veranderen aan een tag wat je maar wilt. Classes worden gedefinieert door een punt met daar achter de class naam.
.pasop { font-family: verdana; font-size:20pt;color:red;}
om nu de class te kunnen gebruiken roep je deze als volgt aan:
<span class="pasop">VOORZICHTIG</span>
op het scherm verschijnt:
VOORZICHTIGin dit kleine voorbeeldje zie de opdrachten die met de class pasop meegegeven worden.
Maar je kunt ook classes combineren; als je de class pasop vet op het scherm wilt hebben, kun je een class vet definieren.
.vet { font-weight:bold }
om nu de classes te kunnen gebruiken roep je deze als volgt aan:
<span class="pasop vet">VOORZICHTIG</span>
VOORZICHTIGDe mogelijkheden zijn alweer (bijna) onbeperkt.
.raamwerk {border:1px solid red; width:auto;text-align:center;}
<p class="raamwerk">sdfdsf</p>
http://www.reizendooramerika.com
de class raamwerk samen met de class vet
http://www.reizendooramerika.com
de class raamwerk met de class vet en de class ga
<p class="raamwerk vet ga">http://www.reizendooramerika.com</p>
http://www.reizendooramerika.com
De mogelijkheden zijn onbeperkt en de voordelen komen nu ook boven water, een class definieren of herdefinieren en je site is in no-time aangepast.
Links (of rechts)
Verwijzingen binnen een pagina of naar andere websites gaan middels hyperlinks. De standaard hyperlink wordt door een ieder herkend maar vaak past het niet in de layout van de pagina. Een link heeft een aantal properties: link, visited, active en hover.
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00}/* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
Zo ziet het er grofweg uit, de schrijfwijze is niet case sensitive, maar de volgorde wel.
Streepje weg: text-decoration-none
kleur veranderen: color: red blue of wat dan ook
achtergrondkleur veranderen: background: red blue of wat dan ook
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline; color: red;}
A:link {color:red;text-decoration: underline}
A:visited {text-decoration: underline }
A:active {text-decoration: underline }
A:hover {text-decoration: underline; color: green;}
Amerika voor beginners
maar er kunnen ook classes bijgevoegd worden:
<span class=" vet groot"> <ahref="http://www.reizendooramerika.com">Amerika
Amerika voor beginnersDe mogelijkheden zijn legio:
.box A:link {border:1px black solid;color:red;text-decoration: none}
.box A:visited {border:1px black solid;text-decoration: none }
.box A:active {border:1px black solid;text-decoration: none }
.box A:hover {border:1px black solid;background:red;text-decoration: none; color:
white;}
Amerika
voor beginners
Het is niet mogelijk om foto's te beschermen tegen copieren als ze op het internet staan. Rechter muisknop uitschakelen kan eenvoudig omgaan worden door JS uit te schakelen en verder is het erg makkelijk om het uit de cache te halen. Deze methode werkt ietwat anders. Er wordt een doorzichtige laag over de image gelegd en dat maakt het weer ietwat lastiger. De waarden van de laag moeten afhankelijk zijn van de image die het bedekt, maar da's niet zo'n probleem Have fun.
