html.okpython.net
HTML и CSS для начинающих

CSS :: Текст

Использование CSS для форматирования текста

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

Установка интервала между словами и символами текста.
css-свойства word-spacing и letter-spacing

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

HTML Результат htmlCodes 
<!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>

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

Высота строки и css-cвойство line-height

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

  • normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от браузера составляет около 120-125% от текущего размера шрифта; значение используется браузером по умолчанию;
  • множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения межстрочного интервала (см. пример №1);
  • размер – задает расстояние между строк в любых единицах измерения, использующихся в CSS;
  • проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта;
  • inherit – указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.

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

Красная строка и css-cвойство text-indent

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

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

Выравнивание текста и css-cвойства text-align и text-align-last

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

  • left – текст будет выравниваться по левому краю; значение используется браузером по умолчанию;
  • right – текст будет выравниваться по правому краю;
  • center – текст будет выравниваться по центру;
  • justify – текст будет растягиваться на всю ширину родительского элемента;
  • start – аналогично значению left, если текст идёт слева направо и right, когда текст идёт справа налево;
  • end – аналогично значению right, если текст идёт слева направо и left, когда текст идёт справа налево.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойства text-align и text-align-last</title>

	<style>
		
		p{
		width: 390px;
		margin: 3em;
		}
				
		.p_1{
		text-align: left;
		text-align-last: right;
		background-color: yellow;
		}
		
		.p_2{
		text-align: justify;
		text-align-last: center;
		background-color: blue;
		}
		
		.p_3{
		text-align-last: justify;
		background-color: green;
		}
		
		.p_4{
		text-align: right;
		text-align-last: auto;
		background-color: blue;
		}		
		
		.p_5{
		text-align: justify;
		text-align-last: auto;
		background-color: yellow;
		}		
		
	</style>
	
</head>
<body>

	<p class="p_1">
		text-align: left; text-align-last: right;
		Текст выравнивается по левому краю.
		Текст последней строки выравнивается по правому краю.
	</p>
	
	<p class="p_2">
		text-align: justify; text-align-last: center;
		Текст растягивается по ширине абзаца.
		Текст последней строки выравнивается по центру.
	</p>
	
	<p class="p_3">
		text-align-last: justify;
		Текст последней строки растягивается по ширине абзаца. 
	</p>
	
	<p class="p_4">
		text-align: right; text-align-last: auto;
		Текст выравнивается по правому краю.
		Текст последней строки также выравнивается по правому краю.
	</p>
	
	<p class="p_5">
		text-align: justify; text-align-last: auto;
		Текст растягивается по ширине абзаца.
		Текст последней строки выравнивается по левому краю.
	</p>	
	
</body>
</html>

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

Если необходимо отдельно выровнять содержимое только последней строки элемента, можно использовать css-свойство text-align-last, которое в качестве дополнительного значения принимает ключевое слово auto (см. пример №2). Данное значение используется по умолчанию, а текст последней строки в этом случае выравнивается в зависимости от значения свойства text-align с одним исключением: text-align не должно быть установлено в justify, иначе текст будет выравниваться по левому краю.

Направление письма и символов,
css-свойства direction, unicode-bidi и writing-mode

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

  • normal – право выбора направления остается за браузером, который использует собственный алгоритм для определения направления текста на основе стандартов Unicode; значение используется браузером по умолчанию;
  • embed – направление текста будет задаваться, как указано в свойстве direction;
  • bidi-override – направление текста, опять же, будет задаваться свойством direction, но в дополнение к этому изменится и направление символов в тексте.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Использование unicode-bidi</title>

	<style>
		
		p{
		width: 400px;
		margin: 3em;		
		}
				
		.p_1{
		direction: rtl;
		unicode-bidi: normal;
		background-color: yellow
		}
		
		.p_2{
		direction: rtl;
		unicode-bidi: bidi-override;
		background-color: violet
		}
		
	</style>
	
</head>
<body>
	
	<p class="p_1">
		Направление записи текста идет справа налево.
	</p>
	
	<p class="p_2">
		Направление записи текста и букв идет справа налево.
	</p>
	
</body>
</html>

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

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

Помимо необходимости регулирования горизонтального направления текста время от времени может возникать и ситуация, когда текст на странице требуется располагать не в горизонтальном, а в вертикальном направлении. В этом случае не обойтись без наследуемого css-свойства writing-mode (см. пример №4), которое может принимать следующие значения:

  • horizontal-tb – устанавливает горизонтальное направление текста слева направо с заполнением строками сверху вниз;
  • vertical-rl – устанавливает вертикальное направление текста сверху вниз с заполнением строками справо налево;
  • vertical-lr – устанавливает вертикальное направление текста сверху вниз с заполнением строками слева направо.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Использование writing-mode</title>

	<style>
	
		p{
		width: 250px;
		height: 250px;
		margin: 2em;
		}
		
		.p_1{
		writing-mode: horizontal-tb;
		background-color: yellow;
		}
		
		.p_2{
		writing-mode: vertical-rl;
		background-color: green;
		}
		
		.p_3{
		writing-mode: vertical-lr;
		background-color: violet;
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		writing-mode: horizontal-tb writing-mode: horizontal-tb 
	</p>
	
	<p class="p_2">
		writing-mode: vertical-rl writing-mode: vertical-rl
	</p>
	
	<p class="p_3">
		writing-mode: vertical-lr writing-mode: vertical-lr
	</p>
	
</body>
</html>

Пример №4. Пример использования свойства writing-mode

Отметим, что использование свойств direction и unicode-bidi совместно с writing-mode может привести к вполне ожидаемому дополнительному изменению направления вдоль вертикальной прямой (попробуйте внести изменения в код примера и поэкспериментируйте со значениями).

Пробельные символы и css-cвойство white-space

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

  • normal – все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически; значение используется браузером по умолчанию;
  • pre – текст форматируется аналогично содержимому тега <pre>, т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются;
  • nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом, переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только принудительные разрывы строк, сделанные при помощи тегов <br>;
  • pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются браузером автоматически;
  • pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство white-space</title>

	<style>
		
		p{
		width: 450px;
		margin: 3em;
		}
		
		.p_1{
		white-space: normal;
		background-color: red
		}
		
		.p_2{
		white-space: pre;
		background-color: blue
		}
		
		.p_3{
		white-space: nowrap;
		background-color: green
		}
		
		.p_4{
		white-space: pre-wrap;
		background-color: yellow
		}
		
		.p_5{
		white-space: pre-line;
		background-color: violet
		}
		
	</style>
</head>
<body>

	<p class="p_1">
normal:	используется    значение браузера по умолчанию, т.е. все пробельные 
		символы и переносы строк    в коде HTML преобразуются в один пробел, 
		        а разрывы строк добавляются браузером автоматически.
	</p>
	
	<p class="p_2">
pre: текст форматируется аналогично содержимому элемента «pre», т.е.  
	отображается так, как вводит его пользователь: сохраняются все подряд идущие 
пробельные символы и переносы строк, автоматические переносы не добавляются.
	</p>
	
	<p class="p_3">
nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br>
		заменяются одним пробелом, переносы строк в коде HTML игнорируются  , <br>
	автоматические переносы строк не добавляются, действительны только 	<br>
	принудителььные разрывы строк, сделанные <br>
		при помощи элементов «br».
	</p>
	
	<p class="p_4">
pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются  , 
	но разрывы    строк добавляются 	браузером автоматически.
	</p>
	
	<p class="p_5">
pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но 
	переносы строк в коде HTML сохраняются     , а также по необходимости 
	браузером добавляются 
			автоматические переносы.
	</p>
	
</body>
</html>

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

Переносы строк и css-cвойства word-break и word-wrap

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

Свойство может принимать следующие значения:

  • normal – данное значение используется по умолчанию и строки переносятся как обычно;
  • break-all – если очередное слово не будет полностью помещаться в заданную ширину блока, то браузер будет переносить оставшуюся часть слова на новую строку; значение не работает для текста на китайском, корейском или японском языке;
  • keep-all – не разрешается перенос строк в словах на китайском, корейском или японском языке; для остальных языков действует как normal.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство word-break</title>

	<style>
	
		p{
		width: 300px;
		margin: 3em;
		}
		
		.p_1{
		word-break: normal;
		background-color: yellow;
		}
		
		.p_2{
		word-break: break-all;
		background-color: green;
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		Слова переносятся на новую строку целиком, как обычно короче. 
		Парапапарампрарампарарарарарарарам.
	</p>
	
	<p class="p_2">
		Если слово не помещается в заданные размеры по ширине, то 
		его часть переносится на другую строку. 
		Парапапарампрарампарарарарарарарам.
	</p>
	
</body>
</html>

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

Также в CSS присутствует довольно похожее наследуемое свойство word-wrap, которое разрешает либо запрещает браузеру вставлять разрыв строки внутри длинных слов для переноса их на новую строку, если они не помещаются по ширине в заданную область (см. пример №7).

Свойство может принимать следующие значения:

  • normal – слова могут переноситься на новую строку только целиком, если только перенос не будет задан явно, например, при помощи тега <br>.
  • break-word – если слово не будет полностью помещаться в заданную ширину блока и будет отсутствовать допустимая точка для разрыва строки вне слова, то браузер будет вставлять разрыв строки внутри слова и переносить оставшуюся часть на новую строку.

Внимательно рассмотрите оба примера и найдите отличия в алгоритме работы этих свойств.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство word-wrap</title>

	<style>
	
		p{
		width: 230px;
		margin: 3em;
		}
		
		.p_1{
		word-wrap: normal;
		background-color: yellow;
		}
		
		.p_2{
		word-wrap: break-word;
		background-color: green;
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		Слова переносятся на новую строку целиком, как обычно короче. 
		Парапапарампрарампарарарарарарарам.
	</p>
	
	<p class="p_2">
		Если слово не помещается в заданные размеры по ширине и 
		отсутствует допустимая точка для разрыва строки вне слова, 
		то его часть переносится на другую строку. 
		Парапапарампрарампарарарарарарарам.
	</p>
	
</body>
</html>

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

Заглавные и строчные буквы,
css-cвойство text-transform

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

  • capitalize – прописной (заглавной) становится первая буква каждого слова;
  • uppercase – все буквы преобразуются в прописные;
  • lowercase – все буквы преобразуются в строчные;
  • none – текст отображается стандартным образом; значение используется браузером по умолчанию.
HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Свойство text-transform</title>

	<style>
		
		p{
		width: 400px;
		margin: 3em;
		}
		
		.p_1{
		text-transform: capitalize;
		background-color: yellow
		}
		
		.p_2{
		text-transform: uppercase;
		background-color: blue
		}
		
		.p_3{
		text-transform: lowercase;
		background-color: green
		}
		
		.p_4{
		text-transform: none;
		background-color: red
		}
		
	</style>
	
</head>
<body>

	<p class="p_1">
		Все первые буквы текста отображаются прописными.
	</p>
	
	<p class="p_2">
		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ прописными.
	</p>
	
	<p class="p_3">
		У моего текста ВСЕ буквы ОТОБРАЖАЮТСЯ строчными.
	</p>
	
	<p class="p_4">
		А вот так выглядит ТЕКСТ в стандартном режиме.
	</p>
	
</body>
</html>

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

Декоративная линия и подчеркивание текста

При использовании CSS отпадает необходимость использования элементов HTML для выделения текста подчеркиванием, т.к. для этого имеются ненаследуемые свойства text-decoration-line, text-decoration-style и text-decoration-color, которые позволяют соответственно задать тип, стиль и цвет декоративной линии для выбранного фрагмента текста (см. пример №9). Кроме того, имеется и сокращенное ненаследуемое свойство text-decoration, позволяющее задать все параметры в одном объявлении.

Свойство text-decoration-line в качестве значений может принимать следующие ключевые слова:

  • line-through – отображает текст перечеркнутым;
  • overline – оформляет текст надчеркнутым;
  • underline – оформляет текст подчеркнутым;
  • none – используется по умолчанию и отменяет все эффекты, включая подчеркивание у ссылок, что бывает очень полезно при формировании меню.

Свойство text-decoration-style в качестве значений также принимает ряд ключевых слов, определяющих стиль декоративной линии:

  • dashed – декоративная линия будет иметь пунктирный вид;
  • dotted – декоративная линия будет иметь точечный вид;
  • double – декоративная линия будет двойной;
  • solid – декоративная линия будет сплошной;
  • wavy – декоративная линия будет иметь волнистый вид.

Что касается цвета декоративной линии, то для свойства text-decoration-color разрешается использовать любое допустимое в CSS значение цвета.

Все вышеуказанные параметры декоративной линии можно также задавать в одном объявлении при помощи сокращенного свойства text-decoration, перечисляя их через пробел в любой последовательности. При этом если значение какого-нибудь свойства не будет указано, браузер просто применит значение по умолчанию (см. пример №9).

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Оформление декоративной линии</title>

	<style>
		
		p{
		width: 400px;
		margin: 2em;
		font-size: 2em;
		}
		
		.span_1{
		text-decoration-line: underline;
		text-decoration-style: dashed;
		text-decoration-color: rgba(255,0,0,0.3);
		}
		
		.span_2{
		text-decoration-line: overline;
		text-decoration-style: dotted;
		text-decoration-color: rgb(0,255,0);
		}		
		
		.span_3{
		text-decoration-line: line-through;
		text-decoration-style: double;
		text-decoration-color: orange;
		}
		
		.span_4{
		text-decoration-line: underline overline;
		text-decoration-style: wavy;
		text-decoration-color: #0000FF;
		}
		
		.span_5{
		text-decoration: underline solid hsl(90,80%,40%);
		}		
		
	</style>
	
</head>
<body>

	<p class="p_1">
		
		<span class="span_1">Текст №1</span> <br><br>
		<span class="span_2">Текст №2</span> <br><br>		
		<span class="span_3">Текст №3</span> <br><br>		
		<span class="span_4">Текст №4</span> <br><br>		
		<span class="span_5">Текст №5</span>	
	
	</p>
	
</body>
</html>

Пример №9. Использование декоративной линии для фрагментов текста

Установка теней для текста и css-cвойство text-shadow

Иногда для декоративного оформления текста бывает полезным использование теней. Для этих целей CSS предлагает наследуемое css-свойство text-shadow, которое создает одну или несколько теней для текста (см. пример №10). Формат записи свойства имеет вид {box-shadow: смещение_x смещение_y размытие цвет inset}, где:

  • смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно текста по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
  • смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно текста вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
  • размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
  • цвет – определяет цвет тени. т.к. браузеры по умолчанию задают разный цвет тени, то желательно всегда задавать этот необязательный параметр.
  • none – тень добавляться не будет (используется по умолчанию).

Для указания числовых значений параметров свойства text-shadow разрешается использовать все доступные в CSS единицы измерения (смотреть), а для указания цвета – любое допустимое в CSS его значение.

Если необходимо добавить сразу несколько теней, то они перечисляются через запятую. При этом первая тень в списке будет расположена на самом верху, а последняя — в самом низу.

HTML Результат htmlCodes 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Установка теней для текста</title>

	<style>
	
		p{
		width: 300px;
		height: 100px;
		margin: 3em;
		padding: 1em;
		border: solid 1px black;
		}
		
		.p_1{
		text-shadow: 2px 2px 3px blue;
        }
		
		.p_2{
		text-shadow: 2px 2px 5px blue,
					5px 5px 8px green,
					10px 10px 15px red;
		}
		
	</style>
	
</head>
<body>

	<p  class="p_1">
		Одна тень.
	</p> 
	
	<p  class="p_2">
		Несколько теней.
	</p>
	
</body>
</html>

Пример №10. Установка теней для текста

Быстрый переход к другим страницам

▲
▼