### Стиль для отдельного тега

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющие задавать различные свойства HTML-тегам. Например, можно указать как должен выглядеть конкретный абзац `P`:

К этому абзацу применено стилевое определение.

Вот что написано для этого абзаца в HTML-кодах:

    <P style="font-size:1.5cm; color:green">
       К этому абзацу применено стилевое определение.

Стиль задается атрибутом `style`. Браузеру дано указание вывести абзац зелеными буквами размером в 1.5 сантиметра. Стилевые определения задаются при помощи указаний

    характеристика:величина;

Указания отделяются друг от друга символом “;”.

Атрибут `style` можно использовать практически в каждом теге, задавая его специфические свойства. Посмотрите еще один пример внедрения стилей в теги HTML-программы.

### Стиль для отдельного HTML-файла

Можно задавать стиль для тега или группы тегов так, чтобы определение работало на протяжении всего HTML-документа. Например, можно указать вид всех заголовков. Для этого достаточно написать определение в головной части документа:

Браузер отображает заголовки в этом документе рубленым шрифтом цвета “maroon” и выравнивает их по правому краю экрана. Такое поведение браузера соответствует инструкции:

Стилевые определения (селекторы) располагаются внутри тегов <`STYLE`>...</`STYLE`> “запакованные” в HTML-комментарии (для браузеров, которые не поддерживают CSS).

Cтилевое определение имеет вид:

    Имя тега (или имена тегов через запятые)
    {
     характеристика: величина;
     ...
     характеристика: величина;
    }

В приведенном выше примере использованы три характеристики:

`text-align:right;` задает выравнивание по левому краю
`color:maroon;` задает цвет “maroon”
`font-family:Arial,Geneva,Helvetica,sans-serif;` задает рубленный шрифт

Заголовки будут выводиться шрифтом “Arial”, если, конечно, этот шрифт есть на компьютере пользователя. Если шрифта нет, браузер последовательно ищет шрифты “Geneva”, “Helvetica” или, в конце концов, какой-нибудь рубленый шрифт (указание “sans-serif”). В случае полной неудачи браузер выведет текст шрифтом по-умолчанию, то есть, как правило, шрифтом “Times New Roman”.

### Стиль для нескольких HTML-файлов

Обычной практикой является указание стилей в отдельном файле. Для таких файлов используют расширение `css`. Например, можно в файле `style.css` записать:

    BODY { margin-left: 40px; }

    H1,H2,H3,H4,H5,H6
    {
     text-align:right;
     color:maroon;
     font-family:Arial,Geneva,Helvetica,sans-serif;
    }

Для подключения этих указаний в разделе <`HEAD`>...<`HEAD`> HTML-файла нужно поместить ссылку:

    <LINK rel=stylesheet type="text/css" href=style.css>

Понятно, что такой способ расположения стилевых определений очень удобен. На один и тот же стилевой файл могут ссылаться много HTML-документов. Изменения в этом единственном файле скажутся на внешнем виде десятка (а то и сотни) документов.

Обратите внимание на стилевое указание `BODY {margin-left:40px;}`. Оно задает отступ слева в 40 пикселов для всего документа в целом. В силу такого определения визуальные элементы страницы не будут “наползать” на вертикальную полосу слева страницы. Как видите, для задания страничного отступа можно обойтись без таблиц и “распорок” о которых говорилось в книге “HTML-конструирование-1”.

### Комбинирование стилей

Было показано три способа внедрения стилевых указаний в HTML-коды:

- на уровне отдельного тега
- на уровне одного HTML-файла
- на уровне нескольких HTML-файлов

А что если начать комбинировать эти способы? Какой из них окажется самым “сильным” для конкретного тега?

Проделайте серию опытов.

##### Документ без CSS-указаний

##### CSS-указания в отдельном теге

##### CSS-указания в HEAD

##### CSS-указания в css-файле

Файл `prim.css`:

    H1,H2,H3
    {
     color:green;
    }

Файл `htm`:

##### CSS-указания в css-файле

Файл `prim.css`:

    H1,H2,H3
    {
     color:green;
    }

Файл `htm`:

1. После внимательного изучения исходных текстов приведенных выше примеров ответьте на следующие вопросы:
   - Какое CSS-указание главнее: описанное в отдельном теге или размещенное в HEAD-разделе HTML-документа?
   - Какое указание главнее: описанное в HEAD-разделе HTML-документа или размещенное в отдельном css-файле и связанное с документом при помощи тега `LINK`, помещенного в HEAD-раздел? Зависит ли результат от порядка следования этих предписаний?
2. Используя стили, постройте документ в котором:
   - Основные цвета: черный текст на белом фоне.
   - Отступ всех элементов на странице слева и справа равен по 2 см.
   - Абзацы выравниваются справа.
   - Заголовки выравниваются справа и записываются рубленым шрифтом красного цвета.
   - Термины, выделяемые курсивом, записываются зеленым цветом.

### За что мы любим CSS

Используя CSS можно:

- Задавать поля, отступы, размер и тип шрифта, цвета текста и фона для отдельных элементов страницы (абзацев, слов, букв), оформлять красные строки, буквицы. В CSS представлен ряд свойств, с помощью которых можно создавать выпадающие меню, накладывать один элемент на другой, заставлять текст отбрасывать тень, проявляться в рентгеновских лучах и использовать другие эффекты. Можно выводить элементы на экран браузера с точностью до одного пиксела, динамически перемещать их по экрану в разных слоях (одни элементы будут проходить над или под другими). Иными словами, CSS вместе с JavaScript позволяет монтировать на экране браузера приложение, практически ничем не отличающееся от компьютерной программы, написанной на профессиональном языке программирования, таком, как Си, например.
- Изменять оформление целого сайта, состоящего из сотен файлов не прикасаясь к HTML-коду, редактируя всего лишь один css-файл.
- Уменьшать количество тегов в HTML-документе, по-возможности отделяя информационное наполнение HTML-файла от его внешнего представления на экране браузера.

Оцените возможности CSS, поработав со следующими приложениями:

- Абсолютное позиционирование и слои
- Трехмерный заголовок
- Статические фильтры
- Динамические фильтры
- Сложное движение элементов
- Зеркальное отражение
- Арканоид