Virusscanner tips?
inheritance
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.)
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.)
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.
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.
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.
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.
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.
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.
Als je trouwens naar die link kijkt hierboven zie je op welke elementen de body geen invloed heeft.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}
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;
}
Gewijzigd op 19/12/2013 15:08:31 door Michael -
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.
Code (css)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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 */
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 */
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.
Gewijzigd op 19/12/2013 16:02:15 door Michael -