Опубликован: 19.03.2007 | Уровень: для всех | Доступ: платный
Лекция 4:

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

Свойства цвета текста

Можно задавать цвет текста на странице или цвет фона контейнера, содержащего текст. Два эти свойства стиля показаны в следующей таблице.

Таблица 4.5. Свойства стиля цвета
Свойство Значение
color
#rrggbb
rgb(r,g,b)
название цвета
background-color
#rrggbb
rgb(r,g,b)
название цвета

Цвета могут задаваться в диапазоне от всей страницы, связывая стиль цвета с тегом <body>, и до одного текстового символа, связывая стиль цвета с тегом <span>, окружающим символ. Для определения свойств цветов можно использовать шестнадцатеричные значения, RGB и названия цветов в любой комбинации.

Различные комбинации цветов фона и текста показаны в следующем коде. Вывод браузером этой страницы показан на рисунке 4.12.

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

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdc>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Цветная страница</title>
	
<style type="text/css">
  body         {color:white; background-color:silver}
  .PARAstyle   {color:rgb(0,0,0)}
  .PHRASEstyle {color:#0000FF}
  .TEXTstyle   {color:green; background-color:yellow}
</style>

</head>
<body>

<p>Эта страница содержит три параграфа. Вся страница оформляется серым 
цветом фона, а цвет текста будет белым. Первый параграф использует эти 
значения цветов страницы по умолчанию.</p>

<p class="PARAstyle">
Второй параграф задает свой собственный цвет текста как черный с помощью 
значения RGB. В этом параграфе <span class="PHRASEstyle">данная строка 
текста сделана синей, а фраза <span class="TEXTstyle"><b>зеленый на 
желтом</b></span> имеет свои собственные настройки стиля 
цвета.</span></p>

<p>Третий параграф возвращается к используемым по умолчанию настройкам 
цвета для страницы.</p>

</body>
</html>
Листинг 4.19. Код задания на странице свойств цвета текста
Изменение свойств цвета текста

Рис. 4.12. Изменение свойств цвета текста

Вся страница имеет серый фон с белыми буквами, что задается настройкой стиля для селектора body. Определены три класса стиля для приложения ко второму параграфу, чтобы переопределить эти настройки страницы. Класс PARAstyle применяется к параграфу, чтобы сделать его текст черным [rgb(0,0,0)] ; класс PHRASEstyle применяется к части параграфа, чтобы изменить цвет текста с черного на синий [#0000FF] ; класс TEXTstyle применяется к подстроке текста, чтобы вывести зеленые буквы на желтом фоне.

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

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!

Наталья Алмаева
Наталья Алмаева
Россия
Светлана Казьмина
Светлана Казьмина
Россия, Волгодонск