Текст в css – Задаем цвет текста в CSS. Способы представления цветов — учебник CSS — Вебджем.рф

Содержание

СSS Текст

Этот текст оформлен с помощью некоторых свойств форматирования текста. Заголовок использует свойства text-align (выравнивание текста) text-transform (преобразование текста) и color (цвет). Параграф имеет отступ, выравнивание и пространство между символами. Подчеркивание снимается с цветной ссылки «Редактор кода» ссылка.

Цвет текста

Свойство color используется для определения цвета текста.

С помощью CSS, цвет указан чаще всего:

Имя — "red"
Значение HEX- "#ff0000"
Значение RGB — "rgb(255,0,0)"

Посмотреть Значений цветов CSS полный список возможных значений цвета.

По умолчанию цвет текста на странице устанавливается в селекторе body.

Примечание: Для W3C совместимости CSS: Если Вы установите свойство color, необходимо также установить цвет фона background-color.

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

Свойство text-align используется для горизонтального выравнивания текста.

Текст может быть смещен по левому краю, по правому или по центру.

В следующем примере показано выравнивание текста по центру, слева и справа (по умолчанию если направление текста слева направо, выравнивание текста происходит по левому краю, а если направление текста справа налево, текст по умолчанию будет выравнен справа):

Когда свйство text-align имеет значение "justify", каждая строка растягивается так, что имеет одинаковую ширину, а левый и правый края равны (как в журналах и газетах):

Оформление текста

Свойство text-decoration используется, чтобы установить или удалить оформление текста.

Свойство со значением text-decoration: none; используется, чтобы удалить подчеркивание ссылки:

Прочие значения свойства text-decoration используются для украшения текста:

Пример

h3 {

text-decoration: overline;
}

h4 {
text-decoration: line-through;
}

h5 {
text-decoration: underline;
}

Редактор кода »

Примечание: Не рекомендуется подчеркивать текст, если это не ссылка, часто сбивает с толку читателя.

Преобразование текста

Свойство text-transform используется для установки прописных и строчных буквы в тексте.

Свойство может быть использовано, чтобы превратить все буквы в прописные или строчные, можно установить первую букву каждого слова прописной:

Пример

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

Редактор кода »

Отступ текста

Свойство text-indent используется для установки отступа первой строки текста:

Межбуквенный интервал

Свойство letter-spacing используется для указания пробела между буквами в тексте.

В следующем примере показано, как увеличить или уменьшить расстояние между символами:

Высота линии строк

Свойство line-height используется для указания пространства между линиями:

Направление текста

Свойство direction используется для изменения направления текста в элементе:

Интервал слов

Свойство word-spacing используется для указания расстояния между словами в тексте.

В следующем примере показано, как увеличить или уменьшить расстояния между словами:

Тень текста

Свойство text-shadow добавляет тень к тексту.

Следующий пример определяет положение горизонтальной тени 3 пикселя, положение вертикальной тени 2 пикселя и цвет тени красный:

Еще примеры

Отключить перенос текста внутри элемента
В этом примере показано, как отключить перенос текста внутри элемента.

Установить вертикальное выравнивание изображения
В этом примере показано, как задать вертикальное выравнивание изображения в тексте.

Проверьте себя с помощью упражнений!

Все CSS свойства текста

Свойства	Описание
color	Устанавливает цвет текста
direction	Устанавливает направление текста направление записи
letter-spacing	Увеличивает или уменьшает расстояние между символами в тексте
line-height	Устанавливает высоту строки
text-align	Устанавливает горизонтальное выравнивание текста
text-decoration	Устанавливает оформление добавленые в тексте
text-indent	Устанавливает отступ первой строки в текстовой строке
text-shadow	Устанавливает теневой эффект добавленый к тексту
text-transform	Устанавливает преобразование текста
text-overflow	Устанавливает, когда содержимое контента переполненно и не видно пользователю
unicode-bidi	Устанавливает вместе свойство direction для установки или возврата, следует ли переопределять текст для поддержки нескольких языков в одном документе
vertical-align	Устанавливает вертикальное выравнивание элемента
white-space	Устанавливается, когда обрабатывается внутри элемента
word-spacing	Увеличивает или уменьшает пробел между словами в тексте

CSS — Работа с текстом

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

Задавать стили CSS к тексту можно на уровне элемента body (для всей веб-страницы), элемента p (для абзаца), элемента span (для выделенного фрагмента текста) или любого другого элемента HTML.

Свойство font-size изменяет размер шрифта. Оно задаётся с помощью значения и единицы измерения (em, px

, pt, %). Единицы измерения em и % являются относительными и зависят от размера шрифта установленного в документе. Единицы измерения px и pt являются абсолютными и их размер зависит от разрешения экрана. Также у данного свойства есть предопределенные значения small и larger, которые соответственно уменьшают или увеличивают текст по отношению к базовому.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство font-weight изменяет жирность шрифта. Свойство font-weight имеет 2 часто используемых значения: normal (обычное) и bold (жирное). Остальные значения используются очень редко, перечислим их: числовые от 100 до 900 с шагом 100 (100 – самое тонкое начертание, 900 – самое жирное начертание), bolder и lighter.


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>  
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения:

normal (обычное начертание шрифта), italic (курсивное начертание).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство font-family изменяет шрифт или список шрифтов с помощью которых отображается текст. В качестве значений свойство font-family принимает названия шрифтов (например: font-family: «Tahoma», «Arial») или предопределенные названия группы шрифтов (serif, sans-serif, monospace, fantasy, cursive).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство color изменяет цвет шрифта. Установить цвет можно несколькими способами: #ff0000 (шестнадцатеричное значение цвета), orange (зарезервированное название цвета), rgb(120,17,90) (RGB значение).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство background-color можно использовать для выделения текста цветом, т.е. текст делается похожим на текст выделенный маркером. Установить цвет можно такими же способами, как и для свойства color.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p>Lorem ipsum dolor <span>sit amet</span></p>
<p><span>Lorem</span> ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство text-decoration можно использовать для декоративного оформления текста. В качестве значений свойства text-decoration можно использовать следующие: none (без декоративного оформления), underline (подчёркивание), overline (линия над текстом), line-through (зачёркивание), blink (эффект мигания).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Подчёркивание также можно создать с помощью свойства CSS border.


<p>Lorem ipsum <span>dolor sit</span> amet</p>
<p><span>Lorem </span>ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство text-transform управляет регистром символов. В качестве значений свойства text-transform можно использовать следующие: none (по умолчанию), lowercase (переводит все символы в строчные), uppercase (переводит все символы в прописные), capitalize (каждое слово начинается с прописного символа).


<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>

Lorem ipsum dolor sit amet

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в HTML коде. При помощи свойства white-space вы можете настроить поведение браузера с помощью следующих значений: normal (по умолчанию), nowrap (не переносит текст, пока не встретит тег br), pre (отображает текст как в коде на HTML), pre-wrap (отображает все пробелы между словами и переносит текст, если он не помещается в контейнер).


<p>Lorem    ipsum 

dolor sit amet</p>
<hr>
<p>Lorem    ipsum 

dolor sit amet</p>

Lorem ipsum dolor sit amet

Свойство text-align предназначено для выравнивания текста в горизонтальном направлении. Значения свойства text-align указывают, что текст будет выровнен: left (по левому краю), center (по центру), right (по правому краю), justify (по ширине, т.е. одновременно по левому и правому краям).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Impedit, quo voluptas assumenda est, qui minus id quod. Quas molestias excepturi sint, obcaecati cupiditate non numquam eius. Perspiciatis, unde omnis iste natus error sit voluptatem. Et harum quidem rerum facilis est laborum et molestiae consequatur. Minus id, quod maxime placeat, facere possimus. Quo minus id, quod maxime placeat facere. Et molestiae consequatur, vel eum iure reprehenderit, qui dolorem ipsum, quia consequuntur.

Свойство vertical-align может использоваться для строчных элементов (в том числе для элементов со свойством display:inline-block), ячеек таблицы, и предназначено для выравнивания текста по вертикали. Значения свойства vertical-align указывают, что текст будет выровнен: top (по верхнему краю строки), middle (по середине), bottom (по нижнему краю строки), baseline (значение по умолчанию, выравнивание по базовой линии), sub (текст отображается в виде нижнего индекса, как подстрочный), super (текст отображается в виде верхнего индекса, как надстрочный).


<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem ipsum dolor <small>sit amet</small>.</p>
<hr>
<p>Lorem <span>ipsum</span> dolor <span>sit amet</span>.</p>

Lorem ipsum dolor sit amet.

Свойство line-height предназначено для задания высоты строки, которая влияет на расстояние между строчками текста. В качестве значений свойства line-height можно использовать следующие: число (множитель по отношению к значению высоты строки по умолчанию), проценты (например: 120% от высоты строки по умолчанию), px (например: 16px), em (например: 3em), зарезервированное слово normal (автоматический расчёт высоты).


<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>
<hr>
<p>...</p>

Lorem ipsum dolor sit amet. Eos et quas molestias excepturi sint. Tempora incidunt, ut aliquid. Quibusdam et molestiae non provident, similique sunt in culpa, qui in. Eligendi optio, cumque nihil molestiae consequatur, vel eum fugiat. Alias consequatur aut fugit. Ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti.

cвойства текста и шрифтов в CSS с примерами.

CSS дает широкие возможности по оперированию стилем текста. Можно влиять на шрифт, цвет, размер и другие свойства текста.

Так как эта страница расчитана на новичков, то сначала напомним базовый синтаксис CSS и используемую терминологию.

Каждое правило CSS состоит из селектора и определения. Селектор — обычно это тег, к которому мы применяем наш стиль, а определение — это само стилевое отображение. Определение состоит из свойства и его значения. Например: свойство — цвет, значение — красный.

Синтаксис CSS следующий:

селектор { свойство: значение }

Пример правила CSS:

p { color: blue }

В этом примере задано правило тегу отображать текст синим цветом. Одному селектору можно указать несколько пар (свойство : значение).

p { color: blue; font-size: 10pt }

В этом примере задано правило тегу отображать текст синим цветом и размером 10pt. То есть тут мы имеем две пары (свойство : значение) применённые к одному селектору, в данном случае к тегу абзаца .

В дальнейшем, когда в тексте будут встречаться слова свойство и значение, будет иметься ввиду именно определение для селектора в правиле CSS.

Свойства шрифта

Свойство font-family
Свойство	Значение	Описание	Пример
font-family	имя шрифта	Устанавливает шрифт из списка	P {font-family: Arial, sans-serif}

Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.

Универсальные семейства шрифтов:

serif — антиквенные шрифты (шрифты с засечками), типа Times;
sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
fantasy — семейство декоративных шрифтов;
cursive — семейство курсивных шрифтов;

Пример с использованием:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-family</title>
	<style>
		h2 { font-family: Arial, sans-serif }
		h3 { font-family: Georgia, Times, serif }
	</style>
</head>
<body>
	<h2>Заголовок h2</h2>
	<h3>Заголовок h3</h3>
</body>
</html>

Следующее свойство:

Свойство font-style
Свойство	Значение	Описание	Пример
font-style	normal italic oblique	Нормальный шрифт Курсив Наклонный шрифт	P {font-style: oblique}

Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-style</title>
</head>
<body>
<p>Пример нормального шрифта.</p>
<p>Пример курсива.</p>
<p>Пример наклонного шрифта.</p>
</body>
</html>

Видно что курсив от наклонного шрифта внешне не отличается.

Следующее свойство:

Свойство font-variant
Свойство	Значение	Описание	Пример
font-variant	normal small-caps	Устанавливает капитель (особые прописные буквы)	P {font-variant: small-caps}

Капитель — так в типографике называется текст, в котором строчные знаки выглядят, как уменьшенные прописные. Следует различать капитель и просто уменьшенные прописные буквы. Капительные буквы несколько выше строчных и имеют, как правило, чуть расширенные пропорции.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-variant</title>
</head>
<body>
	<p>Обычный текст.
	<span>Текст капителью</span>.</p>
	<p>Опять обычный текст.</p>
</body>
</html>

Следующее свойство:

Свойство font-weight
Свойство	Значение	Описание	Пример
font-weight	normal lighter bold bolder 100–900	Нормальная жирность Светлое начертание Полужирный Жирный 100 — светлый шрифт, 900 — самый жирный	P {font-weight: bolder}

Свойство font-weight устанавливает насыщенность шрифта. Для этого в значении используются ключевые слова: bold — полужирное начертание, normal — нормальное начертание. Значение может быть установленно в диапазоне от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (normal, которое установлено по умолчанию) соответствует 400, стандартный полужирный текст, bold, — значению 700.

Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-weight</title>
</head>
<body>
	<p>Обычный текст. <span>Текст bold</span>.</p>
	<p>Опять обычный текст.</p>
</body>
</html>

Следующее свойство:

Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.

Свойство font-size
Свойство	Значение	Описание	Пример
font-size	normal pt px %	нормальный размер пункты пикселы проценты	font-size: normal font-size: 11pt font-size: 11px font-size: 110%

Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.

Для изменения размера текста относительно родителя используется другой набор констант (larger — увеличивает размер относительно родительского, smaller — уменьшает размер).

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования font-size.</title>
</head>
<body>
	<p>Обычный текст.</p>
	<p>Текст xx-small.
	<span>Текст larger</span>.</p>
	<p>Текст small.</p>
	<p>Текст medium.</p>
	<p>Текст large.</p>
	<p>Текст x-large.</p>
	<p>Текст xx-large.</p>
	<p>Опять обычный текст.</p>
	<p>Текст 150%.</p>
	<p>Текст 15px.
	<span>Текст larger</span>.</p>
</body>
</html>

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

Кроме работы со шрифтами, CSS даёт ряд инструментов для работы с свойствами самого текста.

Рассмотрим первое свойство:

Свойство line-height
Свойство	Значение	Описание	Пример
line-height	normal множитель значение %	Межстрочный интервал (интерлиньяж)	line-height: normal line-height: 1.5 line-height: 12px line-height: 120%

При установке межстрочного интервала отчёт идёт от базовой линии шрифта. По умолчанию расстояние между строками текста зависит от вида и размера шрифта и определяется браузерами автоматически. Отрицательное значение интерлиньяжа не допускается.

<!DOCTYPE html>
<html>
<head>
	<title>Работа с межстрочным интервалом</title>
</head>
<body>
	<p>Обычный текст. Первая строка.
	<br>Вторая строка.
	<br>Третья строка.</p>
	<p>Изменённый текст. Первая строка.
	<br>Вторая строка.
	<br>Третья строка.</p>
</body>
</html>

При процентной записи за 100% берется высота шрифта.

Следующее свойство:

Свойство text-decoration
Свойство	Значение	Описание	Пример
text-decoration	none underline overline line-through blink	Убрать все оформление Подчеркивание Линия над текстом Перечеркивание Мигание текста	text-decoration: line-through

При помощи определения { text-decoration: none } можно убирать подчеркивание у ссылок, которое устанавливается в браузерах по умолчанию.

<!DOCTYPE html>
<html>
<head>
	<title>Работа с свойством text-decoration.</title>
	<style>
		a { text-decoration: none }
	</style>
</head>
<body>
	<p>Поисковик <a href="http://google.com">Google</a>.</p>
</body>
</html>

В примере ссылка не имеет линии подчёркивания.

Следующее свойство:

Свойство text-transform — управляет отображением букв, можно устанавливать заглавные или прописные символы в зависимости от выбранного значения.

Свойство text-transform
Свойство	Значение	Описание	Пример
text-transform	none capitalize uppercase lowercase	Убрать все эффекты Начинать С Прописных ВСЕ ПРОПИСНЫЕ все строчные	text-transform: uppercase

Пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Работа с свойством text-transform.</title>
</head>
<body>
	<p>Текст none.</p>
	<p>Текст capitalize.</p>
	<p>Текст uppercase.</p>
	<p>Текст lowercase.</p>
</body>
</html>

Сравните текст который содержится в html-коде с текстом в окне браузера.

Следующее свойство:

Свойство text-align — служит для выравнивания текста по горизонтали окна браузера или контейнера, в котором расположен блок текста.

Свойство text-align
Свойство	Значение	Описание	Пример
text-align	left right center justify	Выравнивание текста	text-align: right

Подробное описание значений:

center — текст выравнивается по центру.
justify — выравнивание по ширине, фактически это выравнивание по правому и левому краю одновременно, между словами текста образовываются пустые места, которые браузер заполняет пробелами.
left — выравнивание по левопу краю. Это значение используется по умолчанию.
right — выравнивание по правому краю.

Пример использования этого свойства будет совмещён с примером работы следующего свойства.

Следующее свойство:

Свойство text-indent — служит для создания величины отступа первой строки блока текста (например, для абзаца ).

Это свойство допускает отрицательное значение, в таком случае создается выступ первой строки.

Свойство text-indent
Свойство	Значение	Описание	Пример
text-indent	значение %	Отступ первой строки	text-indent: 15px; text-indent: 10%

<!DOCTYPE html>
<html>
<head>
	<title>Работа со свойствами text-align и text-indent.</title>
	<style>
		p { text-indent: 15px }
	</style>
</head>
<body>
<p>Работа со свойствами text-align и text-indent.
Для лучшего понимания работы кода откройте страницу
в новом окне и уменьшите его размер.</p>
</body>
</html>

Свойство text-decoration | CSS справочник

CSS свойства

Определение и применение

CSS свойство text-decoration добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом).

Кроме того в CSS3 свойство text-decoration является короткой записью(сокращенным свойством) для следующих свойств, добавленных в CSS3:

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

Поддержка браузерами

CSS синтаксис:

text-decoration:"none | underline | overline | line-through | initial | inherit";

Допускается использование нескольких значений в одном объявлении:
text-decoration:"underline line-through overline";

В качестве короткой записи в CSS3:
text-decoration:"text-decoration-line text-decoration-style text-decoration-color  | initial | inherit";

JavaScript синтаксис:

object.style.textDecoration ="line-through"

Значения свойства

Значение	Описание
none	Определяет нормальный текст (без декорирования). Это значение по умолчанию
underline	Определяет линию под текстом.
overline	Определяет линию над текстом.
line-through	Определяет линию, проходящую через текст (перечеркивание).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-decoration.</title>
<style> 
.test {
text-decoration : underline; /* добавляем декорирование текста (линия снизу) */
color : red; /* устанавливаем цвет шрифта */
}
.test2 {
text-decoration : overline; /* добавляем декорирование текста (линия сверху) */
color : green; /* устанавливаем цвет шрифта */
}
.test3 {
text-decoration : line-through; /* добавляем декорирование текста (перечеркивание) */
color : blue; /* устанавливаем цвет шрифта */
}
</style>
</head>
	<body>
		<p class = "test">text-decoration: underline;</p>
		<p class = "test2">text-decoration: overline;</p>
		<p class = "test3">text-decoration: line-through;</p>
	</body>
</html>

Пример декорирования текста в CSS (свойство text-decoration).CSS свойства

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

«Форматирование текста в CSS» – третий урок учебника CSS. Здесь мы поговорим об основных способах форматирования текста средствами CSS.

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

Свойства, позволяющие форматировать текст в CSS.

Color – позволяет задает цвет элемента. В качестве параметра может выступать как шестнадцатиричное, так и буквенное значение цвета.

.red { color: red }

красный цвет

Direction – позволяет изменить направление текста.

ltr – слева направо

rtl – справа налево.

div.d1{
direction : ltr;
}
div.d2{
direction : rtl;
}

Я текст, написанный слева – направо

Я текст, написанный справа – налево

К сожалению не во всех браузерах этот параметр будет отображаться правильно.

Letter – spacing – задает интервал между символами.

normal – обычные интервалы

length – пользовательский интервал.

div.c
{
letter – spacing : 7px;
}

Я текст, интервал между моими символами равен 5 пикселей.

Text – align – задает выравнивание текста внутри элемента и может принимать значения:

Left – выравнивает текст слева
Right – выравнивает текст справа
Center – выравнивает текст по центру
Justify – выравнивает текст по ширине

div.e1{
text – align : left;
}
div.e2{
text – align : right;
}
div.e3{
text – align : center;
}
div.e4{
text – align : justify;
}

Left – выравнивает текст слева

Right – выравнивает текст справа

Center – выравнивает текст по центру

Justify – выравнивает текст по ширине

Text – decoration – оформление текста. Может принимать значения:

None – обычный текст
Underline – подчеркнутый снизу текст
Overline – подчеркнутый сверху текст
Line – through – зачеркнутый текст
Blink – мигающий текст

div.f1 {
text – decoration : none;
}
div.f2 {
text – decoration : underline;
}
div.f3 {
text – decoration : overline;
}
div.f4 {
text – decoration : line – through;
}
div.f5 {
text – decoration : blink;
}

None – определяет обычный текст

Underline – подчеркивает текст снизу

Overline – подчеркивает текст сверху

Line – through – зачеркивает текст

Blink – создает мигающий текст

Text – indent – задает отступ для первой строки текста.

div.g
{
text – indent : 25px;
}

Отступ первой строки этого текста равен 25 пикселей.

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

None – обычный текст
Capitalize – каждое слово начинается с заглавной буквы.
Uppercase – только большие буквы
Lowercase – маленькие буквы

div.h2 {
text – transform : none;
}
div.h3 {
text – transform : capitalize;
}
div.h4 {
text – transform : uppercase;
}
div.h5 {
text – transform : lowercase;
}

определяет обычный текст.

Каждое Слово Начинается С Заглавной Буквы.

ОПРЕДЕЛЯЕТ ТОЛЬКО ЗАГЛАВНЫЕ БУКВЫ.

только строчные символы.

White – space – задает способ отображения пробелов и может принимать следующие значения:

normal – допускается только один пробел.
pre – вся структура документа, с неограниченным количеством пробелов сохраняется.
nowrap – текст не будет переноситься , пока не встретит тег

Word – spacing – задает интервал между словами.

div.i {
word – spacing : 15px;
}

Я текст, расстояние между словами которого равно 15 пикселей.

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

Работа со шрифтами в CSS.

Font – family – определяет список допустимых имен шрифтов для элемента. Использован будет первый, распознанный браузером шрифт.

h2 {
font – family : «Comic Sans MS», «Times New Roman»;
}

текст шрифта comic sans , если его нет в системе, то шрифта times new roman

Font – size – задает размер шрифта и может принимать значения:

xx – small – наименьший
x – small – очень маленький
small – маленький
medium – средний
large – большой
x – large – очень большой
xx – large – наибольший
smaller – меньше, чем у порождающего элемента
larger – больше, чем у порождающего элемента
length – задает фиксированное значение шрифта
% – размер шрифта в % от размера шрифта порождающего элемента

div.j1 {
font – size : xx – small;
}
div.j2 {
font – size : medium;
}
div.j3 {
font – size : xx – large;
}
div.j4 {
font – size : 130%;
}

Наименьший текст

Средний текст

Наибольший текст

130% от размера порождающего элемента

Font – size – adjust – задает значение аспекта шрифта. Аспект шрифта – отношение между размерами маленькой буквыx и размером шрифта. Чем выше это значение, тем лучше шрифт будет читаться при уменьшении размера.

Font – stretch – позволяет задать интервал между символами внутри шрифта. Принимает значения:

normal – Задает масштаб сжатия или расширения как обычный
wider – Задает масштаб расширения как следующее расширенное значение
narrower – Задает масштаб сжатия как следующее сжатое значение
ultra – condenced – максимальный масштаб сжатия
extra – condenced – сильный масштаб сжатия
condenced – сжатие
semi – condenced – слабое сжатие
semi – expanded – слабое расширение
expanded – расширение
extra – expanded – сильный масштаб расширения
ultra – expanded – максимальный масштаб расширения

div.k1 {
font – stretch : wider;
}
div.k2 {
font – stretch : narrower;
}
div.k3 {
font – stretch : ultra – condensed;
}
div.k4 {
font – stretch : ultra – expanded;
}

следующее расширенное значение

следующее сжатое значение

максимальный масштаб сжатия

максимальный масштаб расширения

Font – style – задает стиль шрифта.

normal – нормальный шрифт.

italic – курсив.

oblique – наклонный шрифт.

div.l1{
font – style : normal;
}
div.l2{
font – style : italic;
}
div.l3{
font – style : oblique;
}

выводит обычный шрифт

выводит курсивный шрифт

наклонный шрифт

Font – variant – используется для создания шрифта – капители (все маленькие символы преобразуются в большие).

normal – обычный шрифт

small – caps – шрифт – капиель.

div.m1 {
font – variant : normal;
}
div.m2 {
font – variant : small – caps;
}

normal – обычный шрифт

small – caps – Выводит шрифт – капиель

Font – weight – позволяет задать толщину символов:

normal – обычные символы
bold – жирные символы
bolder – более жирные символы
lighter – более тонкие символы

div.n1 {
font – weight : normal;
}
div.n2 {
font – weight : bolder;
}
div.n3 {
font – weight : lighter;
}
div.n4{
font – weight : 800;
}

normal – Определяет обычные символы

bolder – Определяет более жирные символы

lighter – Определяет более тонкие символы

Толщина задана численно

Параметры размеров элементов CSS

Параметры, приведенные в таблице ниже позволяют управлять всеми возможными размерами элементов.

Параметр	Описание	Значения
height	Задает высоту элемента	auto
		length
		%
line – height	Задает интервал между строками	normal
		number
		length
		%
max – height	Задает максимальную высоту элемента	none
		length
		%
max – width	Задает максимальную ширину элемента	none
		length
		%
min – height	Задает минимальную высоту элемента	length
min – height	Задает минимальную высоту элемента	%
min – width	Задает минимальную ширину элемента	length
min – width	Задает минимальную ширину элемента	%
width	Задает ширину элемента	auto
		%
		length

Сегодня мы разобрались с форматированием текста в CSS. Данный урок получился достаточно объемным, но он действительно важен для понимания основ работы с CSS. Теперь вы можете самостоятельно настроить отображение текстов средствами CSS, которые сильно опережают функционал HTML.

Правильно подобранный фон — неотъемлемый атрибут для любого качественного сайта и в следующем уроке мы поговорим о возможностях работы с фоном в CSS.

CSS cвойства текста — справочник по тегам HTML и свойствам CSS

Свойство text-indent определяет величину отступа первой строки абзаца.

Значения:

num — число, на которое нужно сделать отступ.

Пример:

.p { text-indent : 20px; }

Свойство text-align определяет стиль шрифта.

Значения:

left — по левому краю.

right — по правому краю.

center — по центру.

justify — по всей ширине.

Пример:

.p { text-align : justify; }

Свойство text-decoration определяет оформление текста.

Значения:

none — без оформления.

underline — подчеркиванутый текст.

overline — черта сверху.

line-through — перечеркивание.

blink — мигающий текст.

Пример:

.p { text-decoration : overline; }

Свойство text-shadow служит создания тени для букв.

Значения:

значения представляют собой величины отступов тени и ее цвет.

Пример:

.p { text-shadow : 2px 2px #666666; }

Свойство letter-spacing определяет значения межбуквенного интервала.

Значения:

normal — определяется браузером.

auto — интервал изменяется так, чтобы текст уместился в одну строку.

num — числовое значение.

Пример:

.p { letter-spacing : 5px; }

Свойство line-height определяет межстрочный интервал.

Значения:

normal — определяется браузером.

num — число с единицами измерения.

num — число.

Пример:

.p { line-height : 1.5; }

Свойство word-spacing служит для задания расстояния между словами.

Значения:

normal — определяется браузером.

num — число с единицами измерения.

Пример:

.p { word-spacing : 10px; }

Свойство text-transform определяет вид букв.

Значения:

none — без изменения.

capitalize — первая буква каждого слова прописная.

uppercase — все буквы прописные.

lowercase — все буквы строчные.

Пример:

.p { text-transform : capitalize; }

Свойство white-space определяет вид пробелов.

Значения:

normal — определяется браузером.

pre — сохраняется количество пробелов идущих друг за другом.

nowrap — запрет на автоматический разрыв строк.

Пример:

.p { white-space : nowrap; }

Свойство direction для задания направления текста.

Значения:

ltr — слева направо.

rtl — справа налево.

Пример:

Свойство color для задания цвета текста.

Значения:

value — цвет текста.

Пример:

Форматирование текста в CSS // Вебшкола онлайн

Этот текст отформатирован с помощью текстовых свойств CSS. Заголовок выровнен по центру, строчные буквы заголовка заменены на заглавные, изменен цвет букв.

Параграф получил отступ слева, выравнивание по ширине, увеличенное расстояние между буквами. Из ссылки на главную страницу удалено подчеркивание.

Цвет текста

Свойство color используется для определения цвета текста. Цвет может быть задан с помощью:

названия, например, «red»
кода RGB, например, «rgb(255,0,0)»
шестнадцатиричного кода, например, «#ff0000»

Цвет текста для всей страницы задается в селекторе body.

Совет: в соответствии со стандартами W3C если вы указали цвет текста, вы должны указать также цвет фона.

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

Свойсто text-align отвечает за выравнивание текста по горизонтали.

Текст можно выровнять по центру, по правому/левому краю или по ширине.

Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах), а выравнивание текста достигается изменением пробелов между словами:

Пример

h2 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Посмотреть

Оформление текста

Свойство text-decoration используется для настройки оформления текста.

Обычно свойство text-decoration используют для удаления подчеркивания ссылок:

Кроме того, это свойство может быть использовано для оформления простого текста:

Пример

h2 {text-decoration:overline;}
h3 {text-decoration:line-through;}
h4 {text-decoration:underline;}
h5 {text-decoration:blink;}

Посмотреть

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

Преобразование текста

Свойство text-transform используется для преобразования текста в строчные или заглавные буквы.

Это свойство можно использовать для того, чтобы преобразовать все буквы текста в заглавные/строчные буквы, или изменить первые буквы каждого слова на заглавные (капитализация):

Пример

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Посмотреть

Красная строка

В CSS есть свойство, которое может автоматически выводить красную строку в параграфах. Это свойство называется text-indent:

Примеры

Расстояние между символами

Пример демонстрирует изменение расстояния между символами.

Расстояние между строками

Пример демонстрирует, как вы можете задать расстояние между строками в параграфе.

Направление текста

Демонстрация изменения направления текста в элементе.

Все свойства текста — справка CSS

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство	Описание	Значения	CSS
color	Цвет текста	цвет	1
direction	Направление текста	ltr rtl	2
line-height	Расстояние между строками	normal число длина %	1
letter-spacing	Расстояние между символами	normal длина	1
text-align	Горизонтальное выравнивание текста	left right center justify	1
text-decoration	Оформление текста	none underline overline line-through blink	1
text-indent	Красная строка	длина %	1
text-shadow		none color length
text-transform	Трансформация символов текста	none capitalize uppercase lowercase	1
unicode-bidi		normal embed bidi-override	2
vertical-align	Вертикальное выравнивание текста	baseline sub super top text-top middle bottom text-bottom длина %	1
white-space	Переносы в тексте	normal pre nowrap	1
word-spacing	Расстояние между словами в тексте	normal length	1

Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

Текст в css – Задаем цвет текста в CSS. Способы представления цветов — учебник CSS

СSS Текст

Цвет текста

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

Оформление текста

Пример

Преобразование текста

Пример

Отступ текста

Межбуквенный интервал

Высота линии строк

Направление текста

Интервал слов

Тень текста

Еще примеры

Проверьте себя с помощью упражнений!

Все CSS свойства текста

CSS — Работа с текстом

cвойства текста и шрифтов в CSS с примерами.

Свойства шрифта

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

Свойство text-decoration | CSS справочник

Определение и применение

Поддержка браузерами

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

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

Свойства, позволяющие форматировать текст в CSS.

Работа со шрифтами в CSS.

Параметры размеров элементов CSS

CSS cвойства текста — справочник по тегам HTML и свойствам CSS

Форматирование текста в CSS // Вебшкола онлайн

Цвет текста

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

Пример

Оформление текста

Пример

Преобразование текста

Пример

Красная строка

Примеры

Все свойства текста — справка CSS

Добавить комментарий Отменить ответ

Рубрики