Most of the font-size definitions in this chapter (and indeed, in this book) use relative
units. The problem with using ems, however, is that they compound. For example, if you
have a typical nested list like the one just shown, and you define the following CSS, the
first level of the list will have text sized at 1.5em; but the second-level list is a list within a
list, so its font-size value will be compounded (1.5 5 1.5 = 2.25em).
units. The problem with using ems, however, is that they compound. For example, if you
have a typical nested list like the one just shown, and you define the following CSS, the
first level of the list will have text sized at 1.5em; but the second-level list is a list within a
list, so its font-size value will be compounded (1.5 5 1.5 = 2.25em).
html {
font-size: 100%;
}
body {
font-size: 62.5%;
font-family: Verdana, Arial,
å Helvetica, sans-serif;
}
li {
font-size: 1.5em;
}
The simple workaround for this is to use a contextual selector—li li—to set an explicit
font-size value for list items within list items, as shown in the following rule.
li li {
font-size: 1em;
}
With this, all nested lists take on the same font-size value as the parent list, which in this
case is 1.5em.
font-size: 100%;
}
body {
font-size: 62.5%;
font-family: Verdana, Arial,
å Helvetica, sans-serif;
}
li {
font-size: 1.5em;
}
The simple workaround for this is to use a contextual selector—li li—to set an explicit
font-size value for list items within list items, as shown in the following rule.
li li {
font-size: 1em;
}
With this, all nested lists take on the same font-size value as the parent list, which in this
case is 1.5em.
No comments:
Post a Comment