Text decoration underline отступ: Тонкое управление свойством text-decoration

07.07.2020 Facebook Twitter LinkedIn Google+ Разное

Содержание

Тонкое управление свойством text-decoration

От автора: Скорее всего, вы уже знакомы с данным свойством. Например, большинство браузеров, по умолчанию, задают с помощью данного свойства подчеркивание у ссылок (text-decoration: underline;), которое мы можем отменить вот так: text-decoration: none;.

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

Для данного свойства можно задать несколько значений

Например:

a { text-decoration: underline overline; }

a {

  text-decoration: underline overline;

}

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

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

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

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

Вы можете управлять цветом данного свойства

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

a { text-decoration-color: #f06d06; }

a {

  text-decoration-color: #f06d06;

}

Посмотрите описание данной возможности в Альманахе.

Примечание: Браузерный «движок» Gecko отображает подчеркивание под нижним выносным элементом букв (подстрочным элементом литеры), а WebKit/Blink – над:

Слева показан пример в браузере Chrome, справа – в Firefox.

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

Но есть вещи, которые нельзя сделать с помощью границ, например…

Вы можете менять стиль данного свойства

Вы просто не сможете сделать также с помощью границ!

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

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

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

a { text-decoration-style: wavy; }

a {

  text-decoration-style: wavy;

}

Посмотрите описание данной возможности в Альманахе.

А можно сделать и еще лучше

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

Такая возможность будет доступна благодаря свойству text-decoration-skip, хотя она пока не реализована ни в одном из браузеров. А пока мы можем указать для подчеркивания более мягкий и менее контрастный цвет. Здесь можно применить rgba():

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

Примечание: Похоже, что в Safari/iOS пропуск нижних выносных элементов у букв задан по умолчанию.

Если вы хотите отменить данное поведение, воспользуйтесь следующей записью: -webkit-text-decoration-skip: none;.

Тестирование

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

Так что да! Даже такие простые вещи, которые мы воспринимаем, как должное, могут со временем меняться в CSS царстве.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

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

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

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

PSD to HTML

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

Смотреть

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

basicweb.ru
  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML

  • HTML учебник
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Мнемоники
  • Коды языков
  • HTML цвета
  • Тесты знаний

CSS

  • CSS учебник
  • Справочник свойств
  • CSS селекторы
  • CSS функции
  • CSS правила
  • Flexbox генератор
  • Grid генератор
  • LESS учебник

JavaScript

  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math β
  • Объект Number
  • Объект Object
  • Объект Promise

между строк, между словами, между буквами и меняем регистр букв средствами CSS

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

  • line-height: 35px ; — Устанавливает межстрочный интервал
  • word-spacing: 15px ; — Интервал между словами
  • letter-spacing: 4px ; — Интервал между буквами
  • text-transform: uppercase/ lowercase/ capitalize ; — Изменение регистра букв

Межстрочный интервал

Первое свойство, которое мы рассмотрим — это свойство задающие межстрочный интервал. Для этого используется свойство line-height: ;.

Благодаря этому свойству мы можем менять расстояние между двумя базовыми линиям шрифта показанными на рисунке. Базовая линия это линия, на которой стоят буквы. Соответственно, когда располагаются две строки, у каждой строки есть своя базовая линия и расстояние между ними задается как раз, именно, с помощью свойства line-height: ;. Данное расстояние браузер задает самостоятельно в зависимости от размера шрифта.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

 Меняем расстояние между строками с помощью свойства line-height: ;


Меняем расстояние между строками с помощью свойства line-height: ;


Меняем расстояние между строками с помощью свойства line-height: ;


Меняем расстояние между строками с помощью свойства line-height: ;

</body>
</html>

И, ниже зададим то самое наше свойство, которое и будет менять расстояние между строками.

CSS

p{
    line-height: 25px;
}

Если Вы задали данное свойство и обновили страницу то заметили, что расстояние между строками изменилось.

Также можно увеличивать или уменьшать расстояние между строками с помощью множителя. Если мы используем в качестве значения просто число без обозначений >line-height: 2 ;, то браузер будет воспринимать его как множитель от текущего размера шрифта. То есть, если указана цифра два, то это будет обозначать, что браузеру нужно взять текущий размер шрифта и умножить его на два, что в итоге даст

28px. Это и будет расстояние между базовыми линиями шрифта.

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

Интервал между словами

Следующее свойство, которое мы рассмотрим это свойство word-spacing: ;, позволяющее изменять расстояние между словами. В этом свойстве используются фиксированные значения, и, уже проценты здесь не подходят.

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

CSS

p{
    word-spacing: 15px;
}

Теперь если обновить страницу то между словами увеличится расстояние на 15px.

Имейте ввиду, что если задать свойство

text-align: justify; — выравнивание текста по ширине, то свойство word-spacing: ; браузером будет игнорироваться.

Интервал между буквами

Свойство letter-spacing: ; не так актуально и при больших объемах текста редко используется, так как браузер автоматически выбирает оптимальное расстояние между буквами. В основном, применяется это свойство при использовании больших шрифтов в одном двух словах.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

</body>
</html>

И задаем само свойство.

CSS

h2{
    letter-spacing: 3px;

    letter-spacing: -3px;
}

Изменение регистра букв

И, четвертое свойство — это text-transform: ;. Данное свойство изменяет регистр букв.

Бывают такие моменты, когда нужно написать какое-то слово полностью из заглавных букв. Для таких случаев и используется свойство text-transform: ;. Чаще всего используется данное свойство для заголовков.

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML страница</title>
     <link  href="css/fonts.css" type="text/css" rel="stylesheet">
</head>
<body>

</body>
</html>

Для формирования заглавных букв свойству text-transform: ; задается значение uppercase, что означает upper – верхний и case – регистр.

CSS

h2{
    text-transform:uppercase ;
}

Задав такое свойство все заголовки h2 будут отображены в верхнем регистре.

Точно так же, можно и написать слово из маленьких букв, для этого используется значение lowercase, где lower – обозначает нижний и case – регистр.

CSS

h2{
    text-transform: lowercase;
}

И, если теперь обновить страницу, то все буквы будут отображены в нижнем регистре.

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

CSS

h2{
    text-transform: capitalize;
}

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

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


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


Пример

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

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

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

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

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

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

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

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

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

Значение по умолчанию: цельный
Унаследовано: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.textDecorationStyle = «волнистый» Попытайся

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

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

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

Объект
стиль оформления текста 57,0 79,0 36,0
6,0 -моз-		 12,1 44,0

Синтаксис CSS

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

Стоимость недвижимости

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

Учебник

CSS: Текст CSS

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



CSS-оформление текста,.

→ HTML → CSS → CSS-оформление текста

CSS-оформление текста. ,. .

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

 
 ...
оформление текста: нет | подчеркивание | над чертой | сквозное | наследование;
...

:

  • нет —
  • подчеркивание —
  • надстрочный —
  • сквозной —
  • мигает — ()

.

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

стиль оформления текста:

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

:

  • цельный —
  • двойной —
  • с точками —
  • штриховые —
  • волнистый —

цвет оформления текста:

 
 стиль оформления текста: цвет;

цветных RGB, (.html)

, цвет-текст-украшение-стиль-текст (2016).

1. 

 
 

<стиль>
.primer1 {
текст-оформление: подчеркивание;
}
.primer2 {
текст-украшение: надстрочный;
}
.primer1_2 {
оформление текста: подчеркивание, подчеркивание;
}



.

:

2.

 
 

<стиль>
.primer3 {
оформление текста: сквозное ;;
}



.

:

.

3. 

 
 

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



.

:

.

-, нижняя граница:

 
 нижняя граница: 1px с красной датировкой;

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

 
 object.style.textDecoration = "VALUE"

:
• Шрифт CSS
• отображение css
• преобразование css
• html
• css transform-origin
• Граница CSS
• Фон CSS
• Переход CSS
• отступ текста css

← CSS

Как подчеркнуть текст в InDesign

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

Как подчеркнуть текст в InDesign
Чтобы создать основное подчеркивание, сначала выделите текст, который вы хотите изменить, щелкнув и перетащив текст, или трижды щелкнув, чтобы быстро выбрать весь раздел. Затем щелкните значок подчеркивания (он выглядит как буква T с линией под ним), чтобы добавить его к тексту.

Рисование пользовательских линий
Функция «Подчеркивание» в InDesign — самый простой способ добавления подчеркивания, но если вам нужен больший контроль над положением, толщиной и цветом линии, вы также можете создать линию с нуля.Для этого выберите инструмент «Линия» на панели «Инструменты» (он выглядит как диагональная линия). Затем нарисуйте линию под желаемым текстом, удерживая клавишу Shift, чтобы она оставалась идеально горизонтальной.

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

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

Чтобы избежать этих проблем, вы можете создать обычное подчеркивание, а затем настроить его, выбрав «Тип»> «Символ», чтобы открыть панель «Символ». Если щелкнуть левой кнопкой мыши стрелку раскрывающегося списка в верхнем правом углу панели и выбрать «Параметры подчеркивания», вы увидите новое диалоговое окно. Здесь вы можете настроить такие параметры, как Толщина (т.е. толщина подчеркивания), Смещение (расстояние между подчеркиванием и текстом), Цвет и другие.

Чтобы расширить подчеркивание за пределы текста, просто откройте панель «Абзац» («Тип»> «Абзац»), щелкните правой кнопкой мыши стрелку раскрывающегося списка на панели и выберите «Правила для абзацев». В диалоговом окне выберите «Правило ниже», а затем настройте различные параметры линии. Если в разделе «Ширина» выбрать «Столбец», линия будет охватывать весь столбец. Оттуда вы можете сократить длину строки с помощью настроек «Отступ слева» и «Отступ справа».

3 примера CSS-украшения текста с подчеркиванием, надчеркнутым чертом и ссылками

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

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

>> Пример ссылки без подчеркивания

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

Синтаксис свойства text-decoration

Ниже приводится общий синтаксис для использования свойства text-decoration:

text-decoration: value;

Где значение может быть любым из следующих:

  • нет: Обычный текст.
  • подчеркивание: строка под текстом.
  • над текстом: Строка над текстом.
  • сквозная строка: Линия поперек данного текста.

Пример подчеркивания CSS

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

Испытайте этот пример онлайн





1

2

3

4

5

6

7

8

9

10

11

12

13

14

14

18

19

20

21

22

23

24

25

26

27

28

29

30

34

35

36

37

38

39

40

41

42

43

44

45

>

CSS: Как сделать ссылки не подчеркнутыми.. — Статьи

Это простое руководство, в котором показано, как удалить подчеркивание и добавить цвет к ссылкам с помощью Dreamweaver MX и CSS.

В этом руководстве показано, как удалить подчеркивание из ссылок с помощью Dreamweaver MX.

  1. Открыть окно -> Стили CSS (сдвиг F11)
  2. Выбрать новый стиль (страница со значком плюса в нижней части панели)
  3. Далее в типе выберите «Использовать селектор CSS».
  4. Затем определить только в этом документе.
  5. Вернитесь наверх, выберите ссылку: и нажмите ОК
  6. Теперь откроется окно определения стиля и введите текст, если вы хотите указать шрифт и цвет. Внизу установите флажок «Нет» для украшения.
  7. Вы должны увидеть это в заголовке документа.

  8. Вернитесь к шагу 2 и на этот раз выберите: посещенный.Это означает, как будет выглядеть ссылка после посещения. Используйте любые свойства, которые вам нужны для посещенных ссылок. Я обычно использую то же самое, что и ссылка: таким образом они выглядят одинаково.
  9. Повторите шаг 2 еще раз с: hover. Вот как будет выглядеть ссылка при наведении на нее мыши. На нем выберите подчеркивание для украшения, чтобы ваши ссылки были подчеркнуты.
  10. Повторите шаг 2 еще раз. На этот раз с: active. Как вы, наверное, догадались, это форматирует то, как будет выглядеть текст при нажатии на ссылку.
  11. А теперь сделайте ссылку на своей странице. Просто убедитесь, что ссылки вашего стиля расположены в следующем порядке:



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


    Comments
    Leave Comment