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) теги по ширине равны своему содержимому. Кстати, последний параграф в примере тоже занимает всю ширину, просто его фон прозрачный, поэтому сквозь него виден фон страницы. Вообще, фон всех элементов на странице, в которых он не указан явно — прозрачный, вот и все.
Домашнее задание.
- Создайте заголовок статьи и двух ее разделов. Напишите в начале статьи и каждом разделе по одному параграфу.
- Установите на всей странице шрифт Courier с размером 16px, у заголовка статьи — 22px, а у подзаголовков по 19px.
- Пусть у заголовка статьи будет цвет текста #0000CC, а у подзаголовков — #CC3366.
- Выделите фоновым цветом #66CC33 два слова во втором параграфе. А в третьем параграфе этим же цветом, но одно подчеркнутое слово.
- Не забывайте о том, что значения атрибута style можно группировать, ставя между ними точку с запятой (;).
Посмотреть результат → Посмотреть ответ
Постеры ВК: как сделать красивый фон для поста ВКонтакте
Постеры ВК — это функция, которая позволяет добавить и настроить красивый фон для текстовых публикаций.
Разбираемся, как добавить постер ВКонтакте, настроить фон и сделать на нём надпись. Также, поговорим об ограничениях и о том, как использовать эту функцию в своей работе.
Рекомендуем: Click.ru – маркетплейс рекламных платформ:
- Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
- Подключиться можно самому за 1 день.
- Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
- Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
- У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.
Читайте также: Как красиво оформить группу ВКонтакте
Как добавить постер и сделать красивый фон поста в ВК
Чтобы сделать цветной фон, нужно нажать на букву «А» в цветном круге.
Появится подложка для текста. Максимальная длина текста, которая может быть на фоне — 160 символов, если длина текста больше, он автоматически становится обычным текстовым постом.
Доступны 3 варианта настройки фона:
- картинка;
- эмоции;
- градиенты.
Менять вариант оформления фона, можно нажимая кнопку с названием фона вверху.
Также, для каждого типа постера, доступны разные варианты оформления. Чтобы изменить его, нажимайте стрелочки влево или вправо.
Читайте также: Как сделать живую обложку для группы ВКонтакте
Как добавить свою картинку на фон
Кроме того, вы можете добавить в качестве фона для записи любую картинку.
Для этого под записью кликаем «Добавить фон».
Откроется окно с надписью «Уникальный постер». Загружаем картинку со своего устройства. Подбирайте изображение с учётом того, что на нём будет размещён текст.
После загрузки картинки, появится предпросмотр, где можно выбрать цвет шрифта в посте. После, нажимаем «Сохранить изменения».
В завершении пишем текст (не более 160 символов) и кликаем «Отправить».
Заключение
Используйте постеры в ВК, как на своей стене, так и в группах. Это поможет привлечь внимание к вашим публикациях в ленте. Также можете создать свой уникальный фон, и использовать его для всех своих постов, чтобы выделиться на фоне конкурентов.
Как убрать цвет фона текста в Word 2003, 2007, 2010, 2013, 2020 и 2020
На сегодняшний день с программой Microsoft Office Word незнаком разве что человек совсем далёкий от компьютерной техники. Безусловно, это лучший текстовый редактор. Им пользуются школьники – подготовка рефератов, студенты – дипломные работы, работники офисной сферы – документация и далее по списку.
Сегодня мы хотим рассказать Вам о том, как убрать фон текста в Ворде при копировании/вставке с сайтов или редактировании документов. Вы наверняка сталкивались с проблемой, когда при копировании текста с некоторых ресурсов автоматически дублируется и их фон. Смотрится это, как минимум, не эстетично. Так как же избавиться от назойливого цветного фона?
Простые способы вставить текст без фона
Вместо того, чтобы убирать фоновое выделение текста, можно вставить его в файл без форматирования. Сделать это можно 3-мя почти идентичными способами.
Использование специальной вставки
Чтобы вставить текст без фона можно воспользоваться «специальной вставкой текста».
После того, как скопировали текст нужно выбрать в Ворде раздел «Главная» нажать на «Вставить» далее выбрать «специальная вставка».
Текст будет вставлен без фона.
Сохранение текста без форматов — параметры вставки
С помощью этой функции можно вставить только текст. Тогда любые изменения отменятся.
Это делается в соответствии со следующей инструкцией:
- Скопировать желаемый текст.
- Вызвать контекстное меню «Параметры вставки» на пустом пространстве в документе, нажав правую кнопку мыши.
- В категории «Параметры вставки» выбрать «Сохранить только текст» (иконка с буквой «А»).
После этого в документ вставится информация без форматирования.
Вставка текста без форматов — выпадающее меню «Ctrl»
Альтернативный вариант скопировать текст без формата — это использование выпадающего меню после вставки. Для этого необходимо:
- Вставить нужный фрагмент в документ.
- Нажать на знак Ctrl, который расположен внизу текста.
- В появившемся списке нажать на иконку с буквой «А».
Дополнительные моменты, при работе со скопированными из интернета документами
Иногда бывает, что при копировании материала, меняется весь цвет страницы, а не только фон текста. В таком случае, достаточно ещё раз зайти в категорию «Разметка страницы»
и выбрать пункт
«Цвет страницы»
— проблема решится гарантировано.
Скачанные из сети работы, иногда, оформлены с использованием фоновых изображений — колонтитулы, подложка, заливка цветом титульной страницы. Гербовые изображения сразу же укажут на чужое авторство, а заливка цветом может нарушать требования внутри фирмы или учебного заведения.
Есть несколько способов, позволяющих избавиться от этих ненужным мелочей. Зайдите в уже полюбившийся нам раздел «Разметка» и выберите вариант «Подложка». Таким образом, можно удалить любое изображение, идущее на заднем плане, на всей странице.
С колонтитулами дела обстоят несколько иначе. Выберите меню «Вставка»
и найдите там одноимённый подпункт. Если навязчивое изображение отображается сверху —
«Верхний колонтитул»
, если снизу —
«нижний»
. Таким же образом удаляйте и нумерацию страниц, если она вам не нужна.
При работе с программами, имеющими скрытый потенциал и широкий спектр возможностей, полезно получать новую информацию, для повышения уровня квалификации.
Благодаря этой статье вы узнали, как убрать фон в ворде при копировании. И даже несколько дополнительных моментов, которые помогут вам при работе с редактором. Но мы бы советовали вам посетить тематические курсы, на которых вам расскажут гораздо больше. Приобретённые навыки помогут вам справляться с решением поставленных перед вами задач быстрее и эффективнее, в конечном счёте, вы только сэкономите своё время и средства. Да и вероятность повышения по службе — резко увеличивается.
Видео урок
Если все же вам не очень понятно, как удалить фон в ворде за текстом при копировании, то посмотрите короткий и информативный видео урок:
В «Ворде» — это довольно объемная тема. Про нее можно рассказывать очень долго, но в этой статье мы этого делать не будем, мы поговорим про фон для текста.
В «Ворде» есть множество инструментов, которые способны определенным образом выделить текст или же всю страницу. Делается это для привлечения внимания читателя к определенному участку текста.
Но что делать, если вы скачали документ из интернета, а различного рода выделения в нем вам только мешают?
В этой статье мы поговорим про то, как убрать в «Ворде» фон в тексте. Мы рассмотрим самые популярные способы, как это сделать. Поговорим про то, как убрать фон всей страницы и текста в частности. Также расскажем про инструмент в программе, который способен за считанные секунды избавить документ от форматирования другого пользователя.