[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

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

Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В 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.

Автор: Bojan Mihelac
Источник: www.i2r.ru




Комментарии

qkxwthxc
30-07-2011   
Kv7qZs , [url=http://wvueyivdjmvr.com/]wvueyivdjmvr[/url], [link=http://kqqslefhufty.com/]kqqslefhufty[/link], http://rmxlidyqvywt.com/

tijwcgonglj
26-07-2011   
NgRwPN <a href="http://uaptbpbquecv.com/">uaptbpbquecv</a>

Keylon
26-07-2011   
Super jzaezd about getting that know-how.

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 3256 сегодня - 3

История про CSS (часть II)
05-01-2010   

Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее

Кол. просмотров: общее - 3245 сегодня - 0

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 3110 сегодня - 2

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 3137 сегодня - 2

Сокращенные команды в CSS
05-01-2010   

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

Кол. просмотров: общее - 3863 сегодня - 5



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects