Фиксирование шрифтов на странице с помощью таблицы стилей
Александр Рыбников
www.domovoy.ru
Предположим,
что Вы создали достаточно симпатичную страничку с малым
количеством графических элементов, текст у Вас расположен в
таблице в две колонки. Вы некоторое время любуетесь вашим
творением, но тут приходит Ваш приятель и погружает Вас в
глубокое уныние, поставив в настройках броузера более
крупный шрифт. Вы видите, что страница приняла вид весьма
далёкий от того, что было задумано изначально. Что же делать?
Самый простой способ решения подобной задачи заключается в
составлении таблицы стилей для Вашего сайта. Эти таблицы
относятся к каскадным таблицам стилей (Cascading Style
Sheets – CSS). Это означает, что при определении стиля
какого-нибудь элемента все элементы, находящиеся внутри него,
наследуют этот стиль.
<div class=text1>Стиль text1</div>
- в этом случае фраза "Стиль text1" будет напечатана красным
жирным шрифтом Arial размером 10 pt.
Если же эту фразу сделать ещё и ссылкой, то она не будет
подчёркнутой, так как text-decoration: none:
<a href=# class=text1>Стиль text1</a>
Аналогично
Работающий вариант:
Стиль text2
<div class=text2>Стиль text2</div>
- в этом случае фраза "Стиль text2" будет напечатана чёрным
шрифтом Sans-serif размером 14 pt.
Можно не составлять таблицу стилей отдельно, а задать стиль
непосредственно в теге. Так, например, чтобы создать
неподчёркнутую ссылку, необходимо её реализовать в таком
виде:
Преимуществом реализации таких способов задания стилей
является то, что всё рассказанное выше работает как в
Internet Explorer , так и в Netscape Navigator. При этом
даже если Вы поменяете настройки любого из этих броузеров с
целью увеличения или уменьшения размера шрифтов, то Вы
увидите, что они не изменяются, - использование стилей не
позволяет броузеру менять размеры шрифтов. Это является
большим достижением CSS, так как теперь Вы можете
рассчитывать, что у большинства пользователей страница будет
отображаться именно так, как Вы и ожидаете этого. Правда,
применение CSS вовсе не спасает от изменения размеров
системных шрифтов Widows, но у большинства людей шрифт
Normal. Если же пользователь ставит крупный шрифт, то он
увидит немалое количество Интернет-страниц в неадекватном
виде.
Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее
Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее
Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее
Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее
