Как изменить цвет текста в HTML
Изменение цвета текста в HTML выполняется довольно просто (впрочем, как и почти все остальные действия с HTML). Но, прежде чем рассказать об этом, я немного пройдусь по вопросу безопасных цветов.
Что такое безопасный цвет HTML
Постараюсь быть кратким. Суть в том, что современные компьютеры для кодирования цвета используют довольно большие числа. И, соответственно, в этих больших числах можно закодировать очень большое количество оттенков. Но беда в том, что многие видеокарты и мониторы не могут правильно отобразить ВСЕ эти оттенки. Поэтому, например, цвет, код которого FFFFAA, на вашем мониторе может выглядеть иначе, чем на мониторе другого пользователя. Также декодирование цветов может отличаться в зависимости от операционной системы пользователя (Windows может декодировать цвет не так, как, например, Mac).
Чтобы этого избежать, веб-мастера стараются использовать так называемые безопасные цвета. То есть цвета, которые с высокой долей вероятности будут одинаково отображаться на всех мониторах.
Существует таблица безопасных цветов, в которой перечислены эти цвета. Именно этот набор цветов желательно использовать при создании веб-страниц.
Надо сказать, что в наше время это уже не так значимо, поскольку почти у всех современные мониторы, видеокарты и браузеры. Поэтому, конечно, вы можете использовать и другие цвета, “НЕ безопасные”. Однако без особой надобности этого всё-таки лучше не делать, и работать по возможности с безопасными цветами.
Как поменять цвет текста в HTML
Поскольку мои статьи рассчитаны на начинающих, то я, во-первых, не рассказываю о всех способах, а во-вторых, не всегда использую самые современные технологии. Если вы хотите изучить в полной мере современную вёрстку сайтов, то вам сюда.
А здесь я расскажу только об одном старом добром способе, который использует тег цвета текста в HTML — тег <font> (точнее, этот тег может изменять не только цвет, но об этом как-нибудь в другой раз).
С одной стороны, этот тег признан нежелательным стандартами HTML4 и XHTML. Но с другой стороны, он поддерживается всеми браузерами, в том числе и устаревшими.
Это парный тег (то есть наличие закрывающего тега обязательно). С помощью этого тега можно установить шрифт, его размер и цвет. Но мы пока будем говорить только о цвете.
Тег <font> может иметь несколько разных атрибутов. Для изменения цвета используется атрибут color .
Значение этого атрибута может быть введено одним из двух способов:
- Как определение красного, зелёного и синего (RGB).
- Как стандартное название цвета.
Значение атрибута лучше заключать в кавычки (хотя это и необязательно).
Цветовая модель RGB
В цветовой модели RGB обозначение цвета представляет собой шестизначное шестнадцатеричное число. Для обозначения кода цвета в HTML перед этим числом должен быть знак решётки (#).
Первые две цифры определяют насыщенность красного цвета (от 00 — нет красного, до FF — ярко-красный. Таким же образом определяется насыщенность для зелёного (следующие две цифры) и синего (последние две цифры). Таким образом формат числа, с помощью которого кодируется цвет, следующий:
# RR GG BB
Где RR — красная составляющая, GG — зелёная, BB — синяя.
Чёрный цвет — это отсутствие “свечения” всех составляющих — #000000, а белый цвет — это наибольшая насыщенность RGB — #FFFFFF.
Также можно использовать сокращённую запись, когда вместо двух цифр используется одна:
В этом случае формат записи числа будет таким:
# R G B
ВНИМАНИЕ!
Некоторые бразуеры не поддерживают такой формат записи цветового кода.
Названия цветов HTML
Как уже было сказано, вместо числового кода для обозначения цвета можно использовать название цвета. Во многих случаях это более удобно и более понятно.
В стандартах HTML4 и XHTML определены следующие названия цветов (в скобках указаны RGB-коды):
Однако современные браузеры поддерживают намного больше названий цветов. Но я их здесь не привожу, потому что уход от стандартов может привести к неприятным последствиям — вы ведь в большинстве случаев не можете знать, какой браузер будет у пользователя, и будет ли он поддерживать имена цветов, которые не определены стандартом.
Хотя о цветах HTML можно рассказывать ещё долго, я на этом закончу, потому как для начала данных более чем достаточно. Ну а если хотите постичь все премудрости вёрстки сайтов, то советую обратить внимание на этот видеокурс.
How can I change my font color with html?
I’m making a web page where I want the color of the font to be red in a paragraph but I’m not sure how to do this.
I was using FrontPage for building web pages before so this HTML stuff is really new to me. What is the best way to do this?
4 Answers 4
Where «error» is defined in your stylesheet:
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Where [tag] can be anything. For example «p» (paragraph), «span», «div», «ul», «li».. etc.
and where [css] is any valid CSS. For example «color:red; font-size:15px; font-weight:bold»
The recommended way to add style to a html element is by assigning it a «class» (a identifier that can be repeated on the document) or a «id» a unique identifier that shall not be repeated in the document.
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
For this example and to keep it simple to new users I named the class «red». However isn’t the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So or might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
Brief CSS Explanation :
Since most of the answers you’re getting are all mentioning CSS, I’ll add a small guide on how it works:
Where to put CSS
First of all, you need to know that CSS should be added inside the tags of your document. The tags used to define where the CSS is going to be are:
This is called embedded CSS since it’s inside the document. However, a better practice is to link «include it» directly from an external document by using the following tags:
Where file.css is the external file you want to include into the document.
The benefits of using the «link» tag is that you don’t have to edit in-line CSS. So lets say if you have 10 HTML documents and you want to change the color of a font you just need to do it on the external CSS file.
This two ways of including CSS are the most recommended ways. However, there’s one more way that’s by doing in-line CSS adjustments, for example:
CSS General Structure
When you code write CSS, the first thing you need to know is what are classes and what are id’s. Since I already mentioned what they do above I’m going to explain how to use them.
When you write CSS you first need to tell which elements you’re going to «select», for example:
Lets say we have a «div» element with the class «basic» and we want it to have a black background color, a white font, and a gray border.
To do this we first need to «select» the element:
Since we’re using a class we use a «.» in front of the identifier which in this case is: «basic», so it will look like this:
This is not the only way, because we’re telling that ANY element that has the class «basic» will be selected, so lets say we JUST want the «div» elements. To do this we use:
So for our example it will look like this:
Now we’ve selected the «div» with the class «body». Now we need to apply the visual style we wish. We do this inside the brackets :
With this, we just applied successfully a visual style to all «div» elements that have the «basic» class attached.
Remember this doesn’t just apply for «class» it also applies for «id» but with a slight change, here an example of the final code but instead of a class we’ll just say it’s a «id»
For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that’s needed. CSS is really powerful and it’ll save you a lot of time.