StepkinBlog.top
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
12.02.2017
23:25
21376
пока нет
Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
Всем привет!
В сегодняшнем уроке я расскажу о том, как менять цвет текста, ссылки, таблицы, рамки, фона страницы.
Ну что, вы готовы? Тогда вперед к изучению урока! 
В предыдущем уроке я выложил «Коды цветов». Вы их можете смело использовать в сегодняшнем уроке. А можете использовать 9 основных цветов без оттенков:
Стандартные цвета:
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #CCCCCC | |
| #FF00FF | |
| #FFFFFF | |
| #663333 |
Цвет задается по названию цветов, по шестнадцатеричному значению и с помощью RGB.
- по названию цвета:
используя этот метод, нужно знать хорошо английский язык. Знаете название цвета на английском, можете смело вписывать его в код. Например, вот так:
color: yellow; /* Цвет текста желтый */
- по шестнадцатеричному значению:
для определения цвета в HTML используются числа в шестнадцатеричном коде: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены на латинские буквы. Например, вот так:
color: #FFFF00; /* Цвет текста желтый */
- с помощью RGB:
RGB — это цветовая модель, которую тоже используют при создании графики, дизайнов сайтов, приложений и т.п. Принцип ее действия заключается в следующем: монитор на компьютере состоит из огромного количества маленьких блоков светодиодов. В каждом по три цвета – красный, зелёный, синий (RedGreenBlue).
Схема смешивания цветов для моделей RGB:
Интенсивность своего свечения светодиоды могут менять от 0 (не горит) и до "255" (максимально ярко). Если всем трем цветам задать параметр "0", то получится черный цвет, а если всем прописать "255" – будет белый. Меняя интенсивность свечения этих светодиодов, можно получить в итоге каких-то там 16 миллионов цветов 
Пример заполнения:
color: RGB(255, 255, 0); /* Цвет текста желтый */
Посмотрите на примерах, как работает все вышеописанное.
Цвет текста
Свойство «COLOR»
Чтобы поменять цвет заголовка (<h1> - <h6>), текста <p> и ссылки, воспользуйтесь правилом «color».
Давайте закрепим выше сказанное и попробуем задать цвет тремя способами:
- по названию цвета:
p
{
color: yellow; /* Цвет текста желтый */
}
-по шестнадцатеричному значению:
p
{
color: #FFFF00; /* Цвет текста желтый */
}
- с помощью RGB:
p
{
color: RGB(255, 255, 0); /* Цвет текста желтый */
}
Теперь давайте я поменяю цвет для заголовка, текста и ссылки.
В HTML добавьте такой код:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Цвет в CSS</title> </head> <body> <H1>Заголовок-1</H1> <H2>Заголовок-2</H2> <H3>Заголовок-3</H3> <p>Текст на сайте</p> <a href="https://www.stepkinblog.top/">Ссылка сайта</a> </body> </html>
Меняем цвет для заголовка (H1, H3, H3) в CSS:
H1 {color: #cccccc; /* серый цвет */}
H2 {color: #0000ff; /* синий цвет */}
H3 {color: #00ff00; /* зеленый цвет */}
Результат:
Меняем цвет для текста в CSS:
p {color: #cc0000; /* красный цвет */}
Результат:
Меняем цвет ссылки в CSS:
Значения:
- visited — Стиль для посещенной ссылки
- active — Стиль для нажатой ссылки
- hover — Стиль ссылки при наведении на нее курсора
Пример:
a {
color: red; /* Цвет ссылок */
}
a:visited {
color: #cecece; /* Цвет посещенных ссылок */
}
a:active {
color: #000000; /* Цвет активных ссылок */
}
a:hover {
color: #ffff00; /* Цвет ссылок при наведении курсора */
}
Цвет рамки
Свойство «BORDER-COLOR»
Чтобы изменить цвет рамки, воспользуйтесь правилом «border-color».
Сейчас текст обведем рамкой.
p
{
border-color: #cc0000; /* Цвет границы */
border-style: solid; /* Стиль границы */
}
Результат:
Есть еще и сокращенный способ:
p
{
border: 1px solid #cc0000; /* Цвет границы */
}
Цвет рамки таблицы
Свойство «BORDER-COLOR»
Чтобы изменить цвет рамки таблицы, воспользуйтесь таким же правилом «border-color».
В HTML добавьте:
<table> <tr> <td>ряд -1 /столбик 1</td> <td>столбик 2 </td> <td>столбик 3</td> </tr> </table>
В CSS:
td
{
border: 1px solid #cc0000; /* Цвет границы */
}
Или вот так:
td
{
border-color: #cc0000; /* Цвет границы */
border-style: solid; /* Стиль границы */
}
Результат:
Цвет фона
Свойство «BACKGROUND-COLOR»
Чтобы залить другим цветом фон страницы, таблицы, блока, воспользуйтесь правилом «background-color»:
Меняем фон страницы
Если вы хотите поменять цвет фона веб-страницы, то пропишите правило «background-color» к селектору «BODY» можно и к «HTML»
BODY {
background-color: #FFEE8C ;/* Цвет фона */
}
Или так
HTML {
background-color: #FFEE8C ;/* Цвет фона */
}
Результат:
Меняем фон таблицы
Если вы хотите поменять цвет фона таблицы, то пропишите правило «background-color» к селектору «td», «table»
td
{
background-color: #cc0000 ;/* Цвет фона таблицы */
}
Результат:
table
{
background-color: #cc0000 ;/* Цвет фона таблицы */
}
Результат:
Меняем цвет кнопки
Если нужно поменять цвет кнопки, пропишите любой класс (для примера я прописал класс «submit»):
<input type="submit" name="submit" value="Subscribe" class="submit">
А в CSS к селектору «submit» прописываем правило «background-color»:
.submit {
background-color: #cc0000; /* Цвет фона кнопки */
}
Примечание
Все примеры, указанные выше, непосредственно касались всех элементов веб-страницы. То есть, если я прописал правила к заголовку «h2», то на всех страницах будет действовать это правило для заголовка «h2». Если вы помните урок «Синтаксис CSS», то знаете, что можно задать правило для некоторых веб-страниц в особых моментах. Например, вы хотите только на странице контактов заголовок «h2» сделать синим цветом.
Для этого пропишите в HTML для первого тега «h2» класс, например, «stepkiblog».
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Цвет в CSS</title> </head> <body> <H2 class="stepkiblog">Заголовок-синим</H2> <H2>Заголовок-черный</H2> <p>Текст на сайте</p> </body> </html>
В CSS:
.stepkiblog
{
color: #0000ff; /* синий цвет */
}
Если прописать ID:
<H2 id="stepkiblog">Заголовок-синим</H2>
То в CSS это будет так:
#stepkiblog
{
color: #0000ff; /* синий цвет */
}
Надеюсь, что урок был для вас полезен, а самое главное – ПОНЯТНЫМ!
Если вам интересны мои уроки, и вы в дальнейшем хотите по ним обучаться, подписывайтесь на обновления моего блога.
Удачи!!!