Websites met stijl

Naslag: class en id

Het attribuut class

• Het class attribuut kan gebruikt worden voor alle elementen.
• Het dient om een of meer elementen van een bepaalde opmaak te voorzien.
• Vorm (html): class="naam"
  (Het atribuut staat in de openings-tag van een element)
• Vorm selector (css): .naam
  (met een punt voor de class-naam).

Voorbeeld - class

• In de html is een division van de class "attentie" gedefinieerd.
• In de css is aangegeven dat de class "attentie" blauwe letters heeft op een grijze achtergrond.
  De padding (afstand van de tekst tot de rand) is 20px.

Het attribuut id

• Het id attribuut kan gebruikt worden voor alle elementen.
• Het dient
  • om een elementen te identificeren
    Een element met een bepaalde id-naam moet uniek zijn in het htlml-document. Er mag in dat document niet nog een element voorkomen met dezelfde id-naam
  • Om het element een bepaalde opmaak te geven.
• Een element met een id-naam kan worden gebruikt als een bladwijzer waar naartoe gesprongen kan worden.
• Vorm (html): id="naam"
  (Het atribuut staat in de openings-tag van een element)
• Vorm selector (css): #naam
  (met een hekje voor de id-naam).

Voorbeeld - id

• In de html is een division met de id-naam "samenvatting" gedefinieerd.
• In de css is aangegeven dat de id "samenvatting" een zwart kader heeft en een padding (afstand van de tekst tot de rand) van 20px.

Een link naar een bladwijzer (id-naam)

Een id kan gebrukkt worden als bladwijzer, dat is een plaats in een document waarheen gelinkt kan worden.
Zie voorbeeld 3.

• In de bovenste regel wordt gesprongen naar de id samenvatting in het huidige document.
• In de tweede regel wordt gesprongen naar de id sacrafamilia in het document barcelona.html.

Opmerkingen over id en class

• De twee belangrijkste verschillen tussen id en class zijn:
  • een id-naam uniek moet zijn in een html-document, een class naam hoeft niet uniek te zijn.

    Met andere woorden: er mag in een html-document best een element zijn met id="inleiding" en een ander element met id="samenvatting", maar er mogen in een html-document geen twee elementen met id="samenvatting" zijn.

  • Een id-naam kan gebruik worden als bladwijzer. Daarheen kan met een hyperlink worden gesprongen.
    Bij een class-naam kan dat niet.

    Dat is ook logisch, want in principe kunnen er verschillende elementen met dezelfde naam op een webpagina staan. Dan is onduidelijk naar welke moet worden gesprongen.

• Een element met een id-naam is meestal een element met een vaste functie die maar één keer op een webpagina voorkomt: een inleiding, een samenvatting, de grap van de dag.
• In de css kan een id-naam van een opmaak worden voorzien, maar dat hoeft niet. De id-naam kan ook alleen worden gebruikt als bladwijzer waarheen gesprongen kan worden, zoals in voorbeeld 3
• Een class kan gebruikt worden voor (de opmaak van) elementen die meer dan een keer op een pagina kunnen voorkomen, bijvoorbeeld class="opmerking",
  maar het kan ook handig zijn om een class toe te kennen aan een bepaalde eigenschap, bijvoorbeeld
  class klein voor kleine letters: .klein {font-size: 80%;} ofclass inspringen om in te springen: .inspringen {margin-left: 40px;} ofclass rechts voor rechts uitgelijnde tekst. .rechts {text-align: right;}

  Dan is <p class="klein inspringen">....</p> een alinea met kleine letters die is ingesprongen.

• Uit het voorbeeld hierboven blijkt dat verschillende class-namen gescheiden worden door spaties. De volgorde van de namen maakt niet uit:
  <p class="klein inspringen">....</p> is hetzelfde als <p class="inspringen klein">....</p>
• Tenslotte kan een element ook een id-naam en een of meer class-namen hebben. Classnamen en een id-naam html:

  <p class="klein inspringen" id="troef">Een troefkaart is meer waard dan andere kaarten.</p>

  css:

  .klein {font-size: 80%;}
  .inspringen{margin-left: 40px;}
  #troef {color: red;}

  Resultaat in de browser:

  Een troefkaart is meer waard dan andere kaarten.

  Met de link <a href="#troef">Wat is een troefkaart?</a> kan naar de id troef gesprongen worden.