belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

CSS >>>

2.1. Оформление внешнего вида текста

В процессе изучения языка гипертекстовой разметки HTML мы учились форматировать текст, разбивая его на логические блоки, например, абзацы, или выделяя особенность и важность отдельных слов, например, названий или терминов. Конечно, внешний вид форматируемых фрагментов при этом мог несколько изменяться, например, выделяться подчеркиванием или отображаться курсивом, но повлиять на общий формат внешнего вида текста по своему усмотрению мы не могли. Однако HTML для этих целей и не используется, поскольку существует CSS, который обладает достаточным арсеналом свойств, способных изменить не только внешний вид текста, но и общее оформление страницы или всего сайта. В данном пункте нас будут интересовать только свойства, отвечающие за оформление внешнего вида текста. К ним можно отнести расстояния между буквами, словами и строками, выравнивание и направление текста, отступ первой строки, различные виды подчеркивания и т.д. Сюда, конечно же, следует отнести и шрифт, но о свойствах шрифтов мы поговорим в следующем пункте.

Для того, чтобы изменить интервал между словами или отдельными символами текста используются наследуемые свойства word-spacing и letter-spacing, которые в качестве значений принимают числа в любых доступных единицах измерения, использующихся в CSS (смотреть). Более того, разрешается использовать отрицательные значения, но в этом случае слова и символы могут заходить друг на друга или вести себя непредсказуемым образом, так что нужно быть внимательным и следить за сохранением читабельности текста. Значения в процентах не допускаются, но кроме числовых значений свойства могут принимать значение normal, которое используется по умолчанию и задает обычные для данного шрифта интервалы, а также значение inherit, которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента. Использование этих и некоторых других свойств форматирования текста показано в примере 2.1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		.p_1{
		letter-spacing: 0.6em;
		word-spacing: 10px;
		line-height: 1.5;
		text-indent: 30px;
		}
		
		.p_2{
		letter-spacing: 0.2em;
		word-spacing: 3px;
		line-height: 1;
		text-indent: 1%;
		}
	</style>
</head>
<body>
	<p class="p_1">
		Первая строка этого абзаца.<br>
		Вторая строка этого абзаца.<br>
		Третья строка этого абзаца.
	</p>
	<p class="p_2">
		Первая строка этого абзаца.<br>
		Вторая строка этого абзаца.<br>
		Третья строка этого абзаца.
	</p>
</body>
</html>

Пример 2.1. Использование свойств letter-spacing, word-spacing, line-height, text-indent

Читабельность текста можно также улучшить за счет увеличения межстрочного интервала (расстояния между строками). Для этих целей используется наследуемое свойство line-height, которое может принимать следующие значения:

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

Установка красной строки (отступ первой строки в абзаце) задается при помощи наследуемого свойства text-indent. Допускается использование любых доступных единиц измерения, использующихся в CSS, а также проценты, которые определяют размер отступа первой строки относительно ширины родительского элемента, а не размеров текущего шрифта (см. пример 2.1).

Здесь и далее мы будем практически всегда опускать значение свойств inherit, т.к. его могут принимать все свойства CSS. Оно указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

Имеются в CSS и возможности для выравнивания текста. Делается это при помощи наследуемого свойства text-align (см. пример 2.2), которое применяется к блочным элементам, определяя выравнивание его строчного содержимого. Отметим, что применять его к строчным элементам не имеет смысла, т.к. ширина таких элементов определяется их содержимым. Возможные значения свойства:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		/* Задаем выравнивание текста абзацев */
		.p_1{text-align: right;}
		.p_2{text-align: center;}
		.p_3{text-align: justify;}
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Текст выравнивается по правому краю.<br>
		Вторая строка этого абзаца.<br>
	</p>
	
	<p class="p_2" style="background-color: blue">
		Текст выравнивается по центру.<br>
		Вторая строка этого абзаца.<br>
	</p>
	
	<p class="p_3" style="background-color: green">
		Текст растягивается по ширине абзаца. 
		Чтобы эффект был виден, первое предложение 
		должно быть длинее, чем ширина абзаца.
	</p>
</body>
</html>

Пример 2.2. Пример использования свойства text-align

В некоторых языках возникает необходимость смены направления письма. Если у нас принято направление письма слева направо, то во многих арабских языках это делается наоборот, т.е. справа налево. Для таких случаев предусмотрено специальное наследуемое свойство direction, значение ltr которого задает направление текста слева направо, а значение rtl, соответственно, справа налево (см. пример 2.3). Если же нужно изменить еще и направление символов, то следует воспользоваться наследуемым свойством unicode-bidi, которое используется только совместно с direction и может принимать значения:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		/* Задаем направление текста абзацев */
		.p_1{
		direction: rtl;
		unicode-bidi: normal;
		}
		
		.p_2{
		direction: rtl;
		unicode-bidi: bidi-override;
		}
		
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Направление записи текста идет<br>
		справа налево.
	</p>
	
	<p class="p_2" style="background-color: violet">
		Направление записи текста <br>
		и букв идет справа налево.
	</p>
</body>
</html>

Пример 2.3. Пример использования свойств direction, unicode-bidi

Отметим, что по умолчанию, если задано направление текста слева направо (как принято у нас), браузеры выравнивают текст по левому краю. Если же задано выравнивание текста справа налево, то браузеры по умолчанию выравнивают текст по правому краю.

Как мы уже упоминали в процессе изучения HTML, браузеры по умолчанию игнорируют большинство пробельных символов в html-коде, заменяя символы табуляции, подряд идущие пробелы и автоматические переносы строк одним пробелом. Однако такое положение не всегда устраивает пользователей, а применение элемента 'pre', в котором сохраняются все пробелы и переносы строк, также не всегда удовлетворяет их потребностям. Поэтому в CSS для определения способа обработки пробельных символов предусмотрено специальное наследуемое свойство white-space (см. пример 2.4). Перечислим значения свойства:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		.p_1{white-space: normal;}
		.p_2{white-space: pre;}
		.p_3{white-space: nowrap;}
		.p_4{white-space: pre-wrap;}
		.p_5{white-space: pre-line;}
	</style>
</head>
<body>
	<p class="p_1" style="background-color: red">
normal:	используется    значение браузера по умолчанию, т.е. все пробельные 
		символы и переносы строк    в коде HTML преобразуются в один пробел, 
		        а разрывы строк добавляются браузером автоматически.
	</p>
	
	<p class="p_2" style="background-color: blue">
pre: текст форматируется аналогично содержимому элемента 'pre', т.е.  
	отображается так, как вводит его пользователь: сохраняются все подряд идущие 
пробельные символы и переносы строк, автоматические переносы не добавляются.
	</p>
	
	<p class="p_3" style="background-color: green">
nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br>
		заменяются одним пробелом, переносы строк в коде HTML игнорируются  , <br>
	автоматические переносы строк не добавляются, действительны только 	<br>
	принудителььные разрывы строк, сделанные <br>
		при помощи элементов 'br'.
	</p>
	
	<p class="p_4" style="background-color: yellow">
pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются  , но 
	разрывы    строк добавляются 	браузером автоматически.
	</p>
	
	<p class="p_5" style="background-color: violet">
pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но переносы 
   строк в коде HTML сохраняются     , а также по необходимости браузером добавляются 
			автоматические переносы.
	</p>
</body>
</html>

Пример 2.4. Пример использования свойства white-space

Следует иметь ввиду, что по умолчанию все браузеры переносят слова целиком. Однако, если нужно изменить такое поведение, можно использовать наследуемое свойство word-break (см. пример 2.5), которое указывает браузеру, как нужно вставлять переносы внутри строк, если они не помещаются по ширине в родительском элементе. Свойство может принимать следующие значения:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		.p_1{word-break: normal;}
		.p_2{word-break: break-all;}
		
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Слова переносятся целиком, как обычно короче.
	</p>
	
	<p class="p_2" style="background-color: green">
		Если слово не помещается в заданные размеры по ширине, 
		то оно переносится на другую строку. Парапапарампрарампарарарарарарарам.
	</p>
</body>	
</html>	

Пример 2.5. Пример использования свойства word-break

Присутствует в CSS и возможность управления преобразованием текста в прописные (заглавные) или строчные буквы. Делается это при помощи наследуемого свойства text-transform (см. пример 2.5_2), которое может принимать следующие значения:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с текстом</title>
	<style>
		/* Задаем ширину всех абзацев */
		p{width: 400px;}
		
		.p_1{text-transform: capitalize;}
		.p_2{text-transform: uppercase;}
		.p_3{text-transform: lowercase;}
		.p_4{text-transform: none;}
	</style>
</head>
<body>
	<p class="p_1" style="background-color: yellow">
		Все первые буквы текста отображаются прописными.
	</p>
	
	<p class="p_2" style="background-color: blue">
		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ прописными.
	</p>
	
	<p class="p_3" style="background-color: green">
		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ строчными.
	</p>
	
	<p class="p_4" style="background-color: red">
		А вот так выглядит ТЕКСТ в стандартном режиме.
	</p>
</body>
</html>

Пример 2.5.2 Пример использования свойства text-transform

Также при использовании CSS отпадает необходимость использования элементов HTML для выделения текста подчеркиванием, т.к. для этого имеется ненаследуемое свойство text-decoration, которое может принимать соответствующие значения:

Контрольные вопросы и задания

  1. Какие свойства используются для определения интервала между словами и отдельными символами? Допустимы ли значения в процентах?
  2. Опишите свойство, при помощи которого задается высота строки.
  3. Относительно чего рассчитывается значение, заданное в процентах, в свойстве text-indent?
  4. Перечислите значения свойства text-align. Имеет ли смысл применять его к строчным элементам?
  5. Перечислите значения свойства white-space. Как поступает браузер по умолчанию?
  6. С какими еще свойствами для форматирования текста вы познакомились в данном параграфе?

Словарь новых английских слов

word [ˈwɜːd] – слово.
letter [ˈlɛtə] – буква, литера.
spacing [ˈspeɪsɪŋ] – интервал, расстояние.
inherit [ɪnˈhɛrɪt] – наследовать.
indent [ɪnˈdɛnt] – отступ, абзац.
justify [ˈdʒʌstɪfʌɪ] – выровнять строку.
center [ˈsentər] – центр.
direction [dɪˈrɛkʃ(ə)n] – направление.
embed [ɪmˈbɛd] – вставлять, внедрять.
override [ˌəʊvəˈraɪd] – перебивать, не принимать во внимание.
space [speɪs] – пробел, интервал, место.
wrap [ræp] – перенос на строку, обертывать.
line [laɪn] – линия, строка.
capitalize [ˈkapɪt(ə)lʌɪz] – писать прописными буквами.
uppercase [ˈʌpəkeɪs] – верхний регистр.
lowercase [ˈləʊəkeɪs] – нижний регистр.
overline [ˈəʊvəlaɪn] – надчеркивание.
underline [ˌʌndəˈlaɪn] – линия подчеркивающая слово.
through [θruː] – прохождение через.
font [fɒnt] – комплект шрифта.
family [ˈfamɪli] – семья, семейство.
serif [ˈsɛrɪf] – засечка, шрифт с засечками.
sans [sænz] – без (предлог).
cursive [ˈkəːsɪv] – курсив, рукописный текст.
fantasy [ˈfantəsi] – воображение, фантазия.
monospace [ˈmɒnəʊspeɪs] – моноширинный шрифт.
size [saɪz] – размер, величина, объем.
small [smɔːl] – маленький, небольшой.
medium [ˈmiːdɪəm] – средний, умеренный.
large [lɑːdʒ] – большой, крупный.
bold [bəʊld] – жирный (шрифт).
light [lʌɪt] – светлый.
weight [weɪt] – вес.
italic [ɪˈtalɪk] – курсивный.
oblique [əˈbliːk] – косой, наклонный.
variant [ˈvɛərɪənt] – вариант, модификация.
caption [ˈkapʃ(ə)n] – заголовок.
icon [ˈaɪkɒn] – иконка.
message [ˈmɛsɪdʒ] – сообщение.
box [bɒks] – коробка, ящик.
circle [ˈsəːk(ə)l] – круг, кольцо.
square [skwɛː] – квадрат, квадратный.
decimal [ˈdɛsɪm(ə)l] – десятичный.
separate [ˈseprət] – раздельный, разделять.
collapse [kəˈlaps] – сплющивание.
border [ˈbɔːdə] – граница.
hide [haɪd] – прятать.
show [ʃəʊ] – показывать.
fixed [fɪkst] – закрепленный, фиксированный.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх