×
Traktatov.net » HTML, XHTML и CSS на 100% » Читать онлайн
Страница 84 из 156 Настройки

• bolder – определяет более темный вес шрифта, чем наследуемый. Если наследуемое значение равно 9 0 0, то результат будет также 9 0 0.

• lighter – задает вес шрифта, который светлее, чем наследуемый. Если наследуемое значение равно 10 0, то результат будет также 10 0.

Для примера установим значение свойства font-weight для класса w_600 элемента P, равное 600.


p.w_600 {

font-weight: 600;

}


Результат приведен на рис. 8.7.

Рис. 8.7. Вес шрифта


В качестве эксперимента вы можете попробовать задать элементу BODY значение свойства font-weight равным normal, а потом изменить его на 400. Вы увидите, что толщина шрифта основного текста в обоих случаях осталась одинаковой и вид текста на странице не изменился.

Размер шрифта

Теперь изменим размер шрифта основного текста. Для этого существует свойство font-size. Размер шрифта задается с помощью значения и единицы измерения, выбранной в одной из двух разных групп: абсолютной и относительной.

Абсолютные единицы:

• in – дюйм, примерно равен 2,5 см;

• mm – миллиметр;

• cm – сантиметр;

• pt – пункт, примерно равен 1/7 дюйма;

• pc – пика (равна 12 пунктам).

Относительные единицы:

• em – высота шрифта элемента;

• ex – высота буквы x;

• px – пиксел;

• % – процентное соотношение.

Группу относительных единиц удобно использовать, чтобы сохранить первозданный вид документа на любом устройстве (на экране, при печати).

Для нашего примера сделаем размер шрифта текста, равный 14 пунктам:


p {

font-size: 14pt;

}


Результат можно увидеть на рис. 8.8.

Рис. 8.8. Размер шрифта 14 pt


Мы рассмотрели основные возможности CSS по работе со шрифтами. Теперь приступим к изучению форматирования текста.

8.3. Форматирование текста

В этом разделе вы познакомитесь с впечатляющими средствами CSS для отображения текста. Начнем изучение форматирования текста с отступов.

Отступы

Представьте, что вы форматируете несколько HTML-страниц размером с небольшую книгу. Язык HTML не предоставляет специальных средств для задания отступа абзаца, и отступ приходится делать с помощью пробелов. Согласитесь, не очень-то удобно в начале каждого абзаца набирать пробелы, да еще и следить, чтобы их было одинаковое количество в начале всех абзацев. Еще хуже, если, выполнив часть или всю работу, вы обнаружите, что отступы недостаточны или слишком большие. CSS предоставляет замечательное свойство text-indent для решения данной проблемы. Размер отступа может задаваться как абсолютными, так и относительными единицами. В том числе и процентами. В качестве 100 % считается ширина всей страницы.

Зададим в нашем примере отступ 25 пикселов (рис. 8.9):


p {

text-indent: 25px;

}

Рис. 8.9. Задание отступа 25 пикселов


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

Выравнивание текста

Выравнивание текста задается с помощью свойства text-align, значения которого такие же, как и значения свойства align у элемента P. Следующие значения указывают, что текст будет выровнен:

• left – по левому краю;

• right – по правому краю;

• center – по центру;