Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Overerving van eigenschappen

Anne
6 antwoorden
  • Een vraag over het principe van overerving van eigenschappen.
    Als voorbeeld deze stijlregel:
    [code:1:8779c1e1db]body {font-size:20px}[/code:1:8779c1e1db]
    en deze html-code:
    [code:1:8779c1e1db]
    <h1>De kop</h1>
    <p>Een alinea tekst</p>
    [/code:1:8779c1e1db]
    Dan is de tekst van de alinea 20 pixels groot.

    Nu zet ik dezelfde code in een tabel:
    [code:1:8779c1e1db]
    <table><tr><td>
    <h1>De kop</h1>
    <p>Een alinea tekst</p>
    </td></tr></table>
    [/code:1:8779c1e1db]

    De tekst krijgt nu de standaardgrootte van de browser. Pas als ik de stijlregel verander in:
    [code:1:8779c1e1db]td {font-size:20px}[/code:1:8779c1e1db]
    maar ook als ik het verander in:
    [code:1:8779c1e1db]table {font-size:20px}[/code:1:8779c1e1db]
    wordt de font-size weer 20px.

    Nu weet ik dat font-size wordt geërfd van het ouderelelement. In het eerste voorbeeld is dat dus <body> en in het tweede voorbeeld <td>.
    Maar waarom gaat de font-size wel van <table> via <tr> en <td> door naar <p> en niet vanuit <body> via <table>, <tr>, <td> naar <p>?

    Still with me :D ?

    Groet, Pyrrus
  • Ja, ik volg het.

    1. Welke browser?
    2. Tabulaire data of layout? (uit nieuwsgierigheid)
    3. Mogelijk oplossing voor die browser:[code:1:ccadb1c42a]html,td{
    font-size:20px;
    }[/code:1:ccadb1c42a]
  • Waarschijnlijk heeft je browser een gepredefinieerde css-waarde voor de font-size bij het element table. Net zoals h1 en zo een gepredefinieerde waarde voor de font-size heeft.
  • [quote:6f1fa5b8d4="termin8or"]Ja, ik volg het.

    1. Welke browser?
    2. Tabulaire data of layout? (uit nieuwsgierigheid)
    3. Mogelijk oplossing voor die browser:[code:1:6f1fa5b8d4]html,td{
    font-size:20px;
    }[/code:1:6f1fa5b8d4][/quote:6f1fa5b8d4]

    1. IE6, Opera 7.2, Mozilla en Navigator 7, met en zonder DOCTYPE
    2. Het is maar een voorbeeld waar ik al spelende met CSS op stuitte.
    3. Zeker, dat werkt. Maar omdat het resultaat van mijn voorbeeld in elke (Windows-)browser hetzelfde is, is het blijkbaar zo bedoeld. Alleen ontgaat mij de logica ervan. Vandaar…

    Pyrrus
  • Werkt hier perfect:[code:1:20b8b1bfe9]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>font-size table test</title>
    <style type="text/css">
    html{
    font-size:400%;
    }
    </style>
    <table summary="testing font-sizes">
    <tr><td>Echt?</td></tr>
    </table>[/code:1:20b8b1bfe9]Als ik tijd heb maak ik wel een online-voorbeeldje. Werkt trouwens ook met px.
  • Ik zie dat je voorbeeld werkt en heel langzaam begint het te dagen… denk ik. Jij gebruikt het 'echte' rootelement <html> en dan werkt het, ook als je de tekst in de tabelcel in een <p> plaatst. Voeg je er een kop aan toe, dan behoudt die zoals het hoort zijn oorspronkelijk grootte.
    Ik dacht eerst nog dat de volgende regel tot hetzelfde resultaat zou leiden:
    * { font-size: 400%; }
    maar als je dit probeert wordt de tekst zo reusachtig dat je tien beeldschermen in het vierkant nodig hebt om het te kunnen bekijken. Ik probeer hier niemand gek te krijgen (…) maar weet je waarom dat gebeurt? *Stel* dat de standaardgrootte van de browser voor <h1> 20 is, dan komt 400% toch overeen met 80? Wat ik te zien krijg lijkt meer op 800…

    Misschien moet ik niet proberen om alles te begrijpen en gewoon lekker verder knutselen (je mag inkoppen…)
    Pyrrus

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.