| Ох, как трудно порой осозновать
собственную дурость. Вот так сидишь, сидишь за машиной дни
напролет, верстаешь страницы одну за другой. А потом внезапно
понимаешь, что НЕЛЬЗЯ ДЕЛАТЬ РЕЗИНОВЫЙ САЙТ В ОДНОЙ ОБЩЕЙ
ТАБЛИЦЕ!
Да и вообще, в любых сайтах, пусть даже и 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>.
Автор: Максим Костюченко
Источник:
© MSM.Club
|
