Html подчеркнутый текст css: text-decoration-line | htmlbook.ru

Перечёркнутый текст в HTML и CSS

Первыми тегами для зачёркнутого текста были <strike> и <s>.

<strike>Перечёркнутый текст</strike>
<s>Перечёркнутый текст</s>

C приходом HTML 4 их использование стало осуждается, а в HTML 5 их вовсе запретили. В место них ввели <del>, он помечает текст как удаленный, что семантически правильнее.

<del>Перечёркнутый текст</del>

По виду они не отличается:

Изменить цвет линии

Первый способ

С помощью CSS свойства text-decoration-color, который задаёт цвет линии (не поддерживается в Internet Explorer и Edge).

<del>Перечёркнутый текст</del>

del {
	text-decoration: line-through;
	text-decoration-color: red;
}

Также можно изменить стиль линии с помощью text-decoration-style.

Второй способ

Тегу <del> задается цвет линии, вложенному <span> цвет текста.

<del>
	<span>Текст зачёркнут красной линией</span>
</del>

del {
	color: red;
	text-decoration: line-through;
}
del span {
	color: blue;
}

Третий способ

Линия добавляется псевдо элементом :before, но у текста не должно быть переносов.

<del>Перечёркнутый текст</del>

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
}

При такой реализации, можно расположить линию за текстом.

del {
	position: relative;
	color: #000;
	text-decoration: none;
}
del:before {
	content: "";
	border-bottom: 2px solid red;
	position: absolute;
	top: 0;
	left: 0;    
	width: 100%;
	height: 50%;
	z-index: -1;
}

Подчеркивание текста при использовании CSS

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

div.usage { font-style: italic; margin-left... margin-right... ; }

а затем включил <div>Explanation</div> в файл HTML. Это работает, как и ожидалось.

Насколько я понимаю,при использовании CSS содержимое и макет разделяются. Как же тогда я подчеркну какой-то текст в своем объяснении? Насколько я понимаю, мне следует избегать следующего: <div>This is <u>very</u> important.</div> .

html

css

Поделиться

Источник

SabreWolfy    

17 января 2012 в 10:17

9 ответов

• CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

  Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь! http://i.imgur.com/2JjFYWT.jpg http://codepen.io/anon/pen/lIjDp (пожалуйста, не обращайте внимания на…

• CSS подчеркивание меньше ширины заголовка?

  Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom: 5px; border-bottom: 1px #d2202f solid; } Это создает тонкое красное подчеркивание под моими…

14

Вы правы насчет разделения контента и макета, но в этом случае я бы завернул его в тег. Однако тег <u/> устарел. То, что я бы использовал, — это что-то вроде этого:

<div>This is <em>very</em> important.</div>

и

em { text-decoration:underline; }

<em/> означает подчеркнутый текст. По умолчанию используется курсив, поэтому в зависимости от сброса CSS вам может потребоваться также сбросить шрифт-syle до нормального.

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

Поделиться

Nix    

17 января 2012 в 10:25

4

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

Таким образом, класс, который вы используете для своего div.usage , очень хорошо выбран, потому что он ничего не говорит о своем стиле, но о его семантике. А теперь, как насчет текста, который вы хотите подчеркнуть? Я бы сказал, что в семантическом смысле это текст, который вы хотите выделить, и HTML имеет хороший элемент для этого: <strong> . Затем в вашем HTML вы можете переопределить стиль браузера по умолчанию для <strong> элементов (полужирный) для нужного подчеркивания.

<div>This is <strong>very</strong> important.</div>

strong {
  font-weight: normal;
  text-decoration: underline;
}

Если вы хотите, чтобы этот стиль использовался только для выделенного текста внутри элемента div.usage , будьте более конкретны:

.usage strong {
  font-weight: normal;
  text-decoration: underline;
}

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

Поделиться

Waiting for Dev…    

17 января 2012 в 10:30

1

Свойство «text-decoration: underline» позволяет восстановить текст.

Поделиться

Unknown    

17 января 2012 в 10:21

1

Вы должны использовать один из этих тегов: <strong> или <em> и вписать их в css.

.usage strong { font-weight: bold; }

В вашем markup вы определяете некоторый контент, который вы хотите подчеркнуть ( <em> ) или сильно подчеркнуть ( <strong> ). См. http://www.w3.org/TR/ html4/struct/text.html .
Я бы не стал использовать подчеркивание для подчеркивания, так как это сбивает пользователей с толку, думая, что это гиперссылка.

Поделиться

nickvane    

17 января 2012 в 10:26

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

  У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и проверку орфографии. Это появляется только на телефонах android jelly bean. <input type=search…

• CSS: удалить подчеркивание из текста

  У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none для внутреннего текста, он все еще подчеркнут. Вот пример JS fiddle: http://jsfiddle.net/oj2wj1d6/1…

1

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

Я бы предложил использовать

<strong>this is important</strong>

Который по умолчанию будет выделен жирным шрифтом.

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

<p>text <span>hightlighed</span> text</p>

И положи это в свой CSS

  span.highlight {
    background-color: #FF9;
  }

Поделиться

methodofaction    

17 января 2012 в 10:32

0

привет для подчеркивания вы можете взять небольшой пример здесь

HTML

<div>
    <p>
        This is just a text to check <span>underline</span> with CSS
    </p>

</div>

CSS

div p { font-style: italic; }

div p span{ text-decoration: underline;}

Поделиться

Murtaza    

17 января 2012 в 10:23

0

В настоящее время люди говорят, что <u> markup не следует использовать, но мало кто может подкрепить это фактическими аргументами (в отличие от цитирования предполагаемых авторитетов и использования отрицательно звучащих прилагательных). Если вы действительно хотите подчеркнуть (что, как правило, не очень хорошая идея в документах HTML, как указано здесь), то <u> -самый простой и надежный способ. У вас все равно будет свобода позже решить, что вы хотите использовать, скажем, жирный шрифт вместо подчеркивания, и тогда вы можете сделать это просто в CSS:

u { text-decoration: none; font-weight: bold; }

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

Поделиться

Jukka K. Korpela    

17 января 2012 в 10:50

-1

вы можете попробовать это:

<div>This is <span>very</span> important.</div>

css:

.underline { text-decoration: underline; }

Поделиться

Adaz    

17 января 2012 в 10:19

-1

Вы можете инкапсулировать текст, который хотите подчеркнуть в span , и указать класс для этого span

.underline {
  text-decoration:underline;
}

<div> This is <span>very</span> important.</div>

Поделиться

rahool    

17 января 2012 в 10:22

Похожие вопросы:

удаление зазора в один пиксель при использовании CSS text-decoration: подчеркивание

У меня есть следующие CSS и markup на моем сайте, которые производят подчеркивание, когда я навожу курсор на ссылку Account . По умолчанию подчеркивание отображается на один пиксель от текста. Можно…

Ограничьте подчеркивание текста

Я хотел бы иметь подчеркивание только для текста и в то же время сохранить часть изображения ссылки: <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN…

CSS слишком длинное подчеркивание текста при применении интервала между буквами?

Всякий раз, когда letter-spacing применяется к чему-то с подчеркиванием или нижней границей, кажется, что подчеркивание выходит за пределы текста справа. Есть ли какой-нибудь способ сделать так,…

CSS эффект при наведении курсора (пунктирное подчеркивание + изменение цвета текста)

Я совершен CSS нуб Не могли бы вы уделить мне минутку и помочь создать пунктирное подчеркивание (с пробелом) с изменением цвета текста при наведении мыши? Я был бы очень признателен вам за помощь!…

CSS подчеркивание меньше ширины заголовка?

Можно ли с помощью CSS сделать подчеркивание заголовка менее широким, чем текст заголовка? У меня есть следующий стиль для заголовка h2: h2 { font-weight: 300; display: inline-block; padding-bottom:…

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

У меня есть поле ввода, которое отображает подчеркивание, когда я начинаю печатать текст. Это не подчеркивание автозамены, а черное подчеркивание, так как я пытался отключить автозаполнение и…

CSS: удалить подчеркивание из текста

У меня есть следующее HTML <div style=text-decoration: underline;> outer text <div style=text-decoration: none;>inner text</div> </div> Несмотря на то, что я использовал none…

CSS подчеркивание исчезает при использовании непрозрачности

В текущем стабильном Chrome при использовании следующего CSS, где установлена некоторая непрозрачность, подчеркивание текста исчезает. Когда непрозрачность установлена на 1 или удалена,…

matplotlib подчеркивание текста

Я пытаюсь добавить подчеркивание к одному из символов в plt.text. plt.text(.5,.5,r’\underline{O}H’) Это, кажется, не работает , я попытался использовать \overline{O} , который работает просто…

Центрированные, подчеркнутые заголовки, где подчеркивание отличается по цвету от текста

Какой самый простой способ стилизовать заголовки HTML таким образом, чтобы они были одновременно подчеркнуты и горизонтально центрированы? Я не хочу, чтобы подчеркивание распространялось на всю…

Акцентирование (выделение) текста в HTML — Разметка текста — codebra

Акцентировать текст в большом количестве информации – хорошая идея. Ведь чтец может не заметить нужной, важной или еще какой-то информации, которую вы хотите донести. Например, я тоже акцентирую текст: теги, стили, атрибуты, ключевые слова, ссылки и прочее я выделяю своим цветом, но делаю я это при помощи стилей. В HTML предусмотрены стандартные «выделители» текста: жирное начертание, косое начертание, подчеркнутое начертание, зачеркнутое начертание, больше размера, меньше размера. Пробежимся по всем элементам акцентирования.

Жирный текст

Всеми известный жирный шрифт, который можно увидеть везде. Для этого было разработано два тега <b> и <strong>. Тег <b>, более распространенный. Эти теги не одинаковы, хоть и результат схож. Различие заключается в том, что тег <b> определяет физическую жирность текста, а тег <strong> определяет важность этого текста и выделяет его жирным начертанием. Но, большое «но», в современных браузерах их права «уравняли», они стали равнозначными (эквивалентными). Такая же ситуация и у тегов <i> и <em>. Следовательно, выгоднее использовать тег, который короче. Далее пример:

Код HTML

<b>Жирный текст</b>

Курсивный текст

За акцентирование курсивным шрифтом, отвечают теги <i> и <em>. Как сказано выше, они различны по своей направленности, но в современных браузерах эквивалентны. Далее пример:

Код HTML

<i>Курсивный текст</i>

Подчеркнутый текст

Акцентировать текст подчеркнутым шрифтом можно при помощи тега <u>. Этот тег осуждают спецификацией HTML и рекомендуют использовать стили, с чем я и соглашусь. Я обязательно напишу эквиваленты тегов акцентирования в CSS. Далее пример:

Код HTML

<u>Подчеркнутый текст</u>

Зачеркнутый текст

Для того чтобы зачеркнуть текст, используют два эквивалентных тега: <s> и <strike>. Эти два тега осуждают и рекомендуют взамен им использовать стили. А тег <strike> категорически запрещен в HTML5. Далее пример:

Код HTML

<strike>Зачеркнутый текст</strike>

Крупнее и мельче обычного текста

Акцентировать текст, можно и увеличив размер это текста. Для этого есть тег <big>. Чтобы текст был мельче обычного, применяют тег <small>. Но все же выгодно использовать всегда стили CSS. Далее пример:

Код HTML

<big>Крупнее текст</big>

Замена жирного текста стилями CSS

Есть такое свойство в CSS – font-weight. Оно принимает много значений: font-weight:bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900.
Чтобы сделать текст самым жирным, нужно использовать значение font-weight: 900. О нем мы еще поговорим в следующих уроках.

Замена курсивного текста стилями CSS

В CSS есть аналог тегу <i> (Курсивный текст). Это свойство font-style. Далее пример:

Код HTML

<span class = "i">Курсивный текст</span>

Код CSS

.i {
font-style: italic;
}

Замена подчеркнутого текста стилями CSS

Тег <u> осуждается спецификацией HTML и рекомендуется использовать стили. Аналогом может служить свойство text-decoration. Я обычно его использую, чтобы убрать подчеркивание у ссылок (значение none), но в этом случае нам нужно добавить подчеркивание (значение underline). Далее пример:

Код HTML

<span class = "u">Подчеркнутый текст</span>

Код CSS

.u {
text-decoration: underline;
}

Подчеркнутый текст html

Подчеркнутый текст html. Сколько способов существует «подчеркнуть текст в html«, примеры подчеркнутого текста.

Подробно о

подчеркивании текста html

1. Подчеркнутый текст html с помощью тега.
2. Подчеркнутый текст через css.

1. Подчеркнутый текст html с помощью тега.

   Подчеркнуть текст через html можно с помощью тега.

   Для этого нам понадобится какой-то текст:

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

   После этого оборачиваем данный текст в тег для «подчеркивания ния текста html» :

   <u>Желательно, чтобы в нём, в тексте было пару абзацев, чтобы можно было вживую увидеть, как данный тег будет подчеркивать текст.
   В особенности при переходе на следующий абзац.</u>

   Результат подчеркивания текста html с помощью тега

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

   Вывод:

   Какой мы здесь видим результат и какой вывод можем сделать!?

   Что текст прекрасно подчеркивается с помощью тега!

2. Подчеркнутый текст через css.

   Для следующего варианта подчеркивания текста html — нам понадобится свойство css .

   Как вы знаете есть «3 способа css» — не будем использовать все, возьмем лишь один:

   Нам потребуется очередной текст:

   Опять же новый текст, для нового пункта подчеркивания текста.
   Две строки для испытания свойства , как оно будет работать.

   Оборачиваем данный текст в тег div.

   Прописываем ему attribute style.

   Со свойством и значением «».

   <div>
   Опять же новый текст, для нового пункта подчеркивания текста.
   Две строки для испытания свойства , как оно будет работать.
   </div>

   Смотрим результат:

   Опять же новый текст, для нового пункта подчеркивания текста.

   Две строки для испытания свойства , как оно будет работать.

Пользуйтесь на здоровье! Не забудьте сказать спасибо

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу… скоро все заработает…надеюсь…

HTML ссылки

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

Ссылки в HTML документами называются гипертекстовыми ссылками, или гиперссылками. Для их вставки используют элемент <a>. В качестве ссылки можно использовать как текст, так и изображение.

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

• не посещенные ссылки: подчеркнутый текст синего цвета
• посещенные ссылки: подчеркнутый текст фиолетового цвета
• активные ссылки: подчеркнутый текст красного цвета

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

Синтаксис¶

Для того, чтобы сказать браузеру, что данная часть текста является ссылкой, необходимо поместить его в тег <a> </a>․ Адрес документа, на который следует перейти, указывается при помощи атрибута href.

Выглядит это так :

<a href="url">текст ссылки</a>.

Пример¶

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <h3>Пример ссылки</h3>
       <a href="https://ru.w3docs.com/">W3Docs.com</a>
   </body>
</html>

Попробуйте сами!

Результат¶

В этом примере мы использовали тег <h3>, чтобы определить подзаголовки и тег <a>, чтобы создать ссылки. Между тегами <a> и </a> мы поместили W3Docs.com. Нажмите на него и будете перенаправлены на домашнюю страницу нашего веб-сайта.

Атрибут target¶

Для того, чтобы ссылка открывалась в новом окне, необходимо добавить атрибут target, значением которого является«_blank» .

<a href="https://ru.w3docs.com" target="_blank">W3Docs.com</a>

Не забудьте добавлять слеш (/) к ссылке.

Атрибут ID¶

Атрибут id используется для создания уникального идентификатора части документа для того, чтобы к нему можно было обращаться.

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

1. Создать уникальный идентификатор для этой части текста. Идентификатором может быть слово или фраза (если вы используете фразу, между словами не должно быть пробела, можно использовать нижнее подчеркивание).
   Пример. <a> Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку. </a>

2. Создать гиперссылку с указанием id, которому предшествует символ решетка #.
   Пример. <a href=»#пример»> Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример” </a>

Теперь давайте посмотрим, как это выглядит в коде HTML.

Пример

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
       <h3>Пример ссылки с атрибутом id</h3>
       <a>Здесь находится часть текста с уникальным идентификатором “пример”, куда пользователь будет перенаправлен после нажатия на ссылку </a>
        <a href="#пример">Когда мы кликнем на эту ссылку, мы будем перенаправлены на часть текста с уникальным идентификатором “пример”</a>
   </body>
</html>

Попробуйте сами!

Результат¶

Как добавить гиперссылку к изображению

Для того, чтобы сделать изображение кликабельным, необходимо добавить в тег <a> изображение. Делаете это при помощи тега <img>, с которым используются следующие атрибуты:

1. src — источник изображения
2. alt — альтернативный текст
3. width — ширина изображения
4. height — высота изображения

Пример¶

<!DOCTYPE html>
<html>
   <head>
       <title>Заголовок окна веб-страницы</title>
   </head>
   <body>
      <a href="https://ru.w3docs.com/">
           <img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="logo" />
      </a>
  </body>
</html>

Попробуйте сами!

Результат¶

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

Об HTML изображениях мы поговорим подробнее в следующей главе.

Свойство text-decoration — оформление текста

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

Синтаксис

селектор {
text-decoration: underline | line-through | overline | none;
}

Значения

Значение по умолчанию: none. Для ссылок
значение по умолчанию: underline.

Пример . Значение underline

<div>
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration: underline;
}

:

Пример . Значение line-through

<div>
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration: line-through;
}

:

Пример . Значение overline

<div>
Lorem ipsum dolor sit amet.
</div>
#elem {
text-decoration: overline;
}

:

Смотрите также

• свойство text-decoration-style,
  которое позволяет изменять тип линии
• свойство text-decoration-color,
  которое позволяет изменять цвет линии
• свойство text-decoration-line,
  которое позволяет изменять позицию линии

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

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать размер шрифта в CSS. В данной статье я бы хотел рассказать, как задать стиль и насыщенность (по-другому называют жирность) для шрифта в CSS. В данной статье мы изучили некоторые теги, с помощью которых можно задавать стиль и насыщенность для текста на html-странице. Но это неправильно, html должен задавать только структуру сайта, всё оформление должно быть сделано с помощью CSS. Курсив мы задавали с помощью тега <i>. В CSS за это отвечает свойство font-style со значением italic. Давайте создадим тестовую html-страницу:

<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

Для абзацев в файле стилей style.css зададим стиль шрифта:

p {
font-style:italic;
}

После обновления страницы вы увидите, что шрифт стал курсивным. Другие значения для свойства font-style:
normal — стандартное начертание текста
oblique — наклонное начертание текста (не то же самое, что курсивное). Разницу можно будет заметить не для всех шрифтов.

Я всегда использовал только значение italic, других никогда нигде не использовал.

Давайте теперь зададим насыщенность или жирность для нашего текста. Делается это с помощью свойства font-weight (weight с англ «вес», так сказать вес шрифта) со значением bold:

p {
font-weight:bold;
}

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

p {
font-weight:normal;
}

Следующее свойство, которое служит для оформления текста — это text-decoration. Оно служит для того, чтобы мы могли сделать текст, например, подчеркнутым (значение underline). В html для этого служит тег <u>. С помощью этого свойства мы можем также подчеркнуть текст сверху (overline) и перечеркнуть текст (line-through). Убрать декорацию текста можно с помощью значения none. Давайте создадим тестовую html-страницу и применим на ней inline-стиль для каждого абзаца:

<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
<p>Подчеркнутый абзац данного текста</p>
<p>Надчеркнутый абзац данного текста</p>
<p>Перечеркнутый абзац данного текста</p>
<p>Простой абзац данного текста</p>
</body>
</html>

Запустите данную страницу и убедитесь, что всё работает, как нужно.

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

В данной статье вы узнали как оформлять текст с помощью свойств font-style, font-weight, 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-Thickness — CSS: Cascading Style Sheets

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

 
толщина украшения текста: авто;
толщина-украшение-текста: от-шрифта;


толщина украшения текста: 0,1 мкм;
толщина украшения текста: 3 пикселя;


толщина текстового оформления: 10%;


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

Значения

авто

Браузер выбирает подходящую ширину для линии оформления текста.

начальный шрифт

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

<длина>

Определяет толщину линии оформления текста как <длина> , переопределяя предложенный файл шрифта или значение браузера по умолчанию.

<процент>

Задает толщину линии оформления текста как <процент> из 1em в текущем шрифте. Процент наследуется как относительное значение и, следовательно, масштабируется с изменением шрифта. Браузер должен использовать минимум 1 пиксель устройства. Для данного применения этого свойства толщина постоянна по всему блоку, к которому оно применяется, даже если есть дочерние элементы с другим размером шрифта.

Различная толщина

HTML

  
 Вот текст с красным подчеркиванием в 1 пиксель. 
 У этого есть красная линия подчеркивания 5 пикселей. 
 Здесь используется эквивалентное сокращение. 
  

CSS

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

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

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

Результаты

Примечание: Свойство раньше называлось text-decoration-width , но в 2019 году было обновлено до text-decoration-width .

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

Как установить разрыв между текстом и подчеркиванием с помощью CSS?

Введение: CSS используется, чтобы сделать веб-сайт визуально более привлекательным и читабельным. Его можно использовать для форматирования текста на веб-сайте различными способами, такими как цвет, размер шрифта, семейство шрифтов и т. Д.В этой статье мы увидим, как в случае подчеркнутого текста увеличить разрыв между текстом и подчеркиванием.
Подход: Уловка, которую мы собираемся использовать для достижения этой цели, используя свойство border-bottom-style и padding-bottom . Вместо использования встроенного оформления текста : подчеркивание; , мы собираемся создать собственное подчеркивание, используя свойство border-bottom-style, а затем мы можем добавить padding-bottom, чтобы отодвинуть его на столько, сколько захотим.
Синтаксис:

 .class_name {
    padding-bottom: value;
    стиль нижнего края: сплошной;
} 

Пример: Мы можем увеличить промежуток между текстом и подчеркиванием с помощью CSS.

html

Выход:

Внимание, читатель! Не прекращайте учиться сейчас.Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.

Обмани свой текст - создавайте свои первые веб-страницы с помощью HTML и CSS

https://vimeo.com/270703355

В дополнение к параметрам интервала, представленным в предыдущей главе, существуют другие свойства, связанные с текстом, для изменения внешнего вида текста.

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

font-weight

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

Привет! Во второй части этого курса мы не узнали, что обертывания содержимого в тегах HTML достаточно, чтобы текст стал полужирным?

Верно! Однако помните, что HTML - это семантическая марка p для вашего контента, а CSS контролирует его внешний вид . элементы по умолчанию выделены полужирным шрифтом, но их следует использовать только в том случае, если контент, который вы пишете, является выразительным.Иногда вам понадобится более толстый шрифт только для внешнего вида, а не для выразительного содержания. Вместо этого используйте свойство font-weight!

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

Панели навигации иногда кодируются как списки в формате HTML, иногда - нет.Быстрый поиск в Google покажет множество методов для создания навигации.

font-weight можно установить несколькими способами. Это может быть:

• слово «нормальный» или «жирный»

• числовое значение, например 400 (для нормального веса), 700 (для жирного шрифта) или число между

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

  a {
    шрифт: нормальный;
}  

При установке жирности шрифта полужирный шрифт будет отображаться с полужирностью по умолчанию:

  a {
    font-weight: жирный;
}  

Как упоминалось выше, вы также можете установить числовое значение для толщины шрифта (где 400 = нормальный, а 700 = жирный).Вы также можете установить font-weight меньше 400, что часто дает хороший результат, но зависит от используемого шрифта:

  a {
    font-weight: 200;
}  

font-style

Мы не можем говорить о полужирном тексте, не говоря о курсиве! Чтобы выделить текст курсивом, вы воспользуетесь свойством font-style. Его также можно комбинировать со свойством font-weight, если хотите:

  a {
    стиль шрифта: курсив;
    font-weight: 200;
}  

Свойство font-style имеет два других возможных значения: нормальное и наклонное.Наклонный текст отдаленно напоминает курсивный текст, но занимает больше места по горизонтали. Вы редко будете его использовать.

text-decoration

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

Вы должны использовать CSS, чтобы добиться этого, несмотря ни на что. Вам поможет свойство text-decoration.

Может принимать несколько значений:

• подчеркивание

• нет

• сквозное

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

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

Проведите линию через текст, используя свойство, называемое сквозной строкой (представьте себе!):

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

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

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

Еще один полезный визуальный трюк - преобразовать все буквы в верхний или нижний регистр. Это можно сделать без изменения вашего HTML. Обработайте это в CSS, используя свойство text-transform.

При использовании свойство text-transform чаще всего принимает одно из следующих значений:

• заглавные

• прописные

• строчные

Создание гармоничного сочетания букв в панелях навигации может быть приятный визуальный эффект:

  a {
    font-weight: 200;
    семейство шрифтов: Helvetica;
    текстовое оформление: нет;
    преобразование текста: прописные буквы;
    цвет: # 151814;
}  

  а {
    font-weight: 200;
    семейство шрифтов: Helvetica;
    текстовое оформление: нет;
    текст-преобразование: нижний регистр;
    цвет: # 151814;
}  

Стили на основе статуса

Иногда вы захотите применить стили, когда элемент имеет определенный статус, например, когда была посещена ссылка или когда пользователь наводит курсор мыши на элемент.

Введите псевдокласс CSS . Несмотря на научно-фантастическое название, их синтаксис прост! Просто добавьте двоеточие и имя псевдокласса к выбранному элементу.

В этой главе мы рассмотрим только несколько псевдоклассов, которые обычно применяются к ссылкам:

Вы можете найти полный список псевдоклассов здесь: https://developer.mozilla.org/en-US/ docs / Web / CSS / Псевдоклассы

: посещено

Веб-ссылки по умолчанию синие, а при посещении - фиолетовый.Вы, наверное, видели эти цвета раньше:

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

Давайте применим новый цвет посещенной ссылки к приведенному выше примеру навигации, где пользователь уже щелкнул ссылку «контакт»:

  a: visit {
    цвет: # 858C7B;
}  

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

: hover

Когда пользователь наводит курсор на такие элементы, как кнопки или ссылки, может быть полезно визуальное изменение элемента. Используйте псевдокласс «hover», чтобы применить это изменение к любому элементу!

В следующем примере панели навигации, когда пользователь наводит курсор на ссылку, цвет ее фона изменяется, а текст будет отображаться в верхнем регистре (снимок экрана сделан, когда я наведен на кнопку «Домой»):

  a : hover {
    цвет: # 151814;
    цвет фона: # DFFFD6;
    преобразование текста: прописные буквы;
    шрифт: нормальный;
}  

: active

При щелчке по элементу приятно показать небольшой визуальный эффект, чтобы усилить ощущение интерактивности.Легкий визуальный эффект может быть приятным при нажатии на элемент. В этом случае элемент, по которому был выполнен щелчок, является «активным» только тогда, когда на него нажимается кнопка мыши.

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

  a: active {
    цвет фона: # F3FFE1;
}  

Правило CSS: , если вы их используете, вы должны указывать псевдоклассы в определенном порядке.Этот порядок: посещено,: наведение, а затем: активен.

Практика!

Exercise 1

Сначала поэкспериментируйте с этим примером в CodePen!

Упражнение 2

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

1. В коде CSS добавьте свойство text-transform к элементам li , чтобы сделать весь текст заглавным или строчным.

2. Добавьте font-weight по вашему выбору к элементам li . Он должен отличаться от обычного веса шрифта, то есть 300 или нормального .

Пойдите дальше с формами и таблицами

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

Подчеркнутый текст CSS

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

Хотя снаружи есть новый мир, и старые вещи улучшаются, по крайней мере, в несколько этапов. Элементы ссылки больше не нужно подчеркивать, а строка под текстом сегодня - это не просто идентификация ссылки. Этот краткий курс в основном посвящен опции подчеркивания text-decoration CSS и «связанным» параметрам.

Перво-наперво - если вам нужно быстрое, простое, регулярное подчеркивание, всегда есть HTML-элемент для него .Он собирается сделать строку в цвет текста на позиции по умолчанию из текста. Фактически, элемент просто добавляет текст-украшение: подчеркивание текста с помощью встроенного в браузер CSS.

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

Есть два основных варианта добавления строки под текстом с помощью CSS.
Первое - это свойство text-decoration , которое определяет украшение, добавленное к тексту.Возможные значения для этого свойства: подчеркивания, над чертой и через строку. Свойство text-decoration должно быть сокращенным свойством для text-decoration-line, text-decoration-color и text-decoration-style, но это пока плохо поддерживается. На данный момент у нас есть текстовое оформление, и с его помощью мы можем добавить строку под, поверх или сквозь текст, с text-decoration-color мы можем раскрасить эту строку и с text-decoration-style , мы можем сделать это двойной, пунктирный, штриховой или волнистый.

Второе решение - своего рода взлом, подразумевающее использование border-bottom . Свойство display в этом случае должно быть inline . С помощью этого решения мы можем управлять положением линии с помощью свойства padding-bottom , толщины линии с border-bottom-width , стиля с border-bottom-style и цвета с border-bottom- цвет . Border-bottom-style имеет те же параметры, что и text-decoration-style, и некоторые параметры 3D-эффекта.Этот вариант предлагает больше параметров и переменных, но его сложнее использовать.

Сделать точечно-волнистое подчеркивание еще невозможно. Жду его 🙁

Текст

Текст

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

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

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

Значения имеют следующие значения:

<длина>

Отступ имеет фиксированную длину.

<процент>

Отступ - это процент содержания
ширина блока.

Значение 'text-indent' может быть отрицательным, но
могут быть ограничения, зависящие от реализации.
Если значение 'text-indent' отрицательное или
превышает ширину блока, что первое поле , описанное выше,
может переполнить блок.
Значение «переполнения» повлияет на
виден ли такой текст, который выходит за пределы блока.

Примеры:

В следующем примере появляется текстовый отступ «3em».

 
п {текст-отступ: 3em}
  

Примечание. Поскольку свойство text-indent наследуется, если оно указано в
блочный элемент, это повлияет на дочерние встроенные блочные элементы.
По этой причине часто имеет смысл указать ' text-indent: 0 '.
на элементах, которые указаны ' display: inline-block '.

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

слева, справа, по центру, по ширине

Левый, правый, центральный и выравнивающий текст соответственно, как описано в разделе о встроенном форматировании.

Блок текста - это стопка строк
коробки. В случае "left", "right" и "center" это свойство определяет
как блоки встроенного уровня в каждом строчном блоке выравниваются по отношению к строке
левая и правая стороны коробки; выравнивание не относительно области просмотра. В случае «оправдать»,
это свойство указывает, что блоки инлайн-уровня должны быть заподлицо
с обеих сторон линейного бокса, если возможно, путем расширения или сжатия
содержимое встроенных полей, иначе выровненное как для начального
ценить.(См. Также «межбуквенный интервал» и «межсловный интервал».)

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

Примечание. CSS может добавить способ выравнивания текста с помощью
'white-space: pre-wrap' в будущем.

Примеры:

В этом примере обратите внимание, что, поскольку 'выравнивание текста' наследуется, все
элементы уровня блока внутри элементов DIV с именем класса 'important' будут
располагайте их встроенное содержимое по центру.

 
div.important {выравнивание текста: центр}
  

Примечание.
Фактический используемый алгоритм согласования зависит от пользовательского агента и языка / сценария.
текста.

Соответствующие пользовательские агенты могут
интерпретировать значение «выравнивать по ширине» как «влево» или «вправо», в зависимости от
является ли направление письма элемента по умолчанию слева направо или
справа налево соответственно.

16.3.1 Подчеркивание, наложение, выделение и
мигает: «текст-украшение»
недвижимость

Это свойство описывает добавленные украшения.
к тексту элемента, используя цвет элемента.При указании или распространении на встроенный элемент он
влияет на все блоки, генерируемые этим элементом, и, кроме того,
распространяется на любые входящие в поток блоки уровня блока, которые разделяют встроенный (см.
раздел 9.2.1.1).
Но в CSS 2.2 не определено, будет ли украшение
распространяется в таблицы уровня блока.
Для блок-контейнеров, устанавливающих
встроенное форматирование
контекст, украшения распространяются на анонимный встроенный
элемент, который оборачивает все входящие в поток дочерние элементы блока
контейнер.Для всех остальных элементов он распространяется на любой входящий поток.
дети. Обратите внимание, что текстовые украшения не распространяются на плавающие
и абсолютно позиционированных потомков, ни содержимому атомарных
потомки встроенного уровня, такие как встроенные блоки и встроенные таблицы.

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

Примечание. Если элемент E имеет обе видимости:
hidden 'и' text-decoration: underline ', подчеркивание невидимо
(хотя любое украшение родительского элемента E видно ).
Однако в CSS 2.2 не указано, является ли подчеркивание видимым или
невидимый в детях E:

 
  подчеркнутый или нет?
 

 

Ожидается, что это будет указано на уровне 3 CSS.

Свойство text-decoration у дочерних элементов не может иметь никаких
влияние на убранство предка. При определении позиции
длины и толщины линий оформления текста, пользовательские агенты могут учитывать
размеры шрифта и доминирующие базовые линии потомков, но необходимо использовать
одинаковая базовая линия и толщина на каждой линии. Относительное позиционирование
Потомок перемещает все текстовые украшения, влияющие на него, вместе с
текст потомка; не влияет на расчет украшения
начальное положение на этой линии.

Значения имеют следующие значения:

нет

Без оформления текста.

подчеркивание

Каждая строка текста подчеркнута.

стр.

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

сквозной

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

мигает

Текст мигает (чередуется между видимым и невидимым).
Соответствующие пользовательские агенты
может просто не мигать текстом. Обратите внимание, что не мигает текст
это один из способов удовлетворить
КПП 3.3 WAI-UAAG.

Цвет (а), необходимый для оформления текста, должен быть получен из
значение свойства 'color' элемента, на котором 'text-decoration'
установлен. Цвет украшений должен оставаться прежним, даже если
дочерние элементы имеют разные «цветовые» значения.

Некоторые пользовательские агенты реализовали оформление текста с помощью
распространение украшения на дочерние элементы, а не на
сохранение постоянной толщины и положения линии, как описано
выше. Возможно, это было разрешено более свободной формулировкой в ​​CSS2.SVG1,
Пользовательские агенты только для CSS1 и только для CSS2 могут реализовывать старую модель.
и по-прежнему заявляют о соответствии этой части CSS 2.2. (Это не
применяется к UA, разработанным после выпуска данной спецификации.)

Примеры:

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

 
a: посещено, a: ссылка {text-decoration: underline}
  

Пример (ы):

В следующей таблице стилей и фрагменте документа:

 
   цитата {украшение текста: подчеркивание; цвет синий; }
   em {display: block; }
   цитируй {цвет: фуксия; }
  

 
   <цитата>
    

     
      Помогите помогите!
       Я под шляпой! 
       —GwieF 
     
    
   
  

... подчеркивание элемента цитаты переносится на
анонимный встроенный элемент, который окружает элемент span, вызывая
текст "Помогите, помогите!" быть синим, с синим подчеркиванием от
анонимная строка под ним, цвет взят из
элемент цитаты. текст
в блоке em также подчеркнуты,
как в блоке в потоке, на который распространяется подчеркивание. Последняя строка текста - фуксия, но подчеркивание
под ним по-прежнему синее подчеркивание анонимного встроенного
элемент.

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

Это свойство определяет поведение интервала между
текстовые символы.Значения имеют следующие значения:

нормальный

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

<длина>

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

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

Примеры:

В этом примере пробел между символами в
Элементы BLOCKQUOTE увеличиваются на 0,1em.

 
цитата {letter-spacing: 0.1em}
  

В следующем примере пользовательский агент не разрешен
изменить межсимвольный интервал:

 
blockquote {letter-spacing: 0cm} / * То же, что и '0' * /
  

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

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

нормальный

Нормальный межсловный интервал, определенный текущим шрифтом и / или
номер UA .

<длина>

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

Алгоритмы интервалов между словами зависят от пользовательского агента. Интервал между словами
также зависит от выравнивания (см. свойство text-align).Межсловный интервал влияет на каждый пробел (U + 0020) и неразрывный пробел
(U + 00A0), оставленный в тексте после того, как правила обработки пробелов
был применен. Влияние свойства на другие слова-разделители
символов не определено. Однако общая пунктуация, символы с
нулевая ширина продвижения (например, ноль с пробелом U + 200B) и
пробелы фиксированной ширины (например, U + 3000 и U + 2000 - U + 200A) не
затронутый.

Примеры:

В этом примере интервал между словами в элементах h2 равен
увеличено на 1em.

 
h2 {word-spacing: 1em}
  

Это свойство контролирует эффект капитализации
текст элемента.Значения имеют следующие значения:

прописными буквами

Переводит первый символ каждого слова в верхний регистр; другие персонажи не затронуты.

прописные

Переводит все символы каждого слова в верхний регистр.

строчная

Переводит все символы каждого слова в нижний регистр.

нет

Нет эффекта капитализации.

Фактическое преобразование в каждом случае - письменный язык
зависимый.См. BCP 47 ([BCP47]), чтобы узнать, как найти язык
элемент.

Только символы, принадлежащие «двухпалатным скриптам» [UNICODE], являются
затронутый.

Примеры:

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

 
h2 {преобразование текста: верхний регистр}
  

Это свойство определяет размер пустого пространства внутри элемента.
обработано.Значения имеют следующие значения:

нормальный

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

до

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

nowrap

Это значение уничтожает пустое пространство, как для «нормального», но подавляет
разрывы строк в тексте.

предварительная упаковка

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

предварительная линия

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

Новые строки в исходном тексте могут быть представлены символом возврата каретки
(U + 000D), перевод строки (U + 000A) или оба (U + 000D U + 000A) или какой-либо другой
механизм, определяющий начало и конец сегментов документа,
такие как токены SGML RECORD-START и RECORD-END.CSS
Модель обработки "белого пространства" предполагает, что все символы новой строки были
нормализовано до перевода строки.
UA, которые распознают другие представления новой строки, должны применять белый
правила обработки пространства, как если бы эта нормализация имела место. Если нет
правила новой строки указаны для языка документа, каждая каретка
возврат (U + 000D) и последовательность CRLF (U + 000D U + 000A) в тексте документа
рассматривается как символ перевода строки.
Это правило нормализации по умолчанию также применяется к сгенерированным
содержание.

UA должны распознавать перевод строки (U + 000A) как символы новой строки.UA
может дополнительно обрабатывать другие символы принудительного разрыва как символы новой строки
символов на UAX14.

Примеры:

Следующие примеры показывают, какое поведение пробелов ожидается.
из элементов PRE и P и атрибута nowrap в HTML.

 
pre {white-space: pre}
p {пробел: нормальный}
тд [nowrap] {пробел: nowrap}
  

Кроме того, действие элемента HTML PRE с нестандартным атрибутом «wrap» демонстрируется в следующем примере:

 
предварительный [перенос] {пробел: предварительный перенос}
  

16.6.1 Модель обработки белого пространства

Для каждого встроенного элемента (включая анонимные встроенные элементы)
выполняются следующие шаги, обрабатывая символы форматирования двунаправленного текста, как если бы
их там не было:

1. Каждая табуляция (U + 0009), возврат каретки (U + 000D) или пробел (U + 0020)
   символ, окружающий символ перевода строки (U + 000A), удаляется, если
   'white-space' установлен в 'normal', 'nowrap' или 'pre-line'.
2. Если для 'white-space' установлено значение 'pre' или 'pre-wrap', любая последовательность
   пробелы (U + 0020), не разделенные границей элемента, рассматриваются как
   последовательность неразрывных пробелов.Однако для 'pre-wrap' разрыв строки
   возможность существует в конце последовательности.
3. Если для 'white-space' установлено значение 'normal' или 'nowrap', перевод строки
   символы преобразуются для целей рендеринга в один из
   следующие символы: пробел, пробел нулевой ширины
   символ (U + 200B) или без символа (т. е. не отображается),
   в соответствии с алгоритмами, специфичными для UA, на основе сценария контента.
4. Если для 'white-space' установлено значение 'normal', 'nowrap' или 'pre-line',
   1. каждая табуляция (U + 0009) преобразуется в пробел (U + 0020)
   2. любой пробел (U + 0020) после другого пробела (U + 0020) - даже
      пробел перед строчкой, если в этом пробеле также есть
      'white-space' установлен в 'normal', 'nowrap' или 'pre-line' - удаляется.

Затем выкладываются инлайны блочного контейнера. Прокладываются строчки
вне, принимая биди
переупорядочивание и упаковка, как указано в
свойство "белое пространство".
При переносе возможности разрыва строки определяются на основе
в тексте до шагов по удалению белого пространства, описанных выше.

Поскольку каждая строка выложена,

1. Если пробел (U + 0020) в начале строки содержит «пробел»
   установлен на 'normal', 'nowrap' или 'pre-line', он удаляется.
2. Все вкладки (U + 0009) отображаются как горизонтальный сдвиг, что строки
   вверх от начального края следующего глифа до следующей позиции табуляции. Вкладка
   остановки происходят в точках, кратных 8 ширине
   пробел (U + 0020), отображаемый шрифтом блока из
   край начального содержимого.
3. Если для пробела (U + 0020) в конце строки установлено значение white-space
   'normal', 'nowrap' или 'pre-line', он также удаляется.
4. Если пробелы (U + 0020) или табуляции (U + 0009) в конце строки имеют
   'white-space' установлен на 'pre-wrap', UA могут визуально сворачивать их.

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

Примечание.
CSS 2.2 не полностью определяет, где возникает возможность разрыва строки.

16.6.2 Пример двунаправленности со сворачиванием пробелов

Учитывая следующий фрагмент разметки, с особым вниманием к пробелам (с различным фоном и границами для выделения и идентификации):

 
 
      A  B  C 

  

... где элемент представляет вложение слева направо и
элемент представляет вложение справа налево, а
предполагая, что свойство 'white-space' установлено в 'normal',
приведенная выше модель обработки приведет к следующему:

• Пространство перед B () схлопнется вместе с пробелом после A ().
• Пробел перед C () схлопнется вместе с пробелом после B ().

Это оставит два пробела, один после A слева направо.
уровень вложения, и один после B при встраивании справа налево
уровень.Затем он отображается в соответствии с двунаправленным Unicode.
алгоритм, с конечным результатом:

     А до н.э.

 

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

16.6.3 Управляющие и комбинирующие данные символов

Управляющие символы кроме U + 0009 (табуляция), U + 000A (перевод строки),
U + 0020 (пробел) и U + 202x (символы форматирования двунаправленного текста) обрабатываются как
символы для рендеринга так же, как и любого обычного символа.

Объединение символов следует рассматривать как часть символа.
с которыми они должны сочетаться. Например: первая буква
стилизует весь глиф, если у вас есть контент вроде
" o & # x308; "; это не просто
соответствовать базовому символу.

CSS: отрегулируйте зазор между текстом и подчеркиванием

В этой статье показано несколько различных способов увеличения или уменьшения расстояния между текстом и подчеркиванием при использовании text-decoration: подчеркивание в CSS.

Использование свойства text-underline-offset

Свойство text-underline-offset используется для установки расстояния смещения линии оформления подчеркнутого текста от исходного положения.Теперь он совместим практически со всеми основными и новейшими версиями браузеров.

Пример:

  

  
    
    
    
    
    <стиль>
      .содержание {
        маржа: 100 пикселей;
      }
      п {
        размер шрифта: 30 пикселей;
      }
      .p1 {
        оформление текста: подчеркивание;
        текст-подчеркивание-смещение: 10 пикселей;
      }
      .p2 {
        оформление текста: синяя пунктирная линия подчеркивания;
        текст-подчеркивание-смещение: 1px;
      }
      
      a {
        размер шрифта: 24 пикселя;
        оформление текста: красное волнистое подчеркивание;
        смещение подчеркивания текста: 15 пикселей;
      }
    
  
  
    

      
 Моя кошка и моя собака нравятся друг другу. 
      
 Моя кошка и моя собака нравятся друг другу. 
      
      
  Это образец ссылки.  
    
 
  

Выход:

Используем старый трюк

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

Пример:

  

  
    
    
    
    
    <стиль>
      div {
        маржа: 100 пикселей;
      }
      п {
        размер шрифта: 24 пикселя;
      }

      .underline {
        padding-bottom: 10 пикселей;
        нижняя граница: # 666 1px solid;
      }

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

      .underline-link {
        padding-bottom: 1px;
        нижняя граница: сплошной синий 1 пиксель;
      }

    
  
  
    

      

        НЛО пролетел прошлой ночью по небу и дал нам
         чудесные рождественские подарки .
      
  
         Это образец ссылки 
      
      

    

  
  

Выход:

Заключение

Мы рассмотрели несколько методов корректировки зазора между текстом и подчеркиванием в CSS.