Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях
Рубрика:Основы HTML

Как сделать в html документе текст цветным и преобразить свои статьи до неузнаваемости

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

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

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

Раскрасим буквы разными цветами

В первую очередь изменить цвет как отдельных букв, так и целого предложения можно при помощи тега html <font>. Хоть это и слегка устаревший элемент, его иногда используют разработчики и поддерживают все браузеры. При помощи <font> можно определить стиль шрифта, его цвет и размер. Так, при запуске этой строки изменится внешний вид заглавной буквы:

<h2><font size="7" color="blue" face="Calibri">П</font>ервая буква текущего предложения станет большой и синей</h2>

Более известным и распространенным среди верстальщиков приемом для видоизменения текста является css. Для установки определенного цвета шрифта в основном используют свойство color. Его описывают для конкретного тега в спецификациях стиля оформления.

Пример 1

Ниже приведен пример форматирования внешнего вида заголовка страницы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Видоизменение цветовой палитры при помощи css</title>
  <style>
   h2 {
    color: orange; 
    text-align:  center;
   }
    p {
     text-align:  center;
    }
  </style>
 </head>
 <body>
  <h2>Размещенный по центру оранжевый заголовок</h2>
   <p>Текст первого абзаца</p>
 </body>
</html>

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

Отмечу, что свойство text- align отвечает за горизонтальное выравнивание текста в пределах единицы языка html, в которой он задан.

Таблица цветовых кодов для html

Если в коде примера вы видите такие обозначения, как, например, #F8F8FF, не пугайтесь. Это всего лишь указание цвета. Такой «шифр» используется для упрощения работы с цветовой палитрой при написании веб-страниц.

Таблица цветовых кодов html


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

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

Название RGB Код для html
PeachPuff 255 218 185 #FFDAB9
LemonChiffon 255 250 205 #FFFACD
Azure 240 255 255 #F0FFFF
VioletRed 208 32 144 #D02090

Думаю, после просмотра выше представленной таблицы у некоторых может возникнуть вопрос: «А что такое RGB?». И это правильно!

RGB – это одна из разновидностей цветовых моделей, с помощью которой графическим элементам задаются оттенки.

Она относится к аддитивной группе моделей, так как каждый возможный оттенок получается путем добавления значений к черному (который задается цифрами 0 0 0). Таким образом, при изменении значений каждого канала R (отвечает за красный), G (зеленый) и B (синий) изменяется и выходной цвет.

Выделение текста при помощи фона

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

Так, задний план лучше всего задавать через элементы css. Для этого чаще всего используют универсальное свойство background. С его помощью можно форматировать одновременно 5 параметров фона: задание картинки или цвета, позиции, повторов или прокручивание вместе с содержимым страницы.

Пример 2

Теперь дополним предыдущий пример полученными знаниями:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    body {
          background:#F0FFFF;
    }
   h2 {
    color: orange; 
    text-align:  center;
   }
    p {
     text-align:  center;
     background: #FFDAB9;
    }
  </style>
 </head>
 <body>
  <h2>Размещенный по центру оранжевый заголовок</h2>
   <p>Текст первого абзаца</p>
 </body>
</html>

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

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

С уважением, Роман Чуешов


Прочитано: 132 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: