Attribute selectors PDF  | Afdrukken |  E-mail
Geschreven door Rinie Hooijer   
woensdag, 31 december 1997 05:00
HTML is door CSS volwassen geworden. Een bewijs is dat we nu zelf onze eigen 'persoonlijke' tags kunnen definiëren. Met persoonlijke tags behoren veelvuldig gemaakte handelingen tot het verleden. Een keer schrijven en vele malen gebruiken is hier het motto.
HTML is door CSS volwassen geworden. Een bewijs is dat we nu zelf onze eigen 'persoonlijke' tags kunnen definiëren. Met persoonlijke tags behoren veelvuldig gemaakte handelingen tot het verleden. Een keer schrijven en vele malen gebruiken is hier het motto.

In programmeertalen en tekstverwerkers is het al lang mogelijk om bepaalde taken te automatiseren. In HTML was dat tot voor kort onmogelijk. Met de ondersteuning van CSS door de 4.0 browsers komt hier verandering in. Eindelijk wordt het mogelijk om 'persoonlijke' tags te definiëren zoals de piano-tag, de auto-tag en de huisstijl-tag. Natuurlijk zijn dit geen echte tags in de zin van , en , simpelweg omdat de browsers al deze verschillende mogelijkheden nooit zullen ondersteunen.

Persoonlijke tags kunnen het best worden vergeleken met de opmaakprofielen zoals we die kennen in tekstverwerkingspakketten. Een opmaakprofiel is niets anders dan een lijstje met afspraken over hoe bij voorbeeld een bepaald lettertype, kop of alinea eruit komt te zien. Dit lijstje kunt u aanpassen en opslaan om het de volgende keer weer te kunnen gebruiken. En u kunt meerdere lijstjes maken.

Voordat u nu een bepaald opmaakprofiel kunt gebruiken, moet u dit eerst kenbaar maken voordat u start met uw document. U geeft als ware de naam op van het opmaakprofiel. Als u nu een kop of alinea selecteert, worden de regels van het opmaakprofiel uitgevoerd.
In Cascading Style Sheets is het eigenlijk niet anders. Door middel van attribute selectors (class en id) geeft u de naam op van het opmaakprofiel om hier vervolgens in een HTML-pagina naar te verwijzen.

Attribute selectors
In hoofdstuk 13.1 hebben we het al even gehad over selectors. Een selector is dat gedeelte van de rule dat voor de openingsaccolade staat. Het tweede gedeelte van de rule is de declaratie. In H2 {color:green}, is H2 de selector en {color:green} de declaratie. Met deze rule geeft u aan dat alle headings van het type

een groene kleur krijgen. Praktisch gezien heel makkelijk en snel. Maar wat nu als u van de tien headers er maar vijf groen wilt hebben en de overige rood? Er zijn in dat geval drie mogelijkheden.

1) U gebruikt de oude HTML methode om aan te geven dat het lettertype rood moet zijn.
2) U gebruikt de inline style methode, zoals besproken in het vorige hoofdstuk.
3) U maakt gebruik van class en id attributen.

De eerste twee mogelijkheden zijn bekend, en zijn niet handig als we een keurige style sheet willen maken. U heeft dan namelijk niet meer de mogelijkheid om achteraf één enkel bestand aan te passen. Gelukkig zijn er twee attributen aan HTML toegevoegd die een oplossing bieden voor dit probleem, namelijk class en, ook wel de attribute selectors genoemd.

Het class attribuut
Aan ieder HTML-element kan een class attribuut worden gekoppeld. Dit attribuut stelt u in staat om onderscheid te maken tussen dezelfde (groepen) HTML-elementen, doordat aan het attribuut een naam wordt gekoppeld. Als we uitgaan van het bovengenoemde voorbeeld, kunnen we nu door middel van het class attribuut aangeven dat vijf van de tien

headings de kleur rood moeten krijgen. Daarvoor wordt het class attribuut toegevoegd aan de start-tag

.

Deze regel wordt in het rood weergegeven.



Om het class attribuut te kunnen aanspreken in de style sheet krijgt deze een naam, in ons voorbeeld ROOD. Deze naam mag van alles zijn, zolang er maar geen spaties in voorkomen en het niet begint met een cijfer. Als u een naam aan het class attribuut heeft gegeven, onderscheidt deze zich van de overige

tags. Desgewenst kunt u de specificaties die aan ROOD zijn gekoppeld ook meegeven aan andere HTML-tags, door daar hetzelfde class attribuut aan toe te kennen. Een voorbeeld.

Deze regel staat in de standaard kleur.


Deze regel wordt in het rood weergegeven.


Deze regel ook.


Deze H1 header wordt ook rood.


En deze paragraaf eveneens.



Nu de laatste stap. Om het class attribuut te activeren moet u hiernaar verwijzen in de style sheet.



U hoeft in de style sheet alleen de naam van het class attribuut op te geven met daarachter de declaratie. Let u erop dat u de naam laat voorafgaan door een PUNT. De punt geeft aan dat het een class attribuut betreft.
Het staat u vrij om meerdere class attributen te gebruiken in een style sheet maar het is niet toegestaan om twee class-namen toe te kennen aan één enkele HTML-tag. Het gebruik van meerdere attributen is bijvoorbeeld erg handig bij het uitwerken van een gesprek tussen drie verschillende mensen.



Rood is mijn favoriete kleur.


Blauw is mijn favoriete kleur.


Bruin is mijn favoriete kleur.





Het id attribuut
Theoretisch zit er weinig verschil tussen het id en het class attribuut. In de style sheet geeft u aan welke kenmerken het attribuut moeten krijgen om vervolgens in het document aan te geven waar die kenmerken moeten worden uitgevoerd. Het verschil tussen id en class is dat id een uniek kenmerk is dat maar éénmaal kan worden toegepast, terwijl het class attribuut meerdere malen kan worden gebruikt in verschillende HTML-tags. Een id kan evenals een class attribuut aan iedere HTML-tag worden gekoppeld.

Hier komt de uitleg van de eerste tip.



De id naam wordt voorafgegaan door een hekje. Het gedeelte achter het = teken komt later weer terug in de style sheet. Het is dus nu niet meer mogelijk om een andere HTML-tag te voorzien van de naam TIP1.
Om de ID te activeren neemt u in de style sheet de volgende regel op.

#TIP1 { font-size: 36pt }

Wanneer u regelmatig met style sheets werkt zult u merken dat deze twee attributen bijzonder handig zijn. Toch hebben ze nog één beperking. id en class alleen bieden u niet de mogelijkheid om een persoonlijke tag te definiëren, zoiets als de voetbal-tag, de computer-tag of de klassieke-tag. Daarvoor zijn ook de
en de noodzakelijk. Deze twee tags zijn opgenomen in HTML 4.0 en worden beiden door Microsoft en Netscape ondersteund.

Persoonlijke style sheets maken
De division of
tag is een block-level tag. Dit betekent dat harde returns
zijn toegestaan en dat de tag andere HTML-tags kan omsluiten. De tag is een inline tag en hier mogen geen andere tags en harde returns in voorkomen. In combinatie met het class attribuut kunt u nu uw 'persoonlijke' tags definiëren. Een voorbeeld.

U bent liefhebber van geschiedenis, kunst en computers en wilt daaraan een homepage wijden. De teksten van de drie onderwerpen moeten verschillen in kleur en lettertype, en ieder onderwerp krijgt een eigen achtergrondkleur. Om ook de tag in het geheel te betrekken zorgen we dat het eerste woord van het onderwerp groter is dan de rest van de tekst.

We beginnen met het maken van de HTML-pagina. In de body van die pagina geven we de drie verschillende onderdelen aan door de
tag te gebruiken en aan die
tag een class attribuut toe te kennen met een naam. Tenslotte zette we de eerste woorden van de alinea tussen de tags en geven hieraan ook een naam.



Hier komt het onderdeel geschiedenis.

Deze tekst komt cursief te staan.

De achtergrondkleur wordt blauw



De kunst-afdeling plaatsen we hier.

Deze tekst komt onderstreept te staan.

De achtergrondkleur wordt rood



En de informatie over computers komt onderaan.

Deze tekst komt vet te staan.

De achtergrondkleur wordt paars




Nu de pagina klaar is, kunnen we beginnen met de style sheet.




Het gemaakte document ziet er niet hetzelfde uit in Netscape en Internet Explorer. Dit komt door een bug in Netscape die de division tag niet goed ondersteunt. Als u geen achtergrondkleur gebruikt, zal de uitkomst hetzelfde zijn. Het is te hopen dat in de volgende versie van Netscape dit probleem is verholpen.
Laatst aangepast op dinsdag, 01 september 2009 13:16
 

Internetscene.nl is onderdeel van Iscenes multimedia specialist in videomontage- en cmstrainingen. Copyright © 2011 Internetscene.nl