Как поменять текст в css
Перейти к содержимому

Как поменять текст в css

  • автор:

text — decoration — color

Раскрашивает декоративные линии текста во все цвета радуги.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

Обновлено 5 июля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство text — decoration — color определяет цвет декоративной линии (подчёркивания, зачёркивания и других), заданной при помощи text — decoration — line .

Кстати, декоративные линии можно интересно стилизовать при помощи text — decoration — style ��

Пример

Скопировать ссылку «Пример» Скопировано

Зададим для слов, обозначающих цвет в тексте, двойное нижнее подчёркивание, и разукрасим линии в нужные цвета:

 span  text-decoration-line: underline; text-decoration-style: double;> .red  text-decoration-color: red;> .yellow  text-decoration-color: yellow;> .white  text-decoration-color: white;> span  text-decoration-line: underline; text-decoration-style: double; > .red  text-decoration-color: red; > .yellow  text-decoration-color: yellow; > .white  text-decoration-color: white; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Значение text — decoration — color по умолчанию — current Color , то есть цвет такой же, что и у текста.

 body  color: #735184;> span  text-decoration-line: underline; text-decoration-style: double;> body  color: #735184; > span  text-decoration-line: underline; text-decoration-style: double; >      

В примере выше цвет двойного подчёркивания серобуромалиновый, поскольку для самого текста задан этот цвет, а значит и current Color для text — decoration — color будет значиться серобуромалиновым.

Это можно легко поменять: text — decoration — color принимает цвет в любом доступном формате, например, жёлтый yellow или фиолетовый #8b00ff .

Раскрасить можно не только text — decoration — line , но и линии, обозначенные в HTML-разметке тегами, например или . У text — decoration — color краски хватит на всех!

 del  text-decoration-color: orange;> del  text-decoration-color: orange; >      

Как заменить текст изображением?

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

Решение

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

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

Метод Лэнгбриджа-Лихи

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

Изображение для замены текста заголовка

Рис. 1. Изображение для замены текста заголовка

В стилях для селектора H1 указываем следующий код (пример 1).

Пример 1. Стиль для отображения фоновой картинки

Задача данного стиля — спрятать текст и вывести изображение. Само скрытие происходит достаточно хитро. Вначале текст смещается вниз за счет использования свойства padding-top со значением, равным высоте нашей картинки. Далее явно устанавливаем нулевую высоту заголовка. Высота элемента при этом будет равна 54 пиксела, поскольку складывается из значений height и padding-top . Несмотря на явно заданную нулевую высоту блока заголовка, текст всё равно отображается, поэтому прячем его через свойство overflow со значением hidden . В этом случае становится видна только область внутри элемента заданных размеров. Так как текст смещён вниз за пределы этих 54 пикселов высоты, то его не видно.

Сама картинка выводится в виде фона с помощью свойства background , где обязательно надо указать значение no-repeat , чтобы фон не повторялся. Окончательный код с использованием заголовков первого и второго уровня приведён в примере 2.

Пример 2. Замена текста изображением

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Замена текста   

История Белоснежки

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

Интересные факты

Уолт Дисней специально не смотрел на актрис, которые пробовались на озвучивание роли Белоснежки. Так он мог объективно оценить голос. Однажды он услышал песню в великолепном исполнении.
— Ну, как? — спросили Уолта коллеги.
— Голос хорош, но. староват, — ответил Дисней.

Эта была 14-летняя Дина Дурбин, впоследствии прославившаяся на весь мир.

Результат данного примера показан на рис. 2.

Страница с замещенными заголовками

Рис. 2. Страница с замещенными заголовками

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

Метод Левина

Александр Левин придумал интересный подход, при котором текст закрывается пустым блоком, а поверх выводится фоновое изображение. Код для текста заголовка будет следующим (пример 3).

Пример 3. Заголовок с тегом

Заголовок

Стиль для замены текста приведен в примере 4.

Пример 4. Стиль для отображения фоновой картинки

h1 < position: relative; /* Относительное позиционирование */ >h1 span < position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение относительно левого края */ width: 100%; /* Ширина закрываемого блока */ height: 54px; /* Высота рисунка */ background: url(head1.png) no-repeat; /* Фоновый рисунок для замены текста */ >

Для заголовка вначале задаётся относительное позиционирование с помощью значения relative свойства position , а для тега внутри заголовка — абсолютное позиционирование ( position: absolute ). Это сделано для того, чтобы задать точное положение внутреннего элемента относительно левого края родителя. С этой целью добавляется свойство left с нулевым значением. Также необходимо задать ширину и высоту закрываемого блока и фоновый рисунок, который будет отображаться поверх текста. Окончательный код приведен в примере 5.

Пример 5. Замена текста изображением

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Замена текста   

История Белоснежки

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

Интересные факты

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

Результат данного примера показан на рис. 3. Та же страница с отключенными изображениями представлена на рис. 4.

Изображения поверх текста

Рис. 3. Изображения поверх текста

Страница с отключенными рисунками

Рис. 4. Страница с отключенными рисунками

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

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

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

Метод Рандла

Метод основан на сокрытии текста путём его смещения за край экрана с помощью свойства text-indent с отрицательным значением. Значение должно быть достаточно велико, чтобы при любом разрешении монитора текст не отображался на странице. Вывод картинки происходит, как и в других приведенных методах за счет применения свойства background , как показано в примере 6.

Пример 6. Использование text-indent

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Замена текста   

История Белоснежки

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

Как по клику изменить текст, используя css?

Получил интересное задание, но уже сломал голову, как его выполнить, без js. Звучит оно так — «Дан фрагмент html, для которого нужо написать стили css, допускается less или sass. Результат должен быть как на картинке. Круг, а внутри цифра 4. При клике цифра должна уменшаться на-1. Если кликнуть по кружку когда в нём находится цифра 1, то цифра сбрасывается до 4 — необходимо описать такой внешний вид и поведение, используя только стили. html-менять нельзя, применять другие языки тоже нельзя. http://prntscr.com/okb9zt ссылка на пример» html

css, который я для этого уже написал

 .radius < position: absolute; padding: 20px; margin: 5px; border: 3px solid black; border-radius: 50px; >.num

Отслеживать
27.1k 3 3 золотых знака 23 23 серебряных знака 49 49 бронзовых знаков
задан 28 окт 2019 в 5:38
Kirill Bulgakov Kirill Bulgakov
157 11 11 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Хоть и не в тему, но вот подобное на z-index , без javascript :

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

Новый, улучшенный вариант:

button:focus + button button:nth-child(1) button:nth-child(2) button:nth-child(3) button
   

Отслеживать
ответ дан 28 окт 2019 в 8:17
Stranger in the Q Stranger in the Q
56k 10 10 золотых знаков 83 83 серебряных знака 136 136 бронзовых знаков

Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в реальном коде не надо так!))

Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку лейбела, и добавить еще три before-after, но так показалось нагляднее.

.num::before < content: "4"; >.radius::before < content: "3"; >.num::after < content: "2"; >.radius::after < content: "1"; >#check1:not(:checked) + #check2:not(:checked) ~ .num < display: block;>#check1:not(:checked) + #check2:not(:checked) ~ .num::before < display: block;>#check1:not(:checked) + #check2:checked ~ .radius < display: block;>#check1:not(:checked) + #check2:checked ~ .radius::before < display: block;>#check1:checked + #check2:checked ~ .num < display: block;>#check1:checked + #check2:checked ~ .num::after < display: block;>#check1:checked + #check2:not(:checked) ~ .radius < display: block;>#check1:checked + #check2:not(:checked) ~ .radius::after < display: block;>/* Ага, можно оставить один < display: block >, а все селекторы разделить запятыми. */ label < display: none; position: relative; /* Чтобы абсолютные before и after не выходили за рамки элемента */ color: transparent; /* текст самого лейбела - прозрачный, чтобы не заморачиваться */ width: 30px; height: 30px; border: 1px solid #999; border-radius: 50%; font-size: 20px; font-family: "Helvetica"; cursor: pointer; user-select: none; >.num::before, .num::after, .radius::before, .radius::after

P.s. А возможных комбинаций n! ))) Будет 3 чекбокса — можно сделать 6 «переключений». 4 штуки = 24, 5 штук — уже 120 !)

Как изменить текст с помощью media queries?

Здравствуйте. Вообщем суть вопроса такова. Как изменить текст при помощи медиа запроса? Предположим есть медиа запрос — max-width: 800px, и текста в обычном теге . Так вот как при помощи это медиа запроса изменить или поменять количество текста в теге . Может я не в ту сторону мыслю и это делается не медиа запросами, а чем-то другим. Вообщем приму все варианты какие возможны в данном случае. Спасибо.

  • Вопрос задан более трёх лет назад
  • 3023 просмотра

Комментировать
Решения вопроса 2

zavoluk

Frontend Developer

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

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Front-end developer

Изменить текст с помощью медиа запросов вы не сможете, но сможете скрыть один вариант текста, и показать другой. Простой пример: https://jsfiddle.net/38wnxd4L/

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 3

ShadowOfCasper

Никита Кит @ShadowOfCasper
Middle User Interface Web Developer

Если не хочешь создавать разные элементы с разными вариациями и при этом текст не подтягивается из базы данных, то помести его в before и after. Манипулируй ими через САБАКАmedia и всё будет ок. Хотя даже с подтягиванием данных с базы, можешь создать элементу кастомные атрибуты data-before и data-after, поместив в их значение плейсхолдеры, яваскриптом в :before и after style content передавать необходимые данные

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

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