|
StyleSheets: een inleiding
Deze inleiding is bedoeld om inzicht te verschaffen in de werking en het gebruik van stylesheets. Ik behandel de basis principes van stylesheets; vragen als 'wat is een class definition?' en 'hoe implementeer ik een stylesheet?' worden beantwoord. En verder word er achtereenvolgens dieper ingegaan op tekst attributen, de correcte manier om layers een achtergrondkleur of plaatje mee te geven. Het werkend krijgen van borders, Het positioneren van layers, en hoe je ervoor zorgt dat alles nog werkt nadat je een formulier in je pagina hebt geplaatst. Tot slot zal ik nog even kort ingaan op Dynamic HTML waarmee je layers kunt laten verdwijnen en ze een beetje heen en weer kunt laten bewegen.
Alle hoofdstukken zijn opgedeeld in een stukje over de syntax, iets over compatibiliteit tussen de verschillende browsers en tips om veel voorkomende praktijk problemen op te lossen.
Ik ga er in deze inleiding van uit dat je al enige kennis van HTML en het opzetten van een internet pagina hebt. Zoniet raad ik je aan eerst even ergens een goed boek vandaan te halen en een homepage in elkaar te knutselen.
CSS? QUE?!
Wat is een stylesheet en hoe gebruik ik het op mijn site? Als je de basisprincipes al kent kun je dit onderdeel overslaan.
Cascading Style Sheets of CSS afgekort is een handige manier om de elementen op je internet pagina verschillende eigenschappen mee te geven. Deze eigenschappen zijn bijvoorbeeld de achtergrondkleur van de pagina of het gebruikte font. De elementen waar je deze eigenschappen aan kunt toekennen zijn voor een deel tags die al sinds de eerste versies van HTML bestaan. Je zou bijvoorbeeld aan de <P> tag een stijl kunnen toekennen die ervoor zorgt dat alle tekst tussen de openings en sluit </P> door de browser in een blauw Arial font wordt weergegeven met een paarse achtergrond. Hiervoor zou je de volgende definitie gebruiken:
p {
font-family: Arial;
color: blue;
background-color: purple;
}
Om deze definitie vervolgens te gebruiken zet je hem in de stylesheet welke je weer in de HEAD van je HTML document plaatst tussen <STYLE> tags, of in een externe stylesheet.
In theorie kan je aan bijna iedere tag een nieuwe stijl toekennen en bijvoorbeeld de tekst tussen bold tags als italic laten weergeven en andersom. Dat is alleen niet zo handig. Je maakt beter gebruik van stylesheets als je bijvoorbeeld de <P> en <SPAN> tags gebruikt en daar een class aan toekent. Je kan deze class een logische naam geven en hij laat de natuurlijke waarden van je tags intact. Als je de bovenstaande stijl zou willen gebruiken maak je simpelweg een class aan die je 'uglyText' doopt en laat je de <P> tag hiernaar verwijzen. Je class zal er dan ongeveer zo uit gaan zien;
.uglyText {
font-family: Arial;
color: blue;
background-color: purple;
}
En in je pagina verwijs je er vervolgens zo naar;
<P CLASS="uglyText">
Deze tekst is dan blauw Arial met paarse achtergrond.
<P>
Jammergenoeg hebben Internet Explorer en Netscape hele andere ideeën over hoe ze met CSS om moeten gaan waardoor zelfs het simpele voorbeeldje hierboven er in beide browsers verschillend uit ziet. Maar dan nog, de voordelen van niet honderden of duizenden font tags te hoeven aanpassen als je besluit dat rode tekst op een zwarte achtergrond gewoon niet cool meer is wegen absoluut op tegen een tijdje stoeien met je classes om uit te vinden wat wel en niet in beide browsers werkt.
Implementeren van een StyleSheet
Er zijn drie methoden om een stijl te definiëren;
Inline
<P STYLE="font-family: Arial; color: blue;">
Je kan de stijl direct in de tag zetten.
</P>
Of embedded...
<HEAD>
<STYLE TYPE="text/css">
.uglyText { font-family: Arial; color: blue; }
</STYLE>
</HEAD>
<BODY>
<P CLASS="uglyText">
... in de HEAD van je document.
</P>
</BODY>
Of linked...
<HEAD>
<LINK REL="stylesheet" HREF="style.css" Type="text/css">
</HEAD>
<BODY>
<P CLASS="uglyText">
Je zet nu de class definitie ( .uglyText {etc.} )
in een text bestandje wat je opslaat met de .css
uitgang. (in dit geval zou je hem style.css noemen)
</P>
</BODY>
Alledrie de mogelijkheden hebben hun eigen voor en nadelen maar algemeen genomen raad ik de eerste methode af en zou ik zoveel mogelijk de derde (linked) methode gebruiken. Je hebt dan een bestandje wat je in de hele site kan hergebruiken door simpelweg een linkje toe te voegen. De tweede (embedded) methode is dan ook vooral geschikt om stijlen te definiëren die slechts in één pagina voorkomen.
[tip]
De inline methode geeft vooral veel problemen in Netscape. Binnen een geneste layer werkt het bijvoorbeeld niet, maar ook in een simpele layer werken een aantal attributen zoals bijv. background-image: niet in Netscape.
CSS Bouwstenen
Als je eenmaal weet waar je de stylesheet gaat neerzetten zijn er ook nog drie manieren om hem op te vullen. Die overigens door elkaar heen gebruikt kunnen worden. Je kan een stijl aan een specifieke tag toekennen (bijv. <P>, of <TD>), je kan een class definiëren die je samen met verschillende tags/objecten op je pagina kunt gebruiken, of je kan een ID definieren die je in principe ook met iedere tag kan gebruiken maar die eigenlijk bedoeld is voor bij de <DIV> tag.
De volgende voorbeelden tonen de verschillende opties;
p {color: blue;}
in je stylesheet maakt alle tekst tussen <P> tags blauw.
.className {font-size: 12px;}
Geeft alle tekst tussen tags waar de CLASS="className" een grootte van 12 pixels.
#idName {top: 20px;}
Positioneert een layer met de ID="idName" 20 pixels van de bovenkant van je (browser) scherm.
Al ben je vrij om de bovenstaande mogelijkheden op elke mogelijke manier toe te passen zijn er wel een aantal officieuze richtlijnen. De eerste techniek gebruik je meestal om de standaard font grootte en soort aan te geven zoals die over de hele site gebruikt wordt, de tweede gebruik je om uitzonderingen aan te geven en de laatste gebruik je vooral om posities van layers, borders, en achtergrondkleuren aan te geven.
Er zijn ook een aantal combinatie tactieken mogelijk, je kan bijvoorbeeld een class gelijk aan een hele rits tags toekennen;
p,li,td {
font-family: Arial;
color: blue;
}
Of je kan een tag en een class naam combineren;
p.title {
font-family: Arial;
color: blue;
}
In het laatste voorbeeld is deze class specifiek voor de p tag wat je vrijlaat om nog andere .title classes aan te maken met andere waarden.
[tip]
Netscape Navigator (NN) is de meest buggy browser wat betreft stylesheets, hij ondersteund het minst en heeft met het meeste problemen. De meeste problemen worden veroorzaakt door de manier waarop NN overerving regelt. Dit houdt in dat NN het het heel belangrijk vindt dat alle tags netjes worden afgesloten en dat hij stijlen niet zomaar doorgeeft aan 'dieper gelegen' elementen. Een <LI> binnen een <P> met een bepaalde class bijvoorbeeld krijgt de class van de <P> tag gewoon mee in Internet Explorer (IE). NN vereist echter dat je voor de <LI> een aparte verwijzing aanmaakt in je stylesheet. Sommige CSS waarden hebben meer problemen dan andere maar het is over het algemeen een goed idee om in ieder geval de font-family en color voor iedere class te herhalen.
Tekst Attributen
| html; | css-variant; | voorbeeld; | commentaar; |
| font-family: | arial, helvetica | Geef een paar verschillende fonts aan zodat de gebruiker, onafhankelijk van het platform, ongeveer een zelfde font soort te zien krijgt. |
| font-size: | 12px | 10pt | Gebruik pixels (px) als je wilt dat de gebruiker een (ongeveer) gelijke grootte font ziet op Mac en PC. |
| color: | #ffffff | white | Anchors hebben hun eigen class definitie nodig en negeren de tekst stijl. |
| font-weight: | normal, bold | 100,..,900 | 600 staat gelijk aan het ouderwetse bold. Verschillen tussen zichtbare dikte zijn groter in IE. |
| text-decoration: | none, underline, line-through | Dit zijn de enige waarden die cross-browser werken. |
| font-style: | none, italic | |
| align="" | text-align: | left, right, center, justify | |
| | line-height: | none | 120% | 30px | |
| | list-style: | none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha | Zowel IE als NN begrijpen deze maar interpreteren ze vrij verschillend. Gebruik met <ol> of <ul> niet met <li>. |
| | text-indent: | 10% | 20px | Laat de eerste regel inspringen. |
| | text-transform: | none, capitalize, uppercase, lowercase | Capitalize werkt op de eerste letter van ieder woord. De rest werkt op alle woorden. |
Er zijn nog veel meer mogelijke CSS attributen maar de bovenstaande werken als enige in zowel IE als NN, plus dat hun toegevoegde waarde discutabel is, ik heb ze daarom hier niet opgenomen.
Hoe gebruik je ze...
De meeste attributen gebruik je door ze in een class definitie te zetten en er dan een <P> of <SPAN> tag naar te laten verwijzen.
<P CLASS="rememberThis">some text</P>
Je kan de stijl van links (anchors) op dezelfde manier aanpassen, maar je kan ook een algemene stijl voor je anchors definieren door de volgende regel aan je stylesheet toe te voegen.
a { text-decoration: none; color: #0000FF; }
In bovenstaand geval worden de anchors blauw en komt er geen lijn onder te staan. Verder kan een anchor in meerdere staten verkeren en kan je voor iedere staat een andere stijl definieren. Je doet dit met a:link, a:visited, a:active en a:hover. Jammergenoeg werken a:visited en a:hover alleen in IE en werken geen van allen in NN, behalve a:hover in Netscape 6. a:hover wordt dan ook veel gebruikt omdat het er goed uitziet en oude versies van Netscape het simpelweg negeren.
Je kan deze tabel gebruiken om het ouderwetse font-size om te rekenen naar pixels:
| size | pixels |
| 2 | 11 |
| 3 | 15 |
| 4 | 18 |
| 5 | 22 |
| 6 | 30 |
| 7 | 45 |
[tip]
Ik zou zo weinig mogelijk CSS attributen gebruiken omdat zowel IE als NN voor bijna ieder attribuut een andere interpretatie hebben. Hierdoor zorgt ieder extra attribuut voor een exponentieel anders uitziende site in beide browsers.
[tip]
Als je wil dat je site op zoveel mogelijk platform+browser combinaties leesbaar blijft kan je het beste alleen de font groottes 12px, 14px en 16px gebruiken. Alle andere groottes geven wel ergens problemen. Gebruik sowieso altijd pixels trouwens, vraag maar aan Zeldman waarom.
Achtergrondkleuren en plaatjes.
| html; | css-variant; | voorbeeld; | commentaar; |
| background-color: | #ffffff | white | |
| | layer-background-color: | #ffffff | white | Dit attribuut word alleen door NN gebruikt en doet hetzelfde als die hierboven. Gebruik dit alleen bij absoluut gepositioneerde layers anders worden je achtergronden door elkaar gegooid. |
| background: | #ffffff url(iets.gif) fixed center | Met dit attribuut kan je een aantal waarden combineren in één attribuut. Aangezien je niet perse alle waarden hoeft mee te geven is deze wel makkelijk. De volgorde is; color, image, repeat en uiteindelijk positie. |
| | background-image: | url(pix/somepic.gif) |
NN verwacht een pad dat relatief is aan de pagina waar de stylesheet gebruikt wordt terwijl IE en N6 een pad verwachten relatief aan de locatie van de stylesheet zelf. Als je een linked stylesheet gebruikt is het dus het beste om absolute paden aan te geven.
|
| | background-repeat: | repeat, repeat-x, repeat-y, no-repeat | De implementatie hiervan is een beetje buggy dus probeer het even uit voordat je het overal gebruikt. |
Twee andere veel voorkomende attributen zijn background-position en background-attachment maar aangezien NN deze niet ondersteund heb ik ze weggelaten.
layer-background-color
Als je wil dat de achtergrond kleuren van je layers exact hetzelfde worden uitgevuld in IE en NN kan je het beste layer-background-color en background-color naast elkaar gebruiken. Dit is de enige manier om NN zover te krijgen dat de achtergrond kleur doorloopt tot aan een eventueel gedefinieerde border. Als je vervolgens padding of margin in je stylesheet gaat gebruiken geeft dit wel weer problemen. Om ze toch te gebruiken kan je dan ook het beste een tabel met padding in je layer plaatsen. Andersom, een layer in een tabel, is trouwens niet aan te bevelen.
Containers en Borders
Een container, of box, is een stuk code dat wordt omsloten door een openings en sluit tag van dezelfde soort. In theorie kan je de attributen bedoeld voor containers dan ook gebruiken met iedere tag waar ook een sluit tag bij hoort, bijvoorbeeld de paragraaf: <P> en </P>. De <BR> is bijvoorbeeld geen container. Samen met de voorgaande attributen voor achtergronden zijn de attributen in deze tabel bedoeld voor containers;
| html; | css-variant; | voorbeeld; | commentaar; |
| <.. border=""> | border: | 2px none #000000 | De handigste implementatie van dit attribuut met alles in een definitie. De breedte kan in pixels of als thin, medium of thick worden gedefinieerd. De stijl kan none, solid, groove, double, inset, outset of ridge zijn. |
| | border-bottom-width: | 2px | thin, medium, thick | Hiermee kan je de borders aan alle kanten een eigen stijl meegeven. Werkt niet altijd even goed. |
| | border-color: | #ffffff | white | Of typ vier kleuren achter elkaar voor elke zijde van je box. |
| | border-style: | none, solid, groove, double, inset, outset and ridge | |
| | padding: | 6px | 2px 4px 4px 2px | Zie het onderdeel over achtergronden voor de problemen met padding. |
| | padding-left: | 10% | 6px | ook : -right, -bottom and -top. |
| | margin: | 6px | 2px 4px 4px 2px | Zie het onderdeel over achtergronden voor de problemen met margin. |
| | margin-left: | 10% | 6px | ook : -right, -bottom and -top. |
| | width: | 40% | 200px | |
| | height: | 40% | 200px | |
| clear: | none, left, right, both | Gebruik dit om de box vrij te maken van naastliggende elementen als plaatjes en andere boxen. |
| <... align=""> | float: | none, left, right | |
| | visibility: | hidden, visible | Dit attribuut gebruik je veelal in combinatie met Javascript voor een aantal DHTML toepassingen. |
De meeste van deze attributen lijken prima te werken in de meeste browsers. NN heeft wel wat problemen met het attribuut border-style.
Positioneren van Layers
| html; | css-variant; | voorbeeld; | commentaar; |
| | top: | 10% | 25px | |
| | left: | 10% | 25px | |
| | position: | absolute, relative | Door een layer absoluut te positioneren blijft hij altijd op dezelfde afstand van het begin en/of de linkerkant van je pagina staan. Sommige CSS attributen werken alleen op een layer die absoluut gepositioneerd is. |
| | z-index: | 3 | Maakt het mogelijk om layers te 'stapelen'. Layers met een lagere z-index komen onder layers met een hogere z-index te liggen. |
Met de bovenstaande attributen kun je hele precieze pagina layouts maken. Ze zijn ook noodzakelijk als je DHTML effecten op je pagina wilt gaan gebruiken zoals animaties of uitklappende menu structuren.
Zolang je dit niet aanpast met behulp van CSS hebben alle elementen op je pagina standaard een relatieve positie ten opzichte van elkaar. Zodra je echter absolute posities (position: absolute) aan elementen gaat toekennen neem je ze uit hun natuurlijk verkregen positie en geef je ze een nieuwe positie. Deze nieuwe positie is in zekere zin nog steeds relatief maar nu aan de container waarin hij zich bevindt. In de meeste gevallen is dit de <BODY>.
Buiten de positie heeft ieder element op de pagina ook een 'natuurlijke' z-index. Deze word eveneens bepaald door de positie in het document. Elementen die later voorkomen in je code krijgen een hogere z-index, dus als je alle elementen op je pagina dezelfde positie zou geven zal het laatste element in je code bovenop komen te liggen.
[tip]
Als je tabellen en gepositioneerde layers op dezelfde pagina gebruikt moet je de layers nooit in de tabellen zetten want sommige browsers gaan dan de positie berekenen ten opzichte van de tabel en niet ten opzicht van de body.
CSS en Formulieren
De combinatie CSS en formulieren geeft de nodige problemen maar creëert ook een aantal nieuwe mogelijkheden, beide worden hier besproken.
Bugs
Een van de problemen die je waarschijnlijk vroeg of laat zal tegenkomen heeft betrekking op formulier elementen en layers die daar direkt boven gepositioneerd zijn. Om de een of andere reden vindt NN dat formulier elementen ten alle tijde zichtbaar moeten zijn dus laat hij ze ook zien als er een layer overheen ligt. Dus als je een site hebt gebouwd met van die mooie uitschuifmenutjes moet je er wel op letten dat ze nooit over formulieren heen schuiven. Er is geen oplossing voor dit probleem behalve secuur positioneren.
Een ander veel voorkomend probleem in NN is dat soms de stijlen van bijv. de tekst binnen de <FORM> tags wegvalt. Dit probleem heeft te maken met de manier waarop NN overerving begrijpt, en de oplossing is daarom simpel. Zorg er voor dat de tags die de stijl meekrijgen (de <P>'s bijv.) zowel geopend als gesloten worden binnen de <FORM> tags.
Mogelijkheden
Met CSS hebben we een nieuwe manier verkregen om met die vervelende form elementen om te gaan. Het is nu bijv. mogelijk om ervoor te zorgen dat form elementen in zowel IE als NN dezelfde breedte hebben, door er een CSS width attribuut aan te hangen. Verder is het nu mogelijk om ze een achtergrondkleur te geven. Zet hiervoor de gewenste attributen in een .class en verwijs er vervolgens naar vanuit de <INPUT> tag die je wil aanpassen. Omdat de standaard waarden van een element (in NN) voor de CSS attributen gaan en dit alles nog niet 100% standaard is in alle browsers kan het wel problemen geven als je al te gekke dingen wil. Wel eerst even uitproberen dus.
Dynamic HTML
De meeste van de CSS attributen die je aan een element kan meegeven kunnen dynamisch worden aangepast met behulp van 'simpele' Javascript. In dit laatste gedeelte worden een paar standaard scripts besproken.
De meeste DHTML actie bestaat uit het laten verdwijnen, weer zichtbaar maken en heen en weer bewegen van layers. Al klinkt dat een beetje basic je kunt toch vrij gecompliceerde dingen bereiken met behulp van deze bouwstenen. Veelgebruikte DHTML effecten als uitklapmenu's en simpele animaties zijn meestal afhankelijk van de CSS attributen top, left en visibility. Er kunnen echter veel meer van de attributen worden aangepast zoals de achtergrond kleur, gebruikte plaatjes, font kleuren en groottes, etc.
Praten met Layers
Voordat je de layers kunt laten bewegen moet je een manier vinden om met ze te praten. Omdat zowel NN en IE als versie 4 en versie 5 browsers een andere manier hebben om layers aan te spreken is hier een beetje uitgekiend Javascripten voor nodig. Gelukkig kan je met behulp van het onderstaande kant-en-klare scriptje alle layers op dezelfde manier aanspreken. (met dank aan PPK)
function getObj(name) {
if (document.getElementById) {
return document.getElementById(name).style;
}
else if (document.all) {
return document.all[name].style;
}
else if (document.layers) {
return document.layers[name];
}
}
Als je nu iets met een layer wilt doen kan je zijn (browser specifieke) aanroep met behulp van bovenstaand scriptje in een variabele stoppen waarna je de rest van je script de variabele gebruikt als plaatsvervangende layer. Dit bijvoorbeeld;
var zomaarEenVar = getObj('zomaarEenNaam');
zomaarEenVar.left = 200;
zet de aanroep van een layer met de naam zomaarEenNaam (ID="zomaarEenNaam") in een variabele genaamd zomaarEenVar. Waarna het CSS attribuut left van zomaarEenVar op 200 wordt gezet. Oftewel de layer op 200 pixels van de linkerkant komt te staan.
Bewegende Layers
Om je layers heen en weer te bewegen heb je alleen de top en left attributen nodig. Stap voor stap zou je als volgt te werk gaan;
1. Geef alle layers die je gaat gebruiken een naam (ID) en positioneer ze (absoluut!) op je pagina.
2. Zet het getObj() script in de head van je pagina.
3. Schrijf een simpel scriptje dat alle namen van de layers in variabelen stopt...
4. ...en ze vervolgens verschillende posities meegeeft.
5. Bedenk wanneer je wilt dat de animatie zich voltrekt en roep op basis hiervan je script aan. Bijv. Als je wilt dat de layers gaan bewegen nadat je met de pointer over een link gaat zet je de aanroep van je moveLayer() (of zoiets) script in de mouseover van die link. onmouseover="moveLayer()" dus
Dat is het! Stap 4 kan natuurlijk zo makkelijk of ingewikkeld worden als je zelf wilt. Als je een vloeiende animatie zou willen maken moet je met behulp van een loop ieder zoveel milliseconden je layer een stukje opschuiven. Zoals je misschien is opgevallen helpt het als je al een beetje Javascript kent. Gelukkig kan je op deze site genoeg goede resources vinden om het snel te leren.
Layers verstoppen
Gecombineerd met bewegen geeft het verstoppen en weer zichtbaar maken van
layers je een hoop flexibiliteit. Je kan dan de layers verstoppen
en ze pas weer laten zien als je ze nodig hebt. Alle op DHTML gebaseerde
navigatie menu's maken hier gebruik van. Werkende voorbeelden vind
je dan ook overal op het net en op de resources waar deLijst naar
verwijst. Veruit de beste manier om deze dingen te leren is om het
ergens vandaan te kopiëren en het dan aan te passen aan jouw wensen.
Kopiëren en aanpassen, Kopiëren en aanpassen, Kopiëren en aanpassen...
je begrijpt het wel.
|
