Урок 13. CSS
Когда нам нужно задать свойства какого-нибудь фрагмента текста, мы пишем:
<font color=#444444 face=Arial size=2>фрагмент текста</font>
Если же мы решим покуролесить от души, т. е. чуть ли не каждому элементу страницы предстоит выглядеть неким уникальным и незабываемым образом, трудно даже представить, какое количество этих <font>...</font> придётся тянуть на свой компьютер бедному посетителю, который, между прочим, пришёл почитать новости, а не покачать теги.
Исконной мечтой веб-дизайнеров со времен Золотой Орды было отделение мух от котлет, т. е. содержания от оформления. С появлением технологии CSS (Cascading Stylesheets, или каскадные таблицы стилей) эта мечта наконец исполнилась.
Что это такое
Как мы с вами уже знаем, HTML — не что иное, как набор объектов-контейнеров, таких как <p>...</p>, <H1>...</H1>, <table>...</table> или <form>...</form>. Для каждого такого объекта определы правила его отображения на веб-странице, иначе говоря — стиль. Стандартным тегам HTML соответствует набор встроенных стилей, используемых по умолчанию.
Каждый стиль задаёт множество свойств объекта. Какие-то свойства присущи всем объектам без исключения, какие-то — уникальны.
Технология CSS позволяет переопределить некоторые из этих свойств, при этом соблюдается принцип: актуальным является то описание, которое стоит последним в потоке документа. Если свойство не описано, сохраняется его значение по умолчанию.
О каких свойствах речь, спросите вы. О самых обычных: отбивках от границ внешнего контейнера, типах шрифтов, поведении в ответ на различные события и т. д.
Единственная неприятность состоит в том, что для описания свойств в CSS используется специфический синтаксис, практически не пересекающийся с чем-то уже изученным нами. Так что снова придётся кое-что прочитать и выучить. ;-)
Как это делается
Стиль в CSS описывается при помощи ключевого слова STYLE. Существуют три основных способа его спользования.
1. Использование в качестве параметра (Inline Styles)
<P STYLE="font-family:Verdana;font-size:10pt">Текст</P>
В данном случае мы задаём все необходимые свойства объекта как значение параметра STYLE, вставляемого прямо в нужный тег. Этот способ нехорош тем, что отделить содержание от оформления опять не удаётся.
2. Создание блока дескрипторов (описаний)
Где-нибудь в блоке HEAD создаём новый контейнер:
<STYLE>
p {margin-top:0px;
margin-bottom:10px;
margin-left:2px;
margin-right:0px;
color:black;
font-family:Verdana,Arial,Georgia;
font-size:xx-small;
}
a {color:gray;
text-decoration:none;
}
a:hover {
color:black;
text-decoration:underline;
}
.lgg {
font-size:larger;
margin-top:20pt;
}
</STYLE>
Обратите внимание на структуру блока. Стили различных элементов заключены в фигурные скобки, а описания конкретных свойств отделены друг от друга точкой с запятой. Имя и значение каждого свойства разделяются двоеточием.
Если вы укажете в качестве названия стиля имя одного из стандартных объектов HTML, этот объект в результате примет описанные в блоке стилей свойства без каких-либо дополнительных действий с вашей стороны. Например, все абзацы в документе, сформированные с помощью тега <P>, теперь будут отформатированы именно так, как это описано в первом дескрипторе блока.
Теперь внимательно посмотрите на последний стиль: «.lgg». Именно таким образом — при помощи имени, начинающегося с точки — создаётся класс, т. е. сложное комплексное свойство, которое можно придавать любому объекту документа. Достаточно указать имя класса (уже без точки) в качестве параметра объекта, и он унаследует все применимые к нему свойства класса:
<form class="lgg">
...
</form>
или
<p class="lgg">Ещё немного текста...</p>
Этот способ определения стилей лучше первого, но всё ещё недостаточно хорош, т. к. сам блок стилей загромождает HTML-документ.
3. Создание внешнего файла дескрипторов
В блоке HEAD (популярное, чёрт побери, местечко) пишем следующее:
<link rel="stylesheet" href="имя_файла.css">
В файл, имя которого вы задали в предыдущей строке, вставляем все нужные описания стилей по образцу блока STYLE из описания предыдущего способа, причём сами границы контейнера <STYLE>...</STYLE> можно опустить. Всё остальное — точно так же.
Самым большим преимуществом этого способа является то, что вы можете создать один-единственный файл для хранения всех стилей, используемых на веб-страницах разрабатываемого сайта. Изменив содержимое этого файла, вы измените вид всех страниц сразу.
...
Как вы понимаете, более подробное описание синтаксиса и возможностей CSS выходит за рамки данного курса, я хотел лишь показать вам, как использовать новую технологию, а уж в деталях вы разберётесь сами.
Урок 12. Внедряемые объекты | Урок 14. Тексты для WWW
наверх
| 
