Naam:  Wachtwoord:        Wachtwoord? Naam?   |   Register
Home CSS Attribute selectors in CSS

Attribute selectors in CSS

PDF Afdrukken E-mail
Webdesign - CSS

Attribute selectors

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 <PIANO>, <AUTO> en <HUISSTIJL>, 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 <H2> 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 <H2> headings de kleur rood moeten krijgen. Daarvoor wordt het class attribuut toegevoegd aan de start-tag <H2>.

<H2 class=rood>Deze regel wordt in het rood weergegeven.</H2>

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 <H2> 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.

<H2>Deze regel staat in de standaard kleur.</H2>
<H2 class=rood> Deze regel wordt in het rood weergegeven.</H2>
<H2 class=rood> Deze regel ook.</H2>
<H1 class=rood> Deze H1 header wordt ook rood.</H1>
<P class=rood> En deze paragraaf eveneens.</P>

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

<STYLE type="text/css">
<!--
.rood {color: red}
-->
</STYLE>

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.

<STYLE type="text/css">
<!--
H2 {color: black }
.Bob {color: red}
.Marlin {color: blue}
.Marcel {color: brown}
-->
</STYLE>
<BODY>
<H2 class=Bob>Rood is mijn favoriete kleur.</H2>
<H2 class=Marlin>Blauw is mijn favoriete kleur.</H2>
<H2 class=Marcel>Bruin is mijn favoriete kleur.</H2>
</BODY>


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.

<P id = #TIP1> Hier komt de uitleg van de eerste tip. </P>

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 <DIV> en de <SPAN> 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 <DIV> tag is een block-level tag. Dit betekent dat harde returns <BR> zijn toegestaan en dat de tag andere HTML-tags kan omsluiten. De <SPAN> 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 <SPAN> 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 <DIV> tag te gebruiken en aan die <DIV> tag een class attribuut toe te kennen met een naam. Tenslotte zette we de eerste woorden van de alinea tussen de <SPAN> tags en geven hieraan ook een naam.

<BODY>
<DIV class=geschiedenis>
<SPAN class=history> Hier </SPAN>komt het onderdeel geschiedenis.<BR>
Deze tekst komt cursief te staan.<BR>
De achtergrondkleur wordt blauw<BR>
</DIV>
<DIV class=kunst>
<SPAN class=art> De </SPAN>kunst-afdeling plaatsen we hier.<BR>
Deze tekst komt onderstreept te staan.<BR>
De achtergrondkleur wordt rood<BR>
</DIV>
<DIV class=computers>
<SPAN class=pc> En </SPAN>de informatie over computers komt onderaan.<BR>
Deze tekst komt vet te staan.<BR>
De achtergrondkleur wordt paars<BR>
</DIV>
</BODY>

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

<STYLE type="text/css">

<!--DIV.geschiedenis
{ font-style: italic;
color: #C0C0C0;
background: #0000FF; }

DIV.kunst {
text-decoration: underline;
color: #0000FF;
background: #FF0000;}

DIV.computers {
font-weight: 700;
color: #FFFF00;
background: #FF00FF;}

SPAN.history { font-size: large; }
SPAN.art {font-size: x-large;}
SPAN.pc {font-size: xx-large;}

-->
</STYLE>


cursus cssHet 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.






Deel dit bericht met anderen

Submit to Delicious Submit to Digg Submit to Facebook Submit to Google Bookmarks Submit to Stumbleupon Submit to Technorati Submit to Twitter Submit to LinkedIn

Commentaar (0)add comment


Schrijf commentaar

feedToon/Verberg commentaar formulier
kleiner | groter
password
 

busy
 

Lente Actie!

Omdat het lente is, vieren we feest! We geven daarom alleen in de lente 50 euro korting op alle basistrainingen van Avid Studio, Magix Video deluxe, Sony Vegas Movie Studio en Adobe Premiere Elements.

U betaalt dus geen 149 euro per trainingsdag, maar 99 euro. Schrijf je snel in, want er zijn maar een beperkt aantal plaatsen beschikbaar!

Cursussen en trainingen

Dvscene geeft trainingen en cursussen in het trainingscentrum van Iscenes multimedia.

Er zijn verschillende cursussen per pakket voor beginners en gevorderden.  U kunt zich inschrijven voor de volgende cursussen en trainingen:

 

 

 

Dvscene.nl is onderdeel van Iscenes multimedia specialist in videomontage-, cms- en cameratrainingen. Copyright © 2012. Dvscene.nl.