Как изменить цвет слов на сайте - Исправление ошибок и поиск оптимальных решений проблем

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

Цвет шрифта можно изменять стилизации внутри HTML-документа. Однако рекомендуется использовать именно внешние таблицы CSS-стилей.

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

Как поменять цвет шрифта в CSS — добавляем стили

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

В HTML-документе будет несколько элементов, но мы будем работать только параграфом. Вот так меняется цвет текста внутри тегов <p> при помощи внешней таблицы стилей.

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

Добавляем атрибут style к тегу <p>:

Добавляем свойство color:

Добавляем значение цвета после свойства:

Элементы <p> на странице станут чёрными.

Перед тем, как изменить цвет текста в HTML, нужно понимать, что в данном примере используется название цвета black. Несмотря на то, что это один из способов указания цвета в CSS, он имеет определенные ограничения.

Нет ничего страшного в том, чтобы использовать названия black (чёрный) и white (белый). Но этот способ не позволяет указывать конкретные оттенки. Поэтому для указания цвета чаще используются шестнадцатеричные значения:

Этот CSS-код также сделает элементы <p> чёрными, так как hex-код #000000 обозначает чёрный цвет. Также можно использовать сокращённый вариант #000, и результат будет тем же.

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

Например:

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

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

p { color: rgba(47,86,135,1); }

Это RGBA-значение обеспечит всё тот же тусклый, серо-синий цвет. Первые три значения отвечают за красный, зелёный и синий, а последняя цифра — за уровень непрозрачности. «1» означает «100%». То есть, текст будет полностью непрозрачным.

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

p {
  color: #2f5687;
  color: rgba(47,86,135,1);
}

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

Источник

Download Article

Easily change the color of text using CSS or HTML

Download Article

Creating Text Styles

Using Inline Styles

Tips

Do you want to change the color of the text on a web page? In HTML5, you can use CSS to define what color the text will appear in various elements on your page. You can also use inline style attributes to change the color of individual text elements in your CSS file. Using CSS will ensure that your web page is compatible with every possible browser. You can also use external CSS files to create a standard font color for a specific style across your entire website. This wikiHow article teaches you how to change text color using HTML and CSS.

1
Open your HTML file. The best way to change the color of your text is by using CSS. The old HTML <font> attribute is no longer supported in HTML5. The preferred method is to use CSS to define the style of your elements. Go ahead and open or create a new HTML document.
- This method will also work with separate CSS files that are linked to your HTML document. The examples used in this article are for an HTML file using an internal stylesheet.
2
Place your cursor inside the head of your HTML file. When you are using an internal style sheet for a specific HTML file, it is usually placed within the head of the HTML file. The head is at the top of the sheet in between the opening <head> tag, and the closing </head> tag.
- If your HTML document does not have a head, go ahead and enter the opening and closing head tags at the top of your HTML file.
Advertisement
3
Type the opening and closing tags for the style sheet. All CSS elements that affect the style of the webpage go in between the opening and closing style tags within the head section of your HTML document. Type <style> in the «head» section to create the opening style tag. Then type </style> a couple of lines down to create the closing style tag. When you’re finished, the beginning of your HTML file should look something like this:^[1]
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Type the element you want to change the text color for followed by the opening and closing brackets. Elements you can change include the text body (body), paragraph text («<p>»), as well as headers («<h1>», «<h2>», «<h3>», etc.). Then enter the opening bracket («{«) one space after. Then add the closing bracket («}») a few lines down. In this example, we will be changing the «body» text. The beginning of your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Add the color attribute into the element section of the CSS. Type color: in between the opening and closing brackets of the text element you just created. The «color:» attribute will tell the page what text color to use for that element. So far, the head of your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
      body {
      color:
}
</style>
</head>
```
6
Type in a color for the text followed by a semi-colon («;»). There are three ways you can enter a color: the name, the hex value, or the RGB value. For example, for the color blue you could type blue; for the color name, rgb(0, 0, 255); for the RGB value, or #0000FF; for the hex value. Your HTML page should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
Add other selectors to change the color of various elements. You can use different selectors to change the color of different text elements. If you want the header to be a different color than the paragraph text or body text, you will need to create a different selector for each element within the «<style>» section. In the following example, we change the color of the body text to red, the header text to green, and the paragraph text to blue:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>This header will be green.</h1>

<p>This paragraph will be blue.</p>

This body text will be red.
</body>
</html>
```
8
Define a CSS class that changes text color. In CSS, you can define a class rather than using the existing elements. You can apply the class to any text element within your HTML document. To do so, type a period («.») followed by the name of the class you’d like to define. In the following example, we define a new class called «.redtext», which changes the color of the text to red. Then we apply it to the header at the top of the HTML document. Checkout the following example:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">This heading will be red</h1>
<p>This paragraph will be normal.</p>
<p class="redtext">This paragraph will be red</p>

</body>
</html>
```

1

Open your HTML file. You can use inline HTML style attributes to change the style of a single element on your page. This can be useful for one or two quick changes to the style but is not recommended for widespread use. It’s best to use CSS for comprehensive changes. Go ahead and open or create a new HTML document.^[2]
2
Find the text element in the file that you want to change. You can use inline style attributes to change the text color of any of your text elements, including paragraph text («<p>»»), or your headline text («<h1>»).
```
<!DOCTYPE html>
<html>
<body>

<h1>This is the header you want to change</h1>

</body>
</html>
```
3
Add the style attribute to the element. To do so, Type style="" inside the opening tag for the element you want to change. In the following example, we have added the style attribute to the header text:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">This is the header you want to change</h1>

</body>
</html>
```
4
Type the color: attribute inside the quotation marks. Type «color» with a colon («:») within the quotation marks after the style attribute. So far, your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">This is the header you want to change</h1>

</body>
</html>
```
5
Type the color you want to change the text to followed by a semi-colon («;»). There are three ways you can express a color. You can type the name of the color, you can enter the RGB value, or you can enter the hex value. For example, to change the color to yellow, you could type yellow; for the color name, rgb(255,255,0); for the RGB value, or #FFFF00; to use the hex value. In the following example, we change the headline color to yellow using the hex value:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">This header is now yellow</h1>

</body>
</html>
```

Add New Question

Question

How would I type bold font in html?

<b></b> is the code for bold text, so you would put your text within that, e.g. <b> hello world </b>.
Question

How do I change background colors in HTML?

Use the bgcolor attribute with body tag.
Question

How do I change the color of the background?

You will create a similar tag as you did to change the font color. After putting everything in the body tag, you will put the {} brackets and on the inside, type «background-color:(insert desired color).» In code, it should look like this:

body {
color: black;
background-color:gold
}

This code gives you black text and a gold background.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

You can see a list of supported color names and their hex values at http://www.w3schools.com/colors/colors_names.asp

Thanks for submitting a tip for review!

About This Article

Article SummaryX

1. Open the file in a text editor.
2. Find the element you want to change.
3. Type style=″color:#FFFF00;″ in the opening tag.
4. Replace ″#FFFF00″ with your desired color.

Did this summary help you?

Thanks to all authors for creating a page that has been read 1,980,696 times.

Is this article up to date?

Источник

Download Article

Easily change the color of text using CSS or HTML

Download Article

Creating Text Styles

Using Inline Styles

Tips

1
Open your HTML file. The best way to change the color of your text is by using CSS. The old HTML <font> attribute is no longer supported in HTML5. The preferred method is to use CSS to define the style of your elements. Go ahead and open or create a new HTML document.
- This method will also work with separate CSS files that are linked to your HTML document. The examples used in this article are for an HTML file using an internal stylesheet.
2
Place your cursor inside the head of your HTML file. When you are using an internal style sheet for a specific HTML file, it is usually placed within the head of the HTML file. The head is at the top of the sheet in between the opening <head> tag, and the closing </head> tag.
- If your HTML document does not have a head, go ahead and enter the opening and closing head tags at the top of your HTML file.
Advertisement
3
Type the opening and closing tags for the style sheet. All CSS elements that affect the style of the webpage go in between the opening and closing style tags within the head section of your HTML document. Type <style> in the «head» section to create the opening style tag. Then type </style> a couple of lines down to create the closing style tag. When you’re finished, the beginning of your HTML file should look something like this:^[1]
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Type the element you want to change the text color for followed by the opening and closing brackets. Elements you can change include the text body (body), paragraph text («<p>»), as well as headers («<h1>», «<h2>», «<h3>», etc.). Then enter the opening bracket («{«) one space after. Then add the closing bracket («}») a few lines down. In this example, we will be changing the «body» text. The beginning of your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Add the color attribute into the element section of the CSS. Type color: in between the opening and closing brackets of the text element you just created. The «color:» attribute will tell the page what text color to use for that element. So far, the head of your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
      body {
      color:
}
</style>
</head>
```
6
Type in a color for the text followed by a semi-colon («;»). There are three ways you can enter a color: the name, the hex value, or the RGB value. For example, for the color blue you could type blue; for the color name, rgb(0, 0, 255); for the RGB value, or #0000FF; for the hex value. Your HTML page should look something like the following:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
Add other selectors to change the color of various elements. You can use different selectors to change the color of different text elements. If you want the header to be a different color than the paragraph text or body text, you will need to create a different selector for each element within the «<style>» section. In the following example, we change the color of the body text to red, the header text to green, and the paragraph text to blue:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>This header will be green.</h1>

<p>This paragraph will be blue.</p>

This body text will be red.
</body>
</html>
```
8
Define a CSS class that changes text color. In CSS, you can define a class rather than using the existing elements. You can apply the class to any text element within your HTML document. To do so, type a period («.») followed by the name of the class you’d like to define. In the following example, we define a new class called «.redtext», which changes the color of the text to red. Then we apply it to the header at the top of the HTML document. Checkout the following example:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">This heading will be red</h1>
<p>This paragraph will be normal.</p>
<p class="redtext">This paragraph will be red</p>

</body>
</html>
```

1

Open your HTML file. You can use inline HTML style attributes to change the style of a single element on your page. This can be useful for one or two quick changes to the style but is not recommended for widespread use. It’s best to use CSS for comprehensive changes. Go ahead and open or create a new HTML document.^[2]
2
Find the text element in the file that you want to change. You can use inline style attributes to change the text color of any of your text elements, including paragraph text («<p>»»), or your headline text («<h1>»).
```
<!DOCTYPE html>
<html>
<body>

<h1>This is the header you want to change</h1>

</body>
</html>
```
3
Add the style attribute to the element. To do so, Type style="" inside the opening tag for the element you want to change. In the following example, we have added the style attribute to the header text:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">This is the header you want to change</h1>

</body>
</html>
```
4
Type the color: attribute inside the quotation marks. Type «color» with a colon («:») within the quotation marks after the style attribute. So far, your HTML file should look something like the following:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">This is the header you want to change</h1>

</body>
</html>
```
5
Type the color you want to change the text to followed by a semi-colon («;»). There are three ways you can express a color. You can type the name of the color, you can enter the RGB value, or you can enter the hex value. For example, to change the color to yellow, you could type yellow; for the color name, rgb(255,255,0); for the RGB value, or #FFFF00; to use the hex value. In the following example, we change the headline color to yellow using the hex value:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">This header is now yellow</h1>

</body>
</html>
```

Add New Question

Question

How would I type bold font in html?

<b></b> is the code for bold text, so you would put your text within that, e.g. <b> hello world </b>.
Question

How do I change background colors in HTML?

Use the bgcolor attribute with body tag.
Question

How do I change the color of the background?

You will create a similar tag as you did to change the font color. After putting everything in the body tag, you will put the {} brackets and on the inside, type «background-color:(insert desired color).» In code, it should look like this:

body {
color: black;
background-color:gold
}

This code gives you black text and a gold background.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

You can see a list of supported color names and their hex values at http://www.w3schools.com/colors/colors_names.asp

Thanks for submitting a tip for review!

About This Article

Article SummaryX

1. Open the file in a text editor.
2. Find the element you want to change.
3. Type style=″color:#FFFF00;″ in the opening tag.
4. Replace ″#FFFF00″ with your desired color.

Did this summary help you?

Thanks to all authors for creating a page that has been read 1,980,696 times.

Is this article up to date?

Источник

Загрузить PDF

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

1
Откройте файл HTML. Лучший способ изменить цвет текста — это воспользоваться CSS. Старый тег <font> больше не поддерживается в HTML5. Поэтому воспользуйтесь CSS, чтобы определить стиль элементов страницы.
- Этот метод также применим к внешним таблицам стилей (отдельным файлам CSS). Приведенные ниже примеры предназначены для файла HTML с внутренней таблицей стилей.
2

Размеcтите курсор внутри тега <head>. Стили определяются внутри этого тега, если используется внутренняя таблица стилей.
3
Введите <style>, чтобы создать внутреннюю таблицу стилей. Когда тег <style> находится внутри тега <head>, таблица стилей, которая находится внутри тега <style>, будет применена к любым элементам страницы. Таким образом, начало HTML-файла должно выглядеть следующим образом:^[1]
```
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
```
4
Введите элемент, цвет текста которого нужно изменить. Используйте раздел <style>, чтобы определить внешний вид элементов страницы. Например, чтобы изменить стиль всего текста на странице, введите следующее:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
В селекторе элемента введите атрибут color:. Этот атрибут определяет цвет текста выбранного элемента. В нашем примере этот атрибут изменит цвет основного текста, который является элементом, включающим весь текст на странице:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст синим, введите blue, rgb(0, 0, 255) или #0000FF.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```

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

<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>Этот заголовок будет зеленым.</h1>

<p>Этот параграф будет синим.</p>

Этот основной текст будет красным.
</body>
</html>

8
Укажите стилевой класс CSS вместо того, чтобы менять элемент. Можно указать стилевой класс, а затем применить его к любому элементу страницы, чтобы изменить стиль элемента. Например, класс .redtext окрасит текст элемента, к которому применен этот класс, в красный цвет:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext"> Этот заголовок будет красным</h1>
<p>Этот параграф будет стандартным.</p>
<p class="redtext">Этот параграф будет красным</p>

</body>
</html>
```
Реклама

1

Откройте файл HTML. Можно воспользоваться атрибутами встроенного стиля, чтобы изменить стиль одного элемента страницы. Это может быть полезно, если нужно внести одно-два изменения в стиль, но не рекомендуется для широкомасштабного применения. Чтобы полностью изменить стиль, используйте предыдущий метод.^[2]
2
Найдите элемент, который нужно изменить.
С помощью атрибутов встроенного стиля можно изменить цвет текста любого элемента страницы. Например, чтобы изменить цвет текста определенного заголовка, найдите его в файле:
```
<!DOCTYPE html>
<html>
<body>

<h1>Этот заголовок нужно изменить</h1>

</body>
</html>
```
3
К элементу добавьте атрибут стиля. Внутри открывающего тега изменяемого элемента введите style="":
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">Этот заголовок нужно изменить</h1>

</body>
</html>
```

Внутри "" введите color:. Например:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:">Этот заголовок нужно изменить </h1>

</body>
</html>

5
Введите цвет текста. Это можно сделать тремя способами: ввести имя, ввести шестнадцатеричное значение или ввести значение RGB. Например, чтобы сделать текст желтым, введите yellow;, rgb(255,255,0); или #FFFF00;:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">Этот заголовок стал желтым</h1>

</body>
</html>
```
Реклама

Советы

Список поддерживаемых цветов и их шестнадцатеричные значения можно найти на сайте http://www.w3schools.com/colors/colors_names.asp

Об этой статье

Эту страницу просматривали 242 817 раз.

Была ли эта статья полезной?

Источник

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

<p>Конструктор сайтов <font>"Нубекс"</font></p>

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов <font color="blue">"Нубекс"</font>

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

color – задает цвет текста;
size – устанавливает размер текста;
face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи HTML</title>
 </head>
 <body>
 <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p>
 </body>
</html>

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи CSS</title>
  <style>
 .nubex {
  color:#fa8e47;
  font-size: 150%;
  }
  .constructor {
  color: blue;
  }
  .saitov {
  color: green;
  font-size: 125%;
  }
  </style>
 </head>
 <body>
 <p><span class="constructor">Конструктор</span> <span class="saitov">сайтов</span> <span class="nubex">"Нубекс"</span></p>
 </body>
</html>

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

Источник

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

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

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

Изменения цвета текста средствами HTML
Как изменить цвет текста в HTML с использованием CSS?
Изменяем цвет в HTML коде при помощи атрибута style
Что делать если внесённые изменения не меняются?

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

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

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

<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>

CSS

.color—text {

color:#555555;

}

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

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

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

Для этого:

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

<style>

.color-text {

color:#555555;

}

</style>

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

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

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

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

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

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

<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>

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

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

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

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

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

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

<p style=”color:#fff!important;”>…</p>
2.Особенности тегов. Если вы зададите цвет текста для абзаца внутри которого есть ссылка, то он изменится для всего абзаца кроме ссылки. Чтобы изменился цвет ссылки нужно задавать его именно для тега ссылки.
Аналогично если вы зададите цвет текста для блока, внутри которого находится список, то для элементов этого списка он может не примениться и нужно будет отдельно задавать его именно для тегов списка.
3.Кеширование. Часто современные браузеры кешируют стили сайта и даже после внесения изменений в код они ещё какое то время отображают старую версию стилей. Для решения проблемы можно обновлять страницу при помощи сочетания клавиш CTRL+F5.
Так же у вас на сайте может стоять плагин для кеширования, из-за которого вы так же можете не видеть внесённых изменений на сайте.

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

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

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

Источник

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

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

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

 color: blue;

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

 h1 { color: blue; }
 p { color: red; }
 button { color: red; }

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

Поиск подходящего класса CSS

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

Открытие инспектора

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

Google Chrome : CTRL + Shift + C или точки меню > Дополнительные инструменты > Инструменты разработчика.
Microsoft Edge : CTRL + Shift + C или точки меню > Дополнительные инструменты > Инструменты разработчика.
Mozilla Firefox : CTRL + Shift + C или точки меню > Дополнительные инструменты > Инструменты веб-разработчика.
Apple Safari : « Настройки» > « Дополнительно» > « Показать меню разработки» в строке меню, а затем « Разработка» > « Показать веб-инспектор».

Поиск правильного стиля текста CSS

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

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

Google Chrome : щелкните правой кнопкой мыши > Проверить
Microsoft Edge : щелкните правой кнопкой мыши > Проверить
Mozilla Firefox : щелкните правой кнопкой мыши > Проверить или Q
Apple Safari : щелкните правой кнопкой мыши > Проверить элемент

Это заставит окно консоли / инспектора вашего веб-сайта сосредоточиться на элементе, который вы пытаетесь изменить. В Chrome, Safari, Edge и Firefox вы должны увидеть раздел « Стили» , содержащий весь код CSS для проверяемого элемента.

Вы также должны увидеть свой HTML-элемент, выделенный на панели рядом с ним. Это можно использовать для определения класса или идентификатора изменяемого элемента. В нашем случае мы смотрим на основной заголовок H1 на нашей странице, и он принадлежит классу с именем .listing-title.

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

Добавление нового CSS

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

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

 .listing-title {
 color: blue;
 }

Что делать, если цвет вашего текста не меняется?

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

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

 .listing-title {
 color: blue !important;
 }

Другие текстовые стили CSS Fun

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

Размер шрифта : изменяет размер текста на вашем веб-сайте, например font-size: 12px;
Font-weight : Weight относится к толщине шрифта, жирный шрифт имеет высокий вес, а тонкий текст – низкий, например font-weight: 400;
Text-align : изменяет выравнивание текста, с которым вы работаете, например text-align: right;
Text-shadow : это позволяет вам добавлять тень к вашему тексту с помощью ряда атрибутов, например, text-shadow: 2px 2px 3px черный;
Text-transform : изменяет регистр текста, с которым вы работаете, например, text-transform: uppercase;
Text-decoration : позволяет добавлять к тексту подчеркивания, дефисы и другие украшения, например text-decoration: underline;

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

Узнайте больше, чем цвет текста CSS

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

Источник

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

Цвет текста css по умолчанию?

С самого начала — давайте разберемся, что вообще означает «Цвет текста css по умолчанию«:

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

Какой цвет установлен по умолчанию?

Если вы создадите простую страницу и добавите туда текст, без указания цвета текста, то он будет отображаться как черный (black).

Сделал специально страницу о заранее предопределенных цветах, т.е. цвета определены цветом!
Например красный — red

Как еще можно подобрать цвет текста!?

Не обязательно это может быть цвет «словом» — цвет может быть задан буквенно цифровым способом -> в онлайн генераторе цветов.

Как обозначается цвет в css?

Цвет в css пишется английское слово «color» — которое перевоимся как «цвет» и через двоеточие пишется цвет, например:

color : red ;

Как используется цвет в стилях css!?

Существует «3 способа css» задать цвет тексту через css!

Пример — как можно изменить цвет по умолчанию

На сайте установлен некий цвет текста по умолчанию — сделаем стенд, по нажатию на кнопку вы можете изменить этот цвет по умолчанию!

И! — изменится только тот цвет по умолчанию, который никак отдельным образом не прописан — чтобы это проверить нажми на кнопку:

Задать цвет текста внутри тега

Цвет текста может быть задан внутри тега!

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

Для этого нам понадобится какой-то тег, пусть это будет — span

Внутрь первого тега помещаем атрибут «style» со значением цвет -> «color» и определяем цвет, путь это будет фиолетовый -> color:violet

<span style=»color:violet;»>Здесь текст, который будет покрашен в цвет color:violet</span>

Результат :

Мы задали нашему тексту цвет фиолетовый:

Здесь текст, который будет покрашен в цвет color:violet

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

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

После этого берем выше приведенный тег и меняем цвет внутри тега:

<span style=»color : firebrick ;»>Здесь текст, который будет покрашен в цвет firebrick </span>

Здесь текст, который будет покрашен в цвет color: firebrick

Задать свой собственный тег для цвета текста

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

<span style=»color: red ;»>Здесь текст, который будет покрашен в цвет red</span>

и например цвет текста в собственном теге, намного проще… :

<red>Здесь текст, который будет покрашен в цвет red</red>

Результат изменения цвета текста в теге

Здесь текст, который будет покрашен в цвет red

Или же путь это будет зеленый цвет:

<green>Здесь текст, который будет покрашен в цвет green</green>

Здесь текст, который будет покрашен в цвет green

Как создать такой тег, для изменения цвета текста!?

В стилях css

записываем таким образом:

Тоже самое для любого другого цвета

Способ задать цвет тексту на странице через стили

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

Нам понадобится тег style :

Располагаем данный стиль в любом месте на странице, лучше всего его располагать внутри тега head :

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

Внутри тега violet помещаем текст,чтобы мы могли его увидеть!

<violet>Цвет текста violet </violet>

Результат, цвет для текста задан через стили на странице:

Цвет текста violet

Задать цвет тексту через файл css

Для того, чтобы задать цвет текста через файл css -повторяем все операции, как и пункте 2, только в файле стилей!

Задать цвет тексту через class

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

Класс пишется, обычно латинскими буквами и перед ним ставится точка, что и означает класс:

.example

После класса используются двойные фигурные скобки:

{}

Внутри скобок прописываются цвет для текста:

.example { color: maroon;}

Далее нужно прикрепить данный класс к тегу:

<div class=»example»>Здесь текст</div>

Результат:

Здесь текст class=»example»

Задать цвет тексту через id

Для того, чтобы задать цвет текста через id, нужно создать стили для этого id:

Все тоже самое. что и для класса, лишь изменяется точка на решетку,

«.» -> «#»

и слово «class» на «id»

id пишется, обычно латинскими буквами и перед ним ставится решетка, что и означает id :

#example

После идентификатора используются двойные фигурные скобки:

{}

Внутри скобок прописываются цвет для текста:

#example { color: cyan;}

Далее нужно прикрепить данный id к тегу:

<div id=»example»>Здесь текст</div>

Результат:

Один из поисковых запросов : «как сделать чтобы текст выводился белый в css«…

Используем ранее выведенную теорию. Для этого вам понадобится :

Html:


<blackblock style="color: white;">Здесь ваш белый текст</blackblock>
		Css:
blackblock {
    background: black;
    color: white;
}

Источник

Как поменять цвет шрифта в CSS — добавляем стили

About This Article

Is this article up to date?

About This Article

Is this article up to date?

Советы

Об этой статье

Была ли эта статья полезной?

Атрибуты тега FONT

Задание цвета текста при помощи CSS

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

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

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

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

Поиск подходящего класса CSS

Открытие инспектора

Поиск правильного стиля текста CSS

Добавление нового CSS

Что делать, если цвет вашего текста не меняется?

Другие текстовые стили CSS Fun

Узнайте больше, чем цвет текста CSS

Цвет текста css по умолчанию?

Какой цвет установлен по умолчанию?

Как еще можно подобрать цвет текста!?

Как обозначается цвет в css?

Как используется цвет в стилях css!?

Пример — как можно изменить цвет по умолчанию

Задать цвет текста внутри тега

Мы задали нашему тексту цвет фиолетовый:

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

Задать свой собственный тег для цвета текста

Результат изменения цвета текста в теге

Как создать такой тег, для изменения цвета текста!?

Способ задать цвет тексту на странице через стили

Результат, цвет для текста задан через стили на странице:

Задать цвет тексту через файл css

Задать цвет тексту через class

Задать цвет тексту через id

Читайте также: