Добавление, изменение и удаление цвета фона в Word

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

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

1. Перейдите в конструктор > цвет страницы.
2. Выберите нужный цвет в области Цвета темы или Стандартные цвета.
   • Если нужного цвета нет, выберите другие цвета ,а затем в поле Цвета выберите нужный цвет.
   • Чтобы добавить градиент, текстуру, узор или рисунок, выберите Параметры заливки ,а затем выберите Градиент,Текстура,Узор или Рисунок и выберите один из вариантов.

Градиенты, узоры, рисунки и текстуры повторяются столько раз, сколько необходимо для заполнения страницы. Если сохранить документ как веб-страницу, текстуры будут сохранены в формате JPEG, а узоры и градиенты — в формате PNG.

Удаление цвета фона

1. Перейдите в конструктор > цвет страницы.
2. Выберите Нет цвета.

Важно: Office 2010 больше не поддерживается. Перейдите на Microsoft 365, чтобы работать удаленно с любого устройства и продолжать получать поддержку.

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

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

1. Перейдите в >Разметка страницы.
2. Выполните любое из описанных ниже действий.
3. Выберите в области Цвета темы или Стандартные цвета.
4. Выберите Другие цвета, а затем выберите цвет.
5. Чтобы добавить специальные эффекты, такие как градиенты, узоры или текстуры, выберите эффекты заливки.

Примечание: Выберите нужный цвет перед применением градиента или узора.

Удаление фона

1. Перейдите в >Разметка страницы.
2. Выберите Нет цвета.

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

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

Советы:

• Чтобы выбрать цвет из файла, выделите изображение, щелкните значок шестеренки и выберите Создать из файла.

Удаление цвета фона

1. Перейдите в >«Дизайн»
2. Выберите Нет цвета.

Темы по позвольте отформатировать весь документ. Дополнительные сведения см. в этой теме.

Фон и границы

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

Необходимые умения:	Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML) и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:	Научиться стилизации фона и границ объектов.

Стилизация фона в CSS

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

.box  background: linear-gradient( 105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96% ) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; > 

Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства background .

Фоновый цвет

Свойство background-color определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет . background-color распространяется на сам контент и отступы от него (padding).

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

Поиграйте с ними, используя любое доступное значение .

Фоновое изображение

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

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

Примечание: Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом. Попробуйте добавить свойство background-color в приведённый выше пример, чтобы увидеть это в действии.

Свойство background-repeat

Свойство background-repeat используется для управления повторениями фонового изображения. Доступные значения:

• no-repeat — останавливает повторение фонового изображения во всех направлениях.
• repeat-x — повторение фонового изображения по горизонтали.
• repeat-y — повторение фонового изображения по вертикали.
• repeat — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.

Попробуйте эти значения в примере ниже. Мы установили значение no-repeat , поэтому вы видите только одну звезду. Попробуйте разные значения — repeat-x и repeat-y — чтобы увидеть, какие эффекты они оказывают.

Изменение размеров фонового изображения

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

Вы также можете использовать ключевые слова:

• cover — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
• contain — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.

Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.

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

• Измените значения длины, используемые для изменения размера фона.
• Измените значение длины на background-size: cover или background-size: contain .
• Если ваше изображение меньше размеров блока, вы можете изменить значение свойства background-repeat , чтобы повторить изображение.

Позиционирование фонового изображения

Свойство background-position позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой левый верхний угол блока равен (0,0) , а сам блок располагается вдоль горизонтальной ( x ) и вертикальной ( y ) осей.

Примечание: По умолчанию значение background-position равно (0,0) .

Обычно свойство background-position задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.

Вы можете использовать такие ключевые слова, как top и right (с остальными можете ознакомиться на странице background-position ):

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: top center; > 

Допустимы значения длины и процентные:

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; > 

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

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; > 

И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока — единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:

.box  background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; > 

Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.

Примечание: background-position — это сокращение для background-position-x и background-position-y (en-US), которые позволяют вам устанавливать различные значения положения по оси индивидуально.

Градиент в качестве фона

Градиент — при использовании для фона — действует так же, как изображение, и поэтому задаётся свойством background-image .

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

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

Несколько фоновых изображений

Также возможно создавать несколько фоновых изображений — просто разделив значения свойства background-image запятыми.

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

Примечание: Градиенты можно легко смешивать с обычными фоновыми изображениями.

Другие свойства background- * также могут иметь значения, разделённые запятыми, как и background-image :

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; 

Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение background-repeat для image1 будет no-repeat . Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться — в приведённом выше примере есть четыре фоновых изображения, и только два значения background-position . Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться — image3 будет присвоено первое значение позиции, а image4 будет присвоено второе значение позиции.

Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.

Закрепление фона

Другая опция, которую можно применить к фону, — это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства background-attachment , которое может принимать следующие значения:

• scroll : Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
• fixed : Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
• local : Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение scroll довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение local фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.

Свойство background-attachment действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями — взгляните на background-attachment.html (также смотри исходный код здесь).

Использование сокращённого свойства background

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

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

При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:

• background-color можно указывать только после последней запятой.
• Значения background-size могут быть включены только сразу после background-position , разделённые символом ‘/’, например: center/80% .

Посетите страницу MDN свойства

, чтобы увидеть полное описание.

Доступность просмотра

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

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

Границы

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

Мы можем установить границу для всех четырёх сторон блока с помощью border :

.box  border: 1px solid black; > 

Или мы можем нацеливаться на один край блока, например:

.box  border-top: 1px solid black; > 

Индивидуальные свойства этих сокращений будут следующими:

.box  border-width: 1px; border-style: solid; border-color: black; > 

И более детально:

.box  border-top-width: 1px; border-top-style: solid; border-top-color: black; > 

Примечание: Свойства границ top, right, bottom, и left также имеют сопоставленные логические свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается работы с разными направлениями текста.

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

Закруглённые углы

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

Например, чтобы сделать все четыре угла блока радиусом 10px:

.box  border-radius: 10px; > 

Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:

.box  border-top-right-radius: 1em 10%; > 

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

Упражнение с границами и фоном

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

1. Задайте рамку равную 5px black solid, с закруглёнными углами 10px.
2. Добавить фоновое изображение (используйте URL balloons.jpg ) и установите размер таким образом, чтобы он покрыл весь блок.
3. Задайте для полупрозрачный чёрный цвет фона и сделайте текст белым.

Примечание: вы можете посмотреть решение здесь — но сначала попробуйте сделать это сами!

Итоги

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

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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Фон под текстом

С фоном у текста есть проблема – у элемента с display: inline при переносах текста не работают отступы (padding) по бокам. Исправить это можно следующими способами:

Вариант №1 – разметка тегами

Первый вариант так себе, но работает – обвернуть каждую строку в и добавить переносы строк
.

 

dummy text of the printing 
and typesetting industry 

.title < font-size: 50px; line-height: 56px; color: #000; >.title span

Как сделать фон в html: порядок действий

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

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

Параметры фона сайта

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

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

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

Есть два варианта, как сделать задний фон в HTML. Это может быть монотонная цветная подложка или изображение. Каждый вариант имеет свои недостатки и преимущества. Монотонный оттенок не будет «утяжелять» ресурс загрузкой лишних картинок, но фон в виде эффектного изображения добавит бонусов дизайну сайта.

Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains

Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.

Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Павел Симонов
Исполнительный директор Geekbrains

Топ-30 самых востребованных и высокооплачиваемых профессий 2023

Поможет разобраться в актуальной ситуации на рынке труда

Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка

Только проверенные нейросети с доступом из России и свободным использованием

ТОП-100 площадок для поиска работы от GeekBrains

Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽

Получить подборку бесплатно
Уже скачали 25508

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

• Цветовой оттенок HTML фона сайта определяет CSS атрибут background-color, расположенный в теге .
• HTML фонового цвета фона определенных элементов (блок, параграф или табличная ячейка) определяется таким же атрибутом, который размещен внутри соответствующих тегов.
• HTML фон сайта можно определить во внешнем файле .css.
• HTML картинка. Простой способ, как сделать картинку фоном в HTML- использование атрибута background-image и картинки.

Подробнее рассмотрим каждый способ установки фона на страницах сайта.

Установка однотонного заднего фона с помощью html

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

Прежде всего, раскроем особенности изменения фона страниц в HTML. Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег . К примеру:

Фон сайта #55D52B

Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:

Фон сайта rgb(23,113,44)

Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.

Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.

Рисунок или фотография в качестве фона

Остановимся также и на возможностях языка гипертекста для такой задачи, как сделать изображение фоном в HTML. Существует 3 варианта установки картинок для фона страницы только с применением HTML + CSS (JS не используется).

Дарим скидку от 60%
на обучение «Веб-разработчик» до 14 января
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей

Но сперва определим основные требования к фоновой картинке:

• Изображение должно покрывать всю ширину и высоту страницы сайта.
• В случае необходимости фон может масштабироваться (background растягивается/сжимается с учетом параметров экрана).
• Пропорции изображения сохраняются (aspect ratio).
• Картинка центрируется на странице.
• Фоновой изображение не вызывает скроллов.
• Решение полностью кроссбраузерное.
• Не применяются разные технологии, только CSS

Метод 1

Наиболее простой и прогрессивный способ, как сделать фото фоном в HTML. В этом случае используется свойство CSS3 background-size, в применении к тегу html. Тег body не применяется, потому что он имеет большую высоту, которая определяется высотой окна браузера. Вначале нужно установить центрированную и фиксированную картинку фона, а потом изменить ее размер с помощью background-size: cover.

background-position: center center;

Для вас подарок! В свободном доступе до 14.01 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне

Этот способ можно использовать в любой версии Chrome, Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Метод 2

В этом варианте применяется элемента img. Его размер можно изменить с учетом размеров браузера. Для растягивания картинки фона на полный экран следует задать для фона min-height и width с параметром 100%.

Если установить min-width со значением, которое аналогично ширине изображения, то фон будет сжиматься меньше оригинального размера изображения. Для ситуации, когда окно уже ширины картинки, чтобы выровнять бэкграунд по центру устанавливают media query.

/* Определяется размером картинки */

@media screen and (max-width: 640px)
Данный метод эффективен любых версиях обычных браузеров (Chrome, Opera, Firefox, Safari), IE 9+

Метод 3

Еще один способ, как сделать изображение фоном в HTML. Нужно закрепить изображение на странице вверху слева и растянуть его, используя свойство min-width и min-height 100% (необходимо сохранить соотношение сторон).

Отметим, что при таком решении изображение не центрируется. Чтобы центрировать картинку ее нужно завернуть в , сделав его в 2 раза большим, чем размеры окна. При этом, саму картинку растягиваем и устанавливаем по центру.

Данный метод также может использоваться в хороших браузерах и IE 8+.

Создание текстурного фона

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

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

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

К примеру, чтобы установить темный фона для страницы заходим в «Фотошоп» и создаем картинку в форме полоски, длина которой 1,2 тыс. пикселей, а шириной 15 пикселей. После этого используем простой черно-белый градиент, а затем сформированную текстуру устанавливаем на сайт:

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

Как вы видите, в таком коде присутствует параметр по установке оттенка (зеленый) и параметр, который подключает зеленую текстуру.

Установка фона с помощью градиента

Рисунки, подключенные с использованием css функций, могут повторяться по вертикали, и по горизонтали. Эта особенность дает нам еще один вариант, как сделать градиент фон в HTML. Для начала создайте градиент шириной 1 мегапиксель, сохраните его в качестве рисунка и выгрузите на хостинг. Теперь для установки фона нужно в код внести строки:

Только до 11.01
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:

ТОП-100 площадок для поиска работы от GeekBrains

20 профессий 2023 года, с доходом от 150 000 рублей

Чек-лист «Как успешно пройти собеседование»

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

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

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

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

— такие метаданные применяют, чтобы выделить текст или его часть жирным шрифтом. Можно использовать и тег ( ).

— таким способом можно сделать выделение курсивом.

— в этом случае получим подчеркивание выделенного фрагмента.

— тег для перечеркивания текста.

— устанавливает верхний индекс (х2)

— таким образом создается нижний регистр (Н2О)

---

— применяем, если нужно сделать вставку в виде горизонтальной линии.

— такие метаданные меняют цвет, размер текста и стиль шрифта.

К примеру, вы решаете, как сделать новый цвет текста в HTML. Чтобы вместо черного шрифта получить зеленый или красный, для тега применяется атрибут text. Чтобы задать цвет текста устанавливаем название оттенка или цифровой код (красный цвет). К примеру:

Потом идет текстовый блок страницы, таблицы, картинки и т.д.

После таких изменений текст получится зеленым.

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

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

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

В строке style=»color:Yellow; background-color:#66cc66″ теге меняет фоновый цвет HTML страницы на зеленый, а текст получится желтым.

При необходимости, есть возможность выделять цветами отдельные параграфы. Сделать это можно так:

Вы узнали, как сделать фон в HTML и выделить фрагменты текста. Это совсем несложно, стоит только разобраться в некоторых тонкостях.