Css оформление текста: CSS3-оформление текста

Оформление текста css – как оформить его красиво

От автора: приветствуем вас на страницах блога webformyself. За оформление текста css отвечает в первую очередь, так как именно с помощью этого языка формируется внешний вид всех элементов. Давайте рассмотрим основные свойства, которые влияют на внешний вид текстового содержимого.

Цвет

Цвет является одним из самых главных параметров, которые влияют на восприятие текста, на его читабельность. Откройте несколько разных сайтов и вы практически гарантированно скажете, что впечатления от чтения информации на них у вас остались разные. Где-то вы можете видеть полностью черный текст на белом фоне, где-то – светлый на сером и т.д.

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

Цвет в css задается с помощью свойства color. Значения можно записывать в виде ключевых слов (white, brown, orange), шестнадцатеричных hex-кодов (#000, #fff, #ccc) и в режиме rgb (red, green, blue) где определяется насыщенность каждого из этих цветов в числовом значении от 0 до 255.

Сам шрифт

Не менее важным фактором при визуальном восприятии является и сам шрифт. Ни для кого ни секрет, что для основного текста лучше всего подбирать один из стандартных шрифтов без засечек.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Задать шрифт можно с помощью свойства font-family, а значением выступает имя или семейство. Для надежности можно записать пару вариантов через запятую. Например, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут мы записали аж четыре варианта. Если браузер найдет шрифт Lato, то будет использовать именно его. Если же он не будет обнаружен, то следующим веб-обозреватель попытается использовать Georgia, а если и его не будет, то Arial. Этот шрифт есть на любых компьютерах с операционной системой Windows.

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

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

Также помогает оформить текст css-свойство font-size. Оно, как понятно из названия, задает размер текста. Обычно его записывают в пикселях, хотя часто также используются относительные единицы em.

У некоторых html элементов размер текста определен изначально. Например, если вы заключите текст в теги h2, то он автоматически выведется большими жирными буквами. На самом деле вы легко можете изменить эту установку по умолчанию:

h2{
font-weight: normal;
font-size: 50px;
}

Например, убрать жирность и увеличить базовый размер. Например, название сайта иногда выводится очень большим шрифтом

Тень текста

Любому текстовому фрагменту можно задать тень с помощью правила text-shadow. Давайте разберем его синтаксис на примере:

span{
text-shadow: 2px 2px 5px red;
}

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Все текстовые фрагменты, заключенные в теги span, получат такую тень. Выглядит она так:

Первое числовое значение задает смещение по горизонтали, второе – смещение по вертикали, третье – размытие тени, это позволяет снизить ее резкость и насыщенность. Последний параметр – цвет.

Если какое-то из значений вам не нужно, просто поставьте 0. Цвет записывать обязательно. Параметры тени зависят в первую очередь от размера шрифта – чем он больше, тем больше можно делать смещение.

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

Множественная тень

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

span{
font-size: 40px;
text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua;
}
div{
font-size: 40px;
text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua,
0 0 30px blue, 0 0 35px purple;
}
p{
font-size: 40px;
text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green;
}

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

Тени являются мощным css3-инструментом для оформления текста и уже сегодня активно используются, в основном в заголовках, которые нужно по-особенному выделить среди остального текста.

Другие свойства

На этом, конечно, арсенал css приемов для стилизации текста не заканчивается. В этой статье вы можете прочитать еще о некоторых параметрах, таких, как жирность, начертание, варианты написания букв и их трансформация (ссылка на статью “Как задать шрифт”). Там же описывается и letter-spacing – межбуквенный интервал, который можно добавлять к нужным текстовым фрагментам, если это будет необходимо.

Оформление при наведении

Также можно и подчас нужно оформить текст красиво в css при наведении на него курсора мышки. В чем может заключаться такая стилизация? Например, в появлении подчеркивания, изменения цвета текста, или фонового цвета, изменения размера шрифта и т.д.

Интересно, что в последнее время в сайтостроении популярно делать все изменения плавно. Для этого просто пропишите нужному элементу на странице:

#header{
transition: (задержка в секундах или миллисекундах) например 1s;
}

Теперь если к шапке добавить стили с псевдоклассом hover (то есть добавить изменение внешнего вида при наведении), то изменение некоторых значений будет происходить плавно, что само по себе немного красивее, по сравнению с резким переходом.

Итог

В css огромный арсенал средств для изменения внешнего вида текста. Самый мощный из них – это возможность использовать любые шрифты, задавая их через font-family, а также добавившаяся в css3 возможность добавлять тень. На этом я заканчиваю эту статью, посвященную приемам изменения текста, а вам желаю успешно использовать эти знания при разработке веб-сайтов. Дополнительную информацию по теме вы можете найти в премиум курсе по css3

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Свойства текста | htmlbook.ru

С помощью CSS можно определять стиль и вид текста. Аналогично тому, что используется
тег <font>, задающий свойства шрифта, но стили обладают
большими возможностями и позволяют сократить код HTML.

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

Изменение начертания шрифта и его размера происходит через свойства CSS, которые
описаны в табл. 1.

В примере 1 показано использование параметров при работе со шрифтами.

Пример 1. Задание свойств шрифта с помощью CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Шрифт</title>
  <style type="text/css"> 
   h2 { 
    font-family: Arial, Helvetica, Verdana, sans-serif; /* Гарнитура шрифта */ 
    font-size: 150%; /* Размер текста */ 
    font-weight: lighter; /* Светлое начертание */ 
   }
  </style>
 </head>
 <body>
   <h2>Заголовок</h2>
  <p>Обычный текст</p>
 </body> 
</html>

Ниже приведен результат данного примера (рис. 1).

Рис. 1. Вид текста после применения стилей

В табл. 2 приведены некоторые стилевые параметры для работы с текстом и результат
их применения.

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

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

Ниже, в табл. 4 приведены некоторые параметры текста и результат их применения.

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

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

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

Основные свойства CSS для работы с текстом

1. Свойство font-size

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

2. Свойство font-weight

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

3. Свойство font-style

Свойство font-style устанавливает тексту курсивное начертание. Оно принимает следующие значения: normal (обычное начертание шрифта), italic (курсивное начертание).

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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

4. Свойство font-family

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

5. Свойство color

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство background-color

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

6. Свойство text-decoration

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

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

Lorem ipsum dolor sit amet

7. Свойство text-transform

Свойство 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

8. Свойство white-space

При обработке текста браузер не отображает больше одного пробела между словами, а также игнорирует переносы строк, которые вы выполнили в 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

Lorem ipsum

dolor sit amet

9. Свойство text-align

Свойство 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.

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.

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.

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.

10. Свойство vertical-align

Свойство 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.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

11. Свойство line-height

Свойство 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.

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.

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.

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.

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.

Как оформить текст в CSS

Здравствуй, уважаемый читатель.

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

Перед изучением CSS пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок

Теория и практика

Чтобы красиво оформить текст на странице, придать ему привлекательный вид, необходимо знать некоторые CSS свойства которые помогут сделать это.

font-family

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

Рассмотрим CSS код:

1
2
3

p {
   font-family: comic sans ms, times new roman, verdana;
}

Лучше всего название шрифта писать в нижнем регистре. Тогда браузеры их лучше понимают. У вас наверное появился вопрос почему мы указали сразу несколько шрифтов. Это делается для того, чтобы если первый шрифт «comic sans ms» не установлен у пользователя на компьютере, тогда текст будет показан в «times new roman». Если и он не установлен, тогда он будет показан со шрифтом «verdana».

font-size

После того как мы выбрали шрифт, нам необходимо задать его размер. В CSS это делается с помощью свойства font-size. Размер в CSS может задаваться с помощью нескольких величин: пиксели(px), проценты(%), пункты(em) и ключевые слова(small, large, medium). Я рекомендую вам использовать пиксели, и т.к. бразуеры их хорошо масштабируют.

Рассмотрим CSS код:

1
2
3
4

p{
    font-family: comic sans ms, times new roman, verdana;
    font-size:16px;
}

font-style

Также в CSS текст можно делать курсивный и наклонный. Это делается с помощью свойства font-style. У данного свойства есть несколько значений:

font-style: normal | italic | oblique | inherit
normal — обычный текст.
italic — курсивный текст.
oblique — наклонный текст. Он отличается от курсивного тем, что курсивный это текст написанный «от руки», а наколонный — это просто наклон букв вправо.
inherit — наследуется значение родителя(например: Text. Мы задали для div один стиль текста и хотим чтобы этот стиль наследовался тегу , который находится внутри . Тогда необходимо применять данное значение).

Вот пример курсивного и наклонного текста(разница есть, но она не очень заметная).

font-weight

Еще одним из необходимых свойств при работе с текстом это — выделение текста жирным. За это отвечает свойство font-weight.

font-weight: bold | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Пример CSS кода:

1
2
3
4
5
6

p{
    font-family: comic sans ms, times new roman, verdana;
    font-size:16px;
    font-style:italic;
    font-weight:bold;
}

Ниже можете посмотреть пример и скачать его:

Посмотреть примерСкачать

Сегодня мы рассмотрели как задать оформление тексту. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

Стилизация текста — Изучение веб-разработки

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

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

Замечание: В случае, если вы работаете на компьютере, планшете или ином устройстве, на котором у вас нет возможности создавать свои собственные файлы,  вы можете попробовать выполнить примеры кода (по крайней мере, большинство из них) в специальных онлайн-программах, таких как JSBin или Thimble.

Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.

Основы стилизации текста и шрифта

В этой статье мы детально изучим стилизацию текста и шрифтов, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а также line и letter spacing.

Стилизация списков

Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS свойства о которых нужно знать, и
некоторые методы которые стоит принять во внимание. Эта статья все разъясняет.

Стилизация ссылок

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

Веб-шрифты

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

Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.

Вёрстка домашней страницы муниципальной школы

В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.

Учебник CSS. Стиль текста.

Глава 2

В этой главе пойдет речь о том, что можно сделать с текстом, применяя к элементам HTML содержащие в себе некий текст те или иные свойства CSS.

Ну поехали..

Если Вы помните, из курса HTML, для того что бы выровнять текст, например по центру экрана, мы применяли к тегу содержащему в себе текст атрибут align(выравнивание) и одно из его возможных значений center(по центру)

Запись имела такой вид:

<p align=»center»>текст по центру</p>

В CSS данную задачу берет на себя свойство text-align, которое выравнивает текстовое содержание относительно элемента родителя (например, блока div) или же окна браузера.

text-align (так же как и htmlловский атрибут align) имеет следующие значения:

• left — Выровнять текст по левому краю элемента (по умолчанию).
• right — Выровнять текст по правому краю.
• center — Выровнять текст по центру.
• justify — Выровнять текст по обоим краям.

Теперь для того чтобы выровнять текст того же параграфа по центру следует писать так:

<p>текст по центру </p>

— это в этом случае если мы, с помощью атрибута style, внедряем CSS непосредственно в HTML тег.

А вот в примере ниже используется тег <style> в заголовке документа:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Выравнивание текста</title>
<style type=»text/css»>
h2 { text-align: center }
p { text-align: justify }
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>

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

Возможные значения:

• blink — Текст будет мигать.
• line-through — Делает текст перечеркнутым.
• overline — Надчёркивание текста.
• underline — Подчеркивание текста.
• none — Текст без оформления.

Пишется так:

<a href=»index.html»>Ссылка без подчёркивания</a>

Пример:

Файл mystyle.css

h2 {text-align: center}
h4 {text-align: left; text-decoration: underline}
a {text-decoration: underline}
a:hover {text-decoration:none}
p {text-align: justify}

Файл index.html

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Оформление текста</title>
<link rel=»stylesheet» href=»mystyle.css» type=»text/css»>
</head>
<body>
<h4>Меню:</h4>
<a href=»index.html»>Всё о слонах.</a><br>
<a href=»elephant.html»>Купить слона.</a>
<hr>
<h2>Всё о слонах</h2>
<p> Слон — самое крупное … … …</p>
<p>Слоны являются … … …</p>
</body>
</html>

Обратите внимание на внешний файл CSS в нем мы «декорировали» ссылку элемент <a>, причем делали это два раза первый раз a {text-decoration: underline} сделали её подчёркнутой, хотя можно было этого и не делать, так как тег <a> подчёркнут по умолчанию, а второй раз использовали так называемый псевдокласс hover и запретили подчеркивание a:hover {text-decoration:none}

Данный псевдокласс указывает на то, что применять к нему стилевое описание стоит лишь в том случае если пользователь навел курсор на этот элемент. Так если в примере навести курсор на одну из ссылок в меню то подчеркивание исчезнет, что создаёт определенный динамический эффект.. меню становиться «живым».

Впрочем, мы немного забежали вперёд.. о псевдоклассах речь пойдёт в отдельной главе.

Свойство text-indent — задаёт отступ первой строки в текстовом блоке с левой стороны, проще говоря делает «красную строку».

Расстояние от левого края окна браузера или же элемента родителя (блока в который помещен блок с текстом) может быть заданно в процентах от ширины окна браузера или же единицах измерения принятых в CSS.

В примере ниже расстояние отступа от левого края задаётся в пикселях (px):

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Красная строка</title>
<style type=»text/css»>
h2 {text-align: center}
p {text-align: justify; text-indent: 20px}
</style>
</head>
<body>
<h2>Всё о слонах</h2>
<p>Слон — самое крупное млекопитающее на нашей планете! Самый большой слон из когда-либо живущих на Земле был зарегистрирован в Анголе в 1956 году. Этот самец весил около 12 тон, а в высоту достигал 4,2 метра, что на метр выше среднего Африканского слона.</p>
<p>Слоны являются королевским символом Азиатской культуры и известны своей отличной памятью и высоким интеллектом. Аристотель однажды сказал, что слон — «животное, которое превосходит всех других в остроумии и интеллекте».</p>
</body>
</html>

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

Значения:

• none — Текст отображается без каких-либо изменений.(по умолчанию)
• capitalize — Каждое слово в тексте отображается с заглавного символа.
• lowercase — Все символы преобразуются в нижний регистр.
• uppercase — Все символы преобразуются в верхний регистр.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Трансформация текста</title>
</head>
<body>
<p>союз советских социалистических республик</p>
<p>СССР ссср</p>
<p>ссср СССР</p>
</body>
</html>

Вертикальное выравнивание текста в строке устанавливает свойство vertical-align

Возможные значения свойства vertical-align:

• baseline — Выравнивает базовую линию элемента по базовой линии родителя.
• bottom — Выравнивает элемент по нижней части строки.
• middle — Выравнивает средину элемента по базовой линии родителя и прибавляет половину высоты родительского элемента.
• sub — Нижний индекс (размер шрифта не меняется).
• super — Верхний индекс (размер шрифта не меняется).
• text-bottom — Нижняя граница элемента выравнивается по нижнему краю строки.
• text-top — Верхняя граница элемента выравнивается по верхнему краю строки.
• top — Выравнивает элемент по верхней части строки.

Базовая линия — это линия, на которой располагаются «сидят» символы в текстовой строке, Например буква «А» сидит прямо на этой линии, а вот строчная буква «у» сидит на ней же, но свесив ноги..

Взгляните на рисунок с разметкой строки:

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

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Вертикальное выравнивание текста</title>
</head>
<body>
<font size=»+3″>А и Б </font>
<span>сидели на трубе </span>
<span>А упало </span>
<span>Б пропало.. </span>
<span>что осталось на трубе?</span>
<hr>
формула воды: H<span>2</span>O
<hr>
<span>н</span>
<span>а</span>
<span>и</span>
<span>с</span>
<span>к</span>
<span>о</span>
<span>с</span>
<span>о</span>
<span>к</span>
</body>
</html>

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

Свойство white-space имитирует работу тега <pre>, определяя показывать или нет пробелы между символов, если таковых больше чем один, а так же разрешает или запрещает перенос строки.

Может иметь следующие значения:

• normal — текст выводится как обычно (лишние пробелы убираются), переносы строк определяются автоматически. (по умолчанию)
• nowrap — запрещает автоматический перенос строки.
• pre — показывает текст в том виде в котором он был набран. пробелы и переносы строки не удаляются.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Пробелы и перенос строки</title>
</head>
<body>
<p>

Слон.

Дали туфельки слону.
Взял он туфельку одну
И сказал: — Нужны пошире,
И не две, а все четыре!

С. Я. Маршак.
</p>
<hr>
<p>
Это длинный предлинный текст, который вряд ли полностью поместится в одной строчке, по умолчанию в нужном месте, браузер перенес бы его на следующую строку, однако мы принудительно запретили это делать, с помощью значения nowrap свойства white-space. Так что теперь, по всей вероятности, в окне браузера появиться горизонтальная полоса прокрутки.. и зачем, спрашивается, мы это сделали?
</p>
</body>
</html>

При использовании nowrap текст в нужном месте можно переносить на следующую строку используя тег <br>

Свойство word-spacing задаёт расстояние между словами (группами символов не разделенными пробелом) в строке.

Значения:

• normal — Нормальное расстояние. (по умолчанию)
• px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Расстояние между словами</title>
</head>
<body>
<p align=»left»>Расстояние между словами равно десяти пикселям</p>
<p align=»left»>Расстояние между словами может иметь отрицательное значение</p>
</body>
</html>

А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:

• normal — Нормальное расстояние. (по умолчанию)
• px — Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Расстояние между символами</title>
</head>
<body>
<p>Расстояние между буковками равно пяти пикселям</p>
<p>А здесь буквы, из за отрицательного значения, будут наплывать друг на друга</p>
</body>
</html>

Интерлиньяж — это расстояние между строками текста.

Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:

• normal — Норма (по умолчанию).
• % — Проценты. за сто процентов берется высота шрифта
• 0.5 — Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 — двойному.
• px — Пиксели и любые другие единицы измерения, принятые в CSS.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Интерлиньяж</title>
</head>
<body>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div>
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
</body>
</html>

• При декорировании текста, свойство — text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.

• А Вам точно нужно использовать значение nowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..

• Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.

Глава 2 Ввод и оформление текста. HTML, XHTML и CSS на 100%

Читайте также

Ввод и оформление текстового контента

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

Ввод строк текста

Ввод строк текста
Для организации в сценариях диалога с пользователем необходимо уметь принимать вводимые с клавиатуры строки текста. В консольном и графическом режимах ввод информации осуществляется по-разному: при запуске сценария с помощью cscript.exe мы имеем доступ к

ГЛАВА 3. Оформление текста 

ГЛАВА 3. Оформление текста 
В предыдущей главе мы научились структурировать текст Web-страницы, разбивая его на логические «куски». Также мы узнали о комментариях HTML, которые позволяют создавать небольшие заметки прямо в коде Web-страницы. И создали две Web-страницы нашего

ГЛАВА 3. Оформление текста

ГЛАВА 3. Оформление текста
В предыдущей главе мы научились структурировать текст Web-страницы, разбивая его на логические «куски». Также мы узнали о комментариях HTML, которые позволяют создавать небольшие заметки прямо в коде Web-страницы. И создали две Web-страницы нашего

1.5. Оформление текста (границы, абзацы, размер шрифта, гарнитуры)

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

Глава 8 Быстрый ввод текста

Глава 8 Быстрый ввод текста
• «Слепой» метод набора• Клавиатурные тренажеры• Программа автоматического переключения раскладки клавиатуры Punto

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

Глава 2
Оформление текста
Прежде чем мы перейдем к оформлению конкретной печатной продукции (газет, журналов, книг), стоит поговорить о некоторых универсальных правилах оформления текста. Возможно, многие вещи, написанные в этой главе, вы уже знаете, однако все равно не

Глава 3 Ввод и редактирование текста

Глава 3
Ввод и редактирование текста
Ввод данных в документ Word обычно не вызывает никаких проблем даже у начинающих пользователей. Окно программы представляет собой чистый лист, на котором текст набирается посредством ввода с клавиатуры. К сожалению, далеко не всегда с

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

Оформление текста
Оглавление и указателиЕсли вы создаете в Word документ большого объема (такой, например, как эта книга, дипломная работа или большая журнальная статья), частенько возникает необходимость добавить в него всевозможные дополнительные перечни.Оглавление,

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

Оформление текста
После того как мы рассмотрели операции, общие для помещаемых в титр объектов, остановимся более подробно на оформлении объектов каждого из упомянутых типов (кроме кнопок меню, которые рассмотрены в гл. 11).Начнем с рассмотрения средств, предназначенных

Ввод и редактирование текста

Ввод и редактирование текста
Рассмотрим основные инструменты работы с текстом на примере ввода технических требований. Технические требования должны располагаться над штампом, и ширина текста не должна превышать ширины штампа.Привяжем вводимый текст к штампу.

Ввод текста

Ввод текста
Автотекст вставлен, продолжаем заполнение технических требований.1. Нажмите клавишу Enter. Курсор переместится в начало следующей строки.2. Введите текст первой строки. Обратите внимание, что при достижении правой границы абзаца курсор автоматически

1.5. Оформление текста (границы, абзацы, размер шрифта, гарнитуры)

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

6.4. Ввод текста и чисел

6.4. Ввод текста и чисел
Для ввода данных:1. Выберите ячейку, в которую необходимо ввести данные.2. Наберите данные и нажмите клавишу ENTER или кнопку

слева от строки формул. Для отмены ввода данных перед нажатием клавиши ENTER нажмите клавишу ESC или кнопку

Если введенный текст

13.3. Ввод и редактирование текста

13.3. Ввод и редактирование текста
Для небольшой тренировки создайте новый документ, нажав клавиши Ctrl+N. Кстати, взгляните на рис. 112. Изучите комбинации клавиш, изображенные на рисунке, — они позволяют сэкономить время при работе с

text-decoration — CSS: Каскадные таблицы стилей

Сокращенное свойство CSS text-decoration устанавливает внешний вид декоративных линий в тексте. Это сокращение для text-decoration-line , text-decoration-color , text-decoration-style и более нового свойства text-decoration-Thickness .

Текстовые украшения рисуются на дочерних текстовых элементах. Это означает, что если элемент задает украшение текста, то дочерний элемент не может удалить украшение.Например, в разметке

Этот текст содержит несколько выделенных слов .

, правило стиля p {text-decoration: underline; } приведет к подчеркиванию всего абзаца. Правило стиля em {украшение текста: нет; } не вызовет никаких изменений; весь абзац все равно будет подчеркнут. Однако правило em {text-decoration: overline; } приведет к появлению второго украшения на «некоторых подчеркнутых словах».

Это свойство является сокращением для следующих свойств CSS:

  текст-оформление: подчеркивание;
оформление текста: красный контур;
текстовое оформление: нет;


текст-украшение: наследовать;
текст-украшение: начальное;
текст-украшение: вернуться;
текст-украшение: не установлено;
  

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

Значения

Демонстрация значений текстового оформления

 .под {
  оформление текста: подчеркивание красным;
}

.над {
  текст-оформление: волнистый контур лайм;
}

.линия {
  текстовое оформление: сквозное;
}

.простой {
  текстовое оформление: нет;
}

.под более {
  оформление текста: пунктирное подчеркивание над чертой;
}

.толстый {
  оформление текста: сплошное подчеркивание фиолетовым цветом 4 пикселя;
}

.blink {
  текст-украшение: мигать;
}
  

  
 Под этим текстом есть линия. 
 Над этим текстом есть линия. 
 В этом тексте проходит линия.
 Эта  ссылка не будет подчеркнута ,
    поскольку ссылки вообще есть по умолчанию. Будьте осторожны при снятии
    оформление текста на якорях, поскольку пользователи часто зависят от
    подчеркивание для обозначения гиперссылок. 
 У этого текста есть строки над  и  под ним. 
 Этот текст имеет очень толстое фиолетовое подчеркивание в поддерживающих браузерах. 
 Этот текст может мигать для вас,
    в зависимости от используемого вами браузера.
  

Таблицы BCD загружаются только в браузере

text-decoration-style — CSS: Cascading Style Sheets

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

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

При одновременной установке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration .

 
стиль оформления текста: сплошной;
стиль оформления текста: двойной;
стиль оформления текста: пунктирная;
стиль оформления текста: пунктирная;
стиль оформления текста: волнистый;


стиль оформления текста: наследовать;
стиль оформления текста: начальный;
стиль оформления текста: вернуться;
стиль оформления текста: не задано;
  

Значения

твердый

Рисует одну линию.

двойной

Рисует двойную линию.

с точками

Рисует пунктирную линию.

штриховые

Рисует пунктирную линию.

волнистый

Рисует волнистую линию.

-моз-нет

Не рисует линии. Используйте вместо него text-decoration-line : none .

 твердый | двойной | пунктирная | пунктирная | волнистый 

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

 .пример {
       -moz-текст-украшение-строка: подчеркивание;
       -moz-text-decoration-style: волнистый;
       -moz-текст-украшение-цвет: красный;
    -webkit-text-decoration-line: подчеркивание;
    -webkit-text-decoration-style: волнистый;
    -webkit-текст-украшение-цвет: красный;
}
  

CSS

  .wavy {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}
  

HTML

  
 Под этим текстом есть волнистая красная линия.
  

Результаты

Таблицы BCD загружаются только в браузере

• При одновременной установке нескольких свойств оформления линий может быть удобнее использовать сокращенное свойство text-decoration вместо этого.

text-decoration-line — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-line задает тип украшения, которое используется в тексте в элементе, например подчеркивание или наложение.

При одновременной установке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration .

 
текст-украшение-строка: нет;
текст-украшение-строка: подчеркивание;
текст-украшение-строка: над чертой;
текст-украшение-строка: сквозная строка;
текст-украшение-строка: мигать;


текст-украшение-строка: подчеркивание над чертой;
text-decoration-line: нижняя линия подчеркивания сквозная линия;


текст-украшение-строка: наследовать;
текст-украшение-строка: начальная;
текст-украшение-строка: вернуться;
текст-украшение-строка: не задано;
  

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

Значения

нет

Не выводит текстовое оформление.

подчеркнуть

Каждая строка текста имеет декоративную линию под ней.

дополнительный

Над каждой строкой текста есть декоративная линия.

линейный

Каждая строка текста имеет декоративную линию, проходящую через ее середину.

мигает

Текст мигает (чередуется между видимым и невидимым). Соответствующие пользовательские агенты могут не мигать текстом. Это значение — , устаревшее в пользу анимации CSS.

 нет | [подчеркивание || надстрочный || сквозной || мигать] | орфографическая ошибка | grammar-error 

Базовый пример

  
 Вот текст с волнистым красным подчеркиванием! 
 Этот текст имеет строки как над, так и под ним.
  

  .wavy {
  текст-украшение-строка: подчеркивание;
  стиль оформления текста: волнистый;
  цвет оформления текста: красный;
}

.оба {
  текст-украшение-строка: подчеркивание над чертой;
}
  

Таблицы BCD загружаются только в браузере

• При одновременной установке нескольких свойств line-decoration может быть удобнее использовать сокращенное свойство text-decoration вместо этого.

text-decoration-color — CSS: Cascading Style Sheets

Свойство CSS text-decoration-color устанавливает цвет украшений, добавляемых к тексту с помощью text-decoration-line .

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

CSS не предоставляет прямого механизма для указания уникального цвета для каждого типа линии. Тем не менее, этот эффект может быть достигнут путем вложения элементов, применения разных типов линий к каждому элементу (со свойством text-decoration-line ) и указания цвета линии (с text-decoration-color ) для каждого элемента. элементная база.

 
цвет-украшение-текста: текущий цвет;
цвет оформления текста: красный;
цвет-украшения-текста: # 00ff00;
цвет-украшения-текста: rgba (255, 128, 128, 0,5);
цвет-украшения-текста: прозрачный;


текст-украшение-цвет: наследовать;
цвет-украшения-текста: начальный;
цвет-украшения-текста: вернуться;
цвет-украшения-текста: не задано;
  

Значения

<цвет>

Цвет оформления линии.

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

Цвет не должен использоваться для передачи смысла. Например, одного изменения текста и цвета оформления текста недостаточно, чтобы указать, что ссылка находится в фокусе.

 <цвет> 
, где 
  <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>  
 
, где 
   = rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?) 
  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?) 
  = hsl (   [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?) 
  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)  
 
, где 
  <альфа-значение> = <число> | <процент> 
 <оттенок> = <число> |   
 

Базовый пример

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

  п {
  текст-украшение-строка: подчеркивание;
  цвет оформления текста: голубой;
}

s {
  текст-украшение-строка: сквозная строка;
  цвет оформления текста: красный;
  стиль оформления текста: волнистый;
}
  

Таблицы BCD загружаются только в браузере

Свойство оформления текста CSS

Пример

Установить различное оформление текста для элементов

,

и

:

h2 {
оформление текста: над чертой;
}

h3 {
оформление текста: сквозное;
}

h4 {
оформление текста: подчеркивание;
}

h5 {
оформление текста: подчеркивание
над чертой;
}

Попробуй сам »

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Свойство text-decoration определяет украшение, добавленное к тексту,
и это сокращение
недвижимость по цене:

• текст-украшение-строка (обязательно)
• текст-украшение-цвет
• стиль оформления текста

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Синтаксис CSS

текст-украшение: текст-украшение-строка текст-украшение-цвет
стиль оформления текста | начальный | наследование;

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

Другие примеры

Пример

Добавить украшение текста:

h2 {
text-decoration: подчеркивание поверх линии красным пунктиром;
}

h3 {
text-decoration: подчеркивание поверх волнистой линии
синий;
}

Попробуй сам »

Связанные страницы

Учебное пособие по CSS: CSS Text

Ссылка на HTML DOM: свойство textDecoration

CSS свойство стиля оформления текста

Пример

Установить различные типы стилей оформления текста:

div.а
{
текст-украшение-строка: подчеркивание;
стиль оформления текста: сплошной;
}

div.b
{
текст-украшение-строка: подчеркивание;
стиль оформления текста: волнистый;
}

div.c
{
текст-украшение-строка: подчеркивание;
стиль оформления текста: двойной;
}

див.d
{
текст-украшение-строка: подчеркивание подчеркивания;
стиль оформления текста: волнистый;
}

Попробуй сам »

Определение и использование

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

Совет: Также обратите внимание на свойство text-decoration,
который является сокращенным свойством для text-decoration-line, text-decoration-style и
текст-украшение-цвет.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

стиль оформления текста: сплошной | двойной | пунктирный | пунктирный | волнистый | начальный | наследование;

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

Связанные страницы

Учебное пособие по CSS: CSS Text

Ссылка на HTML DOM: свойство textDecorationStyle

CSS свойство text-decoration-line

Пример

Установить разные типы линий оформления текста:

div.а
{
текст-украшение-строка: надстрочный;
}

div.b
{
text-decoration-line: подчеркивание;
}

div.c
{
текст-украшение-строка: сквозная строка;
}

див.d
{
text-decoration-line: нижнее подчеркивание;
}

Попробуй сам »

Определение и использование

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

Совет: Также обратите внимание на свойство text-decoration,
который является сокращенным свойством для text-decoration-line, text-decoration-style и
текст-украшение-цвет.

Примечание: Вы также можете комбинировать несколько значений, например подчеркивание и над чертой, чтобы отображать строки как под текстом, так и над ним.

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Числа, за которыми следует -moz-, указывают первую версию, которая работала с префиксом.

Синтаксис CSS

текст-украшение-строка: нет | подчеркивание | над чертой | сквозная строка | начальная | наследование;

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