Цвет текст css: Как изменить цвет текста класса css?

Меняем цвет фона выделенного текста с помощью CSS

Одна из интересных возможностей спецификации CSS3, которая может использоваться уже сегодня – это псевдоэлемент ::selection, позволяющий изменять цвет фона выделенного текста, заданный в вашей операционной системе, на любой другой цвет по вашему усмотрению.

На данный момент ::selection поддерживают следующие браузеры:

• Safari;
• Google Chrome;
• FireFox;
• Opera 9.5 (начиная с билда 9770).

Safari несколько по-другому отображает результат в сравнении с FireFox и Opera (последние два браузера обрабатывают этот псевдоэлемент идентично).

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

::selection {
	background: #FFB7B7; /* Safari, Chrome, Opera */
}
::-moz-selection {
	background: #FFB7B7; /* FireFox */
}

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

p. red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}

p.blue::selection {background: #A8D1FF;}
p.blue::-moz-selection {background: #A8D1FF;}

p.yellow::selection {background: #FFF2A8;}
p.yellow::-moz-selection {background: #FFF2A8;}

Примеры

• Пример с разными фонами выделенных абзацев.
• Селектор ::selection можно использовать и для того, чтобы спрятать секретный текст 🙂 …
• … или даже картинку.
• Пример прямо в этом посте. Повыделяйте текст этого поста в одном из браузеров, поддерживающих данный селектор.

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

VIA

P.S. Во время тестирования селектора на этом посте, заметил, что он не работает в Safari и FireFox, если его применить к тегу списка <ul>, а работает только тогда, когда класс прописан непосредственно к элементу списка <li>.

* * *

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

Меняем цвет элемента по наведению мышки. Простой пример, простой CSS

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

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

Обновлено 17.01.2019

Внимание! Новый апдейт полностью заточенной под SEO + PageSpeed темы для сайта WP Romb — максимально быстро и максимально удобно. Настрой под себя уникальный дизайн за пару минут и собирай тысячи трафика. Всё на русском + обновления + техподдержка.

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

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

Вот так выглядит код данного блока:

<div> <a href=»https://mojwp.ru/category/birzi-ssylok»>Биржи ссылок</a> <a href=»https://mojwp.ru/category/plugins»>Все плагины WordPress</a> <a href=»https://mojwp.ru/category/poleznoe»>Всякие полезности</a> <a href=»https://mojwp.ru/category/ukrashenie»>Украшаем сайт</a> <a href=»https://mojwp.ru/category/hak»>Хаки WordPress</a> </div>

<div> <a href=»https://mojwp.ru/category/birzi-ssylok»>Биржи ссылок</a> <a href=»https://mojwp.ru/category/plugins»>Все плагины WordPress</a> <a href=»https://mojwp. ru/category/poleznoe»>Всякие полезности</a> <a href=»https://mojwp.ru/category/ukrashenie»>Украшаем сайт</a> <a href=»https://mojwp.ru/category/hak»>Хаки WordPress</a> </div>

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

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный <div>тут ссылки<div>. У вас это тоже может быть созданный вами контейнер, или уже готовый (например, виджет в сайдбаре).

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

.catside a:hover {background: #0078BF; color: #fff;}

. catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside. Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

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

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

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

Как изменить цвет выделяемого текста и цвет подсказки в полях ввода

Для изменения цвета выделяемого текста используйте псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background и background-color.

::selection { color: #0664C9; text-shadow: none; } /* Safari */
::-moz-selection { color: #0664C9; text-shadow: none; } /* Firefox */

placeholder — текст-подсказка для элементов ввода.

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

<input type=«text» placeholder=«type here some text» />

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

Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.

CSS правила для webkit и mozilla:

input::-webkit-input-placeholder {}
input:-moz-placeholder {}
Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:
input:-moz-placeholder,
input::-webkit-input-placeholder { }
то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.
Еще несколько примеров:
/* стили для webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}
/* стили для mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}

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

Цвета. Утилиты · Bootstrap. Версия v4.0.0

Передача значения через цвет с помощью нескольких полезных классов. Включает поддержку ссылок на стиль в hover-состоянии.

Цвет

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

<p>.text-primary</p>
<p>.text-secondary</p>
<p>.text-success</p>
<p>.text-danger</p>
<p>.text-warning</p>
<p>.text-info</p>
<p>.text-light</p>
<p>.text-dark</p>
<p>.text-muted</p>
<p>.text-white</p>

Классы контекстуального текста также работают хорошо на ссылках, где заданы hover и focus.

Заметьте, что классы .text-white and .text-muted не имеют ссылочной стилизации.

<p><a href="#">Primary link</a></p>
<p><a href="#">Secondary link</a></p>
<p><a href="#">Success link</a></p>
<p><a href="#">Danger link</a></p>
<p><a href="#">Warning link</a></p>
<p><a href="#">Info link</a></p>
<p><a href="#">Light link</a></p>
<p><a href="#">Dark link</a></p>
<p><a href="#">Muted link</a></p>
<p><a href="#">White link</a></p> 

Цвет фона

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

В утилитах фона не задается атрибут color, так что в некоторых случаях вам понадобится утилиты .text-*.

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

<div>.bg-primary</div>
<div>.bg-secondary</div>
<div>.bg-success</div>
<div>.bg-danger</div>
<div>.bg-warning</div>
<div>.bg-info</div>
<div>.bg-light</div>
<div>.bg-dark</div>
<div>.bg-white</div> 

Градиентный фон

Когда карта $enable-gradients задана как true, вы сможете использовать классы .bg-gradient-. По умолчанию карта $enable-gradients деактивирована, а код примера ниже специально «сломан». Это сделано для более легкой настройки с самого начала пользования Bootstrap. Узнайте о параметрах Sass, об активации этих классов и т.д.

.bg-gradient-primary

.bg-gradient-secondary

.bg-gradient-success

.bg-gradient-danger

.bg-gradient-warning

.bg-gradient-info

.bg-gradient-light

.bg-gradient-dark

<div>.bg-gradient-primary</div>
<div>.bg-gradient-secondary</div>
<div>.bg-gradient-success</div>
<div>.bg-gradient-danger</div>
<div>.bg-gradient-warning</div>
<div>.bg-gradient-info</div>
<div>.bg-gradient-light</div>
<div>.bg-gradient-dark</div>

Специфические случаи

Иногда контекстуальные классы нельзя применять из-за специфики другого селектора. В некоторых случаях эффективным «костылем» может стать оборачивание содержимого вашего элемента в <div> с классом.

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Задаем уникальный цвет выделения текста с использованием CSS

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

 

 

---

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

Этот способ работает в браузерах Firefox, Chrome, Safari и Internet Explorer, начиная от 9-ой версии, но не работает в современных версиях браузеров Chrome и Safari для iOS, Opera Mini и UC Browser для Android. Воспринимайте этот эффект как декоративное дополнение. Те пользователи, которые смогут его увидеть, восхитятся безупречным стилем Вашего сайта, а те, кто не сможет — не почувствуют себя обделенными.

Пример использования 

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

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

Демонстрация работы

Код CSS 

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

::-moz-selection {
background-color: #BA9EB0;
color: #ffffff;
}
::selection {
background-color: #BA9EB0;
color: #ffffff;
}

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

Свойство цвета фона задает цвет фона выделенного текста, а цвет — цвет шрифта.

Не забывайте поменять цвета для обоих псевдоэлементов. Псевдоэлемент -moz-selection работает в браузере Firefox, а псевдоэлемент selection (выделение) — во всех остальных поддерживающих это свойство браузерах.

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

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

Подбор цветов 

Для подбора цветов можно использовать, например, сайт Colorpicker.com или добавление к браузеру Colorzilla. Ну и, конечно, можно выбрать цвета в редактирующих изображения программах, например, в Photoshop. Во всех этих источниках будут указаны цвета в шестнадцатеричной записи, и Вы можете просто скопировать их и вставить в код выше.

Автор урока Marie Mosley

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

Классы Bootstrap 4, изменяющие цвет текста и фона

В Bootstrap-4 существует ряд классов, которые связаны с назначением цветовых характеристик для шрифта или для фона элемента. Они похожи по названию, но отличаются внешне.

Классы, изменяющие цвет шрифта

Цвет шрифта задается следующими классами:

<p>.text-primary</p> <p>.text-secondary</p> <p>.text-success</p> <p>.text-danger</p> <p>.text-warning</p> <p>.text-info</p> <p>.text-light</p> <p>.text-dark</p> <p>.text-muted</p> <p>.text-white</p>

<p>. text-primary</p> <p>.text-secondary</p> <p>.text-success</p> <p>.text-danger</p> <p>.text-warning</p> <p>.text-info</p> <p>.text-light</p> <p>.text-dark</p> <p>.text-muted</p> <p>.text-white</p>

See the Pen Bootstrap 4 Color classes by Elen (@ambassador) on CodePen.18892

Классы для изменения цвета ссылок

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

See the Pen Bootstrap 4 Link Classes by Elen (@ambassador) on CodePen. 18892

Можно увидеть при наведении на ссылки или при переходе по ним клавишей Tab, что происходит изменение цвета. Стилизация отсутствует для классов ссылок .text-white and .text-muted.

Классы, изменяющие цвет фона

<div>.bg-primary</div> <div>.bg-secondary</div> <div>.bg-success</div> <div>.bg-danger</div> <div>.bg-warning</div> <div>.bg-info</div> <div>.bg-light</div> <div>.bg-dark</div> <div>.bg-white</div>

<div>.bg-primary</div> <div>.bg-secondary</div> <div>.bg-success</div> <div>.bg-danger</div> <div>.bg-warning</div> <div>.bg-info</div> <div>.bg-light</div> <div>.bg-dark</div> <div>.bg-white</div>

See the Pen Bootstrap 4 Background Color classes by Elen (@ambassador) on CodePen. 18892

Как можно заметить, названия классов для изменения цвета фона подобны названиям классов для текста,нужно только заменить приставку text- на bg-. Но эти классы не управляют одновременно и цветом текста. Поэтому для изменения текста нужно использовать соответствующий цветовой класс с приставкой .text-. Если у вас внутри класса с  приставку  bg- расположена ссылка, она станет темнее при наведении.

Классы для создания градиентного фона

Используя стандартную таблицу стилей Bootstrap-4, вы не сможете назначить эти классы и получить отображение градиентного фона в блоках, т.к. этим процессом управляет SCSS-переменная $enable-gradients, которая по умолчанию равна false и доступна для редактирования в файле _variables.scss из пакета исходных файлов Bootstrap.

<div>.bg-gradient-primary</div> <div>.bg-gradient-secondary</div> <div>.bg-gradient-success</div> <div>.bg-gradient-danger</div> <div>.bg-gradient-warning</div> <div>.bg-gradient-info</div> <div>.bg-gradient-light</div> <div>.bg-gradient-dark</div>

<div>.bg-gradient-primary</div> <div>.bg-gradient-secondary</div> <div>.bg-gradient-success</div> <div>.bg-gradient-danger</div> <div>.bg-gradient-warning</div> <div>.bg-gradient-info</div> <div>.bg-gradient-light</div> <div>.bg-gradient-dark</div>

Но, изменив значение этой переменной на true, и скомпилировав новый css-файл, вы вполне сможете использовать градиентные фоны от Bootstrap-4. Не факт, что они вам так уж сильно понадобятся, т. к. градиентные переходы в этих классах очень мягкие, почти незаметные. Наверное, именно поэтому разработчики по умолчанию не включили эти классы в состав bootstrap.css.

Ссылки на документацию Bootstrap:

1. На английском
2. На русском

Просмотров: 5 763

Font-family, font-size, color и другие свойства css для задания параметров шрифта : WEBCodius

Здравствуйте, уважаемые читатели блога webcodius.ru. В сегодняшней статье речь пойдет о свойствах каскадных таблиц стилей, которые отвечают за параметры шрифта элементов web-страниц. Рассмотрим способы их использования и посмотрим как они работают. Если вы впервые слышите о понятии стилевое оформление страницы и ничего не знаете о CSS, то советую вам начать со статьи «что такое css».

 Font-family — задаем имя шрифта в CSS

Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

font-family: <список имен шрифтов разделенных запятыми>

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:

p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }

В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.

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

• serif — шрифты с засечками;
• sans-serif -шрифты без засечек;
• cursive — шрифты, имитирующие рукописный текст;
• fantasy — декоративные шрифты;
• monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

Font-size — задаем размер шрифта с помощью CSS

 Свойство стиля font-size определяет размер шрифта для какого-либо элемента в html-коде. Синтаксис применения:

font-size: <размер>|xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|inherit

Давайте теперь рассмотрим подробнее способы применения данного свойства.

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

• px — пиксели;
• pt — пункты;
• in — дюймы;
• cm — сантиметры;
• mm — миллиметры;
• pc — пики.

Обозначение единицы измерения указывают после самого значения. Например:

p { font-size: 10px; }
strong { font-size: 12pt; }

При использовании этих стилей, текст во всех элементах p на странице будет размером 10 пикселей, а элементов strong 12 пунктов.

Для задания относительных размеров шрифта используются следующие обозначения:

• em — размер буквы «m» текущего шрифта;
• ex — размер буквы «x» текущего шрифта;
• % — проценты от размера шрифта родительского элемента.

Например:

h2 { font-size: 3em; }
em { font-size: 150%; }

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

Кроме числовых значений, свойству font-size можно задавать одно из семи символьных значений: xx-small, x-small, small, medium, large, x-large или xx-large, — которые задают определенные размеры шрифта от самого маленького до самого большого:

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

Свойство color — задаем цвет текста

Атрибут стиля color задает цвет текста. Синтаксис:

color: цвет

Цвет можно задать с помощью RGB-кода, который записывается в формате:

#<доля красного цвета><доля зеленого цвета><доля синего цвета>

Все доли записываются в формате шестнадцатеричных чисел от 00 до FF. Например, чтобы все заголовки h3 на странице выводились красным цветом, необходимо написать такой код CSS:

h3 { color: #ff0000; }

Также возможно задавать цвет с помощью имен. Красный цвет будет red, черный — black, белый — white. Например:

h3 { color: red; }

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может  использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

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

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

• none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
• underline — устанавливает подчеркнутые текст;
• overline — «надчеркивает» текст, то есть проводит линию над текстом;
• line-through — зачеркивает текст;
• blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

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

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

• capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
• uppercase — текст в верхнем регистре;
• lowercase — текст в нижнем регистре;
• none — не меняет регистр символов.

 Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h2 { word-spacing: 5px }

Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:

font: [font-style || [font-variant||font-weight] font-size [/line-height] font-family

Обязательными параметрами являются только размер шрифта и его имя, остальные параметры могут отсутствовать.

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

p { font: italic 12px sans-serif }

На этом рассказывать о свойствах CSS отвечающих за отображение текста на html-страницах я закончу. Чтобы узнать больше о каскадных таблицах стилей не забудьте подписаться на обновления блога и читайте статьи из раздела «Справочник CSS». До новых встреч!

text-decoration-color — CSS: Каскадные таблицы стилей

Свойство CSS text-decoration-color устанавливает цвет украшений, добавляемых к тексту с помощью text-decoration-line .

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

Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

CSS не предоставляет прямого механизма для указания уникального цвета для каждого типа линии. Тем не менее, этот эффект может быть достигнут путем вложения элементов, применения разных типов линий к каждому элементу (со свойством text-decoration-line ) и указания цвета линии (с text-decoration-color ) для каждого элемента. элементная база.

 
цвет украшения текста: текущий цвет;
цвет оформления текста: красный;
цвет-украшения-текста: # 00ff00;
цвет-украшения-текста: rgba (255, 128, 128, 0,5);
цвет-украшения-текста: прозрачный;


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

Значения

<цвет>

Цвет оформления линии.

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

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

  <цвет>, где <цвет> =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>, где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |   

Базовый пример

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

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

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

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

Как изменить цвет текста с помощью HTML и CSS

Каскадные таблицы стилей (CSS)

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

Использование цветных (шестнадцатеричных) кодов текста

Чтобы изменить цвета текста, вам понадобятся две вещи:

1. Команда для изменения текста.
2. Цветовой (шестнадцатеричный) код.

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

Итак, вам нужен цветовой код, а?

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

Старая школа: изменение цвета текста на всей странице

У вас есть возможность изменять цвета текста на всей странице на четырех уровнях:

— обозначает цвет текста на всю страницу.

— обозначает цвет ссылок на вашей странице.

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

— обозначает цвета ссылок после их посещения.

Эти команды идут сразу после команд