Оценить:
 Рейтинг: 4.6

HTML, XHTML и CSS на 100%

Жанр
Год написания книги
2010
Теги
<< 1 2 3 4 5 6 7 8 9 10 ... 30 >>
На страницу:
6 из 30
Настройки чтения
Размер шрифта
Высота строк
Поля

color:#000000;

background:#FFFFFF;

word-spacing:10px;

}

</style>

<title>Использование стилей</title>

</head>

<body>

<p class="style">

Текст со стилем style

</p>

<p class="style2">

Текст со стилем style2

</p>

<table border="1" >

<tr>

<td class="style2">

Для ячейки применен стиль style2

</td>

</tr>

</table>

</body>

</html>

В примере создано два стиля: style можно применять только для элемента P (для обозначения этого перед названием стиля стоит название элемента), style2 – для любого объекта. В листинге 1.6 стиль style2 применен еще и для ячейки таблицы.

Результат обработки листинга 1.6 представлен на рис. 1.3.

Рис. 1.3. Использование стилей

Для вывода на печать будет использован черный шрифт с белым фоном. Этим мы сэкономим чернила пользователей.

Совет

На странице можно делать ссылки на отображение документа в формате для вывода на печать. Это даст возможность пользователю определить, устраивает ли его установленный формат вывода.

Есть еще один способ применения к элементу стиля: встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Такой атрибут доступен для всех элементов HTML. В нем в формате CSS через точку с запятой прописываются значения разных свойств элемента. Вот как это выглядит для элемента P:

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

Как видите, CSS-код совпадает с содержимым элемента STYLE из предыдущего примера. В листинге 1.7 представлен пример задания свойств элементов с помощью встраивания CSS-кода в значение атрибута style.

Листинг 1.7. Использование атрибута style

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование стилей</title>

</head>

<body>

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

Текст с атрибутом style="color:#CC0000; background:#9999CC; word-spacing:20px;"

</p>

<p style="color:#66FFFF; background:#990000; word-spacing:10px;">

Текст с атрибутом style="color:#66FFFF; background:#990000; word-spacing:10px;"

</p>

<table border="1" >

<tr>

<td style="color:#66FFFF; background:#990000; word-spacing:10px;">
<< 1 2 3 4 5 6 7 8 9 10 ... 30 >>
На страницу:
6 из 30