inheritance

Ozzie PHP op 19/12/2013 14:45:21

Ola,

Als ik in css voor de body een font-size instel, dan wordt deze niet overgenomen door h1. De line-height en font-family worden wel gewoon overgenomen vanuit de body. Weet iemand waarom de font-size niet wordt overgenomen? (Een p neemt overigens wel gewoon de font-size over.)

Klopt. Heading staat los van de rest van de tekst wat betreft font-size.
Volgens mij geldt dit ook voor tables?
body,h1{font-size:12px;} Zou dus jou wens zijn, maar niet logisch want nou is weinig verschil meer tussen tekst en heading.

>> maar niet logisch want nou is weinig verschil meer tussen tekst en heading.

Klopt, en daar is wat voor te zeggen. Maar ergens is het vreemd. Een h1 staat in de body en je zou verwachten dat alles wordt overgeërfd. Line-height en font-family worden ook overerfd, alleen de font-size niet. Eigenlijk klopt dat niet. Ik begrijp het wel, maar het klopt niet. Het feit dat er dan weinig verschil meer zou zijn tussen tekst en heading is iets wat de designer moet oplossen. Die moet de juiste keuzes maken.

omdat er browsers zijn die een standaard element vormgeven als er niet expliciet iets is aangegeven. met name de font-size voor h* zijn een mooi voorbeeld, omdat je die als hoofd gebruikt en niet als een paragraaf. het voorbeeld wat michael gaf is (zoals hij zelf al aangeeft) onlogisch

Ik heb me er nooit aan gestoord in ieder geval.
Als je body{font-size:12px;font-weight:normal;margin:0;} zou uitvoeren, heeft je heading nog steeds zijn eigen font-size, bold en margin. Zou wat zijn als h1 tm h6 dan ineens allemaal als normale tekst eruit ziet.

>> Zou wat zijn als h1 tm h6 dan ineens allemaal als normale tekst eruit ziet.

Maar in feite is dat min of meer wel wat je zegt... alles wat in body staat moet font-size x krijgen. Ik snap het wel, maar ergens is het ook ietwat vreemd.

H1 (en alle H's) is eigenlijk een verkorte versie van font-size en font-weight ineen.
Dus logisch dat die de standaard font-size niet overneemt.

Ozzie PHP op 19/12/2013 15:00:58

>> Zou wat zijn als h1 tm h6 dan ineens allemaal als normale tekst eruit ziet.

Maar in feite is dat min of meer wel wat je zegt... alles wat in body staat moet font-size x krijgen. Ik snap het wel, maar ergens is het ook ietwat vreemd.

Dan moet je of een css-reset gebruiken of geen headings :P
Daarnaast is het wel verstandig om h* op te nemen in je CSS omdat deze per browser kan verschillen (Durf niet te zeggen of dat met de moderne browsers eigenlijk nog is).

[edit]
Als je trouwens naar die link kijkt hierboven zie je op welke elementen de body geen invloed heeft.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Het is helemaal niet vreemd wanneer je er over na denkt. Browsers komen met standaard css.
Anders moet je zelf aan gaan geven dat een div element als 'block' moet worden weergeven, en een input element als inline-block.

Voor h1 elementen heeft de 'h1' selector natuurlijk een hogere prioriteit dan de 'body' selector omdat de eerste specifieker is.
De inline styles hebben prioriteit over <stylle> elementen, die prioriteit hebben over stylesheets, die weer prioriteit hebben over browser defaults.
Maar de browser default voor h1 is nog altijd specifieker dan een inline body style.

Elk browser heeft zogenaamde user agent stylesheets. Deze gegeven default properties mee aan bepaalde elementen, om hun hun aparte look te geven. Een explicitere selector wint het altijd van een niet specifieke selector. Voorbeelden:
[code lang=css]
body { font-size:12pt; }

h1 { font-size:30pt; } /* h1 is specifieker dan een parent selector (body) */

body h1 { font-size:20pt; } /* body h1 is op zijn beurt weer specifieker dan h1 */

.site__name { font-size:40pt; } /* class selectors zijn weer specifieker dan element selectors */

#header { font-size:50pt; } /* wint als het is <h1 id=header />, verliest van .site__name als <header id=header><h1 ... /> */

/* inline CSS wint altijd */[/code]

PS: Een tijdje geleden kon je classes laten winnen van een ID als je 255 classes gebruikte: http://codepen.io/chriscoyier/pen/lzjqh

Wouter J op 19/12/2013 15:51:47

PS: Een tijdje geleden kon je classes laten winnen van een ID als je 255 classes gebruikte: http://codepen.io/chriscoyier/pen/lzjqh

Grappig. In Firefox 25.0.1 zit deze bug nog steeds in ieder geval.