Содержание

Подчеркивание в html: способы.

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

Подчеркивание в HTML

Итак, как же сделать подчеркивание? Подчеркивание текста в html оформляется при помощи тега <u>. Он используется во всех спецификациях html и xhtml, но только при условии переходного <DOCTYPE!>, так как должна быть указана версия разметки для браузера. В этом случае документ успешно проходит валидацию. Указывать элемент надо стандартно, то есть в самом верху страницы.

Тег <u> закрывающийся, он обязательно должен сопровождаться </u>. В разметку его нужно добавлять таким образом:

  1. <h2>Заголовок номер один</h2>
  2. <p>Наш <u>текст</u> в абзаце</p>

Слово «текст» при этом будет подчеркнутым.

Подчеркнуть можно и отдельную букву в слове:

  1. <h3>Заголовок номер два</h3>
  2. <p>Наш те<u>к</u>ст в абзаце</p>

Рекомендации

Традиционно в разметке html подчеркиванием отображаются ссылки при наведении мышкой или даже стационарно, а происходит так по умолчанию во всех браузерах. Поэтому ставить тег <u> на постоянной основе крайне не рекомендуется.


CSS: псевдоэлементы и псевдоклассы

Временами кажется, что для того, чтобы выжить в современном мире, необходимо знать, как создавать…

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

Чаще всего верстальщики применяют стили, добавляя границы или подчеркивание в html или же вынося их в отдельный css-файл.

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

Декорирование текста при помощи css — удобный и практичный способ. Самые простые способы такого выделения: использование text-decoration или border-bottom.

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

  • нужный-класс {
  • text-decoration: underline;
  • }

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

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


Узнаем как писать зачеркнутым текстом в Контакте: секреты

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

  • нужный-класс {
  • text-decoration: none;
  • }

Затем текст украшается при помощи следующего свойства:

  • .нужный-класс {
  • text-decoration: none;
  • border-bottom: 2px dashed black;
  • }

Так выходит декорирование с пунктирной линией. Чтобы сделать ее сплошной, вместо «dashed» применяется «solid». Тем, кому нравится украшать текст подчеркиванием точками, можно попробовать применить «dotted».

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

  • нужный-класс {
  • text-decoration: none;
  • border-bottom: 1px dotted blue;
  • color: blue;
  • }

Так получится синий текст с синим оформлением. Чтобы присоединить стиль к html, нужно в разметку добавить класс.

  • <h4>Третий заголовок</h4>
  • <p>Наш текст в абзаце</p>

Вот и все, это основы подчеркивания в html.

Форматирование символов в InDesign

  1. Руководство пользователя InDesign
  2. Основы работы с InDesign
    1. Введение в InDesign
      1. Новые возможности InDesign
      2. Системные требования
      3. Общие вопросы
      4. Использование библиотек Creative Cloud
    2. Рабочая среда
      1. Основные сведения о рабочей среде
      2. Панель инструментов
      3. Установка параметров
      4. Рабочая среда «Сенсорное управление»
      5. Комбинации клавиш по умолчанию
      6. Восстановление документа и отмена
  3. Создание документов и макетов
    1. Документы и страницы
      1. Создание документов
      2. Работа со страницами-шаблонами
      3. Работа с несколькими документами
      4. Задайте размер страницы, поля или области выпуска
      5. Работа с файлами и шаблонами
      6. Создание файлов книг
      7. Добавление основной нумерации страниц
      8. Нумерация страниц, глав и разделов
      9. Преобразование документов QuarkXPress и PageMaker
      10. Совместное использование содержимого
      11. Основные рабочие процессы с управляемыми файлами
      12. Сохранение документов
    2. Сетки
      1. Сетки
      2. Форматирование сеток
    3. Средства создания макетов
      1. Линейки
  4. Добавить содержимое
    1. Текст
      1. Добавление текста к фреймам
      2. Связывание текстовых блоков
      3. Возможности для арабского языка и иврита в InDesign
      4. Создание текста по контуру
      5. Маркеры и нумерация
      6. Глифы и специальные символы
      7. Компоновка текста
      8. Текстовые переменные
      9. Создание QR-кодов
      10. Редактирование текста
      11. Выравнивание текста
      12. Обтекание текста вокруг объектов
      13. Привязанные объекты
      14. Связанное содержимое
      15. Форматирование абзацев
      16. Форматирование символов
      17. Найти/заменить
      18. Проверка орфографии и языковые словари
    2. Типографика
      1. Использование шрифтов в InDesign
      2. Кернинг и трекинг
    3. Форматирование текста
      1. Форматирование текста
      2. Работа с пакетами стилей
      3. Табуляторы и отступы
    4. Рецензирование текста
      1. Отслеживание и просмотр изменений
      2. Добавление редакционных примечаний в InDesign
      3. Импорт комментариев файла PDF
    5. Добавление ссылок
      1. Создание оглавления
      2. Сноски
      3. Создание указателя
      4. Концевые сноски
      5. Подписи
    6. Стили
      1. Стили абзацев и символов
      2. Сопоставление, экспорт и организация стилей
      3. Стили объектов
      4. Буквицы и вложенные стили
      5. Работа со стилями
      6. Интерлиньяж
    7. Таблицы
      1. Форматирование таблиц
      2. Создание таблиц
      3. Стили таблиц и ячеек
      4. Выделение и редактирование таблиц
      5. Обводка и заливка таблиц
    8. Интерактивные функции
      1. Гиперссылки
      2. Динамические документы PDF
      3. Закладки
      4. Кнопки
      5. Формы
      6. Анимация
      7. Перекрестные ссылки
      8. Структурирование документов PDF
      9. Переходы страниц
      10. Аудио и видео
    9. Графические объекты
      1. Знакомство с контурами и фигурами
      2. Рисование с помощью инструмента «Карандаш»
      3. Рисование с помощью инструмента «Перо»
      4. Применение параметров линии (штриха) 
      5. Составные контуры и фигуры
      6. Редактирование контуров
      7. Обтравочные контуры
      8. Изменение параметров угла
      9. Выравнивание и распределение объектов
      10. Связанные и встроенные графические объекты
      11. Интеграция ресурсов AEM
    10. Цвет и прозрачность
      1. Применение цвета
      2. Использование цветов из импортированной графики
      3. Работа с цветовыми образцами
      4. Смешение красок
      5. Оттенки
      6. Знакомство с плашечными и триадными цветами
      7. Наложение цветов
      8. Градиенты
      9. Сведение прозрачного графического объекта
      10. Добавление эффектов прозрачности
  5. Общий доступ
    1. Работа с облачными документами InDesign
    2. Облачные документы в InDesign | Часто задаваемые вопросы
    3. Общий доступ и совместная работа        
    4. Отправка на редактирование
    5. Проверка опубликованного документа InDesign
    6. Управление отзывами 
  6. Публикация
    1. Размещение, экспорт и публикация
      1. Публикация в Интернете
      2. Копирование и вставка графических объектов
      3. Экспорт содержимого в формат EPUB
      4. Параметры Adobe PDF
      5. Экспорт содержимого в формат HTML
      6. Экспорт в формат Adobe PDF
      7. Экспорт в формат JPEG
      8. Экспорт в HTML
      9. Обзор DPS и AEM Mobile
      10. Поддерживаемые форматы файлов
    2. Печать
      1. Печать брошюр
      2. Метки и выпуск за обрез
      3. Печать документов
      4. Краски, цветоделенные формы и линиатура растра
      5. Наложение
      6. Создание PostScript и EPS-файлов
      7. Предпечатная проверка файлов перед отправкой
      8. Печать миниатюр или документов большого формата
      9. Подготовка файлов PDF для поставщиков услуг
      10. Подготовка к печати цветоделенных форм
  7. Расширение InDesign
    1. Автоматизация
      1. Объединение данных
      2. Плагины
      3. Расширение Capture в InDesign
      4. Разработка сценариев
  8. Устранение неполадок
    1. Исправленные ошибки
    2. Аварийное завершение работы при запуске
    3. Ошибка папки настроек: только для чтения
    4. Поиск и устранение проблем с файлами
    5. Невозможно экспортировать в PDF
    6. Восстановление документов InDesign

Применение смещения базовой линии

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

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

Примененные к тексту значения смещения базовой линии
  1. Выделите текст.

  2. В палитре «Символ» или в панели «Управление» введите числовое значение для параметра «Смещение базовой линии» . Положительные значения смещают базовую линию символа выше, а отрицательные — ниже базовой линии остальной части строки.

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

Другой шаг изменения значения для смещения базовой линии по умолчанию задается с помощью параметра «Смещение базовой линии» в разделе «Единицы измерения» диалогового окна «Установки».

Создание надстрочного и подстрочного индексов символов в шрифтах, отличных от OpenType

  1. Выделите текст.

  2. Выберите в меню палитры «Символ» или панели «Управление» пункт «Надстрочный индекс» или «Подстрочный индекс».

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

Значения исчисляются в процентах от текущего кегля и интерлиньяжа и основаны на параметрах, заданных в диалоговом окне «Установки текста». Когда выделяется текст, эти значения не отображаются в полях «Смещение базовой линии» и «Размер» палитры «Символ».

Размер и положение по умолчанию для надстрочных и подстрочных индексов можно изменить в разделе установок «Дополнительные параметры текста».

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

Толщина линии подчеркивания и перечеркивания по умолчанию зависит от кегля шрифта.

Джефф Уитчел (Jeff Witchel) представляет видеоруководство по использованию подчеркнутого шрифта: Настройка подчеркивания в InDesign.

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

  1. Выделите текст.

  2. Выберите параметр «Подчеркивание» или «Перечеркивание» в меню палитры «Символ» или панели «Управление».

Изменение параметров подчеркивания или перечеркивания

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

Вид текста до и после настройки подчеркивания
  1. Выберите пункт «Параметры подчеркивания» или «Параметры перечеркивания» в меню палитры «Символ» или панели «Управление».

  2. Выполните одно из следующих действий и нажмите кнопку «ОК»:

    • Чтобы задать для текущего текста подчеркивание или перечеркивание, выберите «Подчеркивание включено» или «Перечеркивание включено».

    • Выберите в параметре «Толщина» значение толщины подчеркивания или перечеркивания или введите нужное значение.

    • В меню «Текст» выберите один из параметров подчеркивания или перечеркивания.

    • Задайте для параметра «Смещение» позицию линии по вертикали. Смещение отсчитывается от базовой линии. При отрицательном значении линия подчеркивания смещается выше базовой линии, а линия перечеркивания — ниже.

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

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

    • Выберите параметр «Наложение обводки» или «Наложение пробелов», если подчеркивание или перечеркивание следует печатать поверх другого цвета и нужно избежать ошибок, которые могут произойти в результате неприводки.

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

Применение лигатур к парам символов

InDesign обеспечивает автоматическую вставку лигатур — типографских знаков, заменяющих определенные пары символов (например, «fi» и «fl»), если они доступны для данного шрифта. Символы, которые InDesign использует, если выбран параметр «Лигатура», отображаются и печатаются как лигатуры, однако при этом они полностью доступны для редактирования и не приводят к ложным ошибкам при проверке орфографии.

Отдельные символы (сверху) и комбинации лигатур (снизу)

Если при использовании шрифта OpenType в меню палитры «Символ», меню панели «Управление» или в контекстном меню выбран параметр «Лигатуры», то InDesign формирует все стандартные лигатуры, заданные разработчиком шрифта. Однако некоторые шрифты содержат большее число декоративных, дополнительных лигатур, которые создаются, если выбран параметр «Дополнительные лигатуры».

  1. Выделите текст.

  2. Выберите «Лигатуры» во всплывающем меню. Можно также выбрать пункт «Лигатуры» в меню палитры «Символ» или панели «Управление».

Изменение цвета, градиента или обводки текста

Можно применить цвета, градиенты и обводку к символам, а затем продолжить редактирование текста. Используйте палитру «Образцы» и палитру «Обводка» для применения цветов, градиентов и обводки к тексту либо измените параметры цвета символов при создании или редактировании стиля.

Образцы

A. Воздействие образцов на заливку и обводку B. Воздействие образцов на контейнер и текст C. Оттенок в процентах 

  1. Выполните одно из следующих действий:

    • Прежде чем изменить цвета текста внутри фрейма, при помощи инструмента «Текст»  выделите его.

    • Чтобы применить изменение цвета ко всему фрейму, при помощи инструмента «Выделение»  выделите фрейм. Если цвет применяется к тексту, а не к контейнеру, обязательно щелкните значок «Форматирование изменяет текст»  в палитре «Инструменты» или «Образцы».

  2. В палитре «Инструменты» или «Образцы» выберите, к чему следует применить цвет: к заливке или обводке. Если выбрано значение «Обводка», цвет будет применен только к контурам символов.

  3. Выполните одно из следующих действий:

    • В палитре «Образцы» щелкните образец цвета или градиента.

    • В палитре «Обводка» укажите толщину или другой параметр линии (см. раздел Параметры палитры «Обводка»).

Градиент к тексту можно также применить, перетащив курсор мыши по выделенному тексту, когда выбран инструмент «Образец градиента»  или «Градиент: Растушевка» .

Чтобы инвертировать текст, можно выбрать для заливки текста белый цвет (или «[Бумага]»), а для цвета заливки фрейма — темный. Того же эффекта можно добиться, создав позади текста линию абзаца, однако если она будет черной, цвет текста придется поменять на белый.

Добавление к тексту эффектов прозрачности

Используйте палитру «Эффекты» для добавления тексту эффектов прозрачности, например, теней.

Майк Ранкин (Mike Rankin) приводит примеры использования эффектов прозрачности: Красивые эффекты InDesign, Часть I.

  1. При помощи инструмента «Выделение»  выделите текстовый фрейм.

  2. Выберите меню «Объект» > «Эффекты» > [название эффекта].

  3. В меню «Настройки для…» выберите пункт «Текст».

    Если выбран параметр «Объект», то выбираемые эффекты применяются как к находящемуся в текстовом фрейме тексту, так и к обводке и заливке самого фрейма.

  4. Задайте атрибуты эффекта и нажмите кнопку «ОК».

    Если необходимо изменить режим наложения и параметры непрозрачности текста, то это можно сделать на палитре «Эффекты».

Назначение языка для текста

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

  1. Выполните одно из следующих действий:

    • Чтобы применить языковые настройки только к выделенному тексту, выделите нужный текст.

    • Чтобы изменить словарь по умолчанию для InDesign, измените язык в то время, когда не открыт ни один документ.

    • Чтобы изменить словарь по умолчанию для конкретного документа, выберите «Редактирование» > «Отменить выделение», затем выберите необходимый язык.

  2. В меню «Язык» палитры «Символ» выберите соответствующий словарь.

При проверке орфографии и расстановке переносов программа InDesign использует словари Proximity (и Winsoft для некоторых языков). Эти словари позволяют определять другой язык даже для одного символа текста. Каждый словарь содержит сотни тысяч слов со стандартной разбивкой по слогам. Изменение языка по умолчанию не затронет существующие текстовые фреймы или документы.

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

Влияние словарей на расстановку переносов

A. Слово «Glockenspiel» на английском B. Слово «Glockenspiel» на традиционном немецком C. Слово «Glockenspiel» на реформированном немецком 

Изменение регистра символов

Команды «Все прописные» или «Капители» изменяют отображение текста, но не сам текст. Команда «Изменить регистр», наоборот, изменяет регистр выделенного текста. Это различие играет важную роль при поиске или проверке орфографии текста. Предположим, что в документ вводится слово «паукообразные», затем к нему применяется команда «Все прописные». Когда осуществляется поиск слова «ПАУКООБРАЗНЫЕ» с помощью команды «Найти и заменить» (при выбранном параметре «С учетом регистра»), слово «паукообразные», к которому применена команда «Все прописные», найдено не будет. Чтобы улучшить результаты при поиске и проверке орфографии, используйте команду «Изменить регистр», а не «Все прописные».

Анна-Мари Консепсьон (Anne-Marie Concepcion) представляет статью о капителях: Обычные капители и капители OpenType.

Изменение символов текста на все прописные или на капители

InDesign поддерживает автоматическое изменение регистра символов для выделенного текста. Если текст отформатирован в виде капителей, то автоматически используются символы капители, если они предусмотрены в шрифте. Если же капители в шрифте отсутствуют, то InDesign производит их синтез, используя варианты обычных прописных символов уменьшенного размера. Размер синтезируемых капителей задается в диалоговом окне «Установки текста».

Вид до (сверху) и после (снизу) установки капители для устаревших обозначений периодов времени («BC» и «AD») и окружающего текста

Для шрифтов OpenType при выборе параметра «Все прописные» или «Капители» создается более элегантное начертание. При использовании шрифтов OpenType в меню палитры «Символ» или панели «Управление» можно также выбрать параметр «Все капителями». См. раздел Применение атрибутов шрифтов OpenType.

  1. Выделите текст.

  2. Выберите команду «Все прописные» или «Капители» в меню палитры «Символ» или панели «Управление». Если текст был изначально введен в символах капители, то выбор параметра «Капители» не приведет к его изменению.

Задание размера для капители

  1. Выберите «Редактирование» > «Установки» > «Дополнительные параметры текста» (Windows) или «InDesign» > «Установки» > «Дополнительные параметры текста» (Mac OS).

  2. В поле «Капители» введите процент от исходного размера шрифта для текста, форматируемого в капители. Затем нажмите кнопку «ОК».

Изменение прописных символов

  1. Выделите текст.

  2. Выберите в подменю «Текст» > «Изменить регистр» один из следующих параметров:

    • Чтобы сделать все символы строчными, выберите «Все строчные».

    • Чтобы сделать заглавной первую букву каждого слова, выберите «Прописные В Начале Каждого Слова».

    • Чтобы сделать все символы прописными, выберите «Все прописные».

    • Чтобы сделать заглавной первую букву каждого предложения, выберите «Прописная в начале предложения».

Эта команда предполагает наличие точки («.»), восклицательного («!») или вопросительного знака («?») в конце предложений. Ее выполнение может привести к непредвиденным изменениям регистра, если перечисленные символы используются для других целей — в аббревиатурах, названиях файлов, URL-адресах и т. п. Кроме того, со строчной буквы могут начинаться имена собственные, хотя они должны начинаться с заглавной буквы.

Тип масштабирования

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

Масштабирование шрифтов по горизонтали

A. Текст без масштабирования B. Текст без масштабирования сжатым шрифтом C. Текст сжатым шрифтом после масштабирования 

Настройка масштабирования по вертикали или по горизонтали

  1. Выделите текст для масштабирования.

  2. В палитре «Символ» или на панели «Управление» введите числовое значение для параметра «Масштаб по вертикали»  или «Масштаб по горизонтали» .

Масштабирование текста изменением размера текстового фрейма

  1. Выполните одно из следующих действий:

    • При помощи инструмента «Выделение» измените размер текстового фрейма, перетаскивая его угол, удерживая при этом нажатой клавишу «Ctrl» (Windows) или «Command» (Mac OS).

    • При помощи инструмента «Масштаб»  измените размер фрейма.

      См. раздел Масштабирование объектов.

Определение внешнего вида значений масштабируемого текста

При изменении масштаба фрейма изменяется и масштаб текста, находящегося внутри него. Например, если текстовый фрейм увеличивается вдвое, то размер текста увеличивается с 20 до 40 пунктов.

Дэвид Блатнер (David Blatner) представляет статью о масштабировании текстовых фреймов: Создание увеличительного стекла для текстового фрейма в InDesign.

Отображение масштабируемого текста на палитрах регулируется параметрами установок.

  • По умолчанию, когда выбран режим «Применить к содержимому», в полях «Кегль» на панели «Управление» и на палитре «Символ» указаны новые размеры текста (в нашем примере «40 пт»). Если выбрать режим «Настроить масштабирование в процентах», то в полях «Кегль» будет отражен как исходный размер, так и размер после масштабирования («20 пт(40)»).

  • Значения масштаба на палитре «Трансформирование» отражают изменение масштаба фрейма в процентах по горизонтали и по вертикали. По умолчанию, если выбран режим «Применить к содержимому», после масштабирования текста значения масштаба сбрасываются в «100%». Если выбран режим «Настроить масштабирование в процентах», эти значения отражают изменение масштаба фрейма, то есть при его увеличении вдвое будет показан масштаб фрейма «200%».

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

  1. Выберите «Редактирование» > «Установки» > «Основные» (Windows) или «InDesign» > «Установки» > «Основные» (Mac OS).

  2. Выберите параметр «Настроить масштабирование в процентах», а затем нажмите кнопку «ОК».

Обратите внимание на следующие моменты.

  • Параметр настройки «Настроить масштабирование в процентах» применяется только к тем фреймам, масштабирование которых выполняется после установки этого параметра, а все существующие фреймы остаются без изменений.

  • Значение параметра установок «Настроить масштабирование в процентах» сохраняется вместе с текстом. Кегль после масштабирования отображается в скобках даже после выключения параметра установок «Настроить масштабирование в процентах» и последующего изменения масштаба фрейма.

  • Чтобы отключить его отображение, выберите на палитре «Трансформирование» параметр «Переопределить масштаб как 100%». При этом вид фрейма, подвергшегося масштабированию, не изменится.

  • При редактировании текста или изменении масштаба связанных фреймов при выбранном параметре установок «Настроить масштабирование в процентах» масштаб текста изменяется даже при переносе в следующий фрейм. Но если выбран параметр «Применить к содержимому», то текст, который в результате редактирования переносится в следующий фрейм, теряет изменения масштаба.

Наклон текста

  1. Выделите текст.

  2. В палитре «Символ» введите числовое значение для параметра «Наклон» . Положительные значения наклоняют текст вправо, а отрицательные — влево.

Помните, что применение наклона отличается от курсива.

Связанные материалы

  • Применение атрибутов шрифтов OpenType
  • Шрифты OpenType
  • Применение цвета
  • Добавление линеек абзаца сверху и снизу
  • Применение градиентов к тексту
  • Эффекты прозрачности
  • Словари для расстановки переносов и проверки орфографии

Как подчеркивать в HTML

html

12 месяцев назад

от Naima Aftab

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

Как подчеркивать текст с помощью тега

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

HTML



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

Это заголовок


     

Это абзац.


   

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

Вывод


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

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

Как подчеркивать текст с помощью атрибута стиля

Другой способ подчеркивания текста в HTML — использование атрибута стиля, который определяет встроенный стиль для определенного элемента.

HTML



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

Это заголовок


     

Это абзац.


   

В приведенном выше коде вы заметит, что мы используем элемент для подчеркивания слова и устанавливаем для его атрибута стиля значение «text-decoration: underline». Таким образом, нужное нам слово будет подчеркнуто.

Вывод


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

Если вы хотите подчеркнуть текст с помощью CSS, см. фрагмент кода ниже.

HTML



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

Это заголовок


     

Это абзац.


   

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

Заключение

Для подчеркивания текста в html используйте тег или атрибут стиля. Просто оберните подчеркиваемый текст внутри тега или при использовании атрибута стиля установите для свойства text-decoration значение подчеркивания. Назначение тега состоит в том, чтобы в основном представлять текст, который является неявным, имеет другой стиль или написан с ошибками, тогда как атрибут стиля определяет встроенный стиль для конкретного элемента.

Об авторе

Naima Aftab

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

Посмотреть все сообщения

Как увеличить расстояние между текстом и подчеркиванием в CSS

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

В этом фрагменте мы покажем, как это сделать. Просто следуйте инструкциям ниже!

  • Поместите внутри
    .
 <дел>
  <диапазон>
  Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.
  
 
  • Укажите ширину div.
  • Укажите padding-bottom, border-bottom и line-height диапазона.
 раздел {
  ширина: 400 пикселей;
}

охватывать {
  отступ снизу: 10px;
  нижняя граница: 1px сплошная #1f67db;
  высота строки: 48px;
} 

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

Пример увеличения отступа между текстом и его подчеркиванием:

 

  <голова>
    Название документа
    <стиль>
      дел {
        ширина: 400 пикселей;
      }
      охватывать {
        отступ снизу: 10 пикселей;
        нижняя граница: 1px сплошная #1f67db;
        высота строки: 48px;
      }
    
  
  <тело>
    <дел>
      Lorem Ipsum — это просто фиктивный текст полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и смешал ее, чтобы сделать книгу образцов шрифта.
    

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

Результат

Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.

В этом примере мы увеличили расстояние между текстом и подчеркиванием с помощью нижней границы. Вы можете управлять пространством, используя свойства line-height и padding-bottom.

Давайте посмотрим на другой пример, где мы используем элемент внутри

. В этом примере мы также используем те же свойства border-bottom и padding-bottom для , что и в предыдущем примере, а также устанавливаем для свойства display значение «inline-block».

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

:
 

  <голова>
    Название документа.
    <стиль>
      охватывать {
        отображение: встроенный блок;
        нижняя граница: 1px сплошная #000;
        отступ снизу: 10 пикселей;
      }
    
  
  <тело>
    <р>
      <диапазон>
          Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.  Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов.
      

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

Однако у вас могут возникнуть трудности с использованием border-bottom, так как он может не обеспечивать полный контроль над подчеркиванием. Чтобы иметь большую точность пикселей, вы можете использовать псевдоэлемент :after.

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

а: после {
  содержание: '';
  ширина: 100%;
  положение: абсолютное;
  слева: 0;
  внизу: 1 пиксель;
  ширина границы: 0 0 1px;
  стиль границы: сплошной;
} 

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

Пример увеличения отступа между текстом и его подчеркиванием с помощью псевдоэлемента ::after:

  <голова>Название документа.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/1/a/a/1aaf3ee546e887369c0cf1ffe144aca1.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/1/a/a/1aaf3ee546e887369c0cf1ffe144aca1.jpeg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/html-podcherkivanie-teksta-kak-dobavit-podcherkivanie-k-zagolovku.html" data-text="Html подчеркивание текста: Как добавить подчеркивание к заголовку?" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/html-podcherkivanie-teksta-kak-dobavit-podcherkivanie-k-zagolovku.html" data-text="Html подчеркивание текста: Как добавить подчеркивание к заголовку?" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/html-podcherkivanie-teksta-kak-dobavit-podcherkivanie-k-zagolovku.html" data-text="Html подчеркивание текста: Как добавить подчеркивание к заголовку?" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/html-podcherkivanie-teksta-kak-dobavit-podcherkivanie-k-zagolovku.html" data-text="Html подчеркивание текста: Как добавить подчеркивание к заголовку?" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/sajt-2/kak-uluchshit-pozitsii-sajta-v-rezultatah-poiska-kak-uluchshit-pozitsii-sajta-v-poiske.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Как улучшить позиции сайта в результатах поиска: Как улучшить позиции сайта в поиске</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/zachem-chistit-kesh-brauzera-chto-takoe-kesh-brauzera-i-kak-ego-chistit.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Зачем чистить кэш браузера: Что Такое Кэш Браузера и Как Его Чистить?</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-podcherkivanie-teksta-kak-dobavit-podcherkivanie-k-zagolovku.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='31864' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--></body></html>