Доклад

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

Работа добавлена на сайт bukvasha.net: 2015-06-29

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 27.4.2025


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.


1. Курсовая на тему Классификация затрат и их подробное описание на примере тура по Золотому Кольцу
2. Реферат Анахронизм 2
3. Курсовая на тему Изучение отношений потребителей к компании
4. Реферат на тему Bilingual Education Is It Our Responsibility Essay
5. Курсовая Договоры торгового коммерческого посредничества в предпринимательской деятельности
6. Реферат на тему История государства и права Швеции в период с XIX в по нач XX в 2
7. Реферат на тему Английская революция - первая революция нового времени
8. Реферат Показники і методи вимірювання продуктивності праці
9. Методичка на тему Вражаючі дії ядерної хімічної зброї
10. Реферат Местные налоги и их роль в налоговой системе Российской Федерации