Артефакт

Урок 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

Новости раздела

4 августа 2008 г.
Copy Editing: последняя часть

Ещё на сайте

Библиотека
Языки
Друзья
Канада
Авторский угол

Интернет

CPAN
Citforum
W3C.org
useit.com
Типомания
Code Charts
ру/ководство
Лаборатория dk
WebReference.com
Спецификация Perl
Заметки HTML-кодера
Анатомия Adobe Photoshop
The Apache Software Foundation


Рейтинг@Mail.ru

wordpress statistics

Рейтинг@Mail.ru