Разное

Изменить цвет текста css: Цвет | htmlbook.ru

23.02.2020

Содержание

border-color | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

border-color: [цвет | transparent] {1,4} | inherit

Значения

См. цвет

transparent
Устанавливает прозрачный цвет.
inherit
Наследует значение родителя.

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

Табл. 1. Изменение цвета в зависимости от числа значений
Число значений Результат
1 Цвет границы будет установлен для всех сторон элемента.
2 Первое значение устанавливает цвет верхней и нижней границы, второе — левой и правой.
3 Первое значение задает цвет верхней границы, второе — одновременно левой и правой границы, а третье — нижней границы.
4 Поочередно устанавливается цвет верхней, правой, нижней и левой границы.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-color</title>
  <style>
   h2 { 
    border-color: red white; /* Цвет границы */ 
    border-style: solid; /* Стиль границы */  
   }
   p { 
    border-color: #008a77; /* Цвет границы */
    border-style: solid; /* Стиль границы */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head>
 <body>
  
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</p> </body> </html>

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

Рис. 1. Использование свойства border-color

Объектная модель

[window.]document.getElementById(«elementID»).style.borderColor

Браузеры

Internet Explorer 6 не поддерживает значение transparent. Браузер Internet Explorer до версии 7.0 включительно не поддерживает inherit.

Цвет границы в разных браузерах может несколько различаться при использовании значений стиля groove, ridge, inset или outset.

Применение цвета к HTML элементам с помощью CSS — HTML

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

К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.

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

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

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

На фундаментальном уровне, свойство color определяет цвет текста HTML элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

Текст

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

color
Свойство color применяется к тексту и любому оформлению текста, например: подчеркивание, линии на текстом, перечеркивание и т.д.
background-color
Цвет фона текста.
text-shadow

Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows в Fundamental text and font styling, чтобы узнать больше.

text-decoration-color

По умолчанию, элементы оформление текста (подчеркивание, перечеркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.

text-emphasis-color

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

caret-color

Цвет, который используется для каретки (caret) (курсора ввода текста). Применимо только к редактируемым элементам, таким как <input> и <textarea> или элементам , для которых установлен атрибут contenteditable.

Блоки

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

borders
См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
background-color
Цвет фона блока.
column-rule-color
Цвет линий, которые разделяют колонки текста.
outline-color
Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент.
 Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Границы

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись border, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid),  штриховая (dashed) и так далее.

border-color
Задает единый цвет для всех сторон границы элемента.
border-left-color, border-right-color, border-top-color, and border-bottom-color
Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
border-block-start-color and border-block-end-color
С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
border-inline-start-color and border-inline-end-color
Эти свойства определяют цвет границы, расположеной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode, direction и text-orientation, которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

Как можно еще использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API
Позволяет создавать растровую 2D-графику в элементе <canvas>. См. Canvas tutorial, чтобы узнать больше.
SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика)

Позволяет создавать изображения с помощью команд, которые рисуют определенные фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе <img>, как и любое другое изображение.

WebGL
Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

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

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от черного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светлосерый (lightgrey)), а также множество других смешаных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> — полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатиричная запись в виде строки

Шестнадцатиричная запись передает цвет, используя шестнадцатричные числа, которые передают каждый компонент цвета (красный, зеленый и синий). Запись также может включать четвертый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет расчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

Цвет в шестнадцатиричной записи всегда начинается с символа "#". После него начинаются шестнадцатричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb"
Задает полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатиричным числом 0xrr, зеленого — 0xgg и синего — 0xbb.
"#rrggbbaa"
Задает цвет, у которого компонент красного представлен шестнадцатиричным числом 0xrr, зеленого — 0xgg и синего — 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb"
Задает цвет, у которого компонент красного представлен шестнадцатиричным числом 0xr, зеленого — 0xg и синего — 0xb.
"#rgba"
Задает цвет, у которого компонент красного представлен шестнадцатиричным числом 0xr, зеленого — 0xg и синего — 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатиричная запись, представляет цвет, используя красный, зеленый и синий компоненты (также, опцинально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зеленого и синего компонентов и, опционально, четвертого компонента — значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue
Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha
Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основыванный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентое соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого темного к самому  светлому (от черного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через желтый, зеленый, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством <angle>, а именно —  в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

  1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
  2. Далее выбирете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к черному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный черный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
  3. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

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

Вот несколько примеров цвета в HSL записи:

Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (deg).

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet) и добавлять, изменять цвет, используя JavaScript код.

Цвет в таблицах стилей CSS

 

Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

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

 

HTML

HTML, который создает вышеупоменутый пример:

<div>
  <div>
    <p>
      This is the first box.
    </p>
  </div>
  <div>
    <p>
      This is the second box.
    </p>
  </div>
</div>

Все довольно просто: первый <div> используется как обертка (wrapper) содержимого, которое состоит из еще двух <div>, каждый из которых содержит один параграф (<p>) и имеет свой стиль.

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

CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

 

Класс .wrapper определяет стиль для элемента <div>, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины width, высоты height, внешних margin и внутренних padding полей.

Но больше всего нас интересует свойство граница border, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (mediumturquoise).

Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс . box, который определит эти общие свойства:

 

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с легкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex, и присваиваем значение center justify-content и align-items. Затем мы создаем отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

 

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

 

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

  • background-color определяет цвет фона блока значением rgb(245, 130, 130).
  • outline, в отличие от привычного нам свойства border,  не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
  • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это черный цвет.

 

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

 

Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

  • background-color определяется значением HSL: hsl(270deg, 50%, 75%).  Это светло-фиолетовый цвет.
  • Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
  • Цвет текста определяется свойством color, значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
  • С помощью text-decoration мы добавляем зеленую волнистую линию под текстом.
  • И наконец, свойство text-shadow добавляет небольшую черную тень тексту.

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.

The <input> element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we’ll output some text from our JavaScript code.

<div>
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff">
  <p></p>
</div>
CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}
JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker. value + ".";
}, false);

The input event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change event is received when the color picker’s value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
  • A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
  • Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar)
An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color theory on Wikipedia
Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code (D79C7A) into the «Base RGB» box at the bottom-left corner of the tool:

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

Как в html изменить цвет текста?

Здравствуйте, дороге друзья!

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

Навигация по статье:

Если ваш сайт сделан на одной из CMS, то для изменения цвета текста вы можете использовать встроенный функционал визуального редактора, однако такая функция там не всегда есть, а ставить ради этого дополнительный модуль или плагин не всегда есть смысл.

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

Изменения цвета текста средствами HTML

К счастью в HTML есть специальный тег с атрибутом color, в котором можно указать нужный цвет текста.

<font color=»red»>Красный текст</font>

<font color=»red»>Красный текст</font>

Значение цвета можно задавать несколькими способами:

  • При помощи кодового названия (Например: red, black, blue)
  • В шестнадцатиричном формате (Например: #000000, #ccc)
  • В формате rgba (Например: rgba(0,0,0,0. 5))
Если вы ещё не знаете как определить значение цвета на сайте, то вам сюда

Таким образом вы можете изменить цвет у целого абзаца, слова или одной буквы, обернув то что вам нужно в тег <font>

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

Для изменения цвета текста для определённого абзаца или слова можно присвоить ему класс, а затем в CSS файле задать для этого класса свойство color.

Выглядеть это будет так:

HTML

<p class=”color-text”>Пример текста</div>

<p class=”color-text”>Пример текста</div>


CSS

.color-text { color:#555555; }

.color-text {

color:#555555;

}

Вместо color-text вы можете указать свой класс.

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

Если вы не хотите лезть в CSS файл чтобы внести изменения, то можно дописать CSS стили прямо в HTML коде станицы, воспользовавшись тегом <style>.

Для этого:

  1. 1.Находи вверху HTML страницы тег </head>. Если ваш сайт работает на CMS, то этот фрагмент кода находится в одном из файлов шаблона. Например: header.php, head.php или что-то наподобие этого в зависимости от CMS.
  2. 2.Перед строкой </head> добавляем теги <style>…</style>.
  3. 3.Внутри этих тегов задаём те CSS свойства, которые нам нужны. В данном случае color:

    <style> .color-text { color:#555555; } </style>

    <style>

    .color-text {

    color:#555555;

    }

    </style>

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

Если же такой элемент один, то можно задать или изменить цвет текста прямо в HTML коде.

Изменяем цвет в HTML коде при помощи атрибута style

Для этого добавляем к тегу для которого нам нужно изменить цвет текста атрибут style.

<p style=”color:red;”>Пример</p>

<p style=”color:red;”>Пример</p>

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

<p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>

<p style=”color:red; font-size:20px; font-weight:bolder;”>Пример</p>

Лично я обычно использую вариант с заданием стилей в CSS файле, но если вам нужно изменить цвет текста для какого то одного-двух элементов, то не обязательно присваивать им класс и потом открывать CSS файл и там дописывать слили. Проще это сделать прямо в HTML при помощи тега <font> или артибута style.

Так же вы должны знать, что есть такое понятие как приоритет стилей. Так вот когда вы задаёте цвет текста или другие стили в html при помощи атрибута style, то у этих стилей приоритет будет выше чем если вы их зададите в CSS файле (при условии что там не использовалось правило !important)

Чтобы изменить цвет текста отдельного слова, фразы или буквы мы можем обернуть их в тег span и задать ему нужный цвет.

Например:

<p>Пример <span style=”color:#2F73B6;”> текста</span></p>

<p>Пример <span style=”color:#2F73B6;”> текста</span></p>

В итог получится вот так:

Пример текста

Что делать если внесённые изменения не меняются?

Казалось бы, изменение цвета – одна из простейших операций при оформлении текста, ну что здесь может пойти не так?

Однако и здесь есть свои нюансы, которые нужно учитывать:

  1. 1. Приоритет стилей, о котором я писала выше. Если задавать цвет текста прямо в HTML то приоритет будет выше. Если вы задали его при помощи атрибута style, а он всё равно не изменилcя, то попробуйте добавить к нему правило !important;

    <p style=”color:#fff!important;”>…</p>

    <p style=”color:#fff!important;”>…</p>

  2. 2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.

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

  3. 3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
    Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

Вот, в общем то и всё что касается изменения цвета в HTML. Как видите, ничего сложного! Если у вас возникнут какие то вопросы – пишите их в комментариях.

Успехов вам и вашим проектам!

С уважением Юлия Гусарь

Как изменить цвет текста и цвет фона в HTML?

Как запустить видеоурок:
  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.
Добро пожаловать в пятый видеоурок по курсу HTML. Из прошлого видеоурока вы узнали про параграфы и заголовки в HTML-коде. В данном видеоуроке мы поговорим о том, как задавать цвета: цвет текста, цвет фона и др.

Как изменить цвет текста?

Давайте перейдем в наш код. Как видите, я убрал все лишние теги, которые у нас были и ввел атрибут color со значением #0000FF. Надеюсь, вы уже знаете, что такое теги и атрибуты.

 <font color="#0000FF"></font>

Что значит этот шестизначный код? Эти шесть символов означают задание определенного цвета нашему тексту. Введем в качестве текста «Синий цвет»:

 <font color="#0000FF">Синий цвет</font>

Вышеупомянутые шесть знаков задают именно синий цвет. Чтобы узнать, какие символы задают тот или иной цвет, можно посмотреть таблицу от сайта http://addedbytes.com, которая приложена к видеоуроку. Например, чтобы написать красный цвет, вы берете значение #CC0000.

Перейдем обратно в код. Давайте сохраним и проверим нашу страничку. Переходим в браузер. Обновляем. Как видите, появился текст синего цвета.

Давайте зададим тексту заголовка h3 красный цвет. Находим <h3> и вводим теги <font></font>:

 <font color="#CC0000"><h3>Текст заголовка h3</h3></font>

Сохраняем. Проверяем в браузере. Как видим, текст стал красного цвета.

Теперь давайте рассмотрим другие атрибуты тега <font>. Перейдем в код и зададим гарнитуру нашего текста. Она задается атрибутом face. Что такое гарнитура? Гарнитура –  это шрифт нашего текста. Например, Monotype Corsiva.

 <font face="Monotype Corsiva" color="#CC0000"><h3>Текст заголовка h3</h3></font>

Проверяем. Как видим, шрифт заголовка изменился.

Перейдем в код и зададим размер нашего текста. Это делается с помощью атрибута size.

 <font size="6" color="#0000FF">Синий цвет</font>

Сохраним и посмотрим. Наш текст увеличился. Тег <font> мы разобрали.

Допустим, мы хотим, чтобы весь текст, которому не задан определенный цвет с помощью дополнительных тегов и атрибутов, отображался какого-либо цвета. Для этого нам нужно в теге <body> ввести атрибут text. Зададим, например, зеленый цвет.

 <body text="#00CC00">

Сохраняем. Обновляем страницу в браузере. Как видим, текст стал зеленого цвета.

Как изменить цвет фона?

Теперь перейдем к последней части видеоурока. Зададим цвет фона нашей странице. Он задается атрибутом bgcolor.

 <body text="#00CC00" bgcolor="#00CCCC">

Сохраним и проверим в браузере. Как видите, цвет фона стал голубым. Давайте лучше поставим желтый.

 <body text="#00CC00" bgcolor="#FFFF00">

Сохраняем. Проверяем. Стало посимпатичнее.

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

Как сменить цвет текста в WordPress (3 простых метода) – Блог про WordPress

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

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

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

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

В этой статье мы рассмотрим следующие методы:

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

Метод 1. Изменение цвета текста с помощью визуального редактора.

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

Вот как вы можете изменить цвет текста с помощью редактора блоков.

Сначала вам нужно отредактировать пост или страницу (либо создать новую). Далее введите свой текст. Вам потребуется создать блок абзаца или заголовка в зависимости от ситуации.

Как только ваш текст будет добавлен, вы сможете изменить его цвет.

Смена цвета текста блока

Для данного примера мы собираемся изменить цвет текста всего блока.

Нажмите на блок. С правой стороны экрана должна появиться панель Block Settings. Нажмите на стрелочку рядом с Color settings, чтобы развернуть вкладку. Вы увидите здесь настройки цвета.

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

В качестве альтернативы вы можете задать любой цвет, который вам нужно. Для этого нажмите на ссылку Custom Color. Откроется цветовая палитра, где вы можете выбрать любой цвет вручную. Вы также можете использовать палитру для ввода hex-кода цвета.

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

Совет: если вы хотите изменить цвет фона для блока, вы тоже можете сделать это здесь.

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

Что делать, если вы хотите изменить цвет одного или нескольких слов? Это легко делается с помощью  редактора блоков.

Сначала вам нужно выделить слово (слова), которые вы хотите изменить. Затем нажмите на небольшую стрелочку на панели инструментов редактора контента.

Далее нажмите на ссылку Text Color в нижней части списка.

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

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

Примечание: вы не можете задавать цвет фона для заголовков.

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

Меняем цвет шрифта с помощью классического редактора

Если вы все еще используете классический редактор WordPress, то вы можете изменить цвет шрифта с помощью панели инструментов.

В классическом редакторе нажмите на Toolbar Toggle в правом углу. Вы увидите еще один ряд иконок:

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

Метод 2. Смена цвета текста в кастомайзере

Как быть, если вы хотите изменить цвет текста на всем сайте? Многие из тем WordPress позволяют это делать через кастомайзер.

В качестве примера мы возьмем тему OceanWP. Это одна из лучших бесплатных тем для WordPress.

В консоли перейдите в раздел Внешний вид – Настроить, чтобы открылся кастомайзер.

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

Перейдем на вкладку Typography. Ищем параметр, который позволяет менять цвет текста для постов и страниц. В OceanWP этот параметр называется «Body». Вам нужно щелкнуть по нему и настроить цвет шрифта и другие опции.

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

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

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

Совет: выбор черного цвета или темно-серого для текста на белом или светлом фоне – идеальный вариант в плане удобочитаемости.

Метод 3. Смена цвета текста через CSS

Как быть, если в теме отсутствует возможность настройки цвета текста?

Вы по-прежнему можете изменить цвет шрифта на сайте через кастомайзер. Для этого перейдите в раздел Внешний вид – Настроить.

В самом низу списка опций вы можете найти вкладку с надписью Additional CSS.

Щелкните по вкладке Additional CSS. Вы увидите некоторые инструкции плюс поле, в которое вы можете ввести CSS-код.

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

p { color:#990000; }

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

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

h3 { color:#990000; }

Опять же, вы можете сменить hex-код на любой другой цвет.

Если вы не знакомы с CSS, то в таком случае вы можете попробовать плагин CSS Hero. Это мощный визуальный редактор, который позволяет настраивать стили своего сайта.

Источник: wpbeginner.com

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

Для изменения цвета выделяемого текста используйте псевдоэлемент ::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 нет.

Изменение размера, цвета и шрифта выбранных слов (с использованием Font и Span): howto_in_ru — LiveJournal

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

Шрифт и другие параметры текста изменяют два различных HTML-тэга: <font> и <span>. У каждого из них есть свои достоинства и недостатки, так что выбирать один из них вам придётся самостоятельно. Ниже будут описаны оба тэга.

<font>
Плюсы:
1. Может быть использован для изменения внешнего вида текста вашей Биографии на странице «О пользователе» (вы можете изменить свою биографию здесь), а не только ваших записей в журнале.
2. Начинающим пользователям проще обращаться с этим тэгом, он интуитивно более понятен, чем <span>.
Минус:
1. Не рекомендован к использованию и может некорректно восприниматься перспективными версиями браузеров (хотя поддерживается всеми нынешними). Не поддерживается в XHTML.

<span>
Плюс:
1. Широко используется и будет поддерживаться браузерами значительно дольше, чем <font>. Поддерживается в XHTML.
Минусы:
1. Не может быть использован для изменения внешнего вида Биографии, хотя подходит для модификации текста ваших записей в журнале. 2. Менее удобен и понятен для неопытных пользователей, чем <font>.

Использование <font>

Size
Для изменения размера слов(а) вставьте в текст следующее:

<font size=»размер текста»>А тут — сам текст.</font>

При этом нужно заменить размер текста на требуемый размер. Значение этого параметра — целое число от 1 до 7. Вы также можете вписать «+» или «-» перед числом, если вы хотите увеличить или уменьшить (соответственно) текущий/стандартный размер текста на заданное вами число.

Цвет
Для изменения цвета слов(а) используйте следующее:

<font color=»код цвета»>А тут — сам текст.</font>

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

Шрифт
Шрифт слов(а) изменяется вот так:

<font face=»шрифт»>А тут — сам текст.</font>

Вам следует вместо шрифт вписать название того шрифта, который вы хотите использовать (например, sans-serif). При желании вместо одного шрифта можно перечислить несколько, разделив их запятой. Если вы сделаете так, браузер отобразит первый шрифт из перечисленных, если он установлен на компьютере, где просматривается ваша страница; если он не установлен, браузер попытается вывести на экран второй и т. д.

Комбинации
Все вышеперечисленные параметры могут быть использованы в любых комбинациях в одном тэге. Например, следующий код выдаст на экран текст размера 4, голубого цвета и в шрифте comic sans ms:

<font size=»4″ color=»#0000ff» face=»comic sans ms»>Сам текст.</font>

Вот что отобразится:

Сам текст.

Использование <span>

Размер
Для изменения размера слов(а) вставьте в текст:

<span>А тут — сам текст.</span>

При этом размер текста нужно заменить на тот размер, который вы хотите использовать — на целое число от 1 и выше. Учтите, что тот размер, который вы используете в <span>, и тот, который работает в <font>, никак не соотносятся. В нашем примере размер измеряется в пунктах (или «pt» — от английского «point»). Обычный размер текста — 12 пунктов.

Цвет
Для изменения цвета слов(а) используйте:

<span>А тут — сам текст.</span>

При использовании этого тэга следует вместо код цвета вставить нужный шестнадцатиричный код цвета. Список некоторых цветовых кодов размещён вот здесь.

Шрифт
Шрифт слов(а) изменяется следующим образом:

<span>А тут — сам текст.</span>

Вы должны заменить шрифт на название того шрифта, который вы хотите увидеть (к примеру, sans-serif). Вместо одного шрифта можно перечислить несколько, разделяя их запятой; тогда браузер отобразит первый шрифт из перечисленных, если он установлен на компьютере, где просматривается ваша страница; если он не установлен, браузер попытается вывести на экран второй и т. д.

Комбинации
Вы можете использовать любую комбинацию этих параметров в одном тэге. Например, следующая комбинация выдаст на экран текст размером в 16 пунктов, зелёного цвета и в шрифте trebuchet ms:

<span>Сам текст.</span>

Вот результат:

Сам текст.

С помощью тэга <span> текст можно модифицировать и гораздо более серьёзно. Как именно — можно увидеть в этой статье.

Спасибо janinedog.
Перевёл на русский ximaera.

Как изменить цвет текста и фона в CSS

Изменить цвет текста на веб-странице легко с помощью свойства цвета CSS.

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

  • Названия цветов HTML: CSS поддерживает 140 названий цветов. Желтый, фуксия, бордовый и небесно-голубой — лишь несколько примеров.
  • Шестнадцатеричные цветовые коды: эти коды состоят из трех пар символов, которые представляют интенсивность трех основных цветов.Возможные значения варьируются от 00 (самая низкая интенсивность основного цвета) до FF (самая высокая интенсивность основного цвета). Шестнадцатеричный код цвета для черного цвета — # 000000, красного — # FF0000, а синего — # 0000FF.
  • значений RGB: RGB — это еще одна цветовая модель, основанная на комбинации основных цветов: красного, зеленого и синего. Состоит из трех чисел, разделенных запятыми, каждое из которых представляет интенсивность соответствующего основного цвета в виде целого числа от 0 до 255. Черный — это rgb (0, 0, 0), красный — это rgb (255, 0, 0), а синий — rgb (0, 0, 255).

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

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

Теперь давайте рассмотрим, как изменить цвет и цвет фона встроенного текста в CSS.

Изменение цвета встроенного текста в CSS

Чтобы изменить цвет встроенного текста, перейдите в раздел своей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство цвета с желаемым значением. Например, вы хотите изменить цвет всех абзацев на вашем сайте на темно-синий. Затем вы добавляете p {color: # 000080; } в раздел заголовка вашего HTML-файла.

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

 
 

кузов {

цвет: синий;

}

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

Итак, допустим, я хочу изменить цвет абзацев на темно-синий, как указано в примере выше, и все ссылки на моем веб-сайте на голубой. Затем я использовал бы селектор типа p и селектор атрибутов a [href] и установил для свойства цвета значение # 000080 и # 00FFFF соответственно.

Вот код CSS:

 
 

п {

цвет: # 000080;

}

a [href] {

цвет: # 00FFFF;

}

Вот HTML:

 
 

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

Другой абзац, содержащий ссылку.

Вот результат:

Источник изображения

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

Изменение цвета фона текста в CSS

Чтобы изменить цвет фона встроенного текста, перейдите в раздел вашей веб-страницы. Просто добавьте соответствующий селектор CSS и определите свойство color и background-color с желаемыми значениями. Допустим, вы хотите изменить цвет фона ссылок на желтый. Затем вы должны добавить [href] {color: # 000000; цвет фона: # FFFF00; }.

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

Изменение цвета и цвета фона текста также важно для предотвращения проблем веб-доступности на вашем веб-сайте.

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

Это потребует времени и исследования. Если вы только начинаете исследовать дальтонизм, тогда такой инструмент, как Contrast Checker, может помочь вам сделать доступный выбор при изменении цвета текста на вашем сайте. Вы можете ввести цвет и цвет фона, и он скажет вам «пройден», если у пары коэффициент контрастности 4,5: 1. Все, что ниже, потерпит неудачу. Мы воспользуемся этим инструментом, чтобы определить цвета в примере ниже.

Допустим, я хочу, чтобы текст был красным, а фон — серым. Я мог бы начать с подключения # FF0000 и # 808080 к Contrast Checker и увидеть, что у него коэффициент контрастности только 1: 1. Это не хорошо.

Чтобы улучшить соотношение, я переместу ползунок цвета переднего плана влево, а ползунок цвета фона вправо, пока не достигну минимального значения 4,5: 1. Поскольку я хочу, чтобы мой дизайн был максимально ясным, я выберу цвет # 940000 и цвет фона # E0E0E0, что соответствует соотношению 7: 1.Я буду использовать их, чтобы стилизовать ссылку, чтобы она действительно выделялась на фоне остального абзаца.

Вот код CSS:

 
 

a [href] {

цвет: # 940000;

цвет фона: # E0E0E0;

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

}

Вот HTML:

 
 

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

Другой абзац, в котором есть ссылка .

Вот результат:

Источник изображения

Добавление цвета на ваш сайт

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

Цвет

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

 
цвет: текущий цвет;


красный цвет;
оранжевый цвет;
цвет: коричневый;
цвет: пурпурный;


цвет: # 090;
цвет: # 009900;
цвет: # 090a;
цвет: # 009900aa;


цвет: rgb (34, 12, 64, 0. 6);
цвет: rgba (34, 12, 64, 0,6);
цвет: rgb (34 12 64 / 0,6);
цвет: rgba (34 12 64 / 0,3);
цвет: rgb (34,0 12 64/60%);
цвет: rgba (34,6 12 64/30%);


цвет: hsl (30, 100%, 50%, 0,6);
цвет: hsla (30, 100%, 50%, 0,6);
цвет: hsl (30 100% 50% / 0,6);
цвет: hsla (30 100% 50% / 0,6);
цвет: hsl (30,0 100% 50% / 60%);
цвет: hsla (30,2 100% 50% / 60%);


цвет: наследовать;
цвет: начальный;
цвет: неустановленный;
  

Свойство color указано как одно значение .

Обратите внимание, что значение должно быть однородным , цвет . Это не может быть <градиент> , который на самом деле является типом <изображение> .

Значения

<цвет>
Устанавливает цвет текстовой и декоративной частей элемента.

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

Коэффициент контрастности цвета определяется путем сравнения яркости текста и значений цвета фона. Чтобы соответствовать текущим правилам доступности веб-содержимого (WCAG), требуется соотношение 4,5: 1 для текстового содержимого и 3: 1 для более крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.

Начальное значение Варьируется от одного браузера к другому
Применяется ко всем элементам .Это также относится к :: первая буква и :: первая строка .
Унаследовано да
Вычисленное значение Если значение полупрозрачное, вычисленное значение будет соответствовать rgba () . Если это не так, это будет соответствующий rgb () . Ключевое слово transparent соответствует rgba (0,0,0,0) .
Тип анимации a color
   где  =  |  |  |  | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы> где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?), где <альфа-значение> = <число> | <процент> <оттенок> = <число> |   

Сделать текст красным

Ниже приведены все способы сделать текст абзаца красным:

  p {цвет: красный; }
п {цвет: # f00; }
п {цвет: # ff0000; }
p {цвет: rgb (255,0,0); }
п {цвет: RGB (100%, 0%, 0%); }
p {цвет: hsl (0, 100%, 50%); }


п {цвет: # ff000080; }
п {цвет: rgba (255, 0, 0, 0. 5); }
p {цвет: hsla (0, 100%, 50%, 0,5); }
  

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

CSS | Форматирование текста — GeeksforGeeks

Свойства форматирования текста CSS используются для форматирования текста и стиля текста. Форматирование текста CSS
включает следующие свойства:
1.Цвет текста
2. Выравнивание текста
3. Декорирование текста
4. Преобразование текста
5. Отступ текста
6. Расстояние между буквами
7. Высота строки
8 .Text-direction
9.Text-shadow
10. интервал между словами


1. ЦВЕТ ТЕКСТА

Свойство Цвет текста используется для установки цвета текста.

Цвет текста может быть установлен с использованием имени «красный», шестнадцатеричного значения «# ff0000» или его значения RGB «rgb (255, 0, 0).

Синтаксис:
тело
{
цвет: название цвета;
}
 

Пример:

< html >

< Головка >

< стиль >

h2

{

цвет: красный;

}

h3

{

цвет: зеленый;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

ФОРМАТИРОВАНИЕ ТЕКСТА

h3 >

корпус >

html >

 
ВЫХОД:
  


2. ВЫРАВНИВАНИЕ ТЕКСТА

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

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

При выравнивании по ширине линия растягивается так, что левое и правое поля остаются прямыми.


Синтаксис:
тело
{
text-align: тип выравнивания;
}
 

Пример:

< html >

< Головка >

< стиль >

h2

{

цвет: красный;

выравнивание текста: по центру;

}

h3

{

цвет: зеленый;

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

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

ФОРМАТИРОВАНИЕ ТЕКСТА

h3 >

корпус >

html >

 
ВЫХОД:
  


3. УКРАШЕНИЕ ТЕКСТА

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

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

Синтаксис:
тело
{
текст-украшение: тип оформления;
}
 

Пример:

< html >

< Головка >

< стиль >

h2

{

цвет: красный;

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

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

ФОРМАТИРОВАНИЕ ТЕКСТА

h3 >

корпус >

html >

 
ВЫХОД:
  


4. ПРЕОБРАЗОВАНИЕ ТЕКСТА

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

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

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

Синтаксис:
тело
{
текст-преобразование: тип;
}
 

Пример:

< html >

< Головка >

< стиль >

h3

{

преобразование текста: нижний регистр;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

ФОРМАТИРОВАНИЕ ТЕКСТА

h3 >

корпус >

html >

 
ВЫХОД:
  


5. ОБОЗНАЧЕНИЕ ТЕКСТА

Свойство отступа текста используется для отступа первой строки абзаца.
Размер может быть в пикселях, см, пт.

Синтаксис:
тело
{
текст-отступ: размер;
}
 

Пример:

< html >

< Головка >

< стиль >

h3

{

текстовый отступ: 80 пикселей;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

Это свойства форматирования текста. < br >

Свойство отступа текста используется для отступа первой строки абзаца.

h3 >

корпус >

html >

 
ВЫХОД:
  


6. ПРОБЕЛ БУКВ

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

Синтаксис:
тело
{
межбуквенный интервал: размер;
}
 

Пример:

< html >

< Головка >

< стиль >

h3

{

межбуквенный интервал: 4 пикселя;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

Это свойства форматирования текста.

h3 >

корпус >

html >

 
ВЫХОД:
  


7. ВЫСОТА ЛИНИИ

Это свойство используется для установки расстояния между линиями.

Синтаксис:
тело
{
высота строки: размер;
}
 

Пример:

< html >

< Головка >

< стиль >

h3

{

высота строки: 40 пикселей;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

Это свойства форматирования текста. < br >

Это свойство используется для установки расстояния между строками.

h3 >

корпус >

html >

 
ВЫХОД:
  


8. НАПРАВЛЕНИЕ ТЕКСТА

Свойство Направление текста используется для установки направления текста.

Направление можно задать с помощью rtl: справа налево.

Слева направо - направление текста по умолчанию.

Синтаксис:
тело
{
направление: RTL;
}
 

Пример:

< html >

< Головка >

< стиль >

h3

{

направление: RTL;

выравнивание текста: по центру;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 > < bdo dir = "rtl" >

Это свойства форматирования текста.

bdo >

h3 >

корпус >

html >

 
ВЫХОД:
  


9. ТЕКСТОВАЯ ТЕНЬ

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

Синтаксис:
тело
{
text-shadow: размер по горизонтали, размер по вертикали, имя цвета;
}
 

Пример:

< html >

< Головка >

< стиль >

h2

{

text-shadow: 3px 1px синий;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

Это свойства форматирования текста.

h3 >

корпус >

html >

 
ВЫХОД:
  


10. МЕЖДУ СЛОВАМИ

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

Синтаксис:
тело
{
межсловный интервал: размер;
}
 

Пример:

< html >

< Головка >

< стиль >

h3

{

интервал между словами: 15 пикселей;

}

стиль >

Головка >

< корпус >

< h2 >

GEEKS ДЛЯ GEEKS

h2 >

< h3 >

Это свойства форматирования текста.

h3 >

корпус >

html >

 
ВЫХОД:
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эти команды идут сразу после команд . Опять же, в этом положении они влияют на все на странице. <strong> Также ... </strong> поместите их все вместе внутри одной команды вместе с любыми фоновыми командами. Примерно так: </p> <p> <BODY BGCOLOR = "######" TEXT = "######" LINK = "######" VLINK = "######"> </p> <p> <strong> Обратите внимание: </strong> Когда вы пишете эти коды, вы можете писать их со знаком # перед шестнадцатеричным кодом или нет.<img src='/800/600/https/cf2.ppt-online.org/files2/slide/6/6el8OvmTxAgDs4utw3haqoQLRpC0BYX75NkKiP/slide-3.jpg' style='float: right;' /> Раньше требовался символ, но теперь его нет.Я до сих пор использую его только потому, что так начал. Вы можете просто использовать шестизначный код. Также не забудьте поставить пробел между каждой командой и заключить его в кавычки, например: </p> <p> <strong> <VLINK = "# FFFFFF"> </strong> </p> <h3><span class="ez-toc-section" id="i-23"> Старая школа: изменение цвета определенного слова </span></h3> <p> Но я хочу изменить цвет только одного слова </p> <p>! </p> <p> <strong> Вы будете использовать цветной (шестнадцатеричный) код, чтобы добиться цели. Следуйте этой формуле: </strong> </p> <p> <FONT COLOR = "######"> текст текст текст текст текст </FONT> </p> <p> Это сложная задача, но она выполняет свою работу.Он работает со всеми командами H и командами размера текста. В принципе, если это текст, это сработает. </p> <h3><span class="ez-toc-section" id="_CSS-7"> Использование каскадных таблиц стилей (CSS) для изменения цвета текста </span></h3> <p> В этой статье недостаточно места, чтобы полностью описать, на что способен CSS, но у нас есть несколько статей, которые помогут вам быстро освоиться! Чтобы получить отличное руководство по использованию CSS для изменения свойств цвета, ознакомьтесь с этой статьей Винсента Райта.<img src='/800/600/https/otvet.imgsmail.ru/download/253849607_17867c6d8433171935b868c54db2779b_800.png' style='float: right;' /> </p> <p> Уместно краткое введение в CSS, поэтому давайте немного его опишем.CSS используется для определения различных элементов на вашей веб-странице. Эти элементы включают цвета текста, цвета ссылок, фон страницы, таблицы, формы - практически все аспекты стиля веб-страницы. Вы можете использовать встроенный CSS, как и приведенный выше HTML, или, что более предпочтительно, включить таблицу стилей h в теги HEAD на своей странице, как в этом примере: </p> <pre> <STYLE type = text / css> <br/> A: ссылка {<br/> COLOR: red / * цвет ссылки * / <br/>} <br/> A: посещенная {<br/> COLOR: # 800080 / * цвет посещенной ссылки * / <br/> } <br/> A: hover {<br/> COLOR: green / * Цвет ссылки наведения или наведения курсора * / <br/>} <br/> BODY {COLOR: # 800080 / * Цвет всего остального текста в основной части страницы * / <br/> {<br/> </STYLE> </pre> <p> Как вариант, вы можете включить CSS, который находится между тегами STYLE выше, и сохранить его в файле, который можно назвать «базовым».css ", который будет помещен в корневой каталог вашего веб-сайта.<img src='/800/600/http/htmlboss.ru/image/lesson8-3.jpg' style='float: right;' /> Затем вы можете ссылаться на эту таблицу стилей, используя ссылку, которая проходит между тегами HEAD на вашей веб-странице, например: </p> <pre> <link type = "text / css" rel = "stylesheet" href = "basic.css"> </pre> <p> Как вы можете видеть в приведенном выше примере, вы можете ссылаться на цвета, используя традиционные названия цветов или шестнадцатеричные коды, как описано выше. </p> <p> Использование CSS значительно превосходит использование встроенных тегов FONT и т.п., поскольку он отделяет содержимое вашего сайта от стиля вашего сайта, упрощая процесс создания дополнительных страниц или изменения стиля элементов.Если вы используете внешнюю таблицу стилей, вы можете один раз внести изменения в таблице стилей, и они будут применены ко всему вашему сайту. Если вы решите включить саму таблицу стилей в теги HEAD, как показано выше, вам придется вносить эти изменения на каждой странице вашего сайта. </p> <p> CSS - такой полезный инструмент в арсенале вашего веб-разработчика, вам определенно стоит уделить время, чтобы прочитать о нем больше в нашем разделе «Учебники по CSS».<img src='/800/600/https/st03.kakprosto.ru/images/article/2011/5/16/1_52552ad555fa052552ad556007.jpg' style='float: right;' /> </p> <p> </p> <hr/> <h2><span class="ez-toc-section" id="_WordPress"> Как изменить цвет шрифта в WordPress (Краткое руководство) </span></h2> <p> Недавно созданный веб-сайт WordPress имеет цвета шрифта по умолчанию, которые могут быть непривлекательными или непригодными для этого веб-сайта.Например, если пользователь выделяет текст на вашей странице, цвет текста по умолчанию будет синим, что не работает с некоторыми веб-сайтами. </p> <p> Эта статья, созданная нашей командой из WpDataTables, покажет вам, как изменить цвет шрифта в WordPress с помощью CSS. Один из первых аспектов, которые следует учитывать при создании нового веб-сайта, - это выбрать тему. Как правило, некоторые темы по умолчанию подходят под общий дизайн вашего сайта, поэтому требуются некоторые корректировки. </p> <p> Одна из этих настроек - цвет шрифта.Однако некоторые темы не дают возможности изменить это. Настройщик тем можно использовать, если тема предлагает эту опцию, в противном случае используйте классический редактор или CSS. </p> <p> Самый надежный способ изменить цвет шрифта в WordPress - использовать код, однако это может напугать тех, кто не знаком с кодированием.<img src='/800/600/https/xn----7sbbfb7a7aej.xn--p1ai/technology/content/ur_07_01.jpg' style='float: right;' /> </p> <p> Список ниже содержит ряд вариантов. </p> <p> Примечание. Это работает только для блогов WordPress.org; если вы используете WordPress.com, процесс может немного отличаться, хотя они могут работать.Чтобы использовать все возможности WordPress, подумайте о переходе с WordPress.com на WordPress.org. </p> <h3><span class="ez-toc-section" id="_WordPress-2"> Как изменить цвет шрифта в WordPress </span></h3> <h4><span class="ez-toc-section" id="_1_WordPress"> Метод №1: изменить цвет шрифта в WordPress с помощью настройщика тем </span></h4> <p> Сначала проверьте, поддерживает ли ваша тема изменение цвета шрифта, выполнив следующие действия. </p> <ul> <li> Сначала перейдите в «Внешний вид»> «Настройка» на панели инструментов WordPress, как показано здесь. </li> <li> Здесь для каждой темы будут отображаться различные параметры настройки; выберите тот, который предлагает цветовую палитру для шрифтов.Примечание: если вы не хотите менять тему, а текущая тема не предлагает это изменение, вам следует использовать другие методы. </li> </ul> <ul> <li> Затем перейдите в «Внешний вид»> «Настройка»> «Цвета».<img src='/800/600/https/otvet.imgsmail.ru/download/8b2f3a7b35c038757660d86e6352321c_i-554.jpg' style='float: right;' /> На следующей странице доступны различные параметры в зависимости от вашей темы. </li> <li> На рисунке выше показана тема, которая позволяет вам изменять шрифты для основного текста, ссылок или вторичного текста, за исключением заголовка сайта и заголовков виджетов. </li> <li> Если ваша тема не предлагает параметры настройки, рассмотрите возможность использования других методов.</li> </ul> <h4><span class="ez-toc-section" id="_2_WordPress"> Метод № 2: изменить цвет шрифта в WordPress с помощью классического редактора </span></h4> <p> Классический редактор не позволяет легко изменить цвет шрифта в WordPress, потому что разработчики решили скрыть эту опцию, чтобы изменить ее. Однако это </p> <p> возможно, и вот как это сделать. </p> <ul> <li> Перейдите на панель управления, найдите сообщение, которое хотите отредактировать. </li> <li> Чтобы увидеть опцию изменения цвета шрифта, нажмите кнопку «Переключить панель инструментов», которая находится прямо под кнопками «Добавить медиа» и «Добавить контактную форму».</li> <li> Должны появиться некоторые дополнительные параметры, одна из которых - параметр «Цвет текста» в раскрывающемся списке.<img src='/800/600/https/studfile.net/html/2706/608/html_mJIgJqtDkj.I699/img-SIsph2.png' style='float: right;' /> </li> <li> При нажатии на стрелку вниз должны появиться различные параметры настройки текста шрифта, обычно доступные в других инструментах настройки. Если вам не нравятся варианты цвета (их 39), вы можете использовать собственные цвета. Если вы нажмете кнопку «X» в правом нижнем углу, он изменит цвет на «без цвета», что автоматически изменит цвет на фон.</li> </ul> <ul> <li> Если вам известен шестнадцатеричный код желаемого цвета, вы можете использовать его для изменения цвета. </li> <li> Если вы хотите сделать это без кода, вы можете нажать кнопку «Пользовательский» в нижней части меню «Цвет текста». </li> </ul> <ul> <li> Затем вы должны увидеть квадрат в правом верхнем углу, в диапазоне от красного до черного. Справа также есть радужный прямоугольник, где вы можете выбрать желаемый цвет. </li> <li> Чтобы изменить цвет визуально, щелкните в любом месте радуги; вы также можете изменить оттенок, перетащив в это поле.Цвет черного поля должен измениться на цвет, который вы делаете. Вверху вы увидите предварительный просмотр текста выбранного вами цвета.<img src='/800/600/https/impuls-web.ru/wp-content/uploads/2017/03/obv1.jpg' style='float: right;' /> Затем, когда вы будете готовы, вверху будет сгенерирован автоматический код, который будет полезен, если вы позже захотите сопоставить другие цвета. </li> <li> Если вам нужны определенные оттенки красного, зеленого и синего, введите значения в поля RGB справа. Вы также можете ввести код, который вам нужен для этого цвета. </li> <li> Чтобы сохранить пользовательский цвет, нажмите Enter или кнопку Ok.Для отмены нажмите x или «отмена», чтобы выйти из меню без каких-либо изменений. </li> </ul> <ul> <li> Когда вы выберете правильный цвет, нажмите кнопку «Обновить», чтобы завершить. </li> <li> Чтобы использовать этот пользовательский цвет в будущих проектах, вам нужно повторить этот процесс еще раз, потому что пользовательский цвет не будет сохранен. Если вам нужен этот цвет навсегда, вам нужно обновить CSS темы и добавить в него цвет. </li> </ul> <h4><span class="ez-toc-section" id="_3_WordPress_CSS"> Метод № 3: изменить цвет шрифта в WordPress глобально с помощью CSS </span></h4> <p> CSS - самый эффективный и надежный метод глобального изменения цвета.<img src='/800/600/https/i.imgur.com/k2zN6o0.png' style='float: right;' /> Вот как это сделать. </p> <ul> <li> Перейдите к: Внешний вид> Настройка> Дополнительные CSS. Добавьте код, чтобы изменения вступили в силу. </li> </ul> <ul> <li> Для изменения заголовков с 1 на 6 код будет выглядеть примерно так: </li> </ul> <pre> <em> h2, h3, h4, h5, h5, h6 {</em> <em> цвет: # 1F618D; </em> <em>} </em> </pre> <p> Обратите внимание, что изменение повлияет только на цвет заголовков страниц и сообщений, но не на общий заголовок сообщения. Чтобы внести это изменение, вам потребуется добавить более конкретный код CSS.Например, чтобы изменить заголовок, введите этот код: </p> <pre> <em>. Заголовок записи а {</em> <em> цвет: # 1F618D; </em> <em>} </em> </pre> <p> Чтобы изменить цвет заголовков сообщений, используйте этот код: </p> <pre> <em> h2.entry-title {</em> <em> цвет: # 1F618D; </em> <em>} </em> </pre> <p> Если вы хотите найти определенный цвет на текущей странице в Firefox или Chrome и использовать его, вы можете найти код с помощью инструмента проверки.<img src='/800/600/https/sun9-47.userapi.com/c858120/v858120724/1cb226/ndG3qPb04yw.jpg' style='float: right;' /> </p> <p> Эта таблица цветов поможет вам найти конкретный шестнадцатеричный код для нужного цвета.</p> <h4><span class="ez-toc-section" id="_WordPress-3"> Завершение мыслей о том, как изменить цвет шрифта в WordPress </span></h4> <p> Умение изменять цвет шрифта в WordPress - одна из самых важных вещей для веб-дизайнера. Дизайнер часто часами ищет подходящие решения для своего дизайна и пытается оптимизировать выбор цветов и вариантов дизайна. В результате получится привлекательный веб-сайт, который будет привлекать клики и пользователей. </p> <p> Чем больше внимания уделяется деталям, тем привлекательнее сайт, включая цвет шрифта.В то же время сайт должен хорошо функционировать, а пользовательский интерфейс должен быть безупречным, чтобы дизайн и функциональность были идеально сбалансированы. </p> <p> Если вам понравилось читать эту статью о том, как изменить цвет шрифта в WordPress, вы также должны прочитать это: </p> <h2><span class="ez-toc-section" id="_CSS-8"> Как стилизовать текстовые элементы с помощью шрифта, размера и цвета в CSS </span></h2> <p> <em> Автор выбрал Diversity in Tech Fund, чтобы получить пожертвование в рамках программы Write for DOnations.<img src='/800/600/https/s2.mzstatic.com/us/r30/Purple128/v4/49/26/a2/4926a217-9769-e7ad-bb84-9e2a005d5522/screen696x696.jpeg' style='float: right;' /> </em> </p> <h4><span class="ez-toc-section" id="i-24"> Введение </span></h4> <p> Cascading Style Sheets (CSS) - это язык, разработанный для двух дисциплин: программиста и дизайнера.Работа с текстом в Интернете - один из ярких примеров такой широкой доступности языка. Стилизация текста использует концепции из мира графического дизайна, но изменяет соглашения об именах для более широкой реализации. </p> <p> Из этого туториала Вы узнаете о типографике web <em> </em>, искусстве стилизации текста. Подобно работе с печатным станком, вы разместите свой контент, примените визуальный стиль, чтобы помочь передать контент, и отрегулируете контент для разборчивости и выделения.Цель стилизации текста в Интернете - создать визуальную иерархию по цвету, размеру, форме и пространству. Таким образом, заголовки выделяются из подзаголовков, которые выделяются из абзацев. Эти концепции помогают сделать текст более читаемым и доступным для сканирования. </p> <p> Вы начнете обучение с написания структуры HTML, которая будет состоять из содержимого заполнителя из Cupcake Ipsum.<img src='/800/600/https/dm-dobrov.ru/uploads/images/k/s/_/ks_siniy.jpg' style='float: right;' /> Вы будете работать с разными уровнями заголовков (<code> h2 </code> - <code> h6 </code>) и типами контента (<code> p </code>, <code> strong </code> и <code> em </code>) для применения нескольких свойств CSS, связанных с текстом, включая <code> font-family </code>, <code>. размер шрифта </code> и цвет <code> </code>.Вы также загрузите пользовательские шрифты из Google Fonts, сторонней службы хостинга шрифтов. На каждом шаге этого руководства будет представлена ​​новая концепция или набор свойств, применяемых к контенту. К концу у вас будет веб-страница с индивидуальным стилем. </p> <h3><span class="ez-toc-section" id="i-25"> Предварительные требования </span></h3> <h3><span class="ez-toc-section" id="_HTML-3"> Настройка примера HTML </span></h3> <p> На этом первом этапе вы настроите HTML, который вы будете стилизовать на протяжении всей оставшейся части руководства. Цель HTML в этом руководстве - предоставить вам различные элементы и ситуации для практики стилизации.</p> <p> Откройте файл <code> index.html </code> с помощью текстового редактора, такого как nano, Vim или Visual Studio Code.<img src='/800/600/https/aws1.discourse-cdn.com/business5/uploads/webflow1/original/3X/e/8/e81f4e45236751df2fb6b2566a91d9d1b975f2b6.jpg' style='float: right;' /> Добавьте следующий шаблонный HTML-код, чтобы предоставить файлу необходимый базовый код: </p> <p> index.html </p> <pre> <code> <! Doctype html> <html> <head> <link href = "styles.css" rel = "stylesheet" /> </head> <body> </body> </html> </code> </pre> <p> Элемент <code> <link /> </code> уже загружен в стилях <code>.css </code>, поэтому не забудьте подготовить и этот файл. </p> <p> Далее вам нужно стилизовать контент. При создании текстовых стилей часто проекту нужны стили до того, как контент будет готов. В мире графического дизайна для этой цели используется заполнитель. Дизайнеры часто используют латинский текст в качестве заполнителя, известный как Lorem Ipsum. Есть много современных версий этого текста-заполнителя, в том числе Cupcake Ipsum. Это будет справочная копия, используемая во всем HTML. </p> <p> Для начала, HTML должен отображать <em> иерархию </em>, четкое различие и порядок содержания.В HTML это делается с помощью тегов заголовков: от <code> <h2> </h2></code>, самого верхнего заголовка, до <code> <h6> </h6></code>, самого нижнего заголовка.<img src='/800/600/https/lh6.googleusercontent.com/proxy/tVZFf6l3frHhGgAViiZnIsTL_5Y_M4B_xyvlfBIkyKvOP9y3vOq4T9SaBLTfZiLsw_eHsLGz93nHkrT1RYsq2xhC_6SbMMEfvXoz9nkmbPtyY_egmcLuqRexncw6=w1200-h630-p-k-no-nu' style='float: right;' /> Стандартные стили браузера для заголовков определяют визуальную иерархию только по размеру, при этом размер шрифта <code> элемента <code> <h2> </h2></code> по умолчанию </code> значительно больше, чем у <code> <h6> </h6> </code>. В этом уроке вы будете использовать другие принципы дизайна, такие как цвет и пространство, чтобы обеспечить визуальную иерархию контента.</p> <p> Чтобы создать этот иерархический контент, вы должны написать различные заголовки и заполнить каждый заголовок несколькими словами из Cupcake Ipsum в тегах <code> <body> </code> в <code> index.html </code>. Вы будете следовать правильной семантике </em> HTML </em>, которая предоставляет браузеру точное значение. </p> <p> Чтобы иметь правильную семантику HTML: </p> <ul> <li> На странице будет только один элемент <code> <h2> </h2> </code>. Обычно это будет заголовок. </li> <li> Последующие уровни заголовков будут только на один меньший, равный или любой более высокий уровень.Например, единственный уровень заголовка, следующий после <code> <h4> </h4></code>, будет либо <code> <h5> </h5></code>, другой <code> <h4> </h4></code>, либо <code> <h3> </h3></code>, но никогда не будет <code> <h5> </h5></code> или <code>.<img src='/800/600/https/i1.wp.com/tseggleston.com/wp-content/uploads/2016/05/colors-4.jpg' style='float: right;' /> <h6> </h6> </code>. </li> </ul> <p> Используя правила семантики заголовков, добавьте следующий выделенный HTML-код в <code> index.html </code>: </p> <p> index.html </p> <pre> <code> ... <body> <h2><span class="ez-toc-section" id="i-26"> Чупа чупс с сахарной сливой, шоколадный кекс, пончик </span></h2> <h3><span class="ez-toc-section" id="i-27"> Макарун с овсяным пирогом "Тутси" </span></h3> <h3><span class="ez-toc-section" id="i-28"> Датский пончик из желейных бобов тирамису </span></h3> <h4><span class="ez-toc-section" id="i-29"> Зефир из теста с лимонными каплями </span></h4> <h4><span class="ez-toc-section" id="i-30"> Пудинг для яблочного пирога </span></h4> <h5><span class="ez-toc-section" id="i-31"> Пряничный датский </span></h5> <h5><span class="ez-toc-section" id="i-32"> Морковный пирог с леденцами мармеладные мишки </span></h5> <h6><span class="ez-toc-section" id="i-33"> Лакричная конфета, сладкая вата, лакрица </span></h6> </body> ... </code> </pre> <p> Затем вам понадобится контент, чтобы заполнить пространство между заголовками. Это будут абзацы текста, обозначенные элементом <code> <p> </code> для хранения каждого абзаца. Снова используйте Cupcake Ipsum, чтобы сгенерировать этот контент и разместить абзацы по всей странице. </p> <p> Добавьте выделенные части следующего блока кода. В этом руководстве для блоков кода будет использоваться следующий формат: </p> <p> index.<img src='/800/600/https/www.pvsm.ru/images/2018/07/24/kak-bystro-prototipirovat-prilojeniya-s-CSS-setkoi-i-CSS-peremennymi-10.png' style='float: right;' /> html </p> <pre> <code> ... <body> <h2><span class="ez-toc-section" id="i-34"> Чупа чупс с сахарной сливой, шоколадный кекс, пончик </span></h2> <h3><span class="ez-toc-section" id="i-35"> Макарун с овсяным пирогом "Тутси" </span></h3> <p> Брауни из мармелада.Десертный пирог с рулетами из мармеладных конфет с сахарной ватой. Сахарная слива Обожаю кексы. Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. </p> <h3><span class="ez-toc-section" id="i-36"> Датский пончик из желейных бобов тирамису </span></h3> <h4><span class="ez-toc-section" id="i-37"> Зефир из теста с лимонными каплями </span></h4> <p> Обожаю зефирные конфеты. Кунжутные булочки по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon кекс датский ролл шоколадный батончик.Макаруны Я люблю кексы, леденцы, сладкие роллы, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. </p> <h4><span class="ez-toc-section" id="i-38"> Пудинг для яблочного пирога </span></h4> <p> Пирог с яблочным пирогом Я обожаю бисквит из мармелада, я люблю. Шоколадный торт, тирамису, суфле, порошок, карамель, я люблю мороженое.<img src='/800/600/https/i0.wp.com/tseggleston.com/wp-content/uploads/2016/05/colors-2.jpg' style='float: right;' /> Драже из солодки ириски в желейных бобах. Кунжутное суфле из леденцов. Бисквитный пончик, медвежий коготь, мармелад, халва, печенье, миндальное печенье, лимонные капли. Тутси ролл драже печенье конфеты суфле драже кекс лакрица.</p> <h5><span class="ez-toc-section" id="i-39"> Пряничный датский </span></h5> <p> Порошок драже с кунжутом, леденцы, леденцы, желе. Халва имбирный чизкейк вафельный. Вафельный булочек Я люблю Я люблю. Торт ириски я люблю. Желейные бобы из сахарной ваты. Я люблю ириски. Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. </p> <h5><span class="ez-toc-section" id="i-40"> Морковный пирог с леденцами мармеладные мишки </span></h5> <p> Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, медвежий коготь.</p> <h6><span class="ez-toc-section" id="i-41"> Лакричная конфета, сладкая вата, лакрица </span></h6> <p> Кекс с пончиками сверху чупа чупс халва чупа чупс. Макарун гуди ролл кекс карамель шоколадный кекс имбирный пряник желе-о. Тирамису Я люблю маршмеллоу-желе-о Я люблю мармелад, конфеты мармеладные мишки. </p> </body> .<img src='/800/600/https/1.bp.blogspot.com/-Jhm21GKLo90/XGOBwFXZ3OI/AAAAAAAAAF0/fERtN7s-8CE7VT4KhSaXfEuk36b4ZKH8QCLcBGAs/s1600/hasilcss.png' style='float: right;' /> .. </code> </pre> <p> Наконец, добавьте <code> <strong> </code>, <code> <em> </code> и комбинацию двух элементов вместе. Это предоставит примеры фраз, которые подчеркнуты в содержании: </p> Индекс <p>.html </p> <pre> <code> ... <h3><span class="ez-toc-section" id="i-42"> Макарун с овсяным пирогом "Тутси" </span></h3> <p> Брауни из мармелада. Десертный пирог с рулетами из мармеладных конфет с сахарной ватой. Сахарная слива <strong> Я люблю пирожные </strong>. Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. </p> <h3><span class="ez-toc-section" id="i-43"> Датский пончик из желейных бобов тирамису </span></h3> <h4><span class="ez-toc-section" id="i-44"> Зефир из теста с лимонными каплями </span></h4> <p> Обожаю зефирные конфеты.<em> Кунжутные </em> булочки по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon кекс датский ролл шоколадный батончик. Макаруны Я люблю кексы, леденцы, сладкие роллы, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек.<img src='/800/600/https/codersguidebook.com/how-to-build-a-website/images/display-example-code-on-your-website-using-highlight.png' style='float: right;' /> </p> <h4><span class="ez-toc-section" id="i-45"> Пудинг для яблочного пирога </span></h4> <p> Пирог с яблочным пирогом Я обожаю бисквит из мармелада, я люблю. Шоколадный торт тирамису <strong> суфле порошок карамель </strong> Я люблю мороженое.Драже из солодки ириски в желейных бобах. Кунжутное суфле из леденцов. Бисквитный пончик, медвежий коготь, мармелад, халва, печенье, миндальное печенье, лимонные капли. Тутси ролл драже печенье конфеты суфле драже кекс лакрица. </p> <h5><span class="ez-toc-section" id="i-46"> Пряничный датский </span></h5> <p> Порошок драже с кунжутом, леденцы, леденцы, желе. Халва имбирный чизкейк вафельный. <strong> <em> Вафельный рулетик </em> </strong> Я люблю, я люблю. Торт ириски я люблю. Желейные бобы из сахарной ваты. Я люблю ириски.Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. </p> <h5><span class="ez-toc-section" id="i-47"> Морковный пирог с леденцами мармеладные мишки </span></h5> <p> Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, кекс, медвежий коготь. </p> <h6><span class="ez-toc-section" id="i-48"> Лакричная конфета, сладкая вата, лакрица </span></h6> <p> Кекс с начинкой для пончиков <em> <strong> чупа-чупс халва </strong> </em> чупа-чупс.<img src='/800/600/http/images.myshared.ru/5/338838/slide_32.jpg' style='float: right;' /> Макарун гуди ролл кекс карамель шоколадный кекс имбирный пряник желе-о.Тирамису Я люблю маршмеллоу-желе-о Я люблю мармелад, конфеты мармеладные мишки. </p> ... </code> </pre> <p> Теперь, когда у вас есть HTML-код, сохраните <code> index.html </code> и откройте его в своем браузере, чтобы увидеть, как страница выглядит со стилями браузера по умолчанию: </p> <p> </p> <p> Размеры текста варьируются по всем элементам, при этом стили по умолчанию <code> <h5> </h5></code> и <code> <h6> </h6> </code> меньше, чем текст <code> <p> </code>. </p> <p> На этом этапе вы настраиваете HTML-контент, который будет стилизован на протяжении всей оставшейся части учебника.Затем вы будете работать со свойством </code> font-family <code>, узнать о стеке <em> шрифтов </em>, списке шрифтов, которые может использовать браузер, и применить шрифты к различным элементам. </p> <h3><span class="ez-toc-section" id="i-49"> Использование семейства шрифтов </span></h3><code> Свойство </code> </h3> <p> Затем вы будете работать с CSS-свойством </code> font-family </code> и загрузить внешний файл шрифта из службы Google Fonts.<img src='/800/600/http/900igr.net/up/datas/112408/008.jpg' style='float: right;' /> Имя этого свойства происходит от термина типографики, описывающего набор шрифтов и варианты этого шрифта, включая полужирные и курсивные версии.У шрифта может быть множество из этих вариаций, но все они могут быть частью одного и того же семейства шрифтов <code> </code>, с теми вариациями, которые называются свойствами <code> font-weight </code> и <code> font-style </code>. </p> <p> Чтобы начать работу с семейством шрифтов <code> </code>, полезно разобраться в деталях его вариантов значений. Значением свойства </code> font-family </code> является список шрифтов, называемый стеком шрифтов. Стек шрифтов работает как резервная система. Рассмотрим следующее значение свойства </code> font-family </code>: </p> <pre> <code> семейство шрифтов: "Helvetica Neue", Helvetica, Arial, sans-serif; </code> </pre> <p> Браузер сначала определит, доступна ли Helvetica Neue для использования, либо как шрифт, установленный на компьютере, либо как шрифт, предоставленный веб-сайтом.Если браузер не находит шрифт Helvetica Neue, он переходит вниз по списку к Helvetica, а затем к Arial.<img src='/800/600/https/www.smallrevolution.com/wp-content/uploads/2014/04/color-chart.jpg' style='float: right;' /> Если браузеру не удается найти какой-либо из этих шрифтов, то последний шрифт в списке, <code> sans-serif </code>, будет использовать то, что браузер установил в качестве шрифта по умолчанию для шрифта стиля <code> sans-serif </code>. </p> <p> <strong> Примечание. </strong> Стеки шрифтов лучше всего работают не тогда, когда шрифт не найден, а когда конкретный символ не найден в шрифте. Это особенно необходимо для случаев использования поддержки нескольких языков, когда один шрифт может не иметь набора символов, который покрывает потребности всех языков.Стек шрифтов может содержать резервный шрифт, который предоставляет специальные символы и визуальное восприятие, аналогичное основному шрифту в стеке. <br/> </p> <p> Создайте файл с именем <code> styles.css </code> в том же каталоге, что и <code> index.html </code>. Откройте его в текстовом редакторе и добавьте шрифт по умолчанию для страницы: </p> <p> styles.css </p> <pre> <code> body { семейство шрифтов: "Avenir Next", Calibri, Verdana, sans-serif; } </code> </pre> <p> В этом коде вы начинаете с селектора типа <code> body </code> со свойством </code> font-family </code>.<img src='/800/600/https/howtech.tv/wp-content/images/002811/1.jpg' style='float: right;' /> Затем для стека шрифтов вы начинаете с <code> «Avenir Next» </code>, который будет доступен в браузерах iOS и macOS. <code> Avenir Next </code> заключен в кавычки, потому что название шрифта состоит из двух слов. Следующий шрифт - <code> Calibri </code> для браузеров Windows. Обязательно ставьте запятую между каждым объявлением шрифта. Чтобы обеспечить более общий запасной вариант шрифта, вы затем используете <code> Verdana </code>, который был широко доступен на компьютерах с начала 2000-х годов. Наконец, поскольку все эти шрифты классифицируются как шрифты без засечек, вы добавляете браузер по умолчанию <code> sans-serif </code> в качестве последней опции шрифта в стеке шрифтов.</p> <p> Сохраните <code> styles.css </code>, затем откройте <code> index.html </code> в своем браузере. Вы найдете новый шрифт вместо шрифта браузера по умолчанию для содержимого. Если вы используете операционную систему Apple, Avenir Next будет отображаться в браузере. Если вы работаете в Windows, вместо этого будет отображаться Calibri.<img src='/800/600/https/189131.selcdn.ru/leonardo/uploadsForSiteId/200182/texteditor/5a7f540f-9113-49b1-98ff-e0e0d9878f7b.png' style='float: right;' /> На следующем изображении показано, как этот стек шрифтов выглядит в MacOS: </p> <p> </p> <p> В этом разделе вы использовали свойство </code> font-family </code>, чтобы настроить стек шрифтов по умолчанию для веб-страницы.Вы также настраиваете свойство </code> font-family </code>, которое применяется конкретно к текстовому содержимому заголовка. В следующем разделе вы будете использовать службу Google Fonts, чтобы загрузить файл пользовательского шрифта и использовать его на странице. </p> <h3><span class="ez-toc-section" id="_Google_Fonts"> Загрузка пользовательских шрифтов с помощью Google Fonts </span></h3> <p> Теперь, когда вы использовали свойство </code> семейства шрифтов <code> со шрифтами, уже установленными на вашем компьютере, пришло время загрузить шрифты из внешней службы. Это расширит диапазон шрифтов, которые вы можете использовать для стилизации текста.В этом разделе вы будете работать со службой Google Fonts, чтобы загрузить и использовать шрифт на веб-странице. </p> <p> Браузеры могут загружать любой шрифт, если для этого браузера предоставляется соответствующий формат файла шрифта.<img src='/800/600/https/1.bp.blogspot.com/-M92ncepi9Ho/WIs0fBOF4nI/AAAAAAAAAsk/jrdfnXgU9W4F34AhtsT48iLCwPagygO0gCLcB/s1600/9.png' style='float: right;' /> Служба шрифтов, такая как Google Fonts, облегчает работу по определению и размещению шрифтов, предоставляя файлы CSS и шрифтов, необходимые для загрузки шрифта. Есть много других сервисов, таких как Google Fonts, но Google Fonts содержит лицензионные шрифты и шрифты с открытым исходным кодом и предлагает услугу бесплатно.</p> <p> Для начала откройте в браузере <code> fonts.google.com </code>. </p> <p> В Google Fonts вы можете выбирать из множества различных шрифтов. В этом руководстве будут использоваться два: Public Sans и Quicksand. </p> <p> В поле поиска Google Fonts найдите <code> Public Sans </code>. Когда карточка шрифта появляется из результатов поиска, отображается предварительный просмотр шрифта. Щелкните карточку, чтобы перейти на страницу шрифта: </p> <p> </p> <p> На странице шрифтов Public Sans будут перечислены все варианты шрифта.Они известны как <em> веса </em>, которые находятся в диапазоне от 100 до 900. Для целей этого руководства найдите стили <strong> Regular </strong> (400) и <strong> Bold </strong> (700) и нажмите кнопку <strong> + Select this style </strong> next к каждому варианту стиля, а также их курсиву.<img src='/800/600/https/www.programering.com/images/remote/ZnJvbT1pdGV5ZSZ1cmw9Y0djcTVDTjNBak5pTlRZNUlqTjBFV0w0VTJNaDFTWmhaMk10QVRPM01UTHhZbU5qVlRPamx6TDVJRE96OENNd0VETXZRbmJsMUdhakZHZDBGMkxrRjJic0JYZHYwMmJqNVNaNVZHZHA1aU1zUjJMdm9EYzBSSGE.jpg' style='float: right;' /> </p> <p> Как только вы выберете первый стиль, появится выбранный семейный инструмент. Этот инструмент предоставит вам HTML и CSS, необходимые для использования этих шрифтов: </p> <p> </p> <p> Выберите метод <code> <link /> </code>, чтобы загрузить шрифты в браузер и скопировать предоставленный HTML.Откройте <code> index.html </code> и добавьте код в элемент <code> <head> </code> после <code> <link /> </code>, загружающего <code> styles.css </code>. Не закрывайте Google Fonts, так как вы вернетесь к нему еще пару раз: </p> <p> index.html </p> <pre> <code> ... <head> <link href = "styles.css" rel = "stylesheet" /> <link href = "https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel = "stylesheet"> </head> ... </code> </pre> <p> На этом этапе повторная загрузка <code> index.html </code> в вашем браузере не приведет к визуальным изменениям. Браузер загружает шрифт, но его необходимо добавить в стек шрифтов, чтобы применить шрифт к содержимому.<img src='/800/600/http/ilchakov.net.ua/prof/photo/photo2515.jpg' style='float: right;' /> </p> <p> Вернитесь в Google Fonts, чтобы найти правило CSS, которое загружает Public Sans. Google Fonts предоставляет набор шрифтов Public Sans и стандартный шрифт браузера <code> sans-serif </code> с семейством шрифтов <code>: Public Sans, sans-serif; </code>. Поскольку у вас уже есть стек шрифтов с резервными шрифтами, все, что вам нужно взять из примера Google Fonts, - это имя для ссылки на Public Sans.</p> <p> Используя существующий стек шрифтов в файле <code> styles.css </code>, замените <code> Avenir Next </code> и <code> Calibri </code> на <code> Public Sans </code>: </p> <p> styles.css </p> <pre> <code> body { семейство шрифтов: "Public Sans", Verdana, sans-serif; } </code> </pre> <p> Теперь, когда объявлен базовый стек шрифтов, все шрифты на странице теперь являются Public Sans. </p> <p> Одна из распространенных дизайнерских практик, позволяющих привлечь больше внимания к заголовкам, - это использовать для заголовков другой шрифт, чем для основного текста.Чтобы применить это к своему собственному HTML, вернитесь в Google Fonts и выполните поиск «Quicksand».<img src='/800/600/http/luksucheba.ucoz.ru/_pu/0/62993052.gif' style='float: right;' /> Это будет заголовок или шрифт <em> display </em> для элементов с <code> <h2> </h2> </code> по <code> <h6> </h6> </code> на странице. </p> <p> После того, как вы нашли Quicksand, выберите карточку шрифта и добавьте <strong> полужирный шрифт </strong> (600) и <strong> полужирный, </strong> (700) к выбранным шрифтам вместе с Public Sans. Google Fonts предоставит новый URL-адрес для загрузки всех выбранных шрифтов и вариантов.Замените предыдущее значение <code> href </code> на новую ссылку в файле <code> index.html </code>: </p> <p> index.html </p> <pre> <code> ... <head> <link href = "styles.css" rel = "stylesheet" /> <link href = "https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@600;700&display=swap" rel = "таблица стилей ">" rel = "таблица стилей"> </head> ... </code> </pre> <p> Теперь, когда Quicksand настроен для загрузки в браузере, вам нужно применить его к тегам заголовков.Вы добьетесь этого, добавив список селекторов CSS, разделенных запятыми, который называется групповым селектором <em> </em>, в файл <code> styles.<img src='/800/600/https/cf2.ppt-online.org/files2/slide/j/jAIZwE3HyadsMOkiJvQLTUCn24tczNBfW9m56e/slide-9.jpg' style='float: right;' /> css </code>. В этом случае используйте стек шрифтов, предоставленный Google Fonts с Quicksand, а затем используйте шрифт браузера по умолчанию <code> sans-serif </code>: </p>. <p> styles.css </p> <pre> <code> ... h2, h3, h4, h5, h5, h6 { семейство шрифтов: «Зыбучие пески», без засечек; } </code> </pre> <p> Сохраните изменения в файле <code> styles.css </code> и вернитесь в браузер, чтобы перезагрузить индекс <code>.html </code>. Не стесняйтесь закрыть Google Fonts на этом этапе. Когда браузер загрузится, вы увидите, что отображаются два шрифта. Теперь Quicksand присутствует во всех заголовках, а Public Sans - во всем остальном содержимом, включая содержимое, выделенное жирным шрифтом и курсивом. </p> <p> </p> <p> В этом разделе вы загрузили два шрифта из службы Google Fonts и добавили эти шрифты к существующим стекам шрифтов. В следующем разделе мы рассмотрим использование вариантов шрифта, чтобы указать, когда и как применять полужирный и курсивный шрифт к шрифту.</p> <h3><span class="ez-toc-section" id="i-50"> Использование </span></h3><code> font-weight </code> и <code> font-style </code> Properties </h3> <p> В этом разделе вы будете использовать свойства <code> font-weight </code> и <code> font-style </code>, чтобы настроить внешний вид шрифта.<img src='/800/600/https/www.templatemonster.com/help/wp-content/uploads/2015/06/How_to_change_the_placeholder_text_color_of_an_input-1.jpg' style='float: right;' /> Есть много причин использовать эти варианты, например, чтобы подчеркнуть содержание как часть руководства по стилю цитирования и обеспечить визуальные вариации. </p> <p> Теперь, когда вы загружаете пользовательские шрифты из Google Fonts, вы можете приступить к точной настройке характеристик текста.Начиная со свойства <code> font-weight </code>, вы можете изменить толщину или тонкость отображения шрифта. Свойство <code> font-weight </code> имеет два общих значения: <code> normal </code> и <code> bold </code>. Нормальное </code> значение <code> - это значение по умолчанию <code> font-weight </code> для большей части текста в браузере. Значение </code> полужирного шрифта </code> по умолчанию <code> font-weight </code> для заголовков и <code> <strong> </code> элементов. Но для этого урока вам нужно будет использовать числовые значения вместо имени <code> нормальных </code> и <code> жирных </code> значений.</p> <p> Числовое значение <code> font-weight </code> зависит от шрифта, который вы загружаете.<img src='/800/600/http/cdn01.ru/files/users/images/3e/fe/3efe274f068f469f60718be9e13fe57e.jpg' style='float: right;' /> Когда вы добавляли шрифт Public Sans из Google Fonts, вы выбрали толщину Обычный (400) и Полужирный (700). Цифры в скобках совпадают со значениями, необходимыми для ссылки и загрузки этого шрифта. Кроме того, значение </code> font-weight </code> для <code> 400 </code> является числовым эквивалентом <code> нормального </code>, например, <code> 700 </code> является числовым эквивалентом <code> жирным шрифтом </code>.Текст, использующий Public Sans, то есть все, кроме заголовков, автоматически использует эти веса. </p> <p> В качестве альтернативы выбор шрифтов Quicksand включал полужирный (600) и полужирный (700) шрифт. Значение <code> 600 </code> не имеет числового эквивалента и должно быть определено с использованием числового значения. </p> <p> Вы начнете с установки <code> начертания шрифта </code> для всех заголовков полужирным шрифтом <code> 600 </code> Quicksand. В файле <code> styles.css </code> найдите селектор групп со всеми значениями заголовков и добавьте шрифт <code> font-weight: 600; Объявление </code> в блок селектора: </p> <p> стилей.<img src='/800/600/https/www.templatemonster.com/help/wp-content/uploads/2016/01/How-to-add-a-custom-color-on-an-item-hover-using-CSS2.jpg' style='float: right;' /> css </p> <pre> <code> ... h2, h3, h4, h5, h5, h6 { семейство шрифтов: «Зыбучие пески», без засечек; font-weight: 600; } </code> </pre> <p> После внесения этого изменения сохраните <code> styles.css </code> и повторно загрузите <code> index.html </code> в своем браузере. Вы увидите небольшое истончение заголовков по мере их изменения со значения <code> 700 </code> для Quicksand на значение <code> 600 </code>. </p> <p> Теперь, когда вы настроили все элементы заголовка для использования веса Quicksand <code> 600 </code>, все еще есть места для использования варианта шрифта <code> 700 </code>.Для начала создайте селектор типа <code> h4 </code> в файле <code> styles.css </code> и добавьте <code> font-weight: 700; </code> в блоке селектора: </p> <p> styles.css </p> <pre> <code> ... h4 { font-weight: 700; } </code> </pre> <p> Это изменение приведет к тому, что заголовок <code> h4 </code> будет немного выделяться, поскольку теперь он более жирный, чем другие заголовки. По мере продвижения руководства вы будете вносить дополнительные изменения в стили <code> h4 </code>, чтобы они выделялись, но при этом сохраняли свой иерархический порядок.<img src='/800/600/https/i.gyazo.com/acd1a73c94c2016ded37a5dfd629feb0.png' style='float: right;' /> </p> <p> Сохраните изменения в <code> styles.css </code>, а затем создайте новый селектор, нацеленный на текст, заключенный в теги <code> <em> </code> и <code> <strong> </code>. В случае стилей, написанных до сих пор, этот тип текста получит вариант Public Sans жирным курсивом. Вместо этого установите стили для использования стека шрифтов Quicksand. </p> <p> Так как HTML, чтобы получить жирный курсив, это <code> <strong><em>...</em> </strong> </code> и <code> <em> <strong>... </strong> </em> </code>, вам нужно будет создать селектор групп комбинаторов в файле <code> styles.css </code>, а затем применить свойство </code> font-family <code> с <code> "Quicksand", sans-serif </code> как значение: </p> <p> styles.css </p> <pre> <code> ... сильный em, em strong { семейство шрифтов: «Зыбучие пески», без засечек; } </code> </pre> <p> После внесения этого дополнения в файл <code> styles.css </code> сохраните его, а затем перезагрузите <code> index.html </code> в своем браузере.Текст, который был выделен полужирным курсивом, теперь использует Quicksand и выделен курсивом, хотя Google Fonts не предоставляет курсивную версию шрифта.<img src='/800/600/https/thepresentation.ru/img/thumbs/4e7fcdd2ad0805d69c4d038f9adfa3b0-800x.jpg' style='float: right;' /> Это называется <em> faux italic </em>, когда браузер понимает, что это содержимое должно быть курсивом по умолчанию, но, поскольку вариант курсива не определен, вместо этого он искусственно наклоняет текст. </p> <p> Свойство для обработки того, выделен ли текст курсивом или нет, - <code> font-style </code>. Варианты значений для свойства </code> стиля шрифта <code>: <code> нормальный </code> и <code> курсив </code>.Вместо использования имитационного полужирного шрифта измените стили для этого селектора, чтобы он не выделялся курсивом. Добавьте к селектору группы <code> strong em, em strong </code> в файле <code> styles.css </code> свойство <code> font-style </code> со значением <code> normal </code>: </p> <p> styles.css </p> <pre> <code> ... сильный em, em strong { семейство шрифтов: «Зыбучие пески», без засечек; стиль шрифта: нормальный; } </code> </pre> <p> Это изменит текст, выделенный жирным курсивом, на полужирный шрифт Quicksand.</p> <p> Сохраните изменения в <code> styles.<img src='/800/600/https/avatars.mds.yandex.net/get-zen_doc/1925593/pub_5ce2ba2cbaeb6600affc7ce9_5ce2bcbaea066d00c401e756/scale_1200' style='float: right;' /> css </code> и перезагрузите <code> index.html </code> в своем браузере, чтобы увидеть изменения: </p> <p> </p> <p> В этом разделе вы использовали свойства <code> font-weight </code> и <code> font-style </code>, чтобы применить вариации шрифта Quicksand, загруженного из Google Fonts. Затем вы воспользуетесь свойством <code> font-size </code>, чтобы создать более крупный, более разборчивый текст с более четкой иерархией среди заголовков. </p> <h3><span class="ez-toc-section" id="i-51"> Использование </span></h3><code> font-size </code> Свойство </h3> <p> В этом разделе вы воспользуетесь свойством <code> font-size </code>, чтобы применить различные размеры шрифта к содержимому на всей странице.Размер текста - важный фактор при передаче информации. Текст хорошего размера легче читать, а заголовки подходящего размера помогают передать иерархию для более легкого беглого просмотра информации. Вы измените размер шрифта <code> на </code> всех элементов, которые вы создали в <code> index.html </code>, чтобы сделать документ более читабельным.<img src='/800/600/https/sun9-58.userapi.com/n02TVSyt7nD8kyKpqTHPvt0yXDH8C3xZtYeaxQ/q8pGLd6i2X4.jpg' style='float: right;' /> </p> <p> Начните с установки размера шрифта </code> по умолчанию </code> на элементе <code> body </code>. Браузер по умолчанию <code> font-size </code> составляет <code> 16px </code>, но может быть полезно для большей разборчивости для многих шрифтов, если они будут немного больше.Откройте файл <code> styles.css </code> и добавьте размер шрифта <code>: 18px; </code> к корпусу <code> </code> элемент: </p> <p> styles.css </p> <pre> <code> body { семейство шрифтов: "Public Sans", Verdana, sans-serif; размер шрифта: 18 пикселей; } ... </code> </pre> <p> Откройте <code> index.html </code> в браузере или обновите страницу. Изменение размера шрифта <code> </code> в элементе <code> body </code> изменило все шрифты на странице, увеличив их размер. </p> <p> Размеры шрифта по умолчанию для элементов имеют относительный размер на основе родительского элемента, в данном случае элемента <code> <body> </code>, с использованием процентного значения для размера шрифта.Использование формулы <code> (цель / база) * 100% </code> даст вам процентное значение, которое относительно базового размера шрифта, установленного для элемента <code> <body> </code>.<img src='/800/600/http/900igr.net/up/datas/251883/015.jpg' style='float: right;' /> </p> <p> Чтобы попробовать эту формулу, вы будете работать с установкой целевого <code> font-size </code> для элемента <code> <h2> </h2> </code>, равного <code> 45px </code>. Используя формулу, целевой размер составляет <code> 45 пикселей </code>, а базовый размер - <code> 18 пикселей </code>, поэтому формула для этого будет <code> (45/18) * 100% </code>, что дает <code> 250% </code>.Это означает, что предполагаемый размер для <code> <h2> </h2> </code> будет в 2,5 раза больше размера базового <code> font-size </code>. </p> <p> Верните вам файл <code> styles.css </code> и добавьте селектор элементов для <code> h2 </code> и добавьте размер шрифта <code>: 250%; </code> свойство и значение для установки размера шрифта: </p> <p> styles.css </p> <pre> <code> ... h2 { размер шрифта: 250%; } ... </code> </pre> <p> Теперь, когда вы установили относительный размер шрифта для элемента <code> <h2> </h2> </code>, примените ту же формулу к остальным элементам заголовка.Для каждого из них вы можете выбрать округление или сохранение полных десятичных значений.<img src='/800/600/https/3.bp.blogspot.com/-FFzU0Zxsi2k/UW7YoE5wvEI/AAAAAAAAA3U/m3c9Xb4zCmc/s1600/html+color+Codes+-+mytrickytricks.blogspot.com.jpg' style='float: right;' /> Также может быть полезно оставлять комментарии, объясняющие целевой размер или даже формулу. </p> <p> Откройте файл <code> styles.css </code> и начните с добавления комментария после свойства <code> h2 </code> <code> font-size </code>, объясняющего визуализированный размер. Затем для каждого заголовка примените формулу так, чтобы <code> h3 </code> имел размер шрифта <code> </code>, эквивалентный <code> 36px </code>, <code> h4 </code> равнялся <code> 32px </code>, <code> h5 </code> to <code> 26px </code>, <code> h5 </code> to <code> 22px. </code> и, наконец, <code> h6 </code> до базового размера <code> 18px </code>.Размер по умолчанию для элемента <code> <h6> </h6> </code> меньше, чем базовый размер, поэтому установка его на <code> 100% </code> гарантирует, что он не опустится ниже базового значения: </p> <p> styles.css </p> <pre> <code> ... h2 { размер шрифта: 250%; / * 45 пикселей * / } h3 { размер шрифта: 200%; / * 36 пикселей * / } h4 { размер шрифта: 177,78%; / * 32 пикселя * / } h5 { размер шрифта: 162,5%; / * 26 пикселей * / } h5 { размер шрифта: 122%; / * 22px * / } h6 { размер шрифта: 100%; / * 18 пикселей * / } .<img src='/800/600/https/fsd.videouroki.net/html/2016/12/16/v_5853e220853ac/img20.jpg' style='float: right;' /> .. </code> </pre> <p> Вернитесь в браузер и обновите индекс <code>.html </code>. Все заголовки увеличат свой размер шрифта <code> до </code> относительно размера шрифта </code> по умолчанию </code>, установленного для элемента <code> <body> </code>. На следующем изображении показано, как это изменение будет отображаться в браузере: </p> <p> </p> <p> На этом шаге вы использовали свойство <code> font-size </code>, чтобы изменить размер текста на веб-странице. Вы использовали концепцию дизайна размера, чтобы придать содержанию иерархию помимо стилей браузера по умолчанию. На следующем шаге вы продвинетесь к дизайну контента с помощью свойства <code> color </code>.</p> <h3><span class="ez-toc-section" id="i-52"> Использование свойства </span></h3><code> color </code> для различения текста </h3> <p> Основное внимание в следующем разделе уделяется свойству <code> color </code> CSS, использующему цвет для определения порядка и добавления смысла к содержимому. Цвет является одним из наиболее распространенных дизайнерских соображений, в частности, при определении различного значения текста.<img src='/800/600/https/i2.wp.com/tradebenefit.ru/artimg/20140630142908614.jpg' style='float: right;' /> В этом разделе вы будете использовать <em> именованных цветов </em> для установки цвета текста. Именованные цвета - это набор предопределенных цветов, который вырос с годами; они соответствуют другим значениям веб-цветов, например, шестнадцатеричным цветовым кодам.В этом разделе будет использоваться список именованных цветов, который можно найти на странице Википедии о веб-цветах. Вы можете оставить страницу веб-цветов Википедии открытой в своем браузере для справки. </p> <p> Как и в случае с размером шрифта <code> </code>, вы собираетесь установить цвет по умолчанию для всего документа. Это повлияет на весь контент на странице, поскольку цвет <code> </code> является унаследованным значением для большинства элементов. Важно помнить о цветовом контрасте, поскольку он способствует разборчивости, особенно когда речь идет о том, чтобы сделать Интернет доступным для всех уровней зрения.Поскольку цвет фона <code> </code> останется белым по умолчанию, использование жирных, более темных цветов является хорошим ориентиром.<img src='/800/600/https/www.gimpart.org/wp-content/uploads/2014/05/7_1.png' style='float: right;' /> Если вы хотите узнать больше о дизайне с доступным цветовым контрастом, посмотрите эту короткую серию видео по этой теме. </p> <p> Чтобы начать использовать <code> color </code>, вернитесь к файлу <code> styles.css </code> в текстовом редакторе. Как и в случае с разделом </code> с размером шрифта <code>, найдите селектор <code> body </code> и добавьте свойство <code> color </code>. Цвет текста по умолчанию в большинстве браузеров - черный.Для доступного цветового контраста важно, чтобы основной цвет оставался темным на светлом фоне. Используйте именованный цвет <code> DarkSlateGray </code>, который здесь только верблюжий для удобочитаемости, но при желании может быть полностью строчным: </p> <p> styles.css </p> <pre> <code> body { семейство шрифтов: "Public Sans", Verdana, sans-serif; размер шрифта: 18 пикселей; цвет: DarkSlateGray; } ... </code> </pre> <p> Сохраните файл <code> styles.css </code> и обновите <code> index.html </code> в браузере.Цвет содержимого изменится с черного на темно-сине-зеленый: </p> <p> </p> <p> Теперь, когда основной цвет установлен, вы можете начать использовать другие цвета, чтобы обеспечить более визуальную иерархию.<img src='/800/600/https/media.geeksforgeeks.org/wp-content/uploads/20190817203223/inbuilt-class.png' style='float: right;' /> Начните с селектора <code> h2 </code> в файле <code> styles.css </code> и добавьте свойство <code> color </code> со значением <code> Indigo </code>: </p>. <p> styles.css </p> <pre> <code> ... h2 { размер шрифта: 250%; / * 45 пикселей * / цвет: индиго; } ... </code> </pre> <p> Сохраните свои стили <code>.css </code>, вернитесь в браузер и обновите <code> index.html </code>. Текст <code> <h2> </h2> </code> теперь имеет темно-фиолетовый цвет вместо темно-сине-зеленого цвета по умолчанию: </p> <p> </p> <p> Затем вы примените цвета к другим заголовкам. Quicksand - это забавный закругленный шрифт, и вы используете необычный образец контента Cupcake Ipsum, поэтому создайте яркую и яркую цветовую схему, используя разные цвета для каждого заголовка. Вернитесь к <code> styles.css </code> и для каждого из селекторов заголовков добавьте свойство <code> color </code> и значение цвета.Для элемента <code> h3 </code> используйте <code> MediumVioletRed </code>, для <code> h4 </code> используйте <code> LimeGreen </code>, для <code> h5 </code> добавьте <code> Chocolate </code>, для <code> h5 </code> используйте <code> Crimson </code>, затем, наконец, для <code> h6 </code> используйте <code> DeepSky Blue </code>: </p> <p> styles.<img src='/800/600/http/900igr.net/up/datas/80569/002.jpg' style='float: right;' /> css </p> <pre> <code> ... h3 { размер шрифта: 200%; / * 36 пикселей * / цвет: MediumVioletRed; } h4 { размер шрифта: 177,78%; / * 32 пикселя * / цвет: салатовый; } h5 { размер шрифта: 162.5%; / * 26 пикселей * / цвет: шоколадный; } h5 { размер шрифта: 122%; / * 22px * / цвет: малиновый; } h6 { размер шрифта: 100%; / * 18 пикселей * / цвет: DeepSkyBlue; } ... </code> </pre> <p> После добавления свойств <code> color </code> к заголовкам сохраните <code> styles.css </code> и вернитесь в браузер, чтобы обновить <code> index.html </code>. Ваш контент теперь полон цвета: </p> <p> </p> <p> С помощью свойства <code> цвет </code> вы узнали о именованных значениях веб-цветов и о том, как использовать цвет для придания значения.Вы также использовали свойство <code> color </code>, чтобы придать содержанию индивидуальность, добавив красочную палитру к содержанию веб-страницы. </p> <h3><span class="ez-toc-section" id="i-53"> Заключение </span></h3> <p> Работа с текстом - основная часть написания CSS для Интернета.<img src='/800/600/https/leocuevas17.files.wordpress.com/2014/05/670px-change-text-color-in-html-step-2.jpg' style='float: right;' /> Текст передает смысл не только в том, что он говорит, но и в том, как он выглядит. Используя инструменты, которые вы изучили с помощью свойств </code> font-family </code>, <code> font-weight </code>, <code> font-style </code>, <code> font-size </code> и <code> color </code>, вы можете управлять текстом, чтобы обеспечить содержательный контекст для вашего веб-сайта. .Эти свойства не ограничиваются заголовками, рассматриваемыми в этой статье: их можно использовать с любым элементом, содержащим текст. </p> <p> Если вы хотите прочитать больше руководств по CSS, посетите нашу страницу темы CSS. </p> <h2><span class="ez-toc-section" id="i-54"> Режим смешивания для изменения цвета текста </span></h2> <p> Сегодня мы рассмотрим интересное свойство CSS с именем <strong> mix-blend-mode </strong> для изменения цвета некоторого текста на основе текущего цвета фона его родительского элемента. Эта функция очень полезна, например, при прогрессивных нагрузках или прогрессивных стержнях.</p> <p> <strong> Разметка </strong> <br/> Это самая простая часть, мы должны определить HTML следующим образом: </p> <p> <code> <div> <br/> <div><div></div> </div> <br/> </div> </code> </p> <p> <em> .<img src='/800/600/https/i.redd.it/yfup89v2li7z.png' style='float: right;' /> container </em> определяет оболочку нашего примера. Элемент <em> .background </em> содержит текст, и мы будем использовать его для создания анимации прогрессивной полосы. Наконец, элемент <em> .text </em> будет содержать текущий номер загрузки.</p> <p> <strong> Стили </strong> <br/> Давайте добавим немного кода <strong> CSS </strong>, чтобы улучшить его: </p> <p> <code> .background {<br/> background-color: red; <br/> анимация: загрузка 10 секунд Линейная бесконечность; <br/>} </code> </p> <p> Нам также нужно создать анимацию загрузки <em> </em>: </p> <p> <code> @keyframes loading {<br/> 0% {<br/> width: 0; <br/>} 100% {<br/> ширина: 100%; <br/>} <br/>} </code> </p> <p> Чтобы смоделировать анимацию загрузки, нам нужна другая анимация и, конечно же, улучшенные стили.</p> <code> .text {<br/> цвет: красный; <br/> ширина: 200 пикселей; <br/> граница: сплошной красный 1px; <p> &: после {<br/> padding-left: 20px; <br/> содержание: «0%»; <br/> дисплей: блочный; <br/> выравнивание текста: по центру; <br/> анимация: процент $ loadingTime linear infinite; <br/>} <br/>} </p> <p> / * код Sass * / <br/> @keyframes в процентах {<br/> @ для $ i от 1 до 100 {<br/> $ value: $ i + "%"; <br/> # {$ value} {<br/> content: $ value; <br/>} <br/>} <br/>} </p> </code> <p> <strong> Замена цвета </strong> <br/> Наконец, нам нужно установить режим смешивания-смешивания для псевдоэлемента, и он будет работать! </p> <p> <code>.<img src='/800/600/https/slideplayer.com/slide/3495050/12/images/7/Example+2+HTML+and+CSS+html+CSS.jpg' style='float: right;' /> </div> <div class="post-meta"> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/vozmozhnosti-html-chto-takoe-html-dlya-chego-nuzhen-html-kak-sozdat-htmlstranicu-vozmozhnosti-yazyka-html.html" rel="prev"><span class="meta-nav">Предыдущая запись</span> Возможности html – Что такое HTML? Для чего нужен HTML? Как создать HTMLстраницу? Возможности языка HTML</a></div><div class="nav-next"><a href="https://xn--80aahvkuapc1be.xn--p1ai/raznoe/sverstat-stranicu-kak-sverstat-veb-stranicu-chast-1-habr.html" rel="next"><span class="meta-nav">Следующая запись</span> Сверстать страницу – Как сверстать веб-страницу. Часть 1 / Habr</a></div></div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/izmenit-cvet-teksta-css-cvet-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--80aahvkuapc1be.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message" aria-hidden="true">Обязательные поля помечены <span class="required" aria-hidden="true">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required" aria-hidden="true">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required" aria-hidden="true">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required /></p> <p class="comment-form-email"><label for="email">Email <span class="required" aria-hidden="true">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='6941' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments --> </main><!-- #main --> </div><!-- #primary --> </div> <div class="col-md-4"> <div id="sidebar" class="sidebar"> <div id="search-9" class="widget widget_search"> <form role="search" method="get" class="form-search" action="https://xn--80aahvkuapc1be.xn--p1ai/"> <div class="input-group"> <label class="screen-reader-text" for="s">Поиск:</label> <input type="text" class="form-control search-query" placeholder="Поиск и помощь" value="" name="s" title="Поиск:" /> <span class="input-group-btn"> <button type="submit" class="btn btn-default" name="submit" id="searchsubmit" value="Найти"><i class="fa fa-search"></i></button> </span> </div> </form></div><div id="categories-10" class="widget widget_categories"><div class="widget-title"><span>Рубрики</span></div> <ul> <li class="cat-item cat-item-8"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/seo">Seo</a> </li> <li class="cat-item cat-item-4"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/wordpress">Wordpress</a> </li> <li class="cat-item cat-item-6"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/dizajn">Дизайн</a> </li> <li class="cat-item cat-item-7"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/zarabotok">Заработок</a> </li> <li class="cat-item cat-item-9"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/plagin">Плагин</a> </li> <li class="cat-item cat-item-3"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-15"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/rekomendac">Рекомендац</a> </li> <li class="cat-item cat-item-5"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sajt">Сайт</a> </li> <li class="cat-item cat-item-1"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovety">Совет</a> </li> <li class="cat-item cat-item-12"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/sovet">Советы</a> </li> <li class="cat-item cat-item-13"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem-2">Тем</a> </li> <li class="cat-item cat-item-10"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/tem">Темы</a> </li> <li class="cat-item cat-item-14"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok-2">Урок</a> </li> <li class="cat-item cat-item-11"><a href="https://xn--80aahvkuapc1be.xn--p1ai/category/urok">Уроки</a> </li> </ul> </div><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div></div> </div> </div> </div><!-- END #content --> </div><!-- END .row --> </div><!-- END .container --> <footer class="mz-footer" id="footer"> <!-- footer widgets --> <div class="container footer-inner"> <div class="row row-gutter"> </div> </div> <div class="footer-wide"> </div> <div class="footer-bottom"> <div class="site-info"> © Орфографика.рф, 2010 - 2019 </div><!-- .site-info --> Расшифровки, размещенные на сайте, предназначены только для личного, некоммерческого использования.<br> При перепосте материалов обязательна активная ссылка: «Текст подготовлен компанией Орфографика.рф». <br>Вопросы и предложения: info@орфографика.рф. </div> </footer> </div> <!-- back to top button --> <p id="back-top"> <a href="#top"><i class="fa fa-angle-up"></i></a> </p> <style type="text/css"> .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/pagination/css/nav-style.css?ver=6.0.1' type='text/css' media='all' /> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-includes/js/comment-reply.min.js?ver=6.0.1' id='comment-reply-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"0"}; /* ]]> */ </script> <script type='text/javascript' src='https://xn--80aahvkuapc1be.xn--p1ai/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html>