CSS

Десять приёмов CSS

1. Сокращенные правила CSS для шрифта

Определить стиль шрифта в CSS можно например так:

font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-varient: small-caps;

font-family: verdana,serif

Однако в этом нет необходимости, поскольку можно использовать следующий сокращенный вариант :

font: 1em/1.5em bold italic small-caps verdana,serif

Уже лучше. НО! Такая сокращенная форма записи будет работать только в том случае, если явно заданы font-size и font-family. Если же не задать такие свойства, как font-weight, font-style или font-variant, то им будут присвоены значения по умолчанию, т.е. normal, имейте это ввиду.

2. Два класса сразу

Как правило, для тэга задается только один класс одновременно, однако это не значит, что нельзя задать больше. В действительности можно задать столько классов, сколько захочется, например:

<p class="text side">...</p>

Использование этих двух классов вместе (разделенных пробелом, а не запятой) означает, что при верстке используются правила, заданные как в text, так и в side. Если какие-то правила разных классов перекрываются, то приоритет имеет тот класс, который задан позже других в таблице стилей.

3. Значение толщины рамки в CSS по умолчанию

При написании правила CSS для рамки, как правило, устанавливаются цвет, ширина и стиль (не обязательно в таком порядке :). Например, border: 3px solid #000 даст вам черную рамку, окрашенную в сплошной черный цвет толщиной в три пикселя.

Если бы вы просто задали: border: solid, то для определения остальных параметров были бы использованы параметры по умолчанию. А они следующие: толщина имеет значение medium, т.е. где-то 3-4 пикселя, а цвет задается цветом текста внутри рамки. Если же эти параметры как раз те, которые вам нужны, вы можете не определять их явным образом!

4. Игнорируемое IE свойство !important

Для правил CSS характерно следующее поведение: сколько бы их не было, наивысший приоритет имеет последнее. Однако если использовать !important после команды, то эта команда CSS будет иметь наивысший приоритет вне зависимости от того, что находится после нее. Это справедливо для всех браузеров, кроме IE. Например:

margin-top: 3.5em !important; margin-top: 2em

В этом случае отступ будет равен 3,5em для всех браузеров, кроме IE, для которого величина отступа будет равна 2em.

(Остерегайтесь также элемента CSS child selector, содержание которого IE также игнорирует).

5. Методика замены нестандартных шрифтов изображениями

Для разметки с точки зрения скорости загрузки и преимуществ доступа (копирование и т.п.) предпочтительно использовать чистый текст, а не изображения. Однако если вы обязательно использовать именно какой-то определенный шрифт, который может быть не установлен у посетителя, то у вас нет выбора.

Например, вам нужно, чтобы в заголовке каждой страницы была надпись "Купить виджет". А поскольку вы именно ими и торгуете, то вам нужно, чтобы эта фраза находилась поисковой машиной. И поскольку вы хотите использовать нестандартный шрифт, то вы вставляете изображение:

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

Решение само по себе нормальное, однако надо учесть, что поисковые машины не уделяют столько внимания альтернативному тексту для изобржений, сколько обычному тексту (потому что вебмастера имеют привычку писать в альтернативный текст всякую ерунду). Поэтому альтернативой будет такой способ:

<h1><span>Buy widgets</span></h1>

Однако здесь уже не используется ваш нестандартный шрифт. Чтобы выйти из этой ситуации, поместите следующие команды в документ CSS:

h1

{

background: url(widget-image.gif) no-repeat;

}

h1 span

{

position: absolute;

left:-2000px

}

Картинка с надписью нужным вам шрифтом будет отображена стандартным шрифтом, который будет безопасно расположен на расстоянии 2000 пикселей слева от документа и не будет виден.

NB! в комментах нашлось хорошее альтернативное решение от Aaron Eldreth (TheCollective4.com, His Articles), основанное на использовании вместо left:-2000px свойств visible: hidden или display: none:

h1 span

{

/* Note: Either will work. Take your pick, though NS uses a different attribute for the visible property */

display: none;

visible: hidden;

6. Альтернатива box model hack в IE

Box model hack используется для устранения проблемы в браузерах младше 6-ой версии IE, где рамка и набивка включены в ширину элемента, а не добавляются. Например, при задании размеров контейнера можно использовать следующее правило:

#box

{

width: 100px;

border: 5px;

padding: 20px;

}

Правило CSS применяется тогда следующим образом:

<div id="box">...</div>

Это обозначает, что полная ширина бокса равна 150 пикселей (100 пикселей непосредственно ширина + по 5 пикселей каждая рамка + по 20 пикселей набивка с обеих сторон) во всех браузерах, кроме младших 6-го IE. В этих браузерах полная ширина будет равна 100 пикселей, причем набивка и толщина рамки уже включены в ширину. Модель позволяет исправить такое поведение, но это не самый хороший способ.

Простым решением будет использование следующей таблицы стилей:

#box

{

width: 150px;

}

#box div {

border: 5px;

padding: 20px;

}

А новый код HTML будет тогда таким:

<div id="box"><div>...</div></div>

Теперь ширина бокса всегда будет 150 пикселей, вне зависимости от браузера.

7. Выравнивание блочных элементов по центру

Ну вот захотелось вам, чтобы у вас был сайт с постоянной шириной, содержимое которого находилось бы посередине экрана. Это можно сделать например так:

#content

{

width: 700px;

margin: 0 auto;

}

Затем каждый элемент заключается в <div id="content"> в теле HTML документа, и получает автоматический отступ слева и справа, обеспечивая постоянное расположение элемента в центре экрана. Просто, но есть один нюанс - есть ведь еще и браузеры, которые не центрируют элементы при использовании этой команды. Для этого придется немного изменить правило:

{

text-align: center;

}

#content

{

text-align: left;

width: 700px;

margin: 0 auto;

}

Таким образом мы отцентрируем основное содержимое, однако и текст будет выравниваться по середине. Для изменения последнего мы задаем свойство align: left в элементе div.

8. Вертикальное выравнивание с помощью CSS

Реализовать вертикальное выравнивание в таблицах проще простого. Для того, чтобы выровнять содержание по середине (высоты ячейки), можно использовать конструкцию vertical-align: middle. Допустим, у вас есть пункт в меню навигации, чья высота равняется 2em, и вы вставляете команду вертикального выравнивания в правило CSS. Однако текст все равно останется наверху.

Хм, странное поведение... Вот решение. Установите высоту линии такой же, как и высота самого бокса в CSS. В частности, для нашего примера бокс высотой 2em, поэтому нужно вставить в правило CSS line-height: 2em, и текст теперь будет находиться посередине бокса!

9. Позиционирование внутри контейнера

Одним из неоспоримых преимуществ CSS является то, что с их помощью мы можем поместить объект в любом месте документа. Также можно (а иногда и желательно) расположить объекты в контейнере. Это тоже делается просто. Просто создайте следующее правило CSS для контейнера:

#container

{

position: relative

}

Теперь любой элемент, который находится в этом контейнере, будет располагаться относительно него. Допустим, у нас есть такой HTML-код:

<div id="container"><div id="navigation">...</div></div>

Для того, чтобы поместить меню на расстоянии точно 30 пикселей слева и 5 сверху от границы контейнера, можно использовать следующее правило CSS:

#navigation

{

position: absolute;

left: 30px;

top: 5px

}

В этом примере можно было также использовать правило margin: 5px 0 0 30px, , но есть некоторые случаи, когда предпочтительно использовать именно позиционирование.

10. Распространяем фоновый цвет ячейки до нижнего края страницы

Одним из недостатков таблиц стилей является невозможность контролировать положение по высоте, в отличие от табличной верстки. Допустим, вам нужно получить слева колонку с навигацией по сайту. И вы хотите, чтобы ее фон был голубым, в то время, как фон страницы белый. Для этого применятся простое правило:

#navigation

{

background: blue;

width: 150px;

}

Но здесь есть одна загвоздка: так как высота меню меньше высоты экрана, то под ней внизу до конца экрана будет виден белый фон страницы. Это сильно портит дизайн страницы. И что нам с этим делать?

К сожалению, единственным решением является обман - т.е. задание телу документа фоновой картинки того же цвета и той же ширины, что и наша колонка. Сделаем это так:

{

background: url(blue-image.gif) 0 0 repeat-y;

}

Ширина картинки, которую вы зададите в качестве фоновой, должна быть ровно 150 пикселей, соответственно, и ее цвет должен быть тем же, что и фоновый цвет левой колонки. Недостатком такого способа является то, что вы не можете задать ширину колонки в em, т.е. невозможно сделать "резиновую" страницу.

На момент написания статьи этот способ был единственным решением проблемы левой колонки. Будем надеяться, что CSS3 предоставит-таки кошерный способ ее решения.

Сокращение времени загрузки страниц с помощью CSS

1. Избегайте использования таблиц для разметки страницы

Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

• Браузеры анализируют таблицы дважды: первый раз для того, чтобы оценить структуру таблицы, и второй — для определения их содержимого.
• Таблицы отображаются сразу полностью, а не по мере загрузки.
• Таблицы заставляют использовать прозрачные картинки для определения ширины колонок и т.п.
• CSS требует гораздо меньше кода, чем перегруженные таблицы
• Весь CSS-код может быть вынесен во внешний файл, который будет грузиться всего один раз и храниться в кэше браузера.
• При помощи CSS можно контролировать очерёдность загрузки элементов страницы.

2. Не используйте картинки для отображения текста

Большинство кнопок и надписей можно отобразить при помощи CSS. Взгляните на пример:

a:link.example, a:visited.example, a:active.example { color:#fff; background:#f90; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; border:4px #00f outset } a:hover.example { color:#fff; background:#fa1; font-size:1.2em; font-weight:bold; text-decoration:none; padding:0.2em; border:4px #00f inset

Этот CSS определяет простую кнопку, которая меняет свой вид при наведении курсора. Таким образом можно создавать и более сложные объекты.

3. Загрузка картинок через CSS

Некоторые фоновые изображения лучше загружать через CSS. Например, чтобы показать картинку размером 200х100, можно использовать следующий код:

<div class="pretty-image"></div>

И соответствующий CSS:

.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

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

Эта техника лучше всего подходит для загрузки чисто декоративных, фоновых элементов страницы. Если изображение является частью содержимого, всё равно придётся использовать тег IMG.

4. Использование контекстных стилей

Данный код неэффективен:

<p class="text">This is a sentence</p> <p class="text">This is another sentence</p> <p class="text">This is yet another sentence</p> <p class="text">This is one more sentence</p> .text { color: #03c; font-size:2em }

Вместо того, чтобы присваивать класс каждому параграфу, их можно сгруппировать в одном элементе DIV с тем же классом:

<div class="text"> <p>This is a sentence</p> <p>This is another sentence</p> <p>This is yet another sentence</p> <p>This is one more sentence</p> </div> .text p { color: #03c; font-size:2em }

Этот код указывает браузеру, что каждый параграф внутри элемента с классом text будет иметь цвет #03c и размер шрифта в 2em.

Вы могли заметить, что цвет здесь указан всего тремя символами, а не шестью. В данном случае #03c является сокращённым написанием значения цвета #0033cc.

5. Использование сокращений

Шрифт

Лучше написать:

font: 1em/1.5em bold italic serif

...вместо

font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-family: serif

Границы

Лучше:

border: 1px black solid

...вместо

border-width: 1px;

border-color: black;

border-style: solid

Фон

Пишите:

background: #fff url(image.gif) no-repeat top left

...вместо

background-color: #fff;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

Отступы и границы

Используйте:

margin: 2px 1px 3px 4px

(верх, вправо, низ, влево)

...вместо

margin-top: 2px

margin-right: 1px;

margin-bottom: 3px;

margin-right: 4px

Аналогично:

margin: 5em 1em 3em

(верх, влево и вправо, низ)

...вместо

margin-top: 5em;

margin-bottom: 1em;

margin-right: 1em;

margin-right: 4em

И:

margin: 5% 1% (верх и низ, влево и вправо)

...вместо

margin-top: 5%;

margin-bottom: 5%;

margin-right: 1%;

margin-right: 1%

Эти правила применяются к атрибутам margin, border и padding.

6. Минимизирование пробелов, переводов строк и комментариев

Каждый символ — буква или пробел — занимают один байт. Каждый лишний символ только увеличивает размер страниц. Поэтому старайтесь поменьше нажимать Enter и Tab в процессе вёрстки. Кроме того, не забывайте объединять CSS-стили.

7. Используйте относительные ссылки

Абсолютные ссылки занимают намного больше места, чем относительные. А кроме того, создаёт дополнительную нагрузку на браузер, что более важно. Пример абсолютной ссылки: . Гораздо правильней будет написать <a href="filename.htm">. Но что если нужный файл находится в другом каталоге? Вот несколько примеров, которые помогут вам разобраться в этом вопросе:

• <a href="/"> - Вызов корневой страницы сайта
• <a href="/filename.html"> - Вызов страницы в корневом каталоге
• <a href="/directory/filename.html"> - Файл в подкаталоге "корня"
• <a href="./"> - Обращение к текущему каталогу и index.html
• <a href="../"> - Каталог-родитель текущего и index.html
• <a href="../filename.html"> - То же самое, с указанием файла
• <a href="../../"> - index.html в двух каталогах выше текущего

8. Не увлекайтесь применением тегов META

Большинство тегов META совершенно ненужные. Если интересно, можно взглянуть на все существующие варианты. Самые важные теги (keywords и description) используются для оптимизации поисковых машин. При использовании атрибута content в теге META старайтесь не превышать размера в 200 символов. Большие описания и множество ключевых слов могут быть восприняты поисковыми машинами как спам.

9. Выносите CSS и JavaScript в отдельные файлы

Все это знают, но не всегда пользуются. Вот так выглядит вызов CSS из внешнего файла:

<link type="text/css" rel="stylesheet" href="filename.css" />

И соответственно JavaScript:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Любой внешний файл грузится всего один раз и затем сохраняется в локальном кэше. Ограничений на количество «подключаемых» внешних файлов не существует.

10. Ставьте / (слэш) в конце ссылок на каталоги

Это неправильный вариант написания ссылки : <a href="hттp://www.URL.com/directoryname">

Необходимо писать так : <a href="hттp://www.URL.com/directoryname/">

Объясняется это очень просто. В первом случае браузер не знает, на что ведёт ссылка: на файл или каталог. "Слэш" сразу даёт понять, что эта ссылка ведёт в каталог, и необходимости в дополнительной проверке не возникает.

Встраивание CSS в документ

Существует четыре способа встраивания CSS в документ:

• Внедрение
• Связывание
• Импортирование
• Встраивание

При внедрении описание стилей находиться между тэгами <STYLE></STYLE> и размешаются между тегами <HEAD></HEAD>

Пример:

<STYLE>

<!--

P {

text-align : justify;

margin-right : 3pt;

margin-left : 3pt;

font-size : 10pt;

font-family : sans-serif;

}

-->

</STYLE>

В результате - мы задали выравнивание содержимого всех параграфов по ширине, отступы слева и справа, размер шрифта и отображение текста параграфа шрифтом Sans-serif.

При связывании Вы располагаете стили в отдельном файле. Тогда между тегами <HEAD></HEAD> каждого HTML документа нужно добавить ссылку на CSS файл:

<LINK REL=STYLESHEET TYPE="text/css" HREF="Example.css">

Example.css - это Ваш CSS файл, содержащий описание применяемых стилей. Если он находиться в другом каталоге, нужно указать к нему путь. Создается CSS файл в любом текстовом редакторе, например, в Блокноте, нужно будет только изменить расширение текстового файла на CSS. В CSS файле не должны указываться теги <STYLE></STYLE>.

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

При импортировании, также как и при связывании встраивается внешняя таблица стилей, но с помощью свойства @import таблицы стилей:

@import: url (mystyles.css)

@import: url (mystyles.css) следует задавать в начале стилевого блока <STYLE> или связываемой таблицы стилей перед заданием остальных правил.

Встраивание в тэги - тэги HTML имеют параметр style, в котором можно задать стили. Например, в следующем примере задаётся форматирование заголовка втрого уровня, определяющее его отображение шрифтом красного цвета:

<H2 style="color: red">Пример встраивания</h2>

Все способы встраивания CSS свободно сочетаются в одном документе.

Pассмотрим следующие свойства шрифтов: font-size, font-style, font-family. По каждому свойству шрифта, для наглядности, будут приведены небольшие примеры.

Свойство font-size

Свойство font-size определяет размер шрифта. Обычно задается в пикселях px или в процентах pt.

Пример:

 P {

font-size : 10pt;

}

EM {

font-size : 10px;

}

Свойство font-style

Свойство font-style определяет стиль шрифта из выбранного семейства: нормальный (normal), курсивный (italic) или наклонный (oblique).

Примеры:

1.Normal:

EM {

font-style : normal;

}

Отображение в браузере: Вася Пупкин.

2.Italic:

EM {

font-style : italic;

}

Отображение в браузере: Вася Пупкин.

Свойство font-family

Это свойство показывает каким шрифтом будет отображен текст. Через запятую можно указывать несколько шрифтов.

Приведу фрагмент стиля:

P {

FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; text-align: justify; padding-right: 3px;

}

В данном случае текст заключенный в параграфы <p></p> будет отображаться шрифтом Arial, а если на пользовательской машине не установлен этот шрифт то шрифтом Helvetica, а если нет и последнего то шрифтом sans-serif.

При использовании свойств шрифтов часто приходиться выбирать разные свойства для разных элементов.

Приведу пример CSS:

TD {

FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif

}

B {

FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif

}

H2 {

FONT-WEIGHT: bold; FONT-SIZE: 12pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt; FONT-FAMILY: Arial, Helvetica, sans-serif

}

H3 {

FONT-WEIGHT: bold; FONT-SIZE: 9pt; COLOR: #829eaa; margin-bottom: 3pt; LINE-HEIGHT: normal; FONT-FAMILY: Arial, Helvetica, sans-serif

}

H4 {

FONT-WEIGHT: bold; FONT-SIZE: 10pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt; FONT-FAMILY: Arial, Helvetica, sans-serif

}

H5 {

FONT-WEIGHT: bold; FONT-SIZE: 8pt; MARGIN: 0px; COLOR: #000000; TEXT-INDENT: 0pt; FONT-FAMILY: Arial, Helvetica, sans-serif

}

Раздвижные двери CSS

9.12.2003

Среди редко обсуждаемых преимуществ CSS—возможность наложения фоновых изображений с целью получения различных эффектов. В соответствии со стандартом CSS2 для каждого фонового изображения требуется отдельный HTML элемент. В большинстве случаев, типичный код, описывающий общепринятые компоненты интерфейса, предоставляет в наше распоряжение несколько HTML элементов.

Один из таких случаев—навигация на основе закладок. Пришло время вернуть контроль над закладками, популярность которых в качестве основного средства навигации постоянно растет. А теперь благодаря широкой поддержке CSS мы можем улучшить качество и внешний вид закладок на наших сайтах. Вы, скорее всего уже в курсе, что CSS можно использовать для «приручения» простого ненумерованного списка. Возможно, вы даже видели списки с дизайном в виде закладок, которые выглядят примерно так:

А что если бы мы могли взять код в точности из предыдущего примера и превратить закладки в нечто похожее на это:

С помощью несложного CSS это возможно.

В чем новшество?

Многие из встречавшихся мне CSS-закладок (закладки, основанные на CSS) страдают однообразием своего дизайна: цветные прямоугольники, возможно с обводкой, текущая закладка без обводки, цвет меняется для состояния hover. Неужели это все, что CSS может нам предложить? Несколько прямоугольников с одноцветной заливкой?

Перед тем как CSS получил широкое распространение, в навигационном дизайне появилось много новых идей: причудливые формы, искусные переходы цвета, имитирование интерфейсов из реального мира. Такой дизайн, однако, основывался в большой степени на сложных конструкциях из растрированного текста и многократно вложенных таблиц. Редактирование текста или смена последовательности размещения закладок были обременительным делом. Масштабирование текста было невозможным или приводило к серьезным проблемам в композиции страницы.

Навигация из простого текста легка в редактировании и загружается значительно быстрее, нежели навигация на основе растрированного текста. Кроме того, хотя мы и можем добавить атрибут alt для каждого изображения, простой текст, все же, более общедоступен, так как может быть масштабирован. Поэтому неудивительно, что навигация на основе простого текста возвращается в веб-дизайн. Однако внешний вид CSS-закладок до сих пор был шагом назад в дизайне, и уж конечно совсем не тем, что можно включить в дизайн-портфолио. Новые технологии (как, например, CSS) должны позволить создавать нечто лучшее и с таким же качеством дизайна, которое давало использование таблиц и закладок на основе растровых изображений.

Метод «Раздвижных дверей»

Мы можем создать красивые, действительно гибкие элементы интерфейса, которые расширяются и сужаются в зависимости от размера текста, используя два отдельных фоновых изображения. Одно—для левой части закладки, другое—для правой. Представьте, что эта пара картинок—Раздвижные двери, закрывающие один дверной проем. Эти двери сдвигаются и перекрываются больше, если дверной проем узкий, и наоборот, раздвигаются и перекрываются меньше, если нужно закрыть более широкое пространство. Это показано на иллюстрации:

Согласно этой модели одно изображение перекрывает часть другого. Если предположить, что по краям наших картинок есть нечто уникальное, как, например скругленный угол закладки, мы вряд ли захотим, чтобы одна картинка полностью закрывала другую, находящуюся позади. Чтобы этого не произошло, мы сделаем переднюю (в нашем случае левую) картинку как можно более узкой. Но при этом картинка должна быть достаточно широкой, чтобы сохранилась ее видимая уникальность. В нашем случае уникальными являются скругленные углы, поэтому передняя картинка будет шириной с эту, скругленную часть изображения:

Если размер закладки увеличится в результате, например, масштабирования текста, наши картинки разойдутся в стороны, обнажив неприятный разрыв. Следовательно, нужно оценить масштаб приемлемого расширения. Как сильно может увеличиться объект при масштабировании текста в браузере? Реально следует рассчитывать на возможность увеличения до 300%. Чтобы компенсировать этот рост, нужно растянуть фоновые изображения. В нашем примере, мы сделаем заднюю картинку (правая сторона) размером 400х150 пикселей, а переднюю—9х150 пикселей.

Не забывайте, что фоновые изображения видны только в «дверном проеме» элемента, к которому они применены («дверной проем»—область контента + отступ). Обе наши картинки прикреплены к внешним углам их соответствующих элементов. Видимые части этих изображений объединяются внутри дверного проема и образуют форму закладки:

Когда закладка увеличивается, изображения раздвигаются, заполняя более широкий проем, при этом видимая область изображений также становится больше:

Для нашего примера я создал в Photoshop'е два изображения с мягким, имитирующим трехмерность, тонированием. Для одной из закладок я высветлил заливку и затемнил обводку—этот вариант будет представлять «текущую» закладку. Следуя выбранной модели с левым и правым изображениями, мы должны разрезать картинку на две части:

То же самое нужно сделать и со светлым изображением для текущей закладки. Получив таким образом все 4 изображения, (1, 2, 3, 4) мы можем приступить к созданию кода и CSS для наших закладок.

Создание закладок

По мере знакомства с созданием горизонтальных списков при помощи CSS вы заметите как минимум два способа расположения группы объектов в один ряд. У каждого есть свои преимущества и недостатки. Оба требуют обращения к довольно сложным аспектам CSS, в результате можно быстро запутаться. Первый способ использует строчные элементы, второй—свойство float.

Первый способ—возможно более распространенный—предполагает изменение свойства display на «inline» (строчный). «Строчный» метод привлекателен своей простотой. Однако он приводит к проблемам в реализации нашего метода Раздвижных дверей в некоторых браузерах. Второй способ, на котором мы и сосредоточим наше внимание, использует плавающую модель для выстраивания элементов списка в горизонтальный ряд. Плавающая модель, однако, тоже может разочаровать. Ее противоречивое поведение порой нарушает всю мыслимую логику. Но все же общее понимание того, как справляться с несколькими плавающими элементами и знание надежных способов «выхода» из плавающего ряда (или его заключения в контейнер) может сотворить чудеса.

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

Начнем со следующего кода:

<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

На практике блок #header мог бы содержать например, еще логотип и форму для поиска. В нашем примере мы сократим значение href для каждой ссылки до “#”. Понятно, что в реальной жизни вместо этого значка будет указан путь к файлу или папке.

Начнем работу с CSS с присвоения свойства float контейнеру #header. Это дает гарантию того, что контейнер в действительности «вмещает» элементы списка, которые тоже будут плавающими. Так как мы сделали #header плавающим, нам нужно присвоить ему ширину в 100%. Мы также добавим временный желтый фон, чтобы убедиться, что этот родительский элемент растягивается на всю ширину позади закладок. Ну и наконец зададим несколько основных шрифтовых свойств, чтобы обеспечить единство внешнего вида элементов:

#header {
  float:left;
  width:100%;
  background:yellow;
  font-size:93%;
  line-height:normal;
  }

Мы также зададим нулевое значение для полей и отступов элементов ul и li и уберем маркер списка. Для всех элементов списка напишем объявление float:left:

#header ul {
  margin:0;
  padding:0;
  list-style:none;
  }
#header li {
  float:left;
  margin:0;
  padding:0;
  }

Для ссылок мы зададим блоковое отображение с тем, чтобы контролировать происходящее, не беспокоясь о строчной модели:

#header a {
  display:block;
  }

Затем мы добавим наше правое фоновое изображение к элементу списка (изменения и добавления показаны полужирным шрифтом):

#header li {
  float:left;
background:url("norm_right.gif")
    no-repeat right top;
margin:0;
  padding:0;
  }

Перед добавлением левого фонового изображения сделаем паузу и посмотрим, что мы имеем к этой минуте, в примере 1. (Не обращайте внимания на правило, которое я применил к элементу в файле примера. Оно лишь задает основные значения для полей, отступов, цветов и текста.)

- - -

Теперь мы можем разместить левое изображение впереди правого, применив его к ссылке (нашему внутреннему элементу). Сразу же добавим отступ, чтобы отодвинуть текст от краев закладки:

#header a {
  display:block;
background:url("norm_left.gif")
    no-repeat left top;
  padding:5px 15px;
}

Результат показан в примере 2. Наши закладки начали обретать форму. В этом месте обратимся к смущенным пользователям IE5/Mac, которые задают себе вопрос: «Что здесь вообще происходит? Закладки сложены в вертикальную стопку и растянуты по ширине на весь экран.» Не беспокойтесь, скоро дойдем и до вас. А пока просто следите за происходящим или временно переключитесь на другой браузер и будьте уверены—скоро мы решим проблему IE5/Mac.

- - -

Теперь, когда картинки для простых закладок заняли свое место, зададим изображения для текущей закладки. Сделаем это, обратясь к элементу списка с id="current" и ссылке внутри него. Так как мы не меняем никаких свойств фона кроме фоновых изображений, будем использовать свойство background-image:

#header #current {
  background-image:url("norm_right_on.gif");
  }
#header #current a {
  background-image:url("norm_left_on.gif");
  }

В нижней части наших закладок нам нужна какая-то обводка. Но применение свойства border к родительскому #header не позволит нам «просочить» текущую закладку через эту границу. Вместо этого мы создадим новое изображение с нужной нам обводкой по его нижнему краю. И пока мы работаем с этим изображением, добавим легкий градиент, чтобы это выглядело так:

Мы применим это изображение к фону нашего контейнера #header (вместо заданного ранее желтого цвета), сдвинем его вниз контейнера и назначим фоновый цвет, совпадающий с верхним цветом созданного градиента. Мы также уберем добавленный изначально отступ для элемента и добавим отступ в 10 пикселей к верхней, левой и правой частям элемента ul:

#header {
  float:left;
  width:100%;
background:#DAE0D2 url("bg.gif")
    repeat-x bottom;
font-size:93%;
  line-height:normal;
  }
#header ul {
  margin:0;
padding:10px 10px 0;
list-style:none;
  }

Для завершения работы над закладкой осталось «просочить» текущую закладку через границу, о чем мы уже говорили выше. Вы можете подумать, что мы применим к нашим закладкам нижнюю границу, совпадающую по цвету с нижней обводкой фонового изображения элемента #header, а затем изменим цвет границы для текущей закладки на белый. Однако это привело бы к появлению крошечной «ступеньки», видимой для внимательного глаза. А вот если мы изменим отступ для ссылок, мы сможем создать четкие и прямые углы внутри текущей закладки, как показано на увеличенном рисунке:

Мы добьемся этого, уменьшив нижний отступ для обычной ссылки на 1 пиксель (5px - 1px = 4px), а затем добавив этот пиксель к текущей ссылке:

#header a {
  display:block;
  background:url("norm_left.gif")
    no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
  background-image:url("norm_left_on.gif");
padding-bottom:5px;
}

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

Заключительные шаги

Внимательный взгляд мог заметить в предыдущем примере белые участки по углам закладок. Эти непрозрачные уголки мешают задней картинке быть видимой через левый угол переднего изображения. Теоретически мы могли бы сделать эти уголки такого же цвета как и фон позади них. Но наши закладки могут увеличиться по высоте, и тогда задний градиентный фон сдвинется вниз, что приведет к рассогласованию цвета уголков и фонового градиента. Вместо этого мы изменим наши картинки, сделав их уголки прозрачными. Если к обводке закладок применено сглаживание (anti-aliasing), мы зададим в качестве прозрачного цвета (matte) среднее значение заднего фонового градиента.

Теперь, когда уголки прозрачны, кусочек правого изображения просматривается через прозрачный угол левого. Чтобы избежать этого, добавим небольшой левый отступ к элементу списка, равный ширине левого изображения (9px). Чтобы сохранить центрирование текста после добавления отступа к элементу списка, необходимо убрать такую же величину левого отступа у ссылки (15px - 9px = 6px):

#header li {
  float:left;
  background:url("right.gif")
    no-repeat right top;
  margin:0;
padding:0 0 0 9px;
}
#header a {
  display:block;
  background:url("left.gif")
    no-repeat left top;
padding:5px 15px 4px 6px;
}

Но и этот вариант нас не устроит, так как левая картинка теперь отодвинута от левого края закладки на 9 пикселей добавленного отступа. Теперь, когда внутренние края левого и правого «дверных проемов» стыкуются друг с другом, нам больше нет надобности держать левую картинку впереди. И мы можем изменить очередность фоновых картинок, применив их к противоположным элементам. Мы также должны поменять картинки и для текущей закладки:

#header li {
  float:left;
  background:url("left.gif")
    no-repeat left top;
  margin:0;
  padding:0 0 0 9px;
  }
#header a, #header strong, #header span {
  display:block;
  background:url("right.gif")
    no-repeat right top;
  padding:5px 15px 4px 6px;
  }
#header #current {
  background-image:url("left_on.gif");
  }
#header #current a {
  background-image:url("right_on.gif");
  padding-bottom:5px;
  }

Сделав это, мы получаем пример 4. Заметьте, что предпринятые нами для создания прозрачных углов шаги, привели к появлению небольшой «мертвой» зоны в левой части закладки, где она не реагирует на наведение мыши. Мертвая зона находится вне текста, но она все же заметна. Прозрачные картинки для каждой стороны нашей закладки использовать необязательно. Если мы предпочтем не иметь на нашей закладке «мертвого» участка, нужно всего лишь использовать позади закладок сплошную заливку, а не градиент, и сделать уголки закладок такого же цвета. Пока же мы сохраним прозрачность углов. [В IE/Win упомянутая «мертвая» зона существовала и до предпринятых шагов, причем со всех сторон от текста ссылки.

Ну и, наконец, последние штрихи. Все за один раз: делаем весь текст полужирным, текст на обычных закладках коричневым, а на текущей—темно-серым, этот же цвет присваиваем тексту для состояния ссылки hover, убираем подчеркивание ссылок. Все сделанные к этой минуте добавления и изменения представлены в примере 5.

Еще один метод для обеспечения совместимости

Рассмотрев пример 2, мы признали наличие проблемы с IE5/Mac, который растягивал закладки на всю ширину окна, выстраивая их вертикально одна под другой. Не совсем тот эффект, которого мы добиваемся.

В большинстве браузеров применение к элементу свойства float влечет его сжатие до минимально возможного размера, определяемого его контентом. Если плавающий элемент содержит картинку (или сам является картинкой), то он сожмется до ширины картинки. Если он содержит только текст, то сожмется до ширины самой длинной строки текста, не содержащей переносов.

Проблемы возникают в IE5/Mac, когда блочный элемент с шириной auto помещается внутрь плавающего элемента. В этом случае все браузеры сжимают плавающий элемент до минимально возможной ширины, не обращая внимания на внутренний блочный элемент. А вот IE5/Mac в описанной ситуации этого не делает. Вместо этого он растягивает плавающий и внутренний блочный элементы на всю доступную ширину. Чтобы обойти такое поведение, нам нужно применить float также и к ссылке, но только для IE5/Mac, не затрагивая другие браузеры. Сначала добавим float к уже существующему правилу. Затем применим «Метод обратного слэша», чтобы спрятать от IE5/Mac новое правило, которое удаляет float для остальных браузеров:

#header a {
float:left;
display:block;
  background:url("right.gif")
    no-repeat right top;
  padding:5px 15px 4px 6px;
  text-decoration:none;
  font-weight:bold;
  color:#765;
  }
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

В соответствии с примером 6 IE5/Mac теперь отображает закладки как положено. Для остальных браузеров ничего не изменилось. IE5/Mac содержит огромное количество CSS-багов, которые были исправлены в версии IE5.1. От этих багов в IE5/Mac страдает и метод «Раздвижных дверей». Их число превосходит все мыслимые пределы, и я не собираюсь с ними бороться. А так как обновление до 5.1 уже довольно длительное время доступно для всех желающих, процент Маков c OS 9 и установленным IE5/Mac постоянно сокращается и приближается к нулю.

Варианты

Мы только что детально разобрали метод «Раздвижных дверей», который позволяет создавать сверстанную с помощью ненумерованного списка и ссылок и доработанную при помощи нескольких правил CSS закладочную навигацию на основе простого текста. Такая навигация быстро загружается, проста в поддержке, а текст внутри нее может быть значительно масштабирован в любую сторону без нарушения дизайна. Стоит ли говорить, насколько гибким является этот метод при создании любой утонченно выглядящей навигации?

Использование этой техники ограничивается только нашим воображением.

Закладки, например, необязательно должны быть симметричными. Я быстро создал второй вариант закладок, в котором использовал простые цвета, угловатые формы и более широкую и сложную по форме левую сторону. Как показывает вариант 2, мы можем свободно менять порядок левого и правого изображений в зависимости от дизайна. При четком планировании и искусном обращении с картинками, можно отказаться от нижней границы в пользу стилевого сочетания картинок с фоном, расположенным позади, как показано в созданном мной варианте 3. Если ваш браузер поддерживает переключение между альтернативными стилями, вы можете просмотреть все представленные варианты, открыв этот мастер-файл и переключаясь в нем между таблицами стилей. [В NN7.1 доступ к альтернативным стилям осуществляется через главное меню View>Use Style, в Opera 7.20—через главное меню View>Style, в IE/Win такой возможности нет—прим. переводчика]

К примененной технике могут быть добавлены другие эффекты, которые мы здесь не рассматриваем. В нашем примере мы меняли цвет текста для состояния hover, но почему бы не поменять фоновое изображение целиком для получения интересных ролловер-эффектов. При наличии в коде двух вложенных HTML элементов мы всегда можем использовать CSS для накладывания фоновых изображений и получения эффектов, о которых мы и не мечтали. В нашем примере мы создали горизонтальный ряд закладок, но метод Раздвижных дверей можно использовать и во многих других случаях.

CSS: единицы измерения

Одним из основных назначений каскадных таблиц стилей является настройка внешнего вида тех или иных элементов HTML документа. Работая с HTML документами вы, наверняка, сталкивались с указанием размеров, например, <TABLE WIDTH="95%"> или <IMG HSPACE=4 ... > Указания различных размеров исключительно важны для (более или менее) точного позиционирования элементов на странице.

Для начала определимся с единицами измерения. Их можно разделить на абсолютные и относительные.

Абсолютными являются:

• in - дюйм (2.54 см)
• cm - сантиметр
• mm - миллиметр
• pt - пункт (типографская величина - 1/72 дюйма)
• pc - пика (12 пунктов или 1/6 дюйма)
• ex - высота буквы "x" в используемом шрифте (правда, в какой-то мере эту величину можно считать относительной - она зависит от шрифта).

К относительным величинам относятся:

• px - пиксел (рассчитывается относительно устройства отображения)
• % - процент (вычисляется относительно элемента-предка)
• em - названия не имеет, вычисляется относительно размера шрифта.

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

Вообще, абсолютные величины хорошо подходят для ситуаций, когда точно известны физические параметры устройства вывода (недаром они так распространены в полиграфии!), но для сайтов годятся мало. Хотя в последнее время часто используется один трюк - создается специальная таблица стилей для печати страниц, так как практически все принтеры работают со стандартным размером листа A4. Подключить такую таблицу стилей можно используя тег:

<LINK TYPE="text/css" REL="stylesheet" MEDIA="print" HREF="print_style.css">

Теперь давайте повнимательнее присмотримся к относительным величинам. Для указания размеров шрифтов очень удобно использовать пиксели и величину em. Пиксели отлично работают, когда вам требуется задать определенный размер шрифта какого-то элемента, например:

P {font-size: 12px;}

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

P {font-size: 12px;}

STRONG {font-size: 1.2em;}

Кроме того, указание размеров шрифтов в em позволит задать их размер относительно шрифта, установленного у пользователя по умолчанию в том случае, если вы в своей таблице стилей нигде не определили фиксированный размер. Такой способ позволяет сохранить единый стиль отображения документа для пользователей с разными мониторами и разным качеством зрения - уж шрифт по умолчанию-то они для себя настроили!

Недостаток величины em заключается в том, что она некорректно поддерживается старыми браузерами, поэтому если вам необходима их поддержка, то придется от нее отказаться.

Отличие em и пикселей заключается в том, что пиксели "привязываются" к устройству вывода. 1 пиксел будет иметь один и тот же размер на данном устройстве, в то время как размер 1em зависит от размера шрифта в элементе-предке.

Казалось бы, что пиксел, как и, скажем, миллиметр будет по-разному смотреться на мониторах с разным разрешением. Действительно, если вы зададите фиксированный размер шрифта (в пикселах) и переключите монитор, скажем, в режим 640х480, то обнаружите, что шрифты стали очень уж крупными (так как изменился размер пиксела). Но прелесть в том, что пользователи сами настраивают для себя оптимальное разрешение экрана в зависимости от монитора и своего зрения! То есть, если пользователь не очень хорошо видит, то он обычно устанавливает низкое разрешение монитора и шрифты начинают казаться крупнее. Пользователь же с нормальным зрением, скорее всего, установит разрешение в зависимости от диагонали своего монитора, и опять же размер шрифта "автоматически" подгонится под его восприятие...

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

Указание размера в процентах также является привычным для тех, кто писал документы на HTML. Процент - он процент и есть, указывает размер относительно элемента-предка. В принципе, вместо указания размера шрифта с помощью величины em, можно использовать и проценты, но делают это достаточно редко. Чаще всего в процентах указывают размеры блоков, отступы, высоту строки и т.п.

Совет: чтобы посмотреть, как сайт выглядит без использования CSS, добавьте ?css=false к URL-у любой страницы сайта. Чтобы снова включить CSS, добавьте ?css=true, либо щелкните на ссылке, что размещена внизу каждой страницы.

Вебмастеринг. Разрешения

Те, кто делают сайты не только для себя, но и для других людей, вероятно столкнулись с банальной проблемой: на мониторе с другим разрешением сайт, отображаемый весьма прилично на вашем компьютере, плывет. Есть много способов для решения этой проблемы. Можно, конечно, написать на главной странице, при каком разрешении сайт будет отображатся более правильно, но где шанс на то, что большая часть посетитлей захочет лезь в настройки, чтобы там что-то менять?;)

Иногда бывает так, что при смене разрешения, общая структура остается нормальной, но текст становится плохочитаемым. Чтобы этого избежать, предлагаю простой скрипт:

<SCRIPT language=JavaScript>

<!--

if (screen.width == 640) {document.write ("<LINK href=?1.css? type=text/css rel=stylesheet>")};

if (screen.width == 800) {document.write ("<LINK href=?2.css? type=text/css rel=stylesheet>")};

if (screen.width == 1024) {document.write ("<LINK href=?3.css? type=text/css rel=stylesheet>")};

//-->

</SCRIPT>

Работает он так: как только загружается страница, браузер определяет разрешение монитора пользователя и в зависимости от этого выбирает нужную таблицу каскадных стилей.

В данном примере файл 1.css оптимизиоран под разрешение 640Х480 пикслей, 2.css под 800Х600 и 3.css под разрешение 1024Х768.

Вам лишь необходимо создать и подогнать эти три файла под соотвествующие разрешения.

Внимание! Когда будете подгонять и баловаться с разными разрешениями, не забываейте нажимать F5 для обновления страницы.

Пример:

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

<SCRIPT language=JavaScript> // в данном случае под два разрешения

<!--

if (screen.width == 800) {document.write ("<LINK href=?1.css? type=text/css rel=stylesheet>")};

if (screen.width == 1024) {document.write ("<LINK href=?2.css? type=text/css rel=stylesheet>")};

//--></SCRIPT>

<div id=text1>Работа со стилями</div>

<div id=text2>Работа со стилями</div>

Содержания файлов с таблицами стилей:

1css:

Если вы не любите скрипты в самом коде страницы, можно сделать ссылку на файл:

<SCRIPT language=JavaScript src="1.js"></script>

где 1.js файлик с написаным скриптом.

Если вы хорошо разбираетесь в CSS, то подгонять сможете не только текст, но и все что угодно!!!

Задумывайтесь о других! Пусть Ваша работа будет красивой не только на Вашем мониторе (:-)

Kурсоры

Итак, с помощью CSS можно легко и просто изменить стандартную форму курсора на любую другую из набора. Зачем это нужно? Ну, иногда так можно лучше подчеркнуть что-то, например, посмотрите на следующие две строки (наведите курсор на первую и вторую):

Или если Вы для реализации гипертекстовой ссылки используете JavaScript событие onclick, то такая ссылка в браузере будет отображаться как обычный текст, а вот так уже будет намного лучше.

Таблица курсоров:

Вы можете применять данные курсоры как хотите. Как видите, они никоим образом не замедлят загрузку страницы.

Создание Меню

используя нижеописаный способ можно оформлять не только меню, но и любые ссылки. В этом варианте применяется всё те же CSS, DHTML, но в отличие от первого варианта мы применим здесь фильтр "Glow". Данный фильтр создаёт эффект свечения объекта по его внешним границам (наведите курсор на заголовок статьи).

STYLE= "filter: Glow (Strength= X,Color= Y)"

Stregth

Сила свечения в пределах от 0 до 100 (X)

Color

Цвет свечения (Y)

Опять таки создадим таблицу с разделами меню, но уже поставим border = 0 , обеспечив тем самым прозрачность границ, они нам ни к чему... Итак, в теге <HEAD> описываем стили наших ячеек и ссылок , которые быдут в них находиться, как и в прошлом примере, только с фильтром Glow, получим:

<STYLE type = "text/css" >

TD.Over { filter:Glow( Strength=5, color = red);font-weight: bold; font-size:200%; text-align: center; cursor: hand; }

TD.Out { font-weight: bold;font-size:200%; text-align: center;}

a{text-decoration: none; color: black;}

</STYLE >

Также опишем обраотчики событий для наших пунктов меню. Тег ячейки примет следующий вид:

<TD CLASS="Out" ONMOUSEOVER="this.className='Over' " ONMOUSEOUT="this.className='Out' "><a href="Ваш URL" >Home Page</A></td>

А всё в целом будет выглядеть примерно так:

<table border = 0 CELLPADDING=4  align=right width=30%>

<TR><TD CLASS="Out"

ONMOUSEOVER="this.className='Over' "

ONMOUSEOUT="this.className='Out' "><a href="Ваш URL" >Home Page</A></td></tr>

<TR><TD CLASS="Out"

ONMOUSEOVER="this.className='Over' "

ONMOUSEOUT="this.className='Out' "><a href="">Guest Book</A></td></tr>

<TR><TD CLASS="Out"

ONMOUSEOVER="this.className='Over' "

ONMOUSEOUT="this.className='Out' "><a href="">Links</A></td></tr>

<TR><TD CLASS="Out"

ONMOUSEOVER="this.className='Over' "

ONMOUSEOUT="this.className='Out' "><a href="">Gallery</A></td></tr>

<TR><TD CLASS="Out"

ONMOUSEOVER="this.className='Over' "

ONMOUSEOUT="this.className='Out' "><a href="">Forum</A></td></tr>

<TR><TD CLASS="Out"

ONMOUSEOVER="this.className='Over' "

ONMOUSEOUT="this.className='Out' "><a href="">Mail</A></td></tr>

</table >

Использование фонового изображения для замены текста

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

Вы мечтаете получить типографское качество заголовков и декоративных шрифтов с помощью изображений вместо "голого" HTML? При всех тех богатых возможностях форматирования текста, имеющихся в CSS, иногда трудно удержаться от желания открыть Adobe Photoshop и набрать там текст любимым шрифтом, задав при этом нужный размер, кернинг и трекинг. Вам ведь известно, что если вставить такое изображение в веб-страницу, то любой пользователь Сети, броузер которого способен показывать графику, увидит ваш шрифтовой шедевр так, как вы и задумывали.

Изображения не всегда доступны для всех броузеров в отличие от простого текста. Это особенно справедливо для специфических броузеров и портативных устройств с небольшими экранами, текстовые броузеры (такие как Lynx) или же броузеры с отключенным показом изображений не покажут наши картинки. Даже если мы настолько ответственны в работе, что не забываем прописать для каждого элемента графики атрибут alt, поисковые роботы часто индексируют метаданные (подобно содержимому атрибутов alt и title) не так, как "чистый" HTML. Это станет понятно, если мы рассмотрим логическую важность заголовка текста, помещённого между тегами <hn></hn>. Что уж говорить о проблемах с размерами файлов и временем загрузки страниц, перегруженных графикой.

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

Основная идея очень проста: мы напишем небольшую строчку текста ("Hello world!") и поместим её внутрь двух наборов HTML-тегов. Затем с помощью CSS мы спрячем этот текст, а вместо него покажем фоновое изображение, которое будет содержать те же самые слова. Вот и всё. Заменить текст изображением не так сложно, как кажется.

Прежде чем браться за CSS, давайте создадим простой код HTML-разметки. Представьте, что у нас имеется что-то вроде этого:

<div>

<span>Hello world!</span>

</div>

Выберем для нашего приветствия миру самый подходящий шрифт, скажем, Shelley Allegro. Мы считаем, что хорошо известный в среде дизайнеров Shelley Allegro настолько блистателен, что легко покорит сердца миллионов, когда мы с его помощью скажем "Hello!". По нашим сведениям этот шрифт доступен лишь на 1,65 % компьютеров во всём мире. Потому, потратим чуть-чуть времени и создадим изображение со все тем же текстом "Hello world!". Любой пользователь любого броузера, в котором не отключен показ изображений, увидит наше приветствие, набранное шрифтом Shelley Allegro даже на тех компьютерах, где он не установлен.

Запомним, что высота изображения составляет 35 пикселов, так как эта информация понадобится нам в дальнейшем.

Итак, у нас есть кусочек HTML кода, великолепное послание миру в виде текста и оно же в виде презренного изображения. Что же мы с ними сделаем? Давайте закатаем рукава и используем небольшую таблицу стилей для замены текста изображением.

Замена изображением. Метод Фарнера

Этот метод назван в честь Тодда Фарнера (Todd Fahrner) - одного из людей, которых впервые посетила эта идея. Вас может удивить наличие вокруг строки приветствия двух тегов - div и span. Фактически, вместо них могли бы быть любые другие, необходимые конкретно для ваших задач. Но мы будем использовать в нашем примере именно эти "оберточные" теги.

Таблица стилей, которая осуществляет подмену, состоит из двух простых стилевых правил. Во-первых, используются с помощью набора свойств фона (background) мы помещаем наше изображение на задний план элемента div.

div {

background-image:url("hello_world.gif");

background-repeat:no-repeat;

height:35px;

}

Обратите внимание на свойство height. Его значением является действительная высота нашего изображения, тем самым обрамляющий div обязан показать изображение полностью, заняв ровно столько по высоте, сколько нужно - ни больше ни меньше. Свойство background-repeat в данном случае указывает на то, что фоновое изображение не должно автоматически повторяться вдоль вертикали и горизонтали.

Нам остаётся лишь скрыть текстовую строку, изначально помещённую в HTML код. Вот для чего появился тег span - мы нуждаемся во втором элементе, чтобы непосредственно к нему можно было бы "привязать" невидимость. Это легко осуществить.

span {display:none;}

Объединим эти два небольших стилевых правила с исходным куском HTML кода, и мы получим простой результат. Это настолько просто, что даже непонятно, почему для объяснения этого способа понадобилось столько слов?

Конечно же, мы не оставим нашу разметку столь немудрёной. И стилевые правила нам придется немного усложнить. В противном случае любой из наших тегов <div> на странице содержал бы фоновое изображение со словами "Hello world!", а всё, что мы помещали бы на странице внутри любых тегов <span></span>, не показывалось бы на экране.

Что ж, давайте перейдём к рассмотрению нескольких реальных примеров.

Пример первый. Заголовки страниц

Пример подобной замены можно увидеть на большинстве основных страниц сайта stopdesign.com. Обратите внимание на главные заголовки каждого раздела или страницы (например, "Recent Log Entries" на главной странице). Они создавались без манипуляции свойствами текста с помощью CSS. Это изображения, любовно обработанные так, чтобы соответствовать шрифту логотипа. Особое внимание было обращено на совпадение фоновых цветов изображений с фоном тех частей страниц, где они должны находиться. Эффект едва уловимый, но неотъемлемый для подчеркивания индивидуальности сайта.

Заглянув в исходный код страницы или отключив таблицы стилей, вы увидите, что изображение заголовка не является частью разметки страницы. Фактически, там, где большинство из вас видит заголовок-картинку, находится обычный тег <h1>, внутри которого находится простой текст, т.е. обычный текстовый html-заголовок, занимающий свое обычное положение в иерархии страницы.

Голосовые броузеры, устройства с небольшими экранами, и поисковые роботы должны (см. примечания в конце статьи) игнорировать любые таблицы стилей, используемые при выводе на экран. Вместо этого они получают обычный текст, помещенный в элемент <h1>.

Один из методов привязки изображений-заголовков для разделов сайтов состоит в создании контекста, в котором эти изображения-заголовоки используются. В элементе каждой страницы определенного раздела атрибутам id или class присваивается уникальное значение. Затем, используя селекторы наследования, к каждому тегу <h1> привязывается соответствующее изображение в зависимости от того, в контексте какого элемента данный тег <h1> появляется (пара #sectionForum h1 или .sectionForum h1). Но в каждом разделе сайта может быть несколько типов страниц, и нам может понадобиться создать заголовки, соответствующие дочерним страницам разделов.

Гораздо разумнее присвоить каждому заголовку идентификатор id, содержащий сокращённое название этого заголовка. Для примера: заголовок Recent Log Entries на главной странице stopdesign.com имеет идентификатор "t-reclog". Префикс "t-" добавлен для того, чтобы создать уникальное значение, и чтобы случайно не создать идентификатор, который уже существует у какого-либо другого элемента. В данном случае "t-" всегда означает, что это идентификатор заголовка страницы (от слова title). Правда, разметка становится слегка избыточной, но это позволяет достичь наибольшей гибкости в привязке любых титульных изображений к заголовкам любых страниц.

Каждый заменяемый заголовок должен быть описан несколькими стилевыми правилами, которые характерны для всех других подобных заголовков. В дополнение к атрибуту "id", в заголовке, который необходимо подменить, мы используем еще и атрибут "class", которому присваиваем значение "swap". Этот класс создан для описания общих свойств подменяемых заголовков, что позволяет задать эти общие свойства всего один раз, не прописывая их всякий раз в стилевых свойствах каждого идентификатора id каждого конкретного заголовка. Кроме того, такой подход помогает не перечислять в таблице стилей все уникальные идентификаторы только для того, чтобы присвоить им одно и то же правило, общее для всех. Благодаря этому подстановка будет применена только к тем тегам <h1>, которые имеют класс "swap". Для не подлежащих замене тегов <h1> в этом случае не придётся писать никакие отменяющие замену правила. Добавление класса - маленькая жертва чистотой разметки в пользу упрощения таблицы стилей.

Для замены заголовков изображением stopdesign.com использует следующие правила:

h1.swap {

height:22px;

background-repeat:no-repeat;

}

h1.swap span {display:none;}

А уникальные идентификаторы выглядят так:

h1#t-recentlog {background-image:url("/img/title_reclog.gif");}

h1#t-articles {background-image:url("/img/title_articles.gif");}

h1#t-portfolio {background-image:url("/img/title_port.gif");}

Для простоты редактирования и поддержки сайта, все правила для заголовков страниц вынесены в отдельный файл titles.css, который импортирован в основной файл screen.css. screen.css в свою очередь подключен к html-странице с помощью элемента <link>.

Пример второй. Податливые буквицы

Хотелось ли вам когда-нибудь украсить первый абзац своей страницы буквицей? До сих пор с содроганием вспоминаете увеличенную средствами HTML до пятисот процентов первую букву? Что скажете, если мы используем вместо этого изображение? Конечно же, не хотелось бы лишиться первой буквы в том случае, если картинка не загружена. Немного изменив описанную выше методику, мы сможем использовать для буквицы практически любой шрифт, какой захотим. Например, давайте снова обратимся к старому доброму Shelley Allegro и создадим на его основе букву "E", которая послужит буквицей для этого же абзаца.

Нас не устроит буквица, стоящая особняком на строке (именно так получилось бы, если бы мы заключили её в тег div). Договоримся, что мы не хотим, чтобы первая буква как-нибудь выделялась на общем фоне в том случае, когда стилевые правила недоступны для броузера. В таком случае мы используем пару универсальных тегов span:

<p><span class="dropcap"><span>E</span></span>ver wanted a ...

Помните, что мы применяем фоновое изображение к внешнему тегу <span>, а внутренний используем для сокрытия текста. В этом примере мы зададим для внешнего тега "плавучесть" (float) для того, чтобы текст абзаца охватывал его справа и снизу. Для лучшей совместимости с различными броузерами зададим для этого же элемента свойство display: block; (впрочем, это должно произойти автоматически при использовании float). У нас получится вот такой набор стилевых правил:

span.dropcap {

display:block;

float:left;

width:46px;

height:63px;

margin-right:5px;

background-image:url("dropcap_e.gif");

background-repeat:no-repeat;

}

span.dropcap span {display:none;}

Ширина и высота для первого правила взяты такими же, как соответствующие размеры изображения. Кроме того, мы применили небольшой правый отступ (margin-right) для нашей буквицы. Объединив HTML и CSS и применив кое-какие мелкие стилевые правила к самому абзацу, мы получили вот такой образчик буквицы.

Ещё примеры

Творческое использование метода ограничено лишь возможностями нашего воображения. Этим способом, среди прочего, можно:

* Создавать логотипы и названия, основанные на использовании шрифта

* "Отливать" заголовки

* Отображать котировки акций

* Заменять отдельные слова с целью улучшения косметического эффекта (например, замена "and" и "vs.")

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

Заменяйте осторожно

Вышеизложенный метод следует использовать с особой ответственностью. В изображении всегда должен быть тот же самый текст, что и в спрятанном html-коде. В противном случае будет несправедливо показывать пользователям при включенных стилях одно, а при выключенных - другое. Изображение-заменитель может отличаться размером и способом написания шрифта, его цветом и расстоянием между символами. Но эти стилистические решения определяются лишь графическим дизайном страницы, и их не следует применять к заменяемому html-тексту. Например, если повторить склеивание слов (т.е. удаление между ними пробела, как сделано в графических заголовках сайта stopdesign.com) в html-тексте, голосовые броузеры и броузеры для слепых превратят текст в кашу. Следовательно, html-текст должен быть оформлен с соблюдением орфографии и синтаксиса, как если бы он предназначался для страницы без стилей.

Необходимо упомянуть несколько очень серьезных недостатков этого метода:

Во-первых, несмотря на то, что этот метод отлично подходит для поисковых роботов (в отличие от вставки простых изображений вместо текста), у пользователя возникнут проблемы при поиске заменённого текста (функция поиска в броузерах) или же при копировании его в буфер обмена.

Во-вторых, иногда бывает (хоть и редко), что пользователь отключает показ изображений в броузере, но не выключает поддержку CSS. В таком случае заменённый текст по-прежнему будет скрыт, а фоновое изображение на экране не появится. Как результат, страница будет выглядеть как с пустыми блоками без текста. Как уже было сказано, такие случаи редки: если что-то из двух (CSS и графика) отключено, часто отключено и второе.

В-третьих, пользователь не сможет манипулировать графическим текстом: не выйдет поменять у заголовка размер, цвет или сделать его более контрастным (т.е. всё то, что так легко можно сделать с обычным текстом).

Эти недостатки должны приниматься в расчёт, и решение об использовании данного метода должно приниматься в каждом конкретном случае. Если вы все-таки решаете использовать этот метод, постарайтесь также учесть все нюансы при разработке самих изображений-замен. Будет просто безответственно использовать в них мелкий или низко-контрастный текст. При выборе цветов и/или фона изображения постарайтесь учесть особенности восприятия этих цветов у дальтоников.

И помните, что чрезмерное (или неправильное) использование хороших приёмов может со временем выйти боком. Мы всегда применяем этот метод редко и очень осторожно.

Совместимость с броузерами:

Mac: Camino .7+, IE 5+, Mozilla, Netscape 6+, OmniWeb 4+, Opera 5+, Safari

Win: Firebird .6+, IE 5+, Mozilla, Netscape 6+, Opera 5+, Phoenix .5+

ВАЖНЫЕ ПРИМЕЧАНИЯ

Метод не смог пройти проверку несколькими популярными программами, читающими пользователю текст с экрана. См. статью на сайте A List Apart: Facts and Opinion About Fahrner Image Replacement.

Результаты исследования, проведенного Джо, показывают, наша идея создать что-то более гибкое, чем простые изображения с прописанным для них атрибутом alt, потерпела фиаско. Мы предполагали, что в броузерах со включенным показом графики текст будет скрыт стилевым правилом display:none, а в голосовые броузеры чётко его прочитают пользователю. Оказалось, что некоторые броузеры так не делают даже в том случае, когда мы прописываем в стилях media="screen", так как они буквально зачитывают то, что было бы видно на экране. Большинство голосовых броузеров не поддерживают media=" aural", так что пропадает всякий смысл использования свойств "speak" в таблице стилей для них.

Поступали предложения воспользоваться вместо "display:none;" правилом "visibility:hidden;", но это также не решало проблему прочтения "спрятанных" участков текста в большинстве голосовых броузеров. Текущая версия популярной программы JAWS - пожалуй самый распространенный голосовой броузер - все-таки читает текст, скрытый методом Фарнера. Но, глядя на действия других подобных программ, мы не можем положиться на то, что следующие версии JAWS сохранят эту функцию.

Как и при работе с любой другой контент-преобразующей (content-altering) методикой, перед тем, как ее применять, следует тщательно взвесить все преимущества и недостатки при решении конкретных задач вёрстки. Со времени написания статьи появилось ещё несколько методов, решающих подобную задачу - каждый со своими достоинствами. Однако ни один из методов так и не является универсальным решением трюка с подменой текста на изображение. Ниже приведён краткий перечень альтернативных способов:

Преобразование Лихи/Лэнгриджа [Leahy/Langridge Image Replacement (LIR)]

Суть: содержимое тэга <span> скрывается путём задания предку тэга <span> нулевой высоты (height: 0;) и невидимости (overflow: hidden;). Затем задаётся верхний отступ (padding-top), соответствующий высоте фонового изображения. Метод предложен в одно и тоже время Симусом Лихи и Стюартом Лэнгриджем (Seamus Leahy and Stuart Langridge).

Сдвиг текста методом Рандла (Rundle's Text-Indent Method)

Майк Рандл (Mike Rundle) изобрёл простой трюк с использованием CSS-свойства "text-indent" для сдвига участка текста за пределы видимой области элемента.

Метод перекрытия фоном (Cover-up Method)

Метод предложен Петром Станичеком и Томом Гильдером (Petr Stanicek (a.k.a. "Pixy") and Tom Gilder). Смысл в том, что текст скрывается расположенным поверх него пустым элементом <span>, имеющим фоновое изображение. При этом текст будет виден, если загрузка графики отключена (или картинка просто не загрузилась).

JavaScript и CSS: особенности использования в различных броузерах

Одной из составляющих профессионализма любого web-мастера является его способность создавать код, который одинаково корректно воспринимается всеми броузерами (если быть точнее, то не всеми, а наиболее популярными). Причем это относится не только к HTML, но и к CSS. В первом случае довольно просто найти необходимые решения, т.к. существует достаточно большое количество публикаций и советов о том как надо делать, что не стоит использовать и т.д. для того, чтобы добиться одинакового отображения html-кода в разных броузерах. Во втором случае дело обстоит сложнее. Ну что же, давайте разбираться.

Итак, основным методом сокрытия css-кода для определенных броузеров является использование их ошибок в интерпретации тех или иных команд. Однако ошибки есть ошибки и ни кто не застрахован, что в следующей версии программы они будут устранены. Как после этого будет выглядеть Ваша страница предугадать сложно. Поэтому давайте рассмотрим другой, достаточно эффективный способ - это JavaScript.

Если Вы посмотрите код странички поисковой системы Яndex, то обнаружите что определение стилей имеет примерно такой вид:

 <style>
 .list {text-indent:-15px; margin-left:10px}
 .sublist {text-indent:-10px; margin-left:20px}
 .subsublist {text-indent:-10px; margin-left:30px}
 ...
 .l {margin-bottom:2px}
 .bln {color:black;}
 .page {background-color:#BAC9E6}
 </style>
 <script>
 document.all ? document.styleSheets[0].addRule
 (".sel","font-size:11px") : 0 ;
 </script>

Обратите внимание на конструкцию, определенную в тегах <script> </script>. Очевидно, там устанавливается правило для класса sel. Вопрос почему оно определено именно таким образом и для какого броузера предназначается мы и рассмотрим далее в этой статье.

Откройте любую книгу по JavaScript и Вы обнаружите, что Netcsape Navigator поддерживает таблицы стилей, которые подключаются с помощью синтаксиса JavaScript. NN содержит три типа объектов: tags, содержащий дескрипторы HTML, classes, содержащий определенные классы, и ids, содержащий идентификаторы отдельных элементов. Рассмотрим простой пример:

 <html>
 <head>
 <style type="text/css">
 h1 {font-size:14pt; font-style:Arial; 
text-align: center}
 p {color:red; font-size:12pt} 
 </style> 
 <h1>Это заголовок h1</h1>
 <p> А это абзац<
 

На JavaScript это будет выглядеть следующим образом:

 <html>
 <head>
 <style type="text/javascript"> 
 tags.h1.fontSize="14pt";
 tags.h1.fontstyle=""Arial";"
 tags.h1.textAlign-"center";
 tags.p.color="red";
 tags.p.fontSize="12pt";
 </style> 
 <h1>Это заголовок h1</h1>
 <p> А это абзац<

Первый вариант буде выглядеть одинаково во всех броузерах. А второй вариант - только в броузере NN.

Теперь давайте разберемся с MSIE. Как было сказано выше, свойства tags, classes и ids объекта document используются только в NN. В MSIE значения этих свойств сохраняются в массиве document.all.

В MSIE для сохранения определенных таблиц стилей используется объект document.styleSheets. Приведенный выше пример для MSIE будет выглядеть следующим образом:

 <html>
 <head>
 <style id="ie" type="text/css"> 
 </style> 
 <script>
 document.styleSheets["ie"].addRule("h1",
 "font-size:14pt; font-style:Arial; 
text-align: center");
 document.styleSheets["ie"].addRule("p",
 "color:red; font-size:12pt");
 </script>
  <h1>Это заголовок h1</h1>
  <p> А это абзац<

Этот вариант корректно отобразит и MSIE, а вот NN его не увидит.

Что касается Opera, то обращение к элементам осуществляется через семейство getElementById объекта document:

 <html>
 <head>
 <style id="ie" type="text/css"> 
 </style>
  <h1 id="hh">Это заголовок h1</h1>
  <p id="pp"> А это абзац<
 <script>
 document.getElementById("hh").style.fontSize="14pt";
 document.getElementById("hh").style.fontstyle=""Arial";"
 document.getElementById("hh").style.textAlign-"center";
 document.getElementById("pp").style.fontSize="12pt";
 document.getElementById("pp").style.color="red";
 </script>

Вот пример для Opera .

<script language="JavaScript">
ns  = (document.layers)? true:false;
ie  = (document.styleSheets)? true:false;
opera=(ie)?false:true;
</script>

Вот, коротенько и все. Теперь Вы видите, что в нашем первом примере с Яndex отдельно был указан класс для MSIE. Использовался он следующим образом:

 ...
 <td nowrap>
 <font size=-1>Цена от</font>
 </td>
 <td nowrap><font size=-1>
   <input type=text name=pricefrom
   value="" size=4 class=sel>
   до<input type=text name=priceto
   value="" size=4 class=sel>
   <select name="curr" class=sel>
   <option value="usd">USD
   <option value="rbl" selected>руб.
   </select>
 </td>
 ...

Q.Есть правило:

.sim_00 a:link{ color:black; font-weight: normal;}

.sim_00 a:hover{color:#e0c423; font-weight: normal;}

.sim_00 a:visited {color:black; font-weight: normal;}

Как сделать, чтоб посещенная ссылка имела цвет черный, но при наведении загоралась нужным цветом?

A.Для правильной работы селекторов псевдоклассов они должны находиться в таблице стилей в следующем порядке: :link, :visited, :hover, :active