Как добавить цвет фона к заголовку текста? Как изменить цвет шрифта в HTML, с помощью веб-браузера Mozilla Firefox? Как сделать цветной надпись в html


Виды заработков через Интернет,
или на что не нужно тратить время


С чего лучше начинать новичкам.
Где же в Интернете деньги или стратегия заработка в сети


Инструкция создания сайта за 5 минут. Основы html и пошаговое создание сайта


Как стать веб дизайнером и научиться создавать сайты на высоком уровне.


Как заработать на своем сайте, как раскрутить сайт и получать прибыль на автопилоте


У вас есть сайт, но он не приносит прибыль? Обзор сервисов по монетизации


Не знаете куда вложить деньги,
чтобы получить прибыль? Это уникальная информация


О форексе вообще. Как правильно вложить свой капитал или заработок 50$ в день на автопилоте


Как и где купить домен и хостинг. Как загрузить сайт в интернет


Как перенести домен к другому регистратору, чтобы сэкономить на продлении



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

Html код который у нас уже есть:

Содержимое моего сайта.

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

Измените тег следующим образом: text="#FF0000" > , то есть для изменения html цвета текста, нужно добавить параметр text= и указать его значение "#FF0000".

Значение параметра определяет цвет, то есть "#FF0000" – красный цвет. Здесь действует закон трех цветов.

Например, "#00FF00" – зеленый html цвет, "#0000FF" – синий html цвет текста. При смешивании, эти три цвета образуют новые оттенки и html цвета. Например, "#3715FB".

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

Название страницы моего первого сайта

Содержимое моего сайта.
Я прохожу уроки создания сайта.

(Синим цветом будут выделены новые участки html кода)

Должно получиться следующее > измененный .

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

Заключите нужный текст между тегами . Это новый html тег, он является парным.

Затем, введите параметр color= со значением "#00FF00", то есть так color="#00FF00" > текст другого цвета .

Применим знания на нашем html коде и изменим фрагмент текста.

Название страницы моего первого сайта

Содержимое моего сайта.
Я прохожу уроки создания сайта.

Должно получиться следующие > меняем .

Цвет фона html

Теперь изменим цвет фона html , для этого нужно задать в теге параметр bgcolor= со значением "#494949", то есть bgcolor="#494949" > .

Цвет фона html не обязательно брать "#494949", можно взять любой другой.

Давайте внесем изменения в наш код и изменим цвет фона html.

Название страницы моего первого сайта

Содержимое моего сайта.
Я прохожу уроки создания сайта.

Теперь посмотрим, что получилось > изменение

В этом уроке вы узнаете, как менять цвет фона и текста любых элементов HTML-страницы. Вообще, в языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега

Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style , который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета - В HTML имеется большой список и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

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

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style . Общий синтаксис следующий:

<тег style= "color:имя цвета" >... - указание цвета текста по имени.

<тег style= "color:#HEX-код" >... - указание цвета текста по коду.

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

Пример изменения цвета текста

Изменение цвета текста

Красный текст заголовка

Синий текст параграфа.

Зеленый курсив. Красный текст.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style . Общий синтаксис такой:

<тег style= "background:имя цвета" >... - указание цвета фона по имени.

<тег style= "background:#HEX-код" >... - указание цвета фона по коду.

Пример изменения цвета фона

Изменение цвета фона

Заголовок.

Параграф.

Жирный текст. Обычный текст.

Результат в браузере

Заголовок.

Параграф.

Жирный текст. Обычный текст.

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

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
  2. Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи - 22px, а у подзаголовков по 19px.
  3. Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков - #CC3366.
  4. Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
  5. Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).

Дата создния: 2009-11-18

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

1. часть

Хотя все цвета в HTML прописываются необычным способом, делается это очень просто. Во-первых, я предлагаю Вам скачать палитру web-цветов, нажав по слову ПАЛИТРА , или поискать более полную версию в Интернете. Возле каждого цвета в найденной Вами палитре, будет стоять код (английские буквы и цифры). Для того, чтобы наш цвет был, например, синим, необходимо записать такой тег:

Привет! Начинаем изучение HTML

Тоесть вот, что мы имеем:
1. текст заключен в тег ...
2. тег имеет атрибут color (цвет) = #0000FF

Теперь давайте вернёмся к нашему примеру и рассмотрим все наглядно. Снова открываем созданную ранее страничку в блокноте и изменяем цвет шрифта:

Обновляем HTML страницу и проверяем то, что получилось:

Результат: Первая строка стала синего цвета, а вторая осталась по умолчанию - черной.

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

2. часть

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

И так, как мы знаем, ... - тоже тег, поэтому, мы можем ему, так же как и тегу ... , задать необходимые атрибуты.

Цвет в этом случае задается в открывающемся теге , и запись будит выглядеть так:Весь текст вашего документа

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

Теперь рассмотрим эту часть статьи на примере. Присвоим всему тексту документа красный цвет, а тот текст, который мы в 1 части сделали синим, таким и оставим. Для этого просто прописываем код открывающемуся тегу :

Затем, как всегда перед просмотром, сохраняем документ:

И, наконец, обновляем HTML страницу в браузере:

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

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

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

Конструктор сайтов "Нубекс"

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега 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

Конструктор сайтов "Нубекс"

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

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

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

Меняем цвет шрифта при помощи CSS

Конструктор сайтов "Нубекс"

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

Задача

Изменить цвет текста заголовка и фона под ним.

Решение

Для изменения цвета фона под текстом используется универсальное свойство background , которое следует добавить к селектору h1 . Цвет заголовка меняется с помощью свойства color , которое также добавляется к этому селектору (пример 1).

Пример 1. Цвет фона под заголовком

HTML5 CSS 2.1 IE Cr Op Sa Fx

Цвет фона под заголовком

Закон внешнего мира

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

Результат данного примера показан на рис. 1.

Рис. 1. Цвет фона под заголовком текста

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