Основы работы с XHTML и CSS


Стили шрифта - часть 3


со значениями, разделенными пробелами. При использовании свойства font не требуется определять все значения, но они должны быть представлены в строгом порядке: font-style font-variant font-weight font-size font-family. Типичное объявление может включать, например, только значения font-size и font-family: {font:10pt arial}.

Следующий код применяет встроенную таблицу стилей с различными комбинациями настройки шрифта текста. В этом примере все значения оформления стиля используют сокращенное свойство font. Вывод в браузере этой страницы показан на рисунке 4.2.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Пример стилей шрифта</title>

<style type="text/css"> body {font:12pt arial; text-indent:25px; margin:20px} .head {font:bold 14pt; text-align:center; text-indent:0px} .offset {margin-left:25px; margin-right:25px; text-indent:0px} .cap {font:bold 24pt} .fancy {font:13pt comic sans ms} .style1 {font:bold 14pt times new roman} .style2 {font:bold 12pt courier new; color:fuchsia} </style>

</head> <body>

<div class="head">Оформление шрифта</div>

<p><span class="cap">Э</span>та страница показывает различное оформление шрифта, задаваемое с помощью встроенной таблицы стилей. Оформление применяется ко всей странице и к отдельным частям текста на странице.</p>

<div class="offset">

<p>Эти два параграфа смещают относительно окружающих параграфов, помещая их внутри раздела. Раздел имеет левое и правое поле по 25 пикселей, и ни один из параграфов не использует отступ первой строки.</p>

<p class="fancy">Этот параграф оформлен с помощью класса, который содержит тип шрифта и размер. Внутри этого параграфа имеется тег span, который оформляет <span class="style1">эту строку текста</span> иначе по сравнению с остальной частью параграфа. Кроме того, это <span class="style2">слово</span> использует свой собственный специальный стиль оформления.</p>

</div>

</body> </html>

Листинг 4.3. Задание стилей оформления шрифта для страницы (html, txt)

Приложение стилей шрифта

Рис. 4.2.  Приложение стилей шрифта

Оформление тега <body> задает формат по умолчанию для всей страницы. После этого применяются различные классы стилей для отдельных частей текста.




Начало  Назад  Вперед