Содержание

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

Главная » Все про HTML » Как изменить цвет фона и текста в 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 /

План заработка в Интернете

Как правильно выбрать партнерские программы, чтобы гарантированно зарабатывать? Что необходимо сделать вначале, чтобы ваш заработок был стабильным и предсказуемым? Возможно ли стартовать вообще без денег и каких-либо вложений в рекламу? Этот план поможет вам сделать первые шаги к заработку, даст ответы на важные вопросы и убережет от ошибок в начале пути. Подробнее…

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

Итак, если вы читали статью об обязательных тегах, то вы знаете, что текст страницы располагается между тегами <body></body>. Однако тег <body> не только определяет, где должен быть текст страницы, но и может задавать многие параметры, общие для всех элементов страницы.

Тег <body>

Слово body переводится с английского как “тело”. Всё, что находится между тегами <body></body> — это тело HTML-документа, это основа основ HTML-страницы.

В HTML4 (а также в XHTML) тег <body> может принимать множество атрибутов, управляющих цветом и фоном документа. Некоторые браузеры предоставляют дополнительные атрибуты для этого тега, однако мы не будем выходить за рамки стандарта HTML 4.

Всё, что находится между открывающим тегом <body> и закрывающим тегом </body> называется содержимым тела.

Закрывающий тег </body> в HTML можно не указывать, однако для совместимости с XHTML лучше все теги делать парными.

Атрибуты тега <body> условно можно разделить на три части:

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

На этом краткое знакомство с тегом <body> пока закончим, и перейдём к теме данной статьи.

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

Для задания цвета фона документа (страницы) используется атрибут bgcolor:

<body bgcolor="red">

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

В теге <body> можно задать цвет не только для фона, но и для текста страницы:

<body text="yellow" bgcolor="green">

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

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


Как создать свой сайт

Очень небольшая книга, которую можно прочитать буквально за 15 минут. Но эти 15 минут дадут вам представление о том, как создаются современные сайты… Подробнее…

Помощь в технических вопросах

Помощь студентам. Курсовые, дипломы, чертежи (КОМПАС), задачи по программированию: Pascal/Delphi/Lazarus; С/С++; Ассемблер; языки программирования ПЛК; JavaScript; VBScript; Fortran; Python; C# и др. Разработка (доработка) ПО ПЛК (предпочтение — ОВЕН, CoDeSys 2 и 3), а также программирование панелей оператора, программируемых реле и других приборов систем автоматизации. Подробнее…

Как установить цвет фона в HTML?

Улучшить статью

Сохранить статью

  • Уровень сложности: Базовый
  • Последнее обновление: 01 апр, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Цвет фона можно изменить тремя способами:

    • Атрибут встроенного стиля
    • Внутренний CSS
    • Внешний CSS

    HTML5 не поддерживает атрибут bgcolor тега

    24, поэтому нам нужно использовать атрибут встроенного стиля и внутренние параметры CSS для изменения цвета веб-страницы. Для внутреннего CSS добавьте тег

    Пример 1: Ниже приведен пример, иллюстрирующий использование встроенного CSS.

    HTML

    < html >

    63

    63
      3
        10061    

        < body style = "background-color:pink" >

             < h2 style = "color:green; выравнивание текста: по центру;" >

        Geeksforgeeks

        H2 >

        >

        >

        >

        >

        >

        >

        >

        >

        . 0060      < h4 стиль = "выравнивание текста: по центру;" >

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

             h4 >

        body >

           

        html >

    Вывод: Это будет отображаться при открытии html-файла в браузере.

    Пример 2: Ниже приведен пример, иллюстрирующий использование внутреннего CSS.

    HTML

    < html >

       

    < head >

         < стиль >

             корпус {

       ;         

    }

    H2 {

    Color: Green;

                 text-align: center;

             }

       

             h4 {

    выравнивание по центру: 0 6    9 0 0 6;

             }

         style >

    head >

       

    < body >

         < h2 >GeeksForGeeks h2 >

       

         < h4 >

             How to change color of

    Фон? (с использованием внутреннего CSS)

         h4 >

    2 body

      2 >

      HTML >

    9002 . Во внешнем CSS мы создаем отдельный файл со всеми данными стиля для html-файла. Внешнее хранение файла упрощает внесение изменений в HTML-страницу.


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

    html

    9 месяцев назад

    Аднан Шаббир

    Цвет фона HTML-документа/элемента улучшает внешний вид веб-страницы. Изменение цвета фона веб-страницы HTML позволяет создавать уникальные цветные макеты. Добавление цвета фона в HTML выделяет его и делает его более удобочитаемым для читателей.

    HTML обеспечивает обширную поддержку для управления элементами. HTML обеспечивает поддержку изменения цвета фона в соответствии с требованиями.

    В этой статье представлены различные способы изменения цвета фона в HTML. Вы получите следующие результаты обучения:

    1. Как изменить цвет фона в HTML с помощью встроенного CSS
    2. Как изменить цвет фона в HTML с помощью внутреннего CSS
    3. Как изменить цвет фона в HTML с помощью внешнего CSS

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

    Свойство «background-color» в HTML изменит цвет фона. Более ранние версии поддерживали свойство «bgcolor» , которое больше не поддерживается в последней версии. Свойство background-color можно использовать следующими способами:

    • Встроенный CSS : стили CSS добавляются внутри тега
      • .
    • Внутренний CSS : стили добавляются в раздел заголовка внутри HTML-документа
    • Внешний CSS : Создан внешний файл CSS и связан с документом HTML для добавления изменений

    Все эти методы обсуждаются в следующих разделах.

    Как изменить цвет фона в HTML с помощью встроенного CSS

    Встроенный CSS используется внутри открывающего тега элемента, встроенный CSS влияет только на элемент, в котором он используется. Мы будем использовать атрибут Background-color для изменения атрибута цвета

    Код:

    9181441414. используется встроенный CSS в теге body, в Цвет фона

    Мы использовали атрибут стиля внутри тега body, добавили свойство Background-color и присвоили ему имя ключевого слова цвета Azure.

    Выход:

    Цвет фона тега body меняется на лазурный после применения Inline CSS.

    Как изменить цвет фона в HTML с помощью внутреннего CSS

    Внутренний CSS используется для оформления одного HTML-документа внутри раздела Head. Весь код CSS будет внутри тега Style, а тег style будет внутри тега head.

    Код:

    1
    2
    3


    Мы использовали атрибут фонового цвета, чтобы изменить цвет фона


  • <головка> 4    

    • 1
    2
    3
    4
    5
    6
    7

    Мы использовали встроенный CSS и выбрали раздел body для применения свойства background-color.

    Результат:

    Как видите, цвет фона изменился на Azure с помощью Inline CSS.

    Как изменить цвет фона в HTML с помощью внешнего CSS

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

    Код CSS:

    1
    2
    3

    body {
        background-color: #F0FFFF;
    }

    Создается файл CSS с именем «style.css» , и вышеупомянутый код записывается внутри «style.css».

    HTML-код:

    1
    2
    3


    "cs ref=".stylesheet"

    Кроме того, следующие строки используются для ссылки на файл CSS в документе HTML.

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

    No related posts.