6.4. Способы задания классов стилей

Существует два способа задания классов:

1. Внутренний – в разделе <STYLE></STYLE>.

2. Внешний – в отдельном файле с расширением .css.

Применение класса в HTML-документе осуществляется с помощью параметра class. Например,

<P class=zagolovok>

Можно задать универсальный класс – класс, который можно применять не к одному, а к нескольким тегам. Этот класс описывается самым первым или после описания классов тега <BODY>, и при его задании тег не указывается. Например,

.left {text-align: left}

Созданный в примере класс left можно будет применить к тегу <P>, <TD>, <Hх> и другим тегам, где этот параметр форматирования применим.

Задание 6.1. Создайте HTML-документ inline.html, содержащий абзац с разреженным шрифтом и таблицу с жирной верхней границей (см. рис.). Для этого:

• В о-первых, без использования CSS здесь не обойтись, потому что разреженный интервал невозможно создать стандартными средствами HTML, следовательно, прибегнем к использованию CSS. Создаем стиль у тега <P>:

<P style="letter-spacing:12">Разреженный текст в абзаце задан с помощью CSS</P>

• Аналогично создаем стиль у тега <TABLE> (параметры, доступные без CSS описывает вне «style»):

<TABLE style="border-top-width:10px; border-color:blue;" border=1 cellspacing=0 cellpadding=0 bordercolor=blue >

• Во-вторых, будем использовать строчный способ задания CSS, так как стиль у каждого элемента (абзац и таблица) нужно применить единожды.

В данном примере описаны два стиля: стиль абзаца и стиль таблицы. При описании каждого стиля использовались стандартные и новые атрибуты.

Например, letter-spacing задает разреженность текста, border-top-width - толщину верхней границы, border-color – цвет границы таблицы.

Примечание. Если в описании стиля используются несколько атрибутов, то они должны быть перечислены через «;».

Задание 6.2. Создайте HTML-документ seti.html по образцу. Названия классификаций заданы тегом <P>, перечисления – элементы маркированного списка (тег <LI>).

Тег <P>	Межсимвольный интервал – 10 px, начертание – полужирное, размер шрифта – 20 px
Тег <LI>	Начертание – нежирный курсив, размер шрифта – 18 px.

• Используйте CSS: вложенный способ описания стилей.

• Опишите стили в разделе <STYLE> </STYLE>.

Задание 6.3. Создайте документ inform.html. Оба HTML-документа – seti.html и inform.html должны использовать одни и те же параметры форматирования, описанные в Задании 6.2.

• Используйте внешний способ задания стилей, так как у нас имеются две странички, использующие один и тот же набор параметров форматирования.

• Создайте файл style.css.

• Переместите описание стилей из HTML-документа seti.html в css-файл.

• В обоих HTML-документах в разделе <HEAD> </HEAD> добавьте ссылку на созданный css-файл с описанными стилями.

Задание 6.4. Создайте HTML-документ по образцу (см. рис.), используя наиболее подходящий способ задания стиля:

Задание 6.5. Создайте HTML-документ class.html (см. рис.). Для форматирования текста создайте два класса тега <P> с различными параметрами форматирования. Для этого:

• Введите текст странички.

• В разделе <STYLE></STYLE> создайте два класса у тега <P>: heading – для заголовков и text – для основного текста.

P .heading {font-family:Arial; background:yellow; font-weight:bold}

.text {font-family:Times New Roman; padding-left:130}