• Страница 1 из 1
  • 1
Власть народу - относительные размеры шрифтов
koolmix Дата: Воскресенье, 01.04.2012, 00:10 | Сообщение # 1
no-avatar
  • Модератор
  • Сообщений: 315
  • Репутация:
    5
  • Статус: Offline
В качестве первого шага создадим 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.

/* пример файла 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".



Сами кнопки реализуем вот так:
 
  • Страница 1 из 1
  • 1
Поиск: