Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы CSS » Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

12.02.2017


23:25


4835


пока нет


Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Всем привет!
В сегодняшнем уроке я расскажу о том, как менять цвет текста, ссылки, таблицы, рамки, фона страницы.
Ну что, вы готовы? Тогда вперед к изучению урока! :coffe:

В предыдущем уроке я выложил «Коды цветов». Вы их можете смело использовать в сегодняшнем уроке. А можете использовать 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:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Интенсивность своего свечения светодиоды могут менять от 0 (не горит) и до "255" (максимально ярко). Если всем трем цветам задать параметр "0", то получится черный цвет, а если всем прописать "255" – будет белый. Меняя интенсивность свечения этих светодиодов, можно получить в итоге каких-то там 16 миллионов цветов  :gazeta:

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

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="http://stepkinblog.ru/">Ссылка сайта</a>
</body>
</html>

Меняем цвет для заголовка (H1, H3, H3) в CSS:

H1 {color: #cccccc; /* серый цвет */}
H2 {color: #0000ff; /* синий цвет */}
H3 {color: #00ff00; /* зеленый цвет */}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
Меняем цвет для текста в CSS:

p {color: #cc0000; /* красный цвет */}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8
Меняем цвет ссылки в 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; /* Стиль границы */
}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Есть еще и сокращенный способ:

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; /* Стиль границы */
}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Цвет фона

Свойство «BACKGROUND-COLOR»
Чтобы залить другим цветом фон страницы, таблицы, блока, воспользуйтесь правилом «background-color»:

Меняем фон страницы
Если вы хотите поменять цвет фона веб-страницы, то пропишите правило «background-color» к селектору «BODY» можно и к «HTML»

BODY {
background-color: #FFEE8C ;/* Цвет фона */
}

Или так

HTML {
background-color: #FFEE8C ;/* Цвет фона */
}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Меняем фон таблицы
Если вы хотите поменять цвет фона таблицы, то пропишите правило «background-color» к селектору «td», «table»

td
{
background-color: #cc0000 ;/* Цвет фона таблицы */
}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

table
{
background-color: #cc0000 ;/* Цвет фона таблицы */
}

Результат:

Как задать цвет в CSS. Основы CSS для начинающих. Урок №8

Меняем цвет кнопки
Если нужно поменять цвет кнопки, пропишите любой класс (для примера я прописал класс «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; /* синий цвет */
}

Надеюсь, что урок был для вас полезен, а самое главное  – ПОНЯТНЫМ!
Если вам интересны мои уроки, и вы в дальнейшем хотите по ним обучаться, подписывайтесь на обновления моего блога.

Удачи!!! :coffe:



Случайные записи:

  1. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  2. Модальное окно (всплывающее окно). Основы bootstrap 3 для начинающих. Урок №17
  3. Бесплатный курс по основам CSS
  4. Тесты CSS онлайн. Основы CSS для начинающих
  5. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу

Последние записи рубрики:

  1. Бесплатный курс по основам CSS
  2. Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
  3. Тесты CSS онлайн. Основы CSS для начинающих
  4. Слои в CSS. Основы CSS для начинающих. Урок №16
  5. Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?