Как сделать фон для сайта?
Содержание:
- Управление позицией фонового изображения
- Завершение
- Изменяем фон на сайтах Ucoz
- Как в html сделать фон в виде цвета или картинки?
- Значения свойства
- Цвет фона и настройки экрана
- Техника с использованием только CSS. Часть #1.
- Вставляем картинку на фон из шаблонов
- Чтобы установить фоновое изображение
- Добавление подложки в Майкрософт Ворд
- О картинке на заднем фоне таблицы.
- Описание
- Статьи по теме
- Добавление на страницу картинки (используем тег )
- Изменяем цвет текста с помощью атрибута text.
- Тег html изменения цвета заднего фона текста через атрибут style background-color
- Заключение
Управление позицией фонового изображения
По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:
| Значение | Описание |
|---|---|
| left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center» |
| x% y% | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%. |
| x y | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения. |
Рассмотрим пример использования этого свойства:
<!DOCTYPE html>
<html>
<head>
<title>Пример позиционирования фонового изображения</title>
<style>
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
<body>
<div class = "leftTop">left top</div>
<div class = "leftCenter">left center</div>
<div class = "leftBottom">left bottom</div>
<div class = "rightTop">right top</div>
<div class = "rightCenter">right center</div>
<div class = "rightBottom">right bottom</div>
<div class = "centerTop">center top</div>
<div class = "centerCenter">center center</div>
<div class = "centerBottom">center bottom</div>
<div class = "userPosition">20px 75%</div>
</body>
</html>
В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.
Результат нашего примера:
Рис. 117 Пример позиционирования фонового изображения.
Завершение
Поздравляем, вы только что создали еще одну настоящую адаптивную веб-страницу! Вы можете пойти дальше и преобразить ее по своему вкусу. Придумайте и добавьте новые секции, стилизуйте их, используя свои навыки. Кроме этого, можно создать еще несколько веб-страниц и объединить их с помощью ссылок — получится полноценный многостраничный сайт музыкальной группы!
Если в процессе прохождения урока у вас что-то не получилось, не отчаивайтесь — готовый проект, как всегда, включен в архив с файлами, так что вы можете заглянуть в него и разобраться, в чем проблема.
А вот и демо-версия готовой страницы:
На этой ноте мы завершаем практический урок, а также текущую главу учебника. Спасибо за участие, и оставайтесь с нами: впереди вас ждет следующая глава, которая посвящена вещам, без которых не обойдется ни один сайт — ссылки и навигация. И первый урок посвящен такой теме как состояние ссылок в CSS.
Изменяем фон на сайтах Ucoz
Сегодня всё ещё есть вебмастеры, предпочитающие бесплатные хостинги, вроде Ucoz. И специально для них мы приводим инструкцию по изменению фона. Для того чтобы изменить фон сайта на Ucoz, необходимо перейти в панель управления, зайти в «Управление дизайном», а потом в «Редактирование шаблонов».
Теперь необходимо открыть таблицу стилей (CSS), найти строчку «body» и параметр «background». После этого нужно скопировать ссылку и вставить ее в адресную строку браузера. Таким образом вы получите доступ к картинке, которая была фоном.
Для использования нового фона, необходимо просто загрузить его в файловый менеджер. При этом проследите, чтобы название новой картинки для фона совпадало с тем, которое было до внесения изменений. Сохраните проделанную работу и проверьте результаты своих трудов.
Как в html сделать фон в виде цвета или картинки?
Вы можете задавать фон блока или всей страницы с использованием различных вариантов:
- при помощи цвета,
- использовать изображение,
- градиентный фон,
- использовать сразу несколько вариантов (например, картинка + цвет или несколько картинок сразу).
Введу того что HTML не особо предназначен для визуального оформления страницы, в с помощью HTML можно сделать только фон в виде цвета или изображения. Для использования остальных вариантов создания фона нам не обойтись без помощи CSS. Но обо всём по порядку.
Чтобы в html сделать фон нам понадобится атрибуты bgcolor и background.
Для того чтобы в HTML сделать фон в виде цвета нужно к тегу для которого нам нужно задать фон дописать атрибут bgcolor
PHP
<table bgcolor=»#сссссс»>
| 1 | <table bgcolor=»#сссссс»> |
Чтобы сделать фон в виде изображения используем background и в кавычках указываем путь к файлу с картинкой.
PHP
<table background=»images/bg.jpg»>
| 1 | <table background=»images/bg.jpg»> |
Обращаю ваше внимание, что в современных браузерах такой способ задания фона срабатывает не для всех тегов. Кроме того он очень неудобный и по моему мнению он уже себя изжил и использовать его не стоит
Лучше и эффективнее воспользоваться CSS.
Значения свойства
| Значение | Описание | CSS |
|---|---|---|
| background-color | Указывает цвет, который будет использоваться в качестве фона. | 1 |
| background-position | Задает позицию для фонового изображения. | 1 |
| background-size | Указывает размер фонового изображения. Значения этого свойства можно указывать только после значения свойства background-position, разделяя их с помощью прямого слэша «/», например, 5px 5px/100px 100px. | 3 |
| background-repeat | Указывает, как повторять фоновое изображение. | 1 |
| background-attachment | Указывает будет ли фоновое изображение фиксированным или будет прокручиваться вместе с содержимым страницы. | 1 |
| background-image | Определяет фоновое изображение. | 1 |
| background-clip | Определяет область в элементе, для которой задаётся фон. | 3 |
| background-origin | Определяет область в элементе, для которой задаётся фоновое изображение. | 3 |
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример</title>
<style type="text/css">
body {
background: url("img_flwr.gif"),
url("img_tree.gif");
}
</style>
</head>
<body>
</body>
</html>
Результат данного примера в окне браузера:
Цвет фона и настройки экрана
Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.
Однако следует сказать, что подавляющее большинство компьютеров настроено отображать как минимум тысячи цветов, поэтому использование «безопасной веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).
PunBB.INFO → HTML / CSS → CSS плавно меняющийся фон background
You must login or register to post a reply
Техника с использованием только CSS. Часть #1.
Используем строчный элемент , размеры которого можно менять в любом браузере. Устанавливаем свойство , чтобы заполнить окно браузера вертикально, а свойству присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство равным ширине изображения, чтобы никогда оно не уменьшалось.
Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации процентного значения свойства и отрицательного значения для левого поля, чтобы центрировать фоновое изображение.
Вот код CSS:
img.bg {
/* Устанавливаем правила для заполнения фоном */
min-height: 100%;
min-width: 1024px;
/* Устанавливаем коэффициент пропорциональности */
width: 100%;
height: auto;
/* Устанавливаем позиционирование */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Определяется свое для каждого конкретного изображения */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
Работает в:
-
Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
-
IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.
-
IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
-
IE 9: Работает.
Вставляем картинку на фон из шаблонов
В программе PowerPoint любого варианта ПО есть уже готовые шаблоны, или, как они точнее называются — текстуры.
Для того, чтобы сделать картинку фоном в презентации PowerPoint из данных вариантов, необходимо произвести следующие действия:
Сперва после открытия программы PowerPoint выбираем вкладку «Вид». Здесь вы обнаружите группу под наименованием «Режим образцов» и уже в ней необходимо выбрать пункт «Режим слайдов».
Перед вами снова открывается окно форматирования и среди пунктов открываем «Заливка». Здесь уже следует поставить отметку рядом с «Рисунок или текстура». Фон страницы вашей презентации сразу же изменится на установленную по умолчанию текстуру.
Для того, чтобы установить уже готовое изображение, предлагаемое презентацией, выберите в пункте «Текстура» Через стрелку то, что необходимо вам.
Чтобы установить фоновое изображение
При желании фон можно залить изображением. Для этого в папке сайта создаем папку images, в которую сохраним изображение фона fon.jpg. А для заливки воспользуемся атрибутом BACKGRAUND тэга BODY .
Это будет выглядеть так:
<HTML> <HEAD> <TITLE> Виды облаков </TITLE> </HEAD> <BODY BACKGROUND="images/fon.jpg"> <H1 ALIGN="CENTER"> Виды облаков </H1> <P ALIGN="JUSTIFY"> <B><I>Перистые облака</I></B> имеют толщину от сотен метров до нескольких километров. Они состоят из ледяных кристаллов в форме игл, столбиков, пластинок. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-кучевые облака</I></B> характеризуются небольшой шириной- 200-400 м. Структура облаков комковая. Они прозрачные. </P> <P ALIGN="JUSTIFY"> <B><I>Перисто-слоистые облака</I></B> имеют вид белой или голубоватой полупрозрачной пелены. Их толщина колеблется от 100 м до нескольких километров. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-кучевые облака</I></B> выглядят как белые, иногда сероватые волны, состоящие из пластин или хлопьев,разделенных просветами голубого неба,но могут сливаться и в сплошной покров. Толщина слоя высоко-кучевых облаков около 200-700 м. Из них выпадает дождь,снег. </P> <P ALIGN="JUSTIFY"> <B><I>Высоко-слоистые облака</I></B> образуют сплошной серый или синеватый "ковер" на небе с нижней границей обычно на высоте 3-5 км. Толщина облачных слоев 1-2 км. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-кучевые облака</I></B>-это серые облака, состоящие из крупных гряд, волн, пластин, разделенных просветами или сливающимися в сплошной серый волнистый покров. Состоят преимущественно из капель. </P> <P ALIGN="JUSTIFY"> <B><I>Слоистые облака</I></B> представляют из себя однородный серый или серо-желтый покров. </P> <P ALIGN="JUSTIFY"> <B><I>Слоисто-дождевые облака</I></B> выглядят как сплошная серая пелена, закрывающий все небо в виде гряд и валов. Они состоят из водяных капель,редко в смеси со снежинками. </P> <P ALIGN="JUSTIFY"> <B><I>Кучевые облака</I></B> подразделяют на кучевые, кучевые средние и кучевые мощные. Толщина 1-2 км, иногда 3-5 км. </P> <P ALIGN="JUSTIFY"> <B><I>Кучево-дождевые облака</I></B> - очень мощные облачные скопления. </P> </BODY> </HTML>
Результат:
Добавление подложки в Майкрософт Ворд
Прежде, чем мы приступим к рассмотрению темы, не лишним будет прояснить, что же такое подложка. Это своего рода фон в документе, который может быть представлен в виде текста и/или изображения. Он повторяется на каждом документе одного типа, где служит определенной цели, давая понять, что это за документ, кому он принадлежит и зачем вообще он нужен. Подложка может служить как всем этим целям вместе, так и любой из них по-отдельности.
Способ 1: Добавление стандартной подложки
-
Откройте документ, в который необходимо добавить подложку.
-
Перейдите во вкладку «Дизайн» и найдите там кнопку «Подложка», которая находится в группе «Фон страницы».
Нажмите на кнопку «Подложка» и выберите подходящий шаблон в одной из представленных групп:
- Заявление об ограничении ответственности;
- Секретно;
- Срочно.
Стандартная подложка будет добавлена в документ.
Вот пример того, как подложка будет выглядеть вместе с текстом:
Шаблонную подложку нельзя изменить, но вместо нее можно буквально в несколько кликов создать новую, полностью уникальную, О том, как это делается, будет рассказано далее.
Способ 2: Создание собственной подложки
Мало кто захочет ограничивать себя стандартным набором подложек, доступных в Ворде. Хорошо, что разработчики этого текстового редактора предусмотрели возможность создания собственных подложек.
- Перейдите во вкладку «Дизайн» («Формат» в Word 2003, «Разметка страницы» в Word 2007 — 2010).
-
В группе «Фон страницы» нажмите на кнопку «Подложка».
-
Выберите в развернувшемся меню пункт «Настраиваемая подложка».
-
Ведите необходимые данные и выполните необходимые настройки в появившемся диалоговом окне.
- Выберите, что вы хотите использовать для подложки — рисунок или текст. Если это рисунок, укажите необходимый масштаб;
- Если в качестве подложки вы хотите добавить надпись, выберите пункт «Текст», укажите используемый язык, введите текст надписи, выберите шрифт, задайте желаемый размер и цвет, а также укажите положение — горизонтально или по диагонали;
Нажмите кнопку “ОК”, чтобы выйти из режима создания подложки.
Вот пример настраиваемой подложки:
Решение возможных проблем
Бывает так, что текст в документе полностью или частично перекрывает собой добавленную подложку. Причина этого довольно проста – к тексту применена заливка (чаще всего именно белая, «незаметная»). Выглядит это примерно так:
Примечательно, что иногда заливка появляется «из ниоткуда», то есть вы можете быть уверены в том, что не применяли ее к тексту, что используете стандартный или просто хорошо знакомый стиль (или шрифт). Но даже при таком условии проблема с видимостью (точнее, отсутствием таковой) подложки все равно может дать о себе знать, что уж говорить о файлах, скачанных из интернета, или скопированном откуда-то тексте.
Единственное решение в данном случае заключается в отключении этой самой заливки для текста. Делается это следующим образом
- Выделите текст, который перекрывает собой подложку, нажав «CTRL+A» или воспользовавшись для этих целей мышкой.
- Во вкладке «Главная», в блоке инструментов «Абзац» нажмите по кнопке «Заливка» и выберите в открывшемся меню пункт «Нет цвета».
Белая, хоть и незаметная, заливка текста будет убрана, после чего подложка станет видимой.
Иногда этих действий оказывается недостаточно, поэтому дополнительно требуется очистить формат. Правда, в работе со сложными, уже отформатированными и «доведенными до ума» документами такое действие может быть критичным. И все же, если видимость подложки для вас крайне важна, а текстовый файл вы создавали самостоятельно, вернуть ему изначальный вид не составит труда.
- Выделите текст, который перекрывает собой подложку (в нашем примере ниже таковым является второй абзац) и нажмите по кнопке «Очистить все форматирование», которая находится в блоке инструментов «Шрифт» вкладки «Главная».
Как можно видеть по скриншоту ниже, это действие не только уберет заливку цветом для текста, но и изменит размер и собственно сам шрифт на тот, что установлен в Ворде по умолчанию. Все что от вас потребуется в таком случае, вернуть ему прежний вид, но обязательно проследите за тем, чтобы к тексту более не применялась заливка.
О картинке на заднем фоне таблицы.
-
Нам понадобится код таблицы, в которой и будем ставить картинку на задний фон…И кроме таблицы, нам понадобится изображение, вообще любое, к примеру вот нам такое попалось под руку…
И код таблицы :
<table width=»140″ height=»140″. border=»1″
>
<tr>
<td> </td>
</tr>
</table>
Давайте выведем данную таблицу :Добавляем свойство заднего фона…
background=»https://marrex.ru/foto/Game/Angry_Birds/Angry_Birds_for_WINDOWS_clip_image002.jpg»
Соберем весь код вместе:
<table width=»140″ height=»140″ border=»1″ >
<tr>
<td background=»//marrex.ru/__arhiv/updates/Site/Tablitsa/2020_10_12_09_22.jpeg»> </td>
</tr>
</table>Ну и результат, установки картинки на задний фон таблицы:
-
Не совсем удачно смотрится наша картинка внутри таблицы, поэтому задний фон таблицы нужно растянуть на всю высоту и ширину.
Для этого есть свойство :
background-size: cover
Его нужно поместить в атрибут style :
background-size: cover»
Новый код растянутой картинки на всю ширину и высоту таблицы:
<table width=»140″ height=»140″ border=»1″ >
<tr>
<td background=»//marrex.ru/__arhiv/updates/Site/Tablitsa/2020_10_12_09_22.jpeg» style=»background-size: cover»> </td>
</tr>
</table>Смотрим результат растягивания картинки на всю ширину и высоту таблицы:
Описание
CSS свойство background обеспечивает краткий метод установки значений сразу нескольких свойств для работы с фоном в одном объявлении.
Допускается указывать значения следующих свойств: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size и background-attachment.
Значения свойства разделяются пробелом и могут следовать в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Все значения указывать не обязательно, любое из них можно опустить, в этом случае вместо пропущенного значения будет использовано значение, которое установлено для свойства по умолчанию, например, если не указано как должно повторяться фоновое изображение, то будет использовано значение по умолчанию свойства background-repeat.
Если в свойстве задаётся размер изображения (background-size), то он должен указываться после указания начальной позиции изображения, через символ / (слэш):
background: background-position/background-size;
Размер изображения указывается только в паре с указанием начальной позиции. Но указание начальной позиции не обязательно указывать в паре с размером изображения.
Совет: когда вы одновременно задаете элементу задний фон и рамку, помните: если стиль рамки — точечная или пунктирная линия, то фоновый цвет или фоновое изображение будет проступать в промежутках между точками или штрихами линий рамки. Другими словами, по умолчанию браузеры размещают линию рамки поверх фона.
| Значение по умолчанию: | смотрите отдельно каждое свойство, входящее в состав краткого метода |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | да, смотрите каждое свойство, входящее в состав краткого метода, отдельно |
| Наследуется: | нет |
| Версия: | CSS1, CSS3 |
| Синтаксис JavaScript: | object.style.background=»red url(smiley.gif) top left no-repeat» |
Статьи по теме
Добавление на страницу картинки (используем тег )
Подготовьте и поместите в файл картинки. Для примера, пусть это будет изображение окна браузера — (скачать), которое поместите в нашу обозначенную папку:
Рис. 2. Файл «brauzer.jpg»
Откроем и найдём в нём следующее:
Код 2. Место для вставки картинки
И рядом (или вместо этого кода) добавим HTML подготовленной картинки:
Код 3. Код картинки — тег
Должно получиться следующее:
Рис. 3. Тег картинки в коде
То есть — это необходимый HTML, который нужно разместить на web-странице, чтобы вместо него отобразилась картинка.
Для настройки в основном используют следующие атрибуты:
- — атрибут для указания адреса изображения. Это может быть, как относительный адрес (относительно папки (раздела на сайте)) (как в нашем примере — ), так и абсолютный адрес вашего сайта или любого другого ресурса (например, )
-
и — ширина и, соответственно, высота картинки в пикселях. В я указал оригинальные размеры изображения, но можно указать и меньшие или бо́льшие.
При этом, конечно же, при указании бо́льших размеров, картинка будет терять в качестве, а при задании меньших (если размеры уменьшены не пропорционально) — искажаться, вписываясь в указанные параметры.
Обычно разработчики задают оригинальные размеры, а далее, при необходимости, меняют картинки как угодно с помощью каскадных стилей CSS (стилизацию рассмотрим ).
-
— альтернативное название. Оно отображается вместо картинки, если у пользователя отключен показ графики на страницах, а также воспроизводится многими интернет-читалками (скринридерами).
Кроме того, данный атрибут считывают поисковые системы, чтобы точнее распознавать изображения.
- — всплывающая подсказка при наведении мышью на изображение. Если нет явной необходимости, то данный параметр веб-мастерами часто не используется.
После того как добавили HTML-код изображения (не забыв положить в папку саму картинку), давайте откроем наш файл «index.html» и посмотрим, что получилось:
Рис. 4. Результат вставки изображения (пока без стилизации)
Изменяем цвет текста с помощью атрибута text.
Атрибут text прописывается в теге <body>. Цвет задается в виде цифрового кода:
<body text=»#cc0000″>
или обычным названием цвета:
<body text=»green»>
Код кодировки и название цвета для HTML вы посмотрите тут.
Вот пример:
<html> <head> <title>Изменяем цвет текста с помощью атрибута text</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body text="#cc0000"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Или вот так:
<html> <head> <title>Изменяем цвет текста с помощью атрибута text</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body text="green"> Текст страницы, таблицы, картинки, музыка и видео. </body> </html>
Результат:
Тег html изменения цвета заднего фона текста через атрибут style background-color
Html атрибут style background-color может применяться в любых html тегах, связанных с версткой текста: абзацах <p>; цитатах <blockquote>; таблицах <table> и их составляющих <tr> и <td>.
Изменение цвета заднего фона текста абзаца <p>
В открытый тег абзаца <p> будем вставлять атрибут style background-color и html код самого цвета заднего фона, который нам нужен #00FFFF (я выбрал Aqua). Для этого заходим на сайт ColorScheme.Ru и копируем код необходимого цвета:
Теперь собираем атрибут изменения цвета заднего фона текста и вставляем в открытый тег абзаца:
<p style=»background-color: #00FFFF»> (кавычки должны быть именно такого вида — » «, иначе цвет не поменяется)
Верстаем сам абзац:
<p style=»background-color: #00FFFF»> В другой вкладке браузера открываем любую из своих социальных сетей, например Facebook. Выбираем видео, которое хотим скачать себе на компьютер, включив его воспроизведение. В строке браузера копируем правой кнопкой мыши ссылку на это видео.</p>
Смотрим как будет выглядеть на блоге:
В другой вкладке браузера открываем любую из своих социальных сетей, например Facebook. Выбираем видео, которое хотим скачать себе на компьютер, включив его воспроизведение. В строке браузера копируем правой кнопкой мыши ссылку на это видео.
Изменение цвета заднего фона текста цитаты <blockquote>
Верстаем цитату с изменением цвета заднего фона:
<blockquote style=»background-color: #BDB76B»>Чтобы снизить риск мошенничества со стороны работодателей и иметь возможность найти официальную удалённую работу, с 2013 года в Российской Федерации учтено правовое регулирование такой работы.
По ТК РФ, удалённая работа официально называется дистанционной и трудовой договор о дистанционной работе можно теперь заключать, подписывая своей электронной подписью.</blockquote>
На сайте цитата будет выглядеть:
Изменение цвета заднего фона текста таблицы <table>
Верстаем таблицу с изменением цвета заднего фона текста всей таблицы:
<table style=»background-color: #FFD700″><tr><td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td></tr>
<tr><td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td></tr>
<tr><td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td></tr></table>
На блоге получаем таблицу в таком виде:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 7 | ячейка 8 | ячейка 9 |
Теперь изменим цвет заднего фона текста построчно:
<table><tr style=»background-color: #00FFFF»><td>ячейка 1</td>
<td>ячейка 2</td>
<td>ячейка 3</td></tr>
<tr style=»background-color #FFA500″><td>ячейка 4</td>
<td>ячейка 5</td>
<td>ячейка 6</td></tr>
<tr style=»background-color: #FFDAB9″><td>ячейка 7</td>
<td>ячейка 8</td>
<td>ячейка 9</td></tr></table>
И на сайте увидим такую таблицу:
| ячейка 1 | ячейка 2 | ячейка 3 |
| ячейка 4 | ячейка 5 | ячейка 6 |
| ячейка 7 | ячейка 8 | ячейка 9 |
В каждой ячейке таблицы, также можно изменить цвет заднего фона текста:
<table><tr><td style=»background-color: #00FFFF»>ячейка 1</td>
<td style=»background-color: #FFA500″>ячейка 2</td>
<td style=»background-color: #FFDAB9″>ячейка 3</td></tr></table>
На блоге увидим в таком варианте:
| ячейка 1 | ячейка 2 | ячейка 3 |
По такому же принципу меняется цвет заднего фона текста в открытых тегах заголовков, жирного, курсивного или подчеркнутого шрифта.
Применяйте на своих сайтах атрибут style background-color для изменения цвета заднего фона текста в своих публикациях, там, где это действительно необходимо.
Успехов вам и до новых встреч!
