|
|
Книга css3 3е издание Серия Бестселлеры OReilly
, находящегося внутри тега
, составляет 100 % и отображается в два раза больше базового для этой веб-страницы, то есть высотой 32 пиксела. Будьте внимательны при исполользовании em и процентных значений, когда имеют место наследуемые свойства размеров шрифтов. Если вы заметили, что какой-то текст выглядит не так, как предусмотрено, необычно большим или ма- леньким, убедитесь в том, что он не наследует параметры. Единица измерения еm. Если вы поняли, как работают процентные отношения, то легко поймете и единицу em. Они функционируют практически одинаково, но большинство веб-дизайнеров все же используют эту единицу измерения из-за при- менения ее в книгопечатании. Слово em позаимствовано из типографского дела. Оно имеет отношение к раз- меру заглавной буквы М определенного шрифта. В мире веб-дизайна это слово приобрело собственное значение. В CSS понятие относится к базовому размеру Глава 6. Форматирование текста 173шрифта текста. Иными словами, значение размера шрифта 1em означает то же са- мое, что и 100 %, как описано в предыдущем разделе. Процентное значение экви- валентно em, умноженному на 100: .5em — 50 % и т. д. Рис. 6.11. Тремя самыми распространенными и наиболее часто применяемыми единицами измерения для установки размеров шрифтов являются пикселы, em и проценты Например, этот CSS-код имеет тот же эффект, что и font-size: 200%; : font-size: 2em; ПРИМЕЧАНИЕ Как и при использовании пикселов, вы не должны указывать пробел между числом и единицей измерения em. Кроме того, даже если значение свойства больше единицы, совсем не нужно добав- лять s в конце: правильно 2.5em, а не 2.5ems. 174 Часть 2. Применение CSS Принцип работы механизма наследования с em точно такой же, как и с процен- тами. Взгляните, например, на верхнюю правую часть рис. 6.11. Шрифт нижнего абзаца определен равным .75em , а поскольку тег абзаца наследует размер шриф- та 2em (32 пиксела) от , в результате получается размер шрифта .75 ⋅ 32 = 24 пик- села. Внутри есть два других тега с размером шрифта .75em . Размер шрифта тега наиболее глубокой вложенности
установлен равным
.75em или, по сути,
75 % от унаследованного. Довольно сложный расчет: 32 пиксела (размер, унасле- дованный от
) ⋅ 75 (размер от ) ⋅ .75 (размер
)
⋅ 75 (собственный размер
). В результате вычислений получается размер, равный приблизительно
14 пикселам.
ОБХОДНОЙ ПРИЕМ
Разбор вложенных конструкций
Унаследованные значения размеров шрифтов могут вызвать проблемы для вложенных (многоуровневых) списков (см. рис. 6.11). Например, у вас имеется стиль ul { font-size: 75% }
, а затем вы создаете вложен
ный список, то есть внутри
расположены другие теги. Получается, что для вложенного
должен быть установлен размер шрифта, равный 75 % от внешнего
. Следовательно, подпункты списков будут отобра
жены меньшим шрифтом, чем пункты и т. д. примени
тельно к подпунктам следующего подуровня.
Чтобы решить эту проблему, создайте дополнительный стиль с селектором потомков (см. раздел «Стилизация вложенных тегов» гл. 3): ul ul {font-size: 100%}
. Этот стиль устанавливает размер шрифта любого
, вло
женного в другой
, равным 100 %. Другими словами,
100 % от размера шрифта родительского элемента ul
, в который вложен другой элемент. В данном примере это обеспечивает сохранение размера шрифта вложенных подпунктов списков равным 75 % от базового размера текста.
Есть еще один способ предотвращения этого эффекта комнаты кривых зеркал, сжимающего текст. В CSS3 вклю
чена новая единица измерения под названием rem. Это название означает Root EM, то есть его значение основано на размере текста корневого (root) элемента. В боль
шинстве случаев это просто относится к базовому раз
меру текста, поэтому значение
.75em
, показанное на рис. 6.11, можно заменить на следующее значение:
font-size: .75rem;
Этот стиль задает размер шрифта равным .75 от ба
зового размера текста, а не текущего размера шриф
та (как в случае применения единиц измерения em).
Корневым элементом в HTML считается элемент html
, который можно найти в начале вебстраницы. При ис
пользовании remзначений можно установить базовый размер текста элемента html
, а затем использовать единицу измерения rem для установки размера тек
ста относительно этого базового размера. Например, можно установить базовый размер текста равным
20 пикселам:
html {
font-size: 20px;
}
А затем воспользоваться единицей измерения rem для создания размера шрифтов относительно этого
20пиксельного базового размера текста, тогда, что
бы задать для всех абзацев размер текста, равный
15 пикселам, нужно добавить следующий стиль: p {
font-size: .75rem;
}
Но нужно иметь в виду, что такую единицу, как rem, понимают на данный момент все основные браузе
ры, кроме браузера Internet Explorer 8 и более ранних версий.
Глава 6. Форматирование текста 175СОВЕТ Текст веб-страницы выделяют самыми различными способами. Этого можно добиться посредством изменения размера шрифта определенного фрагмента текста, отдельных слов или с помощью кон- трастности. Окрашивание текста в темный, светлый или более яркий оттенок визуально выделяет его. Применение контрастности — одно из наиболее важных правил хорошего графического дизай- на. Контрастность может помочь акцентировать важные сообщения, фрагменты текста, привлечь внимание. Форматирование символов и словВам потребуется немало времени для точной и тонкой настройки параметров тек- ста: цвета, размеров шрифтов и т. д. Однако CSS предоставляет также множество других средств для форматирования текста. Из самых распространенных свойств можно выделить, например, полужирное и курсивое начертания, а из менее широ- ко используемых — создание малых прописных букв, буквиц, изменение межсим- вольного интервала и т. д. СОВЕТ Средства языка CSS позволяют комбинировать множество свойств форматирования текста. Слиш- ком «тяжеловесное» оформление делает страницу сложной для чтения и понимания. Хуже всего, если из-за такой стилизации остается негативное впечатление от посещения сайта. Курсив и полужирный шрифтБраузеры отображают текст, заключенный внутри тегов
и
, курсивом (шриф- том с наклонным начертанием), а текст, находящийся в тегах
,
,
(table header — «заголовок таблицы»), тегах заголовков (
|
|
|
|
Скачать 20.28 Mb.