Власть народу — относительные размеры шрифтов
В качестве первого шага создадим CSS-файл с основными стилями, в котором будут использоваться относительные размеры шрифтов в сочетании с размером шрифта, установленном на машине пользователя по-умолчанию. Для этого размеры мы будем задавать в процентах или в em-ах. К сожалению, в большинстве вариантов таких кнопок игнорируются установки пользователя. В данной статье мы приводим решение, которое… Читать ещё >
Власть народу — относительные размеры шрифтов (реферат, курсовая, диплом, контрольная)
Власть народу — относительные размеры шрифтов
Bojan Mihelac.
Относительные размеры шрифтов делают сайты более удобными для чтения — но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В Internet Explorer, наиболее распространенном на данный момент браузере, эта возможность спрятана в одном из меню второго уровня, из-за чего изменение размера текста становится чересчур сложной задачей для многих пользователей. Эта задача намного упростится, если на страницах сайта присутствуют кнопки, позволяющие быстро изменить размер шрифта.
К сожалению, в большинстве вариантов таких кнопок игнорируются установки пользователя. В данной статье мы приводим решение, которое позволят менять размера текста, и при этом не вступает в противоречие с настройками пользователя.
CSS
В качестве первого шага создадим CSS-файл с основными стилями, в котором будут использоваться относительные размеры шрифтов в сочетании с размером шрифта, установленном на машине пользователя по-умолчанию. Для этого размеры мы будем задавать в процентах или в em-ах.
/* размер шрифта по-умолчанию */
@import url (small.css);
/* Совместимые с Netscape 4 размеры шрифтов */
body, div, p, th, td, li, dd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 130%;
font-weight: bold;
}
h2 {
font-size: 110%;
font-weight: bold;
}.
Теперь создадим пять альтернативных стилей, где используются определенные в спецификации CSS абсолютные размеры: «xx-small », «x-small », «small », «medium », и «large ». В любом браузере коэффициент масштабирования между ними должен быть 1.2, как это рекомендует стандарт CSS2. Также следует учесть и обойти проблемы масштабирования в IE5 и Opera (более подробно эта тема раскрыта в замечательной статье Тода Фарнера (Todd Fahrner) «Размер имеет значение »).
/* пример файла xx-small.css */.
body,.
body div,.
body p,.
body th,.
body td,.
body li,.
body dd {
font-size: xx-small;
voice-family: «» } «»;
voice-family: inherit;
font-size: x-small.
}
html>body,.
html>body div,.
html>body p,.
html>body th,.
html>body td,.
html>body li,.
html>body dd {
font-size: x-small.
}.
Получившиеся файлы можно посмотреть по данным ссылкам: xx-small.css, x-small.css, small. css, medium. css, large.css.
HTML
Теперь давайте создадим HTML-документ и подключим к нему основной и альтернативный CSS-файлы, присвоив альтернативным файлам имена «A— «, «A- «, «A », «A+ «и «A++ «в порядке возрастания.
JavaScript.
Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи «Alternative Style: Working With Alternate Style Sheets » .
Сами кнопки реализуем вот так:
Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.
Предупреждение
Не забывайте, в некоторых версиях IE есть баг, из-за которого он начинает странно себя вести, когда перед типом документа DOCTYPE идет декларация XML.
Список литературы
Для подготовки данной работы были использованы материалы с сайта internet.