Доклад

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

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

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

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

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

от 25%

Подписываем

договор

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

Скидка 25% при заказе до 20.2.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. Биография на тему Вильсон Томас Вудро
3. Реферат на тему Poem The Decimal Point Essay Research Paper
4. Реферат Учет банковских операций
5. Реферат на тему SEX 2000 Essay Research Paper sweating outpouring
6. Реферат Гастрит и гастродуоденит
7. Реферат Сделки.Понятия.Виды сделок
8. Кодекс и Законы Наложение административных взысканий
9. Реферат на тему Publication Of The AfricanAmerican Mosaic A Library
10. Биография на тему Ион Пантелеевич Друцэ