Underline html: text-decoration-color | htmlbook.ru

Разное 

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

KB0047: Удаление подчеркивания и цвета ссылок

Содержание | Старт | Конец | Предыдущий: KB0046: Как сделать ссылку из заголовков разделов на оглавление? | Далее: KB0048: Как добавить водяной знак на все страницы в Epub или Kindle?

По умолчанию программное обеспечение для просмотра (например, приложение Kindle, Kobo или Nook) отвечает за добавление цвета и/или подчеркивания к ссылкам. Однако, если вы предпочитаете, вы можете создать стилей ссылок и применять их к различным категориям ссылок.

Чтобы удалить подчеркивание и/или цвет, создав новый стиль ссылки и связав его со всей книгой, выполните следующие действия:

  1. Нажмите на команду меню Формат | Редактировать стили | Ссылка для отображения диалогового окна «Стили связи»

  2. Введите имя нового стиля ссылки, например «Гиперссылки», и нажмите OK .

  3. Установить Подчеркивание до Нет

    и Цвет текста от до Нет или Указывается , по мере необходимости.

  4. Нажмите на страницу Defaults и в Whole book выберите стиль «Гиперссылки», который вы только что создали.

  5. Нажмите OK и OK еще раз.

  6. Скомпилируйте и просмотрите книгу.

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

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

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

Создание CSS вручную

Вы можете добавить CSS либо глобально, если вы не хотите использовать символы подчеркивания повсюду, либо для каждого раздела. Чтобы добавить его глобально, перейдите на страницу Styles в диалоговом окне Project Properties и нажмите Edit Properties в верхней части диалогового окна. Проверить Используйте пользовательский CSS и вставьте код CSS.

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

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

  a:посетили { цвет: красный; текстовое оформление: нет; }
  a:hover   { color: red; текстовое оформление: нет; }
  a:active  { цвет: красный; текстовое оформление: нет; }

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

  a:link    { color: inherit; оформление текста: подчеркивание; }
  a:посещено {цвет: наследовать; оформление текста: подчеркивание; }
  a:hover   { color: inherit; оформление текста: подчеркивание; }
  a:active { color: inherit; оформление текста: подчеркивание; }

Чтобы применить CSS только к отдельному разделу, щелкните правой кнопкой мыши раздел в структуре проекта, выберите Свойства , а затем установите флажок Дополнительный CSS . Вставьте на вышеуказанную страницу и нажмите OK.

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

Ключевые слова: гиперссылка, гиперссылки

Содержание | Старт | Конец | Предыдущий: KB0046: Как сделать ссылку из заголовков разделов на оглавление? | Далее: KB0048: Как добавить водяной знак на все страницы в Epub или Kindle?

Оформление текста HTML | Как работает оформление текста в HTML?

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

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

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

Типы:

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

Как работает оформление текста в HTML?

Свойство Text-Decoration работает на основе значений None, overline, line-through и underline

1. None

Синтаксис: 

 text-decoration: none;

Объяснение: Это не украсит текст. Это как обычный текст.

2. Overline

Синтаксис: 

 text-decoration: overline;

Объяснение: Поверх текста появится линия размером 1 пиксель.

3. Линейный

Синтаксис: 

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

Объяснение: Это даст линию из середины текста размером 1px.

4. Подчеркивание

Синтаксис: 

 text-decoration: underline;

Объяснение: Это даст строку внизу текста размером 1px.

5. Мигание

Синтаксис: 

 украшение текста: мерцание;

Объяснение: Это заставит текст мигать разными цветами от непрозрачности от 0% до 100%.

Примечание:  Недавняя функция мерцания в браузере устарела. Сейчас вообще не используется.

Свойство Text-decoration также может создавать надчеркивание, сквозную линию, подчеркивание с помощью различных стилей, отличных от стилей по умолчанию, таких как пунктирный, волнистый, сплошной, канавка и т. д., с цветом. Вы можете увидеть приведенные ниже синтаксисы.

Синтаксис: 

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

Примеры оформления HTML-текста

Ниже приведены примеры оформления HTML-текста:

Пример №1 – нет

Код: 

 

<голова>
<стиль>
ч2 {
выравнивание текста: по центру;
цвет:зеленый;
}
.никто {
текстовое оформление: нет;
размер шрифта: 20 пикселей;
}
}


<тело>
 
Демонстрация text-decoration:none
 


Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс.
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop.
 
 
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.

Вывод:

Объяснение:  Как видите, text-decoration: none не может придать никакого оформления строки тексту абзаца.

Пример № 2 – Подчеркнуть

Код: 

 

<голова>
<стиль>
ч2 {
выравнивание текста: по центру;
цвет:зеленый;
}
.подчеркнуть {
оформление текста: подчеркивание;
размер шрифта: 20 пикселей;
}
}

 


<тело>
 
Демонстрация text-decoration:underline
 


Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс.
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop. 
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.

Вывод:

Объяснение:  Как видите, text-decoration: underline дает строку ниже текста.

Пример № 3 – Надчеркивание

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

Код: 

 

<голова>
<стиль>
ч2 {
выравнивание текста: по центру;
цвет:зеленый;
}
.overline{
оформление текста: надчеркивание;
размер шрифта: 20 пикселей;
}
}


<тело>
 
Демонстрация text-decoration:overline
 


Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс.
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop.
 
 
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.

Вывод:

Объяснение:  Как видите, text-decoration: overline дает строку над текстом.

Пример № 4 — Сквозной

Оформление текста: пример сквозного:

Код: 

 

<голова>
<стиль>
ч2 {
выравнивание текста: по центру;
цвет:зеленый;
}
.через {
оформление текста: сквозное;
размер шрифта: 20 пикселей;
}
}


<тело>
 
Демонстрация text-decoration:line-through
 


  

Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс.
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop. 
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.

Вывод:

Объяснение:  Как видите, text-decoration: line-through дает линию из середины текста.

Example #5

Оформление текста сплошным, двойным, волнистым с подчеркиванием, сквозным, зачеркнутым Пример:

Код: 

 

<голова>
<стиль>
ч2 {
выравнивание текста: по центру;
цвет:зеленый;
}
.p1 {
text-decoration: сплошной коричневый цвет;
размер шрифта: 18px;
}
.p2 {
text-decoration: двойная сквозная синяя линия;
размер шрифта: 18px;
}
.p3 {
text-decoration: волнистое подчеркивание красного цвета;
размер шрифта: 18px;
}
}


<тело>
 
Демонстрация text-decoration:solid overline brown
 


Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс. 
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop.
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.


 
Демонстрация text-decoration:double line-through blue
 


Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс.
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop.
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.


 
Демонстрация text-decoration:wavy underline red
 


Выполнял и участвовал в проектах веб-разработки с полным стеком, с акцентом на интерфейс. 
функции, манипулирование браузером и совместимость с несколькими браузерами. Написал шаблоны и интерфейсный код для приложения ECM, чтобы обеспечить совместимость с приложением WebTop.
Помощь в разработке внутренних функций в Spring MVC с Hibernate. Разработаны модели и логика импорта в приложении Office Note для хранения данных электронных таблиц и развертывания.
принимать гостей.

Выходные данные:

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

Заключение

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

Рекомендуемые статьи

Это руководство по декорированию HTML-текста. Здесь мы обсуждаем введение, как работает оформление текста в HTML, типы и примеры, а также синтаксис, коды и результаты.

No related posts.

Автор записи

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

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