|
Максим Костюченко
Ох, как трудно порой осозновать собственную
дурость. Вот так сидишь, сидишь за машиной дни напролет, верстаешь страницы одну
за другой. А потом внезапно понимаешь, что НЕЛЬЗЯ ДЕЛАТЬ РЕЗИНОВЫЙ САЙТ В ОДНОЙ
ОБЩЕЙ ТАБЛИЦЕ!
Да и вообще, в любых сайтах, пусть даже и 600-пиксельных, где есть
возможность разбить страницу блоками на отдельные таблицы, делай именно так. Это
существенно влияет на загружаемость страницы в целом, особенно если основная
таблица, мягко сказать, тяжеловата.
И пусть себе лезут остальные таблицы
вправо при уменьшении окна браузера до горизонтального скроллинга. Ничего
страшного. Мы же воспринимаем как должное, что автомобили пока еще ездят, а не
летают.
Но это так, мелочи. Хотя я не зря упомянул сначала про резиновые
сайты (никакой химической промышленностью здесь и не пахнет, просто <table
widht=100%>). Как мне видится, имеет место след общей идеи, суть которой в
том, чтобы сайт отображался как можно идентичнее на разных разрешениях монитора.
А идея общая с оновной темой, касающейся CSS (стилей). В свою очередь они тоже
выполняют роль инструмента универсальности, так как делают максимально
идентичным отображение информации вне зависимости от браузера и его
настроек.
Они буквально повсюду
Стили CSS (cascading style
sheets) так любимы дизайнерами. Хорошо это или нет - я затрудняюсь сказать
однозначно. Тем не менее, в подавляющем большинстве страниц можно найти строку
<link rel="stylesheet" ty-pe="text/css"
href="styles/style.css">.
А чем же они
хороши
"А как насчет плохи?" - возмутится какой-нибудь
бородатый правдоруб. Ну, что можно ответить такому товарищу? Плохи ровно
настолько, насколько тесно сочетаются с дизайном сайта. Вот, скажем, красивая
девушка. Невзрачно одетая, она, конечно, тоже может привлекать внимание. Но ни в
какое сравнение не пойдет с собой же, одетой стильно. Так и здесь. Сайт, активно
использующий стили, имеет определнный риск выглядеть несколько
"подгулявшим", к примеру, в Netscape Navigator, ну или совсем
безнадежным в Opera 3.1, которая ввиду своей старости напрочь не поддерживает
CSS (а кто поддерживает ее?).
Что такое? Опять свет клином сошелся на IE? Ну,
что ж поделаешь. Как никак 80% русскоязычных пользователей...
Стили дают
прекрасную возможность зафиксировать размер кегля шрифта. Хотя и здесь при
желании можно установить фонты в процентах (об этом несколько позже). Стили
позволяют зафиксировать тип шрифта. При помощи стилей часто создают изменяющиеся
при наведении линки (в IE 4 и выше), а также управляют всеми характеристиками
форм, включая кнопки: размер, цвет бордеров, фоновый цвет,
шрифт.
Безграничные возможности открывают стили в создании текстовых версий
сайта. Сравните в качестве примера http://www.ti. com.by/example/graphic.html и
http://www.ti.com.by/example/text.html. Теперь не так важна графика, как
текст.
И внутри, и снаружи
Стили можно прописать непосредственно внутри
документа (страницы). Обычно это делается стразу после тэга <body>. Сами
стили открываются тэгом <style>. Одна из основных причин, по которой не
рекомендуется использовать данный метод, - при изменении в стилевой таблице
необходимо редактировать каждый документ, который это изменение затрагивает. Не
очень-то и удобно, правда?
Поэтому, как правило, стили целесообразнее
создавать отдельным файлом с расширением *.css. В коде страницы внутри тэга
<head> ставится ссылка <link rel="stylesheet"
type="text/css" href="моя_стилевая_таблица.css">, которая
и обращается к данному файлу. Таким образом, любое изменение стилей сразу
отражается на всех страницах.
Далее "по тексту"
Итак,
оформляем текст. Характеристики его основной части можно задать примерно такой
строкой: TD {font-family: Arial, Verdana, Sans-serif; font-size:?px; color:
#??????}, где TD означает, что свойства шрифта будут применяться к любому тексту
внутри ячейки таблицы (TR - внутри строки, TABLE - внутри всей
таблицы);
font-family - допустимые типы шрифтов;
font-size - кегль
(размер) шрифта;
color - цвет шрифта.
Желательно задавать близкие типы
шрифтов. В данном примере это простые рубленные семейства Arial. Их количество -
ваша собственная инициатива. Приоритет отображения зависит от порядка их
следования. В моем примере в первую очередь будет показан шрифт Arial. Если в
системе пользователя он отсутствует - Verdana.
Единицы измерения кегля
шрифта: px, pt, %. Выбор одной из них, а также размер кегля определяются
эмпирически.
Цвет шрифта - шестнадцатеричный: #??????, RGB: rgb(?,?,?), или
просто название цвета: white, blue, red и т.д.
Помимо этого в TD можно
определить выравнивание текста, которое принимает одно из
значений:
text-align: center - выравнивание по центру;
text-align: left -
слева;
text-align: right - справа;
text-align: justify - по всей ширине
строки.
При необходимости задается толщина шрифта. Наиболее часто
используются:
font-weight: bold - жирный;
font-weight: normal -
обычный.
Для выделения текста цветом используется параметр background-color:
#??????
Установленные значения параметра TD (TR, TABLE) вовсе не означают,
что текст с данными свойствами будет во всех таблицах сайта. Можно просто
создать разные классы типа: TD.название_класса. В HTML-коде документа, в
соответствующей ячейке (строке, таблице) указывается класс ее шрифта: <TD
CLASS=название_класса>.
Можно задать характеристики какой-то отдельной
части текста. Соответствующий стиль выглядит: .название_класса {значения
шрифта}. В HTML: <font class=название класса>собственно сам
текст</font>.
Литература по Internet
|
