Наследуемые стили во вложенных тегах

Несмотря на то, что мы уже несколько улучшили облик страницы, в предыдущих главах, размер шрифта ненумерованного списка оказался слишком мал, хотя, для него мы указали то же значение, что и для нумерованного списка.

Проблема заключается в том, что элемент ul имеет значение .75 em, а вложенный в него элемент а - имеет значение .7em. В результате элемент а отображается с размером шрифта .525 em (.7*.75). Наследуемость размера шрифтов может работать как на вас, так и против вас. К счастью, решить эту проблему легко, нужно просто задать контекстный селектор для этой ситуации:

<style type="text/css">
body {font-family: verdana, arial, sans-serif; fontsize:100%;}
h1 {font-size:1em}
h3 {font-size:.8em}
p {font-size:.8em}
ol {font-size:.75em}
ul {font-size:.75em}
ul a {font-size:inherit}
a {font-size:.7em}
</style>

Мы использовали значение inherit, чтобы элемент а использовал значение размера шрифта своего родительского элемента. Это не только обеспечивает отображение элемента шрифтом нужного размера, но и позволяет нам в будущем изменить размер шрифта всех элементов списка, подкорректировав значение селектора ol, при этом вложенный элемент а просто унаследует новое значение.

Теперь мы можем проверить масштабируемость нашей разметки.

1. В меню браузера выберите пункт View >> Text Size >> Largest (Вид >> Размер шрифта >> Самый крупный). Обратите внимание, что размер шрифта всех элементов пропорционально увеличился.

2. Измените значение свойства font-size для селектора body. Попробуйте указать 80% или 120%; сохраните страницу и обновите ее в браузере. Как видно, все элементы отображаются в заданных пропорциях. Те из вас, кто менял значения атрибутов size для сотен тегов font на десятках страниц сайта после принятия решения увеличить или уменьшить размер шрифта, оценят данную возможность. Когда в следующий раз ваш клиент попросит изменить размер шрифтов, вы сможете сделать это для всего сайта за 5 с.




Rambler's Top100