• Новости
  • Темы
    • Экономика
    • Здоровье
    • Авто
    • Наука и техника
    • Недвижимость
    • Туризм
    • Спорт
    • Кино
    • Музыка
    • Стиль
  • Спецпроекты
  • Телевидение
  • Знания
    • Энциклопедия
    • Библия
    • Коран
    • История
    • Книги
    • Наука
    • Детям
    • КМ школа
    • Школьный клуб
    • Рефераты
    • Праздники
    • Гороскопы
    • Рецепты
  • Сервисы
    • Погода
    • Курсы валют
    • ТВ-программа
    • Перевод единиц
    • Таблица Менделеева
    • Разница во времени
Ограничение по возрасту 12
KM.RU
Рефераты
Главная → Рефераты → Информатика, программирование
  • Новости
  • В России
  • В мире
  • Экономика
  • Наука и техника
  • Недвижимость
  • Авто
  • Туризм
  • Здоровье
  • Спорт
  • Музыка
  • Кино
  • Стиль
  • Телевидение
  • Спецпроекты
  • Книги
  • Telegram-канал

Поиск по рефератам и авторским статьям

Власть народу - относительные размеры шрифтов

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++" в порядке возрастания.

<link rel="stylesheet" href="style.css"

type="text/css" />

<link rel="alternate stylesheet"

type="text/css" href="large.css" title="A++" />

<link rel="alternate stylesheet"

type="text/css" href="medium.css" title="A+" />

<link rel="alternate stylesheet"

type="text/css" href="small.css" title="A" />

<link rel="alternate stylesheet"

type="text/css" href="x-small.css" title="A-" />

<link rel="alternate stylesheet"

type="text/css" href="xx-small.css" title="A--" />

JavaScript

Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи "Alternative Style: Working With Alternate Style Sheets".

<script  

      language="JavaScript1.2"  

      src="styleswitcher.js"  

      type="text/javascript">

</script>

Сами кнопки реализуем вот так:

<form name="font_select" action="GET">    

      <input      

      type="button"      

      onclick="javascript:fontsizedown();"      

      value=" font - "/>    

      <input      

      type="button"      

      onclick="javascript:fontsizeup()"      

      value=" font + "/>

</form>

Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.

Предупреждение

Не забывайте, в некоторых версиях IE есть баг, из-за которого он начинает странно себя вести, когда перед типом документа DOCTYPE идет декларация XML.

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/

Дата добавления: 03.02.2005

База рефератов на портале KM.RU существует с 1999 года. Она пополнялась не только готовыми рефератами, докладами, курсовыми, но и авторскими публикациями, чтобы учащиеся могли использовать их и цитировать при самостоятельном написании работ.


Это популяризирует авторские исследования и научные изыскания, что и является целью работы истинного ученого или публициста. Таким образом, наша база - электронная библиотека, созданная в помощь студентам и школьникам.


Уважаемые авторы! Если Вы все же возражаете против размещения Вашей публикации или хотите внести коррективы, напишите нам на почту info@corp.km.ru, мы незамедлительно выполним Вашу просьбу или требование.


официальный сайт © ООО «КМ онлайн», 1999-2025 О проекте ·Все проекты ·Выходные данные ·Контакты ·Реклама
]]>
]]>
Сетевое издание KM.RU. Свидетельство о регистрации Эл № ФС 77 – 41842.
Мнения авторов опубликованных материалов могут не совпадать с позицией редакции.

Мультипортал KM.RU: актуальные новости, авторские материалы, блоги и комментарии, фото- и видеорепортажи, почта, энциклопедии, погода, доллар, евро, рефераты, телепрограмма, развлечения.

Карта сайта


Подписывайтесь на наш Telegram-канал и будьте в курсе последних событий.


Организации, запрещенные на территории Российской Федерации
Telegram Logo

Используя наш cайт, Вы даете согласие на обработку файлов cookie. Если Вы не хотите, чтобы Ваши данные обрабатывались, необходимо установить специальные настройки в браузере или покинуть сайт.