Разное

Как сделать фон для текста в html: Как добавить цвет фона к заголовку текста?

14.03.1970

Содержание

seodon.ru | Учебник HTML — Меняем цвет текста и фона

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

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

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

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

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

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

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

<тег>…</тег> — указание цвета текста по имени.

<тег>…</тег> — указание цвета текста по коду.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета текста</title>
</head>
<body>
<h5>Красный текст заголовка</h5>

<p>Синий текст параграфа.</p>

<p>
 <em>Зеленый курсив.</em>
 <span>Красный текст.</span> 
</p>
</body>
</html>

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

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

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

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

Красный текст.

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

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

<тег>…</тег> — указание цвета фона по имени.

<тег>…</тег> — указание цвета фона по коду.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение цвета фона</title>
</head>
<body>
<h5>Заголовок.</h5>

<p>Параграф.</p>

<p>
 <b>Жирный текст.</b>
 <span>Обычный текст.</span> 
</p>
</body>
</html>

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

Заголовок.

Параграф.

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

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

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

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

Посмотреть результат → Посмотреть ответ

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

» Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга <body>. Хочу зацепить тег <body>, так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML  страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:

<body text=»#cc0000″>

или обычным названием цвета:

<body text=»green»>

Код кодировки и название цвета для HTML вы посмотрите тут.

Вот пример:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="#cc0000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Изменяем цвет текста с помощью атрибута text</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR, который тоже размещается в теге <body>, можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

<body bgcolor=»#000000″>

или обычным названием цвета:

<body bgcolor=»green»>

Вот пример:


<html>
<head>
<title>Изменяем цвет фона с помощью атрибута BGCOLOR</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="#000000" text="green">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body bgcolor="green" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут  BACKGROUND тоже размещается в теге <body>. С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif. Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

<bоdy baсkground=»fon.gif»>

Если фоновая картинка размещена в папке images, это будет выглядеть так:

<bоdy baсkground=»images/fon.gif»>

Вот пример:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="fon.gif" text="black">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Результат:

Или вот так:


<html>
<head>
<title>Заголовок страницы</title>
<meta http-equiv="content-type" content="text/html; charset=Windows-1251">
</head>
<body background="images/fon.gif" text="#000000">
Текст страницы, таблицы, картинки, музыка и видео.
</body>
</html>

Вот и все.

Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи!!!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: html, основы

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Главная » Основы HTML » Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Как сделать фон в HTML-странице. Основы HTML для начинающих. Урок №12

Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и на примерах покажу, как сделать фон из цвета или картинки в HTML-странице.
Все довольно просто!
Начнем из цвета!
Я думаю, вы не пропустили урок №11, там, где я рассказывал, как менять цвет текста и в конце статьи давал коды различных цветов и оттенков. Почему я напомнил вам об этом уроке? Да потому, что там есть таблица с готовыми кодами цветов, берите их и практикуйте сразу в этом уроке.
Итак, как сделать цветовой фон в HTML…

Цветовой фон в HTML

Цвет фона в HTML-документе по умолчанию белый. Как же задать цвет по желанию?
В этом нам поможет атрибут «bgcolor». Чтобы закрасить задний фон, пропишите этот атрибут к тегу «body» :

<body bgcolor="#cc0000">

Либо так:

<body bgcolor="red">

Вот полный HTML-код:


<html>
<head>
<title>Изменяем цвет фона – StepkinBlog.ru</title>
</head>
<body bgcolor="#000000" text="green">
Текст страницы будет зеленый, а фон черным.
</body>
</html>

Результат будет вот таким:

Как сделать в HTML картинку фоном

Если вы хотите сделать фон из картинки, тогда к тегу «body» пропишите атрибут «baсkground»:

Залейте любую картинку туда, где лежит ваша веб-страница (на примере у меня страница имеет название «fon» с расширением «.gif»):

<body background="fon.gif">

Вот полный HTML-код:


<html>
<head>
<title>фона  – StepkinBlog.ru</title>
</head>
<body background="fon.gif" text="#fff">
Текст страницы на красивом фоне.
</body>
</html>

Результат будет вот таким:

Если фоновая картинка размещена в папке images или в какой-то другой папке, это будет выглядеть так:

<body background="images/fon.gif">

Вот полный HTML-код:


<html>
<head>
<title>фона  – StepkinBlog.ru</title>
</head>
<body background="images/fon.gif" text="#fff">
Текст страницы на красивом фоне.
</body>
</html>

На сегодня это все! Я думаю, урок был не сложный и вы все поняли. Если есть вопросы, пишите в комментариях.
Жду вас на следующих уроках.

Предыдущая запись
Коды цветов в HTML. Основы HTML для начинающих. Урок №11 Следующая запись
Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13

Применение цвета к HTML элементам с помощью CSS — HTML

Использование цвета — одна из фундаментальных форм человеческого восприятия, так дети экспериментируют с цветом ещё до того, как начинают осознанно рисовать. Возможно, именно поэтому цвет — одна из первых вещей, с которой люди хотят экспериментировать, изучая разработку веб-сайтов. С помощью CSS, существует множество способов присвоить цвет HTML элементам, чтобы придать им желаемый вид. Эта статья даёт базовые представления о всех способах применения цвета к HTML элементам с помощью CSS.

К счастью, присвоить цвет к HTML элементу очень просто, и это можно сделать практически со всеми элементами.

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

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

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

На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML элемента, а свойство background-color — цвет фона элемента. Они работают практически для всех элементов.

Текст

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

color (en-US)
Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
background-color
Цвет фона текста.
text-shadow

Добавляет и устанавливает параметры тени для текста. Один из параметров тени — это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. См. Text drop shadows в Fundamental text and font styling, чтобы узнать больше.

text-decoration-color (en-US)

По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.

text-emphasis-color (en-US)

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

caret-color (en-US)

Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как <input> и <textarea> (en-US) или элементам , для которых установлен атрибут contenteditable.

Блоки

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

borders
См. раздел Borders с перечнем свойств CSS, с помощью которых можно присвоить цвет границам блока.
background-color
Цвет фона блока.
column-rule-color
Цвет линий, которые разделяют колонки текста.
outline-color (en-US)
Цвет контура, вокруг границы элемента. Этот контур отличается от границы элемента тем, что он не занимает место в документе и может перекрывать другой элемент. Обычно его используют как рамку-индикатор, чтобы показать какой элемент находится в фокусе.

Границы

Вокруг любого элемента можно создать границу, т.е. линию вокруг содержимого элемента. См. Box properties в The box model, чтобы узнать больше про отношения между элементами и их границами, и статью Оформляем Границы с Помощью CSS, чтобы узнать больше про то, как применять стили к границам.

Существует краткая запись border, которая позволяет задать сразу все свойства границы, включая даже не связанные с цветом свойства, такие как толщина линии (width), стиль линии (style): сплошная (solid),  штриховая (dashed) и так далее.

border-color (en-US)
Задаёт единый цвет для всех сторон границы элемента.
border-left-color (en-US), border-right-color (en-US), border-top-color (en-US), and border-bottom-color (en-US)
Позволяет установить цвет соответствующей стороне границы элемента: border-left-color — левая граница, border-right-color — правая, border-top-color — верхняя, border-bottom-color — нижняя.
border-block-start-color (en-US) and border-block-end-color (en-US)
С помощью этих свойств вы можете установить цвет границ, которые расположены ближе всего к началу и концу блока. Для письменности слева направо, начало границы блока — верхний край, а конец — нижний. Не путайте с началом и концом строки, где начало — это левый край, а конец — правый.
border-inline-start-color (en-US) and border-inline-end-color (en-US)
Эти свойства определяют цвет границы, расположенной ближе всего к началу и концу текста в блоке. Сторона начала и конца зависит от свойств writing-mode, direction и text-orientation (en-US), которые обычно (но не всегда) используются для настройки направления текста. Например, если текст отображается справа налево, то border-inline-start-color применяется к правой стороне границы.

Как можно ещё использовать цвет

CSS не единственная web-технология, которая поддерживает цвет.

HTML Canvas API
Позволяет создавать растровую 2D-графику в элементе <canvas>. См. Canvas tutorial, чтобы узнать больше.
SVG (Scalable Vector Graphics — Масштабируемая Векторная Графика)

Позволяет создавать изображения с помощью команд, которые рисуют определённые фигуры, узоры, линии для создания конечного изображения. Команды SVG форматируются в XML, и могут размещаться непосредственно на веб-странице, или в элементе <img>, как и любое другое изображение.

WebGL
Библиотека Веб-Графики (The Web Graphics Library) — это кроссплатформенный API на основе OpenGL ES, используется для создания высокопроизводительной 2D и 3D-графики в браузере. См. Learn WebGL for 2D and 3D, чтобы узнать больше..

Для того чтобы задать цвет в CSS, необходимо найти способ как перевести понятие «цвета» в цифровой формат, который может использовать компьютер. Обычно это делают разбивая цвет на компоненты, например какое количество единиц основных цветов содержится в данном цвете или степень яркости. Соответственно, есть несколько способов как можно задать цвет в CSS.

Подробнее о каждом значения цвета, можно прочитать в статье про CSS <color>.

Ключевые слова

Существует набор названий цветов стандартной палитры, который позволяет использовать ключевые слова вместо числового значения цвета. Ключевые слова включают основные и вторичные цвета (такие как красный (red), синий (blue), или оранжевый (orange)), оттенки серого (от чёрного (black) к белому (white), включая такие цвета как темносерый (darkgray) или светло-серый (lightgrey)), а также множество других смешанных цветов: lightseagreen, cornflowerblue, и rebeccapurple.

См. Color keywords в <color> — полный перечень всех доступных ключевых слов.

RGB значения

Есть три способа передачи RGB цвета в CSS.

Шестнадцатеричная запись в виде строки

Шестнадцатеричная запись передаёт цвет, используя шестнадцатеричные числа, которые передают каждый компонент цвета (красный, зелёный и синий). Запись также может включать четвёртый компонент: альфа-канал (или прозрачность). Каждый компонент цвета может быть представлен как число от 0 до 255 (0x00 — 0xFF) или, опционально, как число от 0 до 15 (0x0 — 0xF). Каждый компонент необходимо задавать используя одинаковое количество чисел. Так, если вы используете однозначное число, то итоговый цвет рассчитывается используя число каждого компонента дважды: "#D" превращается в "#DD".

Цвет в шестнадцатеричной записи всегда начинается с символа "#". После него начинаются шестнадцатеричные числа цветового кода. Запись не зависит от регистра.

"#rrggbb"
Задаёт полностью непрозрачный цвет, у которого компонент красного цвета представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb.
"#rrggbbaa"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xrr, зелёного — 0xgg и синего — 0xbb. Альфа канал представлен 0xaa; чем ниже значение, тем прозрачнее становится цвет.
"#rgb"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb.
"#rgba"
Задаёт цвет, у которого компонент красного представлен шестнадцатеричным числом 0xr, зелёного — 0xg и синего — 0xb. Альфа канал представлен 0xa; чем ниже значение, тем прозрачнее становится цвет.

Например, вы можете представить непрозрачный ярко-синий цвет как "#0000ff" или "#00f". Для того, чтобы сделать его на 25% прозрачным, вы можете использовать "#0000ff44" или "#00f4".

RGB запись в виде функции

RGB запись в виде функции, как и шестнадцатеричная запись, представляет цвет, используя красный, зелёный и синий компоненты (также, опционально можно использовать компонент альфа канала для прозрачности). Но, вместо того, чтоб использовать строку, цвет определяется CSS функцией rgb(). Данная функция принимает как вводные параметры значения красного, зелёного и синего компонентов и, опционально, четвёртого компонента — значение альфа канала.

Допустимые значения для каждого из этих параметров:

red, green, и blue
Каждый параметр должен иметь <integer> значение между 0 и 255 (включительно), или <percentage> от 0% до 100%.
alpha
Альфа канал — это числовое значение между 0.0 (полностью прозрачный) и 1.0 (полностью непрозрачный). Также можно указать значение в процентах, где 0% соответствует 0.0, а 100% — 1.0.

Например, ярко-красный с 50% прозрачностью может быть представлен как rgb(255, 0, 0, 0.5) или rgb(100%, 0, 0, 50%).

HSL запись в виде функции

Дизайнеры часто предпочитают использовать цветовую модель HSL, где H — Hue (оттенок), S — Saturation (насыщенность), L — Lightness or Luminance (светлота). В браузерах HSL цвет представлен через запись HSL в виде функции. CSS функция hsl() очень похожа на rgb() функцию.

Рис. 1. Цилиндрическая модель HSL. Hue (оттенок) определяет фактический цвет, основанный на положении вдоль цветового круга, представляя цвета видимого спектра. Saturation (насыщенность) представляет собой процентное соотношение оттенка от серого до максимально насыщенного цвета. По мере увеличения значения luminance/ lightness (светлоты) цвет переходит от самого тёмного к самому  светлому (от чёрного к белому). Изображение представлено пользователем SharkD в Wikipedia, распространяется на правах лицензии CC BY-SA 3.0 .

Значение компонента оттенок (H) цветовой модели HSL определяется углом при движении вдоль окружности цилиндра от красного через жёлтый, зелёный, голубой, синий и маджента, и заканчивая через 360° снова красным. Данное значение определяет базовый цвет. Его можно задать в любых единицах, поддерживаемых CSS свойством <angle>, а именно —  в градусах (deg), радианах (rad), градиентах (grad) или поворотах (turn). Но компонент оттенок никак не влияет на то, насколько насыщенным, ярким или темным будет цвет.

Компонент насыщенность (S) определяет количество конечного цвета из которого состоит указанный оттенок. Остальное определяется уровнем серого цвета, которое указывает компонент luminance/ lightness (L).

Подумайте об этом как о создании идеального цвета краски:

  1. Вы начинаете с базовой краски, т.е. с максимально возможной интенсивности данного цвета. Например, наиболее насыщенный синий, который может быть представлен на экране пользователя. Это компонент hue (оттенок): значение представляющее угол вокруг цветового круга для насыщенного оттенка, который мы хотим использовать в качестве нашей базы.
  2. Далее выберете краску серого оттенка, которая будет соответствовать тому, насколько ярким вы хотите сделать цвет. Это luminance/ lightness (яркость). Вы хотите, чтобы цвет был очень ярким, практически белым или очень темным, ближе к чёрному, или что-то среднее? Данный компонент определяется в процентах, где 0% — совершенный чёрный цвет и 100% — совершенный белый (независимо от насыщенности или оттенка). Средние значения — это буквальная серая область.
  3. Теперь, когда у есть серый цвет и идеально насыщенный цвет, вам необходимо их смешать. Компонент saturation (насыщенность) определяет какой процент конечного цвета должен состоять из идеально насыщенного цвета. Остаток конечного цвета формируется серым цветом, который представляет насыщенность.

Опционально вы также можете включить альфа-канал, чтобы сделать цвет менее прозрачным.

Вот несколько примеров цвета в HSL записи:

Обратите внимание, что, когда вы не указываете единицу измерения оттенка (hue), то предполагается, что он указан в градусах (deg).

Теперь, когда вы знаете какие существуют свойства CSS для присваивания цвета к элементам и какие есть форматы описания цвета, вы можете соединить это вместе, чтобы начать использовать цвет. Как вы уже видели в списке под разделом Что может иметь цвет, существует множество вещей, к которым можно применить цвет, используя CSS. Давайте взглянем на это с двух сторон: использовать цвет в таблицах стилей (stylesheet (en-US)) и добавлять, изменять цвет, используя JavaScript код.

Цвет в таблицах стилей CSS

 

Самый простой способ присвоить цвет элементу и то, как это обычно делается — это просто указать цвет в CSS. Мы не будем останавливаться на каждом из вышеупомянутых свойств, а просто рассмотрим несколько примеров. Где бы вы не использовали цвет, принцип один и тот же.

Давайте начнём наш пример с результата, который нам нужно достичь:

 

HTML

HTML, который создаёт вышеупомянутый пример:

<div>
  <div>
    <p>
      This is the first box.
    </p>
  </div>
  <div>
    <p>
      This is the second box.
    </p>
  </div>
</div>

Все довольно просто: первый <div> используется как обёртка (wrapper) содержимого, которое состоит из ещё двух <div>, каждый из которых содержит один параграф (<p>) и имеет свой стиль.

Все волшебство, как всегда, происходит в CSS, где мы и будем присваивать цвет к данным HTML элементам..

CSS

CSS мы рассмотрим более детально, чтобы по очереди проанализировать все интересные части.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

 

Класс .wrapper определяет стиль для элемента <div>, который заключает в себе все остальные элементы. Он устанавливает размер контейнера с помощью свойств ширины width, высоты height, внешних margin и внутренних padding полей.

Но больше всего нас интересует свойство граница border, которое устанавливает границу вокруг внешнего края элемента. Данная граница представлена сплошной линией, шириной в 6 пикселей, светло-бирюзового цвета (mediumturquoise).

Два цветных блока имеют ряд одинаковых свойств, поэтому далее мы установим класс .box, который определит эти общие свойства:

 

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

Вкратце класс .box устанавливает размер каждого блока и параметры шрифта. Также мы используем CSS Flexbox, чтобы с лёгкостью отцентрировать содержимое каждого блока. Мы включаем режим flex с помощью display: flex, и присваиваем значение center justify-content и align-items. Затем мы создаём отдельные классы для каждого из двух блоков, которые определят индивидуальные свойства.

 

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

 

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

  • background-color определяет цвет фона блока значением rgb(245, 130, 130).
  • outline (en-US), в отличие от привычного нам свойства border,  не влияет на положение блока и его ширину. Outline представлен сплошной, темно-красной линией, шириной в 2 пикселя. Обратите внимание на ключевое слово darkred, которое используется для определение цвета.
  • Обратите внимание, что мы не определяем значение цвета текста. Это означает, что свойство color (en-US) будет унаследовано от ближайшего родительского элемента, у которого это свойство определено. По умолчанию это чёрный цвет.

 

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

 

Класс .boxRight описывает свойства правого блока. Блок выравнивается по правому краю и становится рядом с предыдущим блоком. Затем определяются следующие цвета:

  • background-color определяется значением HSL: hsl(270deg, 50%, 75%). Это светло-фиолетовый цвет.
  • Outline блока определяет, что вокруг блока должна быть прерывистая линия, шириной в четыре пикселя, фиолетового цвета немного темнее, чем цвет фона (rgb(110, 20, 120)).
  • Цвет текста определяется свойством color (en-US), значение которого hsl(0deg, 100%, 100%). Это один из многих способов задать белый цвет.
  • С помощью text-decoration (en-US) мы добавляем зелёную волнистую линию под текстом.
  • И наконец, свойство text-shadow добавляет небольшую чёрную тень тексту.

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you’re implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it’s been necessary to implement your own color picker, HTML now provides support for browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.

The <input> element represents a color only in the hexadecimal string notation covered above.

Example: Picking a color

Let’s look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker’s value is displayed.

On macOS, you indicate that you’ve finalized selection of the color by closing the color picker window.

HTML

The HTML here creates a box that contains a color picker control (with a label created using the <label> element) and an empty paragraph element (<p>) into which we’ll output some text from our JavaScript code.

<div>
  <label for="colorPicker">Border color:</label>
  <input type="color" value="#8888ff">
  <p></p>
</div>
CSS

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won’t last, courtesy of the JavaScript below…

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
}
JavaScript

The script here handles the task of updating the starting color of the border to match the color picker’s value. Then two event handlers are added to deal with input from the <input type="color"> element.

let colorPicker = document.getElementById("colorPicker");
let box = document.getElementById("box");
let output = document.getElementById("output");

box.style.borderColor = colorPicker.value;

colorPicker.addEventListener("input", function(event) {
  box.style.borderColor = event.target.value;
}, false);

colorPicker.addEventListener("change", function(event) {
  output.innerText = "Color set to " + colorPicker.value + ".";
}, false);

The input (en-US) event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box’s border color to match the color picker’s current value.

The change (en-US) event is received when the color picker’s value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren’t well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

Finding the right colors

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can’t replace having a good designer helping you make these decisions, they can definitely get you started.

Base color

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage Mountain Dew and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

  • A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.
  • A color that comes from imagery associated with what your content is about. If you’re creating a web site about a given item or product, choose a color that’s physically present on that item.
  • Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

Fleshing out the palette

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See Color and accessibility for a brief explanation of why this matters.

A few examples (all free to use as of the time this list was last revised):

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you’ll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

Color theory resources

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

Color Science (Khan Academy in association with Pixar)
An online course which introduces concepts such as what color is, how it’s percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
Color theory on Wikipedia
Wikipedia’s entry on color theory, which has a lot of great information from a technical perspective. It’s not really a resource for helping you with the color sleection process, but is still full of useful information.

Color and accessibility

There are several ways color can be an accessibility problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it’s important to consider your use of color carefully.

You should do at least basic research into color blindness. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won’t be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what’s happening.

For more information about color blindness, see the following articles:

Palette design example

Let’s consider a quick example of selecting an appropriate color palette for a site. Imagine that you’re building a web site for a new game that takes place on the planet Mars. So let’s do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet’s surface. We use a color picker tool to select a sample of the color we choose.

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that’s so stereotypical of the Martian surface.

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

Next, we enter our color’s hex code (D79C7A) into the «Base RGB» box at the bottom-left corner of the tool:

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the «add complementary» toggle underneath the menu that lets you select the palette type (currently «Monochromatic»). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

If you’re unhappy with the color that’s proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don’t like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it’s #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there’s just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It’s easy to go too far in one way or another so be sure to get feedback on your colors once you’ve selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

Как сделать фон текста белым в word?

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

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

  1. Перейдите в главном меню текстового редактора в раздел Разметка страницы.
  2. Нажмите на данном разделе на инструмент Цвет страницы и в раскрывшейся таблице выбора цветов выберите белый цвет заливки, или выберите пункт Нет цвета.

    удаление фона страниц

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

  1. Нажмите в главном разделе программы пункт меню Выделить и далее Выделить все. Более быстро это можно сделать нажав сочетание «горячих» клавиш для выполнения данного действия Ctrl + A.
  2. В том же главном разделе текстового редактора нажмите на инструмент Цвет выделения текста и выберите пункт Нет цвета.

    удаление фона слов

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

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

    значок выделения таблицы

  2. В новых версиях офис в результате данного действия вы сразу же перейдете к конструктору работы с таблицами. Если вы используете более старые версия редактора с классическим меню, то вам нужно будет перейди в раздел редактирования таблиц вручную.
  3. В разделе Конструктор нажмите на инструмент Заливка и также как и в предыдущих рекомендациях выберите пункт Нет цвета.

    удаление фона ячеек таблицы

В статье были рассмотрены способы способы как убрать фон текста в Ворде на примере текстового редактора MS Word 2007. В более новых версиях редактора отключение фона осуществляется аналогичным образом только незначительно может отличаться интерфейс и расположение тех или иных инструментов в меню.

Если вы часто работали с документами Word, вы скорее всего обращали внимание на выделения в тексте, которое рассчитано на привлечение внимания к определенному объекту в тексте. Это может быть как отдельная буква, слово, предложение или же даже ячейка в таблице, которая вставлена как объект. Возможно даже выделение фоном всего листа целиком или же всего документа. Но чрезмерное выделение может не только не выполнять свое предназначение, а и раздражать при просмотре и чтении документа. Я думаю что вы не увлекаетесь такими крайностями (хотя я видел такое часто) и в случае, если вам для чтения или ознакомления попадется такой документ, после прочтения вы будете знать как в ворде убрать фон за текстом, как убрать фон в ворде при копировании и как сделать фон. Давайте по порядку.

Статьи по теме:

  • Как записать файл ISO
  • Как в экселе сделать выпадающий список

Как в ворде убрать фон за текстом

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

Удаление фона страницы

Для удаления фона страницы сделайте следующее:

  1. Для Word 2007-2010 в открытом документе в верхней части Ворд выбираете раздел «Разметка страницы», для Word 2013 вам надо выбрать раздел «Дизайн». Я использую Word 2013 и изображения привожу для этой версии.
  2. В разделе находите панель «Фон страницы» в которой необходимо нажать на кнопку «Цвет страницы»
  3. В выпадающем меню нажмите на ссылку «Нет цвета»

Убираем фон текста

Кроме задания фона всей страницы, возможен вариант с выделением отдельного текста фоном. Чтобы убрать это выделение:

  1. Курсором выделите весь текст, фон которого необходимо убрать или изменить
  2. Откройте вкладку «Клавная» в верхней части документа
  3. Найдите иконку с изображением ведра с краской и нажмите на него
  4. В выпадающем списке выберите нет цвета. Фон выделенного вами текста исчезнет.
  5. Еще один инструмент чтобы убрать фон текста — это маркер. С его помощью можно выборочно отмечать нужные слова, а так же выборочно убирать фон. Вы просто выбираете этот инструмент, выбираете цвет выделения (если необходимо выделить) или пункт «Нет цвета» (если необходимо убрать цвет фона и просто выделяете интерактивно выборочный текст. Можно так же выделить весь текст.

Удаление фона всей таблицы

Увидеть ярко выделенные ячейки или вовсе всю таблицу тоже не редкость. Многие финансовые документы выглядят как праздничные открытки школьников. Чтобы избавиться от этого проделайте следующее:

  1. Наведите курсор над таблицей (должен появиться в левом верхнем углу таблицы крестик) и нажмите на крестик правой кнопкой мыши. Появиться контекстное меню
  2. Нажмите на ведро с заливкой .
  3. В выпадающем списке выберите «Нет цвета».

Удаление фона отдельных ячеек в таблице

Фон отдельных ячеек изменить или убрать не сложнее чем фон всей таблицы. Для этого:

  1. Выделяете несколько ячеек правой кнопкой мыши (не отпуская ее), после выделения должно появиться всплывающее меню. Если не появилось, нажмите правой кнопкой мыши на выделенных ячейках. Для одной ячейки сразу нажимайте на ней правой кнопкой мыши.
  2. Нажмите на иконке с ведром.
  3. В выпадающем списке выберите «Нет цвета»

Как убрать фон в ворде при копировании

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

  1. Выделите текст, который вы вставили.
  2. Перейдите на вкладку «Главная», найдите иконку «Удалить все форматирование» с изображением ластика и буквой на его фоне. Нажмите на нее и Ворд уберет все форматирование и фон текста в том числе. Еще одним вариантом не «Заносить» ненужное форматирование в документ — это перед вставкой в Ворд использовать блокнот (входит в стандартный пакет Windows). Блокнот не воспринимает форматирование. Вы вставляете текст в блокнот, потом копируете этот текст из блокнота в Word.

Как сделать фон в ворде

Описывать как сделать фон для всех элементов нет необходимости, т.к. вы можете проделать все вышеописанные операции для здания фона. Просто вместо выбора пункта «Нет цвета» выберите необходимый цвет.

В этом разделе есть опция «Фон страницы». 2. На панели инструментов Word зайти в раздел «Вставка». Фон отдельных ячеек изменить или убрать не сложнее чем фон всей таблицы. В выпадающем списке выберите нет цвета. Фон выделенного вами текста исчезнет. При копировании текста в редактор Word у пользователя могут возникнуть проблемы с наличием дополнительного фона, который нужно убрать.

Если речь идет о фоне, покрывающем всю поверхность страницы, то мы уже изучали, как изменять цвет фона – «Оформление документа: изменяем цвет фона листа». Но встречается и другой случай, когда фон идет только под строчками текста. По-видимому, мы имеем дело с цветом выделения текста и нам надо его убрать. Выделим этот текст, правый щелчок, и в появившемся меню выбираем «Нет цвета». С текстом, скопированным из интернета, иногда и этот метод не помогает, и приходится принимать более радикальные меры – очищать формат при помощи кнопки «Изменить стили».

Как сделать фон в ворде

Чтобы добраться до функции очистки формата, нужно в меню «Формат» выбрать «Стили и форматирование». При копировании текста из интернета довольно часто текст вставляется с заливкой. В этой инструкции я покажу Вам, как можно ее убрать в Microsoft Word 2013. Для копирования текста выделяем его и кликаем по выделенному фрагменту правой кнопкой мыши. Затем жмем строку «Копировать».

Если вы часто работали с документами Word, вы скорее всего обращали внимание на выделения в тексте, которое рассчитано на привлечение внимания к определенному объекту в тексте. Это может быть как отдельная буква, слово, предложение или же даже ячейка в таблице, которая вставлена как объект.

Но чрезмерное выделение может не только не выполнять свое предназначение, а и раздражать при просмотре и чтении документа. Среди них буква, слово, абзац, весь текст или элемент в таблице (ячейка, столбец или строка). Для Word 2007-2010 в открытом документе в верхней части Ворд выбираете раздел «Разметка страницы», для Word 2013 вам надо выбрать раздел «Дизайн».

Это может быть шрифт, размер, цвет и многое другое. Выделите текст, который вы вставили. Если оно не поможет то вероятно объект с фоном может являться таблицей. Интересно конечно, почему у вас не видно фона, видимо это какие-то настройки. На портале о Microsoft Office Word вы узнаете про: как в worde чтобы автоматически проставлялись значения. Также на Ворд Эксперт есть подраздел, где вы можете найти готовые решения и подраздел, в котором можно оставить заявку, описав свою проблему.

В зависимости от версии программы сделать это можно следующими способами. Можно также использовать вариант с переходом во вкладку «Стили», которая находится в главном разделе. В правом нижнем углу располагается позиция «Очистить все», которая позволит удалить ненужный формат текста. Текст в редакторах Word может выделяться цветом двумя способами: при помощи выделения или заливки.

Убираем фон в Word документе

При желании можно выделить текст полностью. Перейти в раздел «Главная». Данная кнопка располагается около «Заливки» в панели «Абзац». Данный маркер расположен в подразделе «Шрифт».• Выбрать позицию «Без цвета». Итак, у вас есть вордовский файл. По каким-то причинам вам нужно убрать фон, который уже есть в этом документе.

Чтобы ответить на вопрос как в ворде убрать фон, постарайтесь для начала определить, что он собой представляет, в вашем конкретном случае:1. Странички документа имеют не привычный белый фон, а другую заливку (голубой, зеленый, серый, розовый и пр. или комбинацию из нескольких вариантов оттенков). 2. Титульная (и только) страница документа имеет определенное форматирование (стиль). После того, как вы определили формат стиля, для каждого из этих случаев существует свой вариант решения, как убрать фон в word документе.

Убираем фон текста

Выбираем команду «Цвет страницы», открывается закладка с командами, где вам нужно нажать на командную строчку «Нет цвета». Стоит учитывать, что после того, как вы воспользуетесь этой командой, исчезнет и сам текст (если он был), который использовался для оформления титульной страницы.

Выделите строку «Неформатированный текст» и нажмите ОК. Так в вашем документе останется текст с титульной странички, но он потеряет прежнее форматирование. Выбираем команду «Верхний колонтитул» или «Нижний колонтитул» (зависит от того, где вам нужно убрать фон – вверху или внизу страницы).

Далее выделите рисунок (а возможно это будет диаграмма, текст, фото или геометрическая фигура). Если сказать проще – выделите тот объект, который является фоновой заставкой вашего документа, и который вы намереваетесь удалить/убрать. Если таких объектов на странице несколько, таким же образом вам удастся убрать каждый из них. На всех остальных страницах, надписи и изображения исчезнут автоматически.

Как это сделать в Word 2003

Заключается в том, что после копирования следует не просто «вставить» текст, а использовать «специальную вставку». Выпадает окошко, где выбираем «вставить как неформатированный текст». У нас есть текст с фоном. Выделяем его. Ищем на ленте/панели инструментов кнопку «Очистить формат» (кнопка с буквами Aa и ластиком).

В принципе, данный способ идентичен по результату способу с «Блокнотом», но занимает меньше времени. Далее просто выделяем абзац с фоном, и фон пропадает (возможно появление курсива). Чтобы провернуть операцию с несколькими кусками текста — нужно щелкать по кнопке «формат по образцу» двойным ЛКМ: тогда она «зафиксируется», пока мы ее сами не отключим.

Убирает фон, «насылает» других «проклятий», зато незначительных. Выделяем текст с фоном. Обращаем взор на панель инструментов, а точнее на блок «Стили». После применения стиля останется лишь сменить цвет текста (в зависимости от выбранного стиля), убрать курсив и выбрать нужный шрифт. «Лишних» операций хватает, но от проблемы избавиться помогает.

Возможно даже выделение фоном всего листа целиком или же всего документа. Я использую Word 2013 и изображения привожу для этой версии. Узнать секреты других пользователей и поделиться своими наработками можно на форуме сайта Ворд Эксперт.

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

В продолжение:

Как задавать цвет фона HTML документа

В уроке Основы HTML мы рассмотрели самые главные html теги, которые являются обязательными и присутствуют в любом html документе.

В данном уроке мы рассмотрим, как с помощью одного из этих тегов задать цвет фона html документа.

Материалы по теме:

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

Цвет фона всего html документа, задается в теге <body>. Теперь сделаем фон нашего документа, например желтым. Для этого в теге <body> необходимо прописать атрибут bgcolor=»#FFFF99″. Прописывается данный атрибут следующим образом: <body bgcolor=»#FFFF99″> </body>. Таким образом, код нашей html странички с желтым фоном будет выглядеть так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="#FFFF99">Вот вы и создали свою первую web страницу!!!</body>
</html>

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

После этого запустите созданный html документ при помощи браузера, и вы увидите, что фон страницы стал бледно желтым. Атрибут bgcolor=»», который задает цвет фона, содержит в кавычках значение «#FFFF99» — это код цвета, который мы хотим задать в качестве фона, полный список таких кодов вы можете посмотреть в таблице html цветов.

Впереди этого кода всегда идет знак решетка “#”, а затем сочетание букв и цифр соответствующее определенному цвету или оттенку. Если вам понадобится узнать значение какого либо цвета или оттенка которого нет в таблице html цветов то это вы можете например сделать с помощью того же графического редактора Photoshop.

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

Скопировав это значение и вставив его в кавычки, вы измените цвет фона вашей странички. Только помните, что впереди значений должен находиться знак решетка #, например #dce8ff. Кроме этого цвет фона html документа можно устанавливать просто словами, например если в нашем атрибуте bgcolor вместо «#FFFF99» прописать «red» т. е. <body bgcolor=»red»> то цвет фона будет красным. Буквенное написание цветов вы также сможете найти в таблице htm кодов цветов.

Материал подготовлен порталом: webmastermix.ru

Рекомендуем ознакомиться:

Подробности

Обновлено: 04 Сентябрь 2013

Создано: 12 Январь 2010

Просмотров: 102940

Не удается найти страницу | Autodesk Knowledge Network

(* {{l10n_strings.REQUIRED_FIELD}})

{{l10n_strings.CREATE_NEW_COLLECTION}}*

{{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

{{l10n_strings.COLLECTION_DESCRIPTION}} {{addToCollection.description.length}}/500 {{l10n_strings.TAGS}} {{$item}} {{l10n_strings.PRODUCTS}} {{l10n_strings.DRAG_TEXT}}  

{{l10n_strings.DRAG_TEXT_HELP}}

{{l10n_strings.LANGUAGE}} {{$select.selected.display}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR}}  

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

{{$select.selected.display}} {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}} {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

HTML-стилей

Атрибут стиля HTML используется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. Д.

Атрибут стиля HTML

Установить стиль HTML-элемента можно с помощью атрибута style .

Атрибут стиля HTML имеет следующий синтаксис:

< тэг style = " property : value; ">

Свойство является свойством CSS.Значение - это значение CSS.

Вы узнаете больше о CSS позже в этом руководстве.

Цвет фона

Свойство CSS background-color определяет цвет фона. для элемента HTML.

Пример

Установите цвет фона для страницы на синий:

Это заголовок


Это абзац.

Попробуй сам "

Пример

Установить цвет фона для двух разных элементов:

Это заголовок


Это абзац.

Попробуй сам "

Цвет текста

Свойство CSS color определяет цвет текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Шрифты

Свойство CSS font-family определяет используемый шрифт. для элемента HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Размер текста

Свойство CSS font-size определяет размер текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Выравнивание текста

Свойство CSS text-align определяет горизонтальное выравнивание текста для элемента HTML:

Пример

Заголовок по центру


Абзац по центру.

Попробуй сам "

Краткое содержание главы

  • Используйте атрибут стиля для стилизации элементов HTML
  • Используйте background-color для цвета фона
  • Используйте цвет для цветов текста
  • Использовать font-family для текстовых шрифтов
  • Используйте размер шрифта для размера текста
  • Использовать выравнивание текста для выравнивания текста

Упражнения HTML



Форматирование текста HTML

HTML содержит несколько элементов для определения текста со специальным значением.

Пример

Этот текст выделен жирным шрифтом

Этот текст выделен курсивом

Это нижний индекс и верхний индекс

Попробуй сам »

Элементы форматирования HTML

Элементы форматирования были разработаны для отображения специальных типов текста:

  • — полужирный текст
  • — Важный текст
  • — Курсив
  • — выделенный текст
  • — текст с пометкой
  • — Текст меньшего размера
  • — Удален текст
  • — вставленный текст
  • — Подстрочный текст
  • — Надстрочный текст

HTML

и Элементы

Элемент HTML определяет полужирный текст, без особой важности.

Элемент HTML определяет текст с большим значением. Содержимое внутри обычно выделено жирным шрифтом.

Элементы HTML

и

Элемент HTML определяет часть текст другим голосом или другим настроением. Содержимое внутри обычно отображается в курсив.

Совет: Тег часто используется для обозначения технического термина, фраза с другого языка, мысль, название корабля и т. д.

Элемент HTML определяет выделенный текст. Содержимое внутри обычно отображается курсивом.

Совет: Программа чтения с экрана произнесет слова на с ударением, используя словесное ударение.

HTML

элемент

Элемент HTML определяет мелкий текст:

HTML

Элемент

Элемент HTML определяет текст которые следует отметить или выделить:

HTML

Элемент

Элемент HTML определяет текст который был удален из документа.Браузеры обычно задевают через удаленный текст:

HTML

Элемент

Элемент HTML определяет текст который был вставлен в документ. Браузеры обычно подчеркивают вставленные текст:

HTML

Элемент

Элемент HTML определяет подстрочный текст. Подстрочный текст отображается на полсимвола ниже нормальной строки, и иногда отображается более мелким шрифтом.Подстрочный текст можно использовать для химические формулы, такие как H 2 O:

HTML

Элемент

Элемент HTML определяет надстрочный текст. Надстрочный текст отображается на полсимвола выше обычного линия, а иногда отображается более мелким шрифтом. Можно использовать надстрочный текст для сносок, например WWW [1] :

Упражнения HTML

Элементы форматирования текста HTML

Тег Описание
Определяет полужирный текст
Определяет выделенный текст
Определяет часть текста другим голосом или настроением
<маленький> Определяет меньший текст
Определяет важный текст
Определяет текст с нижним индексом
Определяет надстрочный текст
Определяет вставленный текст
Определяет удаленный текст
Определяет выделенный / выделенный текст


В HTML, как изменить цвет текста и фона в Интернете страница?

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

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

Используйте атрибут bgcolor, чтобы изменить цвет фона, как показано ниже:

Значение цвета указывается двумя шестнадцатеричными цифрами. каждый для интенсивности красного, зеленого и синего цветов.Значение 00 самое темное и ff — самый светлый, с промежуточными значениями, определяющими оттенки в между. Например, чтобы указать белый цвет, используйте #ffffff. Чтобы указать яркое синий, используйте # 0000ff. Для фиолетового используйте # ff00ff. Для получения дополнительной информации см. АРХИВИРОВАНИЕ: каковы значения RGB некоторых распространенных цветов?

Вы можете использовать другие атрибуты аналогичным образом, чтобы указать цвета. используется для отображения текста. Используйте текстовый атрибут для обычного текста, атрибут ссылки для непосещенных ссылок, атрибут vlink для ранее посещенные ссылки и атрибут alink для активных ссылок.(Ссылка становится активным при нажатии на него.) Например, чтобы все было нормально текст будет белым, а все ссылки — красными, вы должны использовать:

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

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

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

Добавление цветов и шрифтов | Infopeople

Чтобы изменить цвет фона, вам нужно добавить атрибут и значение цвета к открывающему тегу BODY (вы никогда не добавляете атрибут к закрывающему тегу!).Вот как выглядит атрибут:

bgcolor = «# ffffff»

Вот как это выглядит в теге BODY :

Значение «#ffffff» — это шестнадцатеричный код . Существуют буквально сотни возможных шестнадцатеричных кодов, которые можно применить к фону. Щелкните здесь, чтобы увидеть некоторые из возможностей. «#ffffff» — это код белого цвета, и вам всегда нужно использовать «#» и заключать шестнадцатеричный код в кавычки (помните, это значение атрибута).

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

Есть и другие атрибуты, которые мы можем добавить в тег BODY , которые будут влиять на цвет текста и ссылок на веб-странице. Эти атрибуты:

текст = «# 000000»
ссылка = «# 0033cc»
vlink = «# ff0000»

Текст Атрибут влияет на цвет обычного текста (текста, на который нет ссылок) на странице.Ссылка Атрибут влияет на цвет текста ссылки на странице (по умолчанию для ссылок используется синий цвет). Атрибут vlink влияет на цвет посещенных ссылок на веб-странице (цвет по умолчанию для посещенных ссылок — фиолетовый).

Если я добавлю эти атрибуты к тегу BODY , он будет выглядеть так:

Фон страницы будет белым (атрибут bgcolor , «#ffffff» — это шестнадцатеричный код для белого), текст (значение текста , «# 000000» — это шестнадцатеричный код для черного) будет черным, ссылки ( ссылка атрибут) будут синими, а посещенные ссылки ( атрибут vlink ) будут красными.

Давайте продолжим и добавим атрибуты к тегу BODY нашего файла index.html.

  1. Откройте файл index.html в Блокноте.
  2. Замените открывающий тег следующим тегом:
  3. Сохраните файл в Блокноте, затем просмотрите его в веб-браузере.

Не слишком круто, а? Но эти атрибуты BODY влияют на весь текст на веб-странице. Что, если вы хотите контролировать цвета определенных фрагментов текста на странице? Для этого вам нужно узнать о теге FONT .

Введение в шрифты

Весь текст на веб-странице набран шрифтом. Шрифт — это в основном текстовый стиль. Вы знаете, что шрифт стоит по названию: Arial, Courier, Times. Шрифты также имеют размеров и цветов . Ваш браузер использует некоторые настройки шрифта по умолчанию: по умолчанию face обычно Times, размер по умолчанию равен 3, а цвет по умолчанию черный.

Но тег FONT позволяет отменять эти значения по умолчанию и отображать текст особым образом.

Вот пример из Webmonkey (отличный учебный веб-сайт по HTML от журнала Wired). Поверьте на слово:

ТЕХНИКОЛОР

Если я ничего не сделаю, это будет просто черный текст размера 3. Но если я добавлю к нему тег FONT и добавлю атрибуты color (используйте bgcolor только в теге BODY ). ) и размер могу изменить внешний вид слова:

  ТЕХНИКОЛОР

, который в веб-браузере выглядит так:

ТЕХНИКОЛОР

Вы заметили, что добавление атрибута size = «5» со значением 5 увеличило текст? Размер шрифта от 1 до 6:

большой
крошечный

Атрибут face сложнее; вы должны использовать только те шрифты, которые есть у всех на своих компьютерах.Arial — безопасный шрифт в использовании, он очень удобочитаемый, что делает его очень популярным. Courier и Times также являются безопасным выбором. Вы должны пока придерживаться этих начертаний шрифта.

Вот пример атрибутов FONT цвет, размер и лицо в действии:

ТЕХНИКОЛОР

, который выглядит так в веб-браузере (обратите внимание, что я уменьшил размер шрифта и изменил его начертание на шрифт, похожий на пишущую машинку, под названием Courier):

ТЕХНИКОЛОР

Вы даже можете сделать каждую букву в слове отдельным цветом:

  Т 
 E 
 C 
 H 

 N 
 Я 
 C 
 О 
 L 

 О 
 R

, который в веб-браузере выглядит так:

T E C H N I C O L O R

Если вы используете тег FONT для назначения цветов, эти цвета будут иметь приоритет над любыми цветами, назначенными вами в теге BODY .

Теперь давайте добавим несколько цветов шрифта на страницу index.html.

  1. Откройте файл index.html в Блокноте (если он еще не открыт!).
  2. Добавим на страницу контактную информацию. Поскольку эта страница предназначена для библиотеки, я собираюсь добавить адрес и номер телефона, и я хочу, чтобы он был темно-зеленым (шестнадцатеричный код # 006633):
    123 Main Street
    Лос-Анджелес, Калифорния
    тел: 213-555-1122

    Вот как это будет выглядеть в веб-браузере:

    ,
    , ул. Мейн, 123,
    Лос-Анджелес, CA
    тел .: 213-555-1122

После добавления этих тегов обязательно сохраните файл, а затем просмотрите его в веб-браузере.Это похоже на настоящую веб-страницу!

Цвет фона HTML: Как настроить фон

Обычная веб-страница имеет белый фон. То же самое с таблицей и текстами. Черный текст на белом фоне очень распространен и скучен. Это было обычным делом в те времена, когда веб-дизайн находился на начальной стадии. Но по мере развития технологий и развития CSS появилось больше возможностей для создания более привлекательных веб-страниц. В настоящее время большинство веб-сайтов имеют красочные веб-страницы. Разработка таких веб-страниц осуществляется путем объединения HTML с CSS.В CSS есть много возможностей для изменения фона всего в HTML. Цвет фона HTML всей страницы, таблиц и даже текста также можно изменить с помощью CSS. В этой другой статье мы предлагаем вам на выбор полную таблицу цветов HTML. Некоторые из способов описаны ниже.

Темы в статье

Цвет фона корпуса с использованием названий цветов

Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т. Д.Атрибут, используемый для изменения цвета фона, — background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.

 


 Эта веб-страница имеет красный цвет фона!

Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.


Цвет фона корпуса с использованием шестнадцатеричных кодов цветов

Мир полон красок.Есть много цветов, которые можно использовать при разработке веб-страниц. У каждого цвета есть определенное название, например красный, желтый, черный и т. Д. Но у каждого цвета есть множество оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, кирпичный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов. Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.

Цветовые коды

Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы. Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.

 


 Это демонстрационная веб-страница

Обратите внимание на приведенный выше код.Все аналогично предыдущему методу, но с небольшими изменениями. Вместо присвоения имени цвета как значения атрибуту background-color используется # FF00FF. # FF00FF — шестнадцатеричный код пурпурного цвета.

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

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

Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно. Div используется для определения подразделения или раздела на веб-странице.Цвет фона таких разделов или разделов также можно изменить с помощью CSS. Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.

 




 Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый

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


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

Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов — задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также могут быть присвоены встроенные стили с атрибутом background-color.Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>

 Имя 
 Страна 
 Возраст 


 Джон 
 США 
 21 



 Сэм 
 Испания 
 22

В приведенном выше коде встроенный стиль используется в теге таблицы.Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.


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

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

 


  у этого текста нет цвета фона  


  этот текст имеет красный цвет фона  


  этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.У второго абзаца фон красного (# FF0000) цвета, а у третьего абзаца фон зеленого (# 00FF00) цвета.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой части веб-страницы с помощью тега div.Таблицам также можно задать цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

Как добавить цвет фона к текстовому блоку в Squarespace — Big Cat Creative


Первый метод…

Я рекомендую этот метод для большинства случаев.Мы используем универсальный редактор CSS, доступный каждому на индивидуальной подписке. Кроме того, добавление CSS в одной области, а не по всему сайту в разных областях (как другой метод, описанный ниже), в целом лучше для SEO.

Использование идентификатора блока и добавление базового CSS


Шаг 1. Идентифицируйте свой блок

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

Самый простой способ найти номер блока:

Если вы используете Google Chrome, загрузите это расширение Squarespace Block Identifier для Chrome. Это расширение разработано, чтобы помочь вам найти идентификационный номер блока для каждого блока на вашем сайте Squarespace.

Откройте страницу с блоком, который вы хотите идентифицировать, нажмите на инструмент идентификации в ваших расширениях Chrome, и он сразу же покажет идентификационные номера блоков (которые будут примерно такими как # block-53c818fd6d3f39517aed или # block-yui_3_17_2_1_1556302617094_72323)

Нажмите на блок, который хотите использовать, и он автоматически скопирует номер блока для вас!

Если вы не используете Google Chrome:

Во-первых, я рекомендую загрузить его, даже если он предназначен только для использования этого расширения, это сэкономит вам кучу времени.Squarespace также рекомендует использовать Google Chrome для максимального удобства при редактировании в Squarespace, так что это беспроигрышный вариант.

В противном случае вы можете щелкнуть блок правой кнопкой мыши и затем нажать «Проверить». Где-то в коде этого определенного объекта будет сказано: ID = блок и т. Д. Хотя существует много «идентификаторов», поэтому убедитесь, что вы ищете правильный, он должен начинаться с блока .

СОВЕТ: Убедитесь, что номер блока начинается с блока.Если он начинается с чего-то еще, это неправильный идентификатор.


Шаг 2: Добавьте свой CSS

После того, как вы нашли правильный идентификатор блока, убедитесь, что вы его скопировали. Затем перейдите в Дизайн> Пользовательский CSS.

СОВЕТ: Я рекомендую открыть страницу, над которой вы планируете работать (с указанным блоком), пока вы работаете над CSS, потому что, когда вы вносите изменения CSS, вы сможете увидеть, что они происходят. страница.

Вставьте свой идентификатор блока в редактор CSS и убедитесь, что он имеет решётку (#) в начале.

Используйте следующий код для добавления фона в текстовый блок:

# block-53c818fd6d3f39517aed {
background: # f0f0f0;
отступ: 50 пикселей;
выравнивание текста: по центру;
}


Просто замените Block Id (на тот, который вы скопировали / нашли ранее), цветовой шестнадцатеричный код , значение заполнения и значение выравнивания текста . Вы должны увидеть изменения, которые происходят, пока вы настраиваете это в своем редакторе CSS.Если вы не можете, вероятно, у вас неправильный идентификатор блока (или, возможно, вы изменили код, сравните его с приведенным выше кодом, чтобы убедиться, что вы случайно не удалили или не изменили что-то)

Как только вы будете счастливы с тем, как выглядит ваш CSS, не забудьте нажать Сохранить в верхнем левом углу!

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

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

HTML-тегов, найденных в этом раздел:

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

Вернуться к темам Страница

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

Для синего фона добавьте следующее к тегу.

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

Веб-страница с цветами и цветовыми кодами это:
http: // www.phoenix.net/~jacobson/rgb.html

Чтобы вернуться к белому цвету фона, используйте:

<КУЗОВ BGCOLOR = "# FFFFFF">

Не забудьте поставить знак # перед шестнадцатеричный код.

верх страница

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

Чтобы изменить цвет текста для всего документа используйте тег:

В пространстве между кавычками введите слово цвета, например красный, синий, зеленый и т. д.или Шестнадцатеричный код для 256 цветов, которые могут отображаться в сети. страница. Не забудьте поставить знак # перед шестнадцатеричным кодом.

Для красного текста добавьте следующий атрибут к код тега.

<ТЕКСТ = "КРАСНЫЙ">

или

# ff0000 — это цветовой код для красный.

<ЦВЕТ ШРИФТА =>

Чтобы изменить часть текста в HTML-документ в другой цвет используйте тег FONT COLOR.

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

или

# ff0000 — это цветовой код красного.

Пример:

Тело Фон

Этот фон КРАСНЫЙ

<ЦВЕТ ШРИФТА = белый> Текст белый

текст желтый

Нажмите здесь, чтобы увидеть Веб-страница

верх страница

Фон Изображения

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

<Фон тела = "graystars.gif"> сообщает браузеру, что возьмите изображение «graystars.gif» и поместите его на заднем плане эта веб-страница

Перейти к образцу сети страница, которая отображает этот фон

Проверьте этот фон на сайте для дополнительных бесплатных фонов:

Справочная информация Архивы — http: // the-tech.mit.edu/KPT/bgs.html

верх страница

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

Не посещал Ссылки

Текст непосещенной ссылки не имеет связан с другим местом
Чтобы изменить цвет непосещенной ссылки, используйте:

Создает страницу с синими ссылками
— код цвета # 00FF00 — это код синего цвета.

Для изменения цвета непосещенной ссылки измените шестнадцатеричный код между кавычками. Не забывай поставьте знак # перед шестнадцатеричным код.

Посетили Ссылки

Просмотрено Ссылка цвет ссылка изменяется на после просмотра
Чтобы изменить цвет просматриваемой ссылки, используйте:

Создает страницу с посещенным фиолетовым цветом ссылки
-цветовой код # DB70DB — это код для фиолетовый.

Активно Ссылки

Active Link временный цвет ссылка меняется на при нажатии на
Чтобы изменить цвет активной ссылки, используйте:

Создает страницу с красными ссылками, в то время как ссылка активна
— код цвета # FF0000 — это код красного цвета.

Примечание. Это изменяет цвета ссылок для весь документ.

Пример:

Вот несколько ссылок, их изменение цвета

<ТЕЛО LINK = "# 009900" VLINK = "# 00DD00">

Посмотрите на пример веб-страница:

Несколько советов по использованию цвета:

Помните при использовании цветов или изображения в фоновом режиме — насколько легко будет читать текст что перед ним.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *