Таблицы\листы каскадных стилей
С помощью стилей можно определить свойства объектов в HTML-документе. Под объектом
следует понимать любой элемент: текст, гиперссылка, абзац, заголовок, рисунок,
таблица и пр. Стили определяются для HTML-команд. Начнем с простого случая.
Допустим требуется жирный текст белого цвета на голубом фоне. Используя
язык HTML, вам пришлось бы написать примерно следующее:
<table bgcolor=blue cellpadding=0 cellspacing=0>
<tr><td>
<b><font color=white>жирный текст белого цвета на голубом фоне</font></b>
</table>
|
|
жирный текст белого цвета на голубом фоне
|
|
Такой же результат можно получить, используя стили:
<b style="background:blue; color:white">жирный текст белого цвета на голубом фоне</b>
| |
жирный текст белого цвета на голубом фоне
|
При помощи стилей можно свести на НЕТ и действие самой команды:
<b style="font-weight:normal">жирный</b>
| |
жирный
|
У большинства команд можно задать атрибут style. В качестве значения атрибута
style указывается строка: "имя_свойства:значение; имя_свойства:значение;
и т.д.". Обратите внимание, что двоеточие отделяет имя свойства от его значения,
а точка с запятой отделяет пары свойство-значение. В самом конце точка с
запятой не ставится. Здесь я привожу несколько наиболее часто используемых
приемов задания стилей, полный список свойств и возможных значений смотрите
в приложении к данной книге. В следующем примере показывается, как в абзаце
установить картинку в качестве заднего фона и сделать текст синим.
<p style="background-image:URL(images/paper.gif); color:blue">
Абзац текста.<br>
Новая строка.
</p>
Абзац текста.
Новая строка.
Стили можно также определить на уровне документа, т.е. вы можете установить свойство
HTML-команды, которое будет применяться ко всем объектам, созданным при
помощи этой команды. Например, исходный код выводится при помощи команды
<pre>. Вставив следующие строчки в заголовок HTML-документа, мы
устанавливаем
серый фон для этой команды.
<style>
pre {background:#E5E5E5}
</style>
На мой взгляд, определять стили команды для одного документа
имеет мало смысла. Все документы сайта должны быть выполнены в одном стиле, поэтому
их лучше определить в отдельном файле и подключать в заголовке каждого HTML-документа.
Делается это при помощи следующей команды:
<link rel=stylesheet href=/styles.css>
Обратите внимание, что путь к файлу styles.css указывает абсолютный. Этот
файл обычно всегда лежит в корне вашего веб-сервера и никуда не перемещается,
в то время как отдельные документы часто перемещаются. В случае, если ваш
HTML-документ переместится, то относительный путь изменится, а абсолютный
- нет. Вот почему важно наличие прямой косой черты перед именем файла.
Другими словами, CSS представляет собой метаязык разметки текста. Вы можете
определать\создавать новые команды\объекты.
Очень часто CSS используется без явной на то необходимости.
Например, в файле styles.css определяют свойства команды <body>:
body { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
background-color: #FFFFFF;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px}
Это совершенно пустое и неправильное использование CSS. Пустое потому, что
эти свойства можно задать средствами классического HTML. Неправильное потому,
что если броузер у пользователя старый и не понимает CSS, то пользователь
увидит что-то непотребное. Вывод - свойства body надо прописывать в атрибутах этой команды,
а не в стилях. Тогда возникает резонный вопрос: "А где же использование стилей
является оправданным?". Ответ - в HTML-документах или сайтах, где есть объекты
наделенные общими свойствами. Сразу надо заметить, что таких объектов должно быть
несколько, т.е. они должны образовывать группу. Если у на сайте до 10
документов, то вполне можно обойтись без использования CSS. Но предположим
у нас на сайте размещаются статьи. Статей много. Естественно, что заголовки статей,
фамилии авторов, координаты авторов и сам текст статьи должны выглядеть
одинаково. Если делать разметку средствами HTML без использования стилей, то
в случае, если через год нам захочется изменить внешний вид заголовков статей,
то придется исправлять все документы. Если же у нас будет файл стилей, то
достаточно будет его подправить.
Самое главное правило, которое необходимо помнить разработчику - HTML-документ
должен корректно отображаться в случае, если броузер пользователя не поддерживает
CSS. Стили можно использовать, чтобы отменить подчеркивание у гиперссылок, которые
находятся в меню сайта. Для этих гиперссылок подчеркивание не требуется, т.к.
и так понятно, что это гиперссылки. В наших работах файлы стилей, как правило,
очень небольшие. Лучшее, как известно, враг хорошего.
В заключение приведу пример styles.css с сайта http://miem.itsoft.ru.
td { font-family: Arial; font-size:x-small}
a.tm {font-family: Arial; text-decoration: none; font-size:xx-small; color: #000000}
a.m {font-family: Arial; text-decoration: none; font-size:x-small; color: #4F5054}
h3 {color:#566A89}
|