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