Товаров: 0 (0р.)

Body color background html: background-color | htmlbook.ru

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

Давайте начнем с рассмотрения того, как сделать нашу первую HTML- страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

<body bgcolor="blue">

Палитра цвета

В данной таблица цветов вы можете переводить выбранный вами цвет в RGB код (для создания цвета в графическом редакторе) и HEX код (для обозначения цвета в HTML).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета доступны с использованием соответствующих ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

<body>

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

<body bgcolor="#0000FF">

HTML таблица цветов

Вы можете скачать палитру цветов которая сожержит более 100 цветов с названиями и кодами
Скачать палитру цветов с кодами

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: “darkblue”, “lightblue” ):

цвет ключевое слово шестнадцатеричное обозначение
оранжевыйorange#ffa500
синийblue#0000ff
белыйwhite#ffffff
желтыйyellow#ffff00
серыйgray#808080
коричневыйbrown#a52a2a
черныйblack#000000
красныйred#ff0000
зеленыйgreen#008000
фиолетовыйviolet#ee82ee

Кстати цвет фона ячейки в таблице задан вот таким образом

<td bgcolor="#ffffff">#ffffff</td>

Количество доступных цветов зависит от видеокарты. Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, которое обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Поскольку нет способа узнать, какая видеокарта у пользователя (или как он ее установил), веб-дизайнеры давно ссылаются на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра.

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

Свойство background-color | CSS справочник

basicweb.ru
  • HTML
    • Учебник HTML
    • Справочник тегов
    • Атрибуты событий
    • Глобальные атрибуты
    • Коды языков
    • Мнемоники
    • Цвета
    • Тесты знаний
  • CSS
    • Учебник CSS
    • Справочник свойств
    • Селекторы
    • Функции
    • Правила
    • Flexbox генератор
    • Grid генератор
    • Учебник LESS
  • JavaScript
    • Интерфейсы веб API
    • Объект Array
    • Объект Date
    • Объект Function
    • Объект Global
    • Объект JSON
    • Объект Math
    • Объект Number
    • Объект Object
    • Объект RegExp
    • Объект Promise
    • Объект String
  • jQuery
    • Селекторы
    • События
    • Методы DOM
    • Перемещения
    • Утилиты
    • Эффекты
    • AJAX
    • Объект Callbacks
    • Объект Deferred

HTML

  • HTML учебник
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Мнемоники
  • Коды языков
  • HTML цвета
  • Тесты знаний

CSS

  • CSS учебник
  • Справочник свойств
  • CSS селекторы
  • CSS функции
  • CSS правила
  • Flexbox генератор
  • Grid генератор
  • LESS учебник

JavaScript

  • Интерфейсы веб API
  • Объект Array
  • Объект Date
  • Объект Function
  • Объект Global
  • Объект JSON
  • Объект Math β
  • Объект Number
  • Объект Object
  • Объект Promise
  • Объект RegExp
  • Объект String

jQuery

  • jQuery селекторы
  • jQuery события
  • jQuery методы DOM
  • jQuery перемещения
  • jQuery утилиты
  • jQuery эффекты
  • jQuery AJAX
  • jQuery объект Callbacks
  • jQuery объект Deferred

CSS свойства

  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • border
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-image
  • border-image-outset
  • border-image-repeat
  • border-image-slice
  • border-image-source
  • border-image-width
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • break-after
  • break-before
  • break-inside
  • caption-side
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • @font-face
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • grid
  • grid-area
  • grid-auto-columns
  • grid-auto-flow
  • grid-auto-rows
  • grid-column
  • grid-column-end
  • grid-column-gap
  • grid-column-start
  • grid-gap
  • grid-row
  • grid-row-start
  • grid-row-gap
  • grid-row-end
  • grid-template
  • grid-template-areas
  • grid-template-columns
  • grid-template-rows
  • justify-content
  • justify-items
  • justify-self
  • height
  • @keyframes
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • max-height
  • max-width
  • @media
  • min-height
  • min-width
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-wrap
  • overflow-x
  • overflow-y
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • place-items
  • place-self
  • position
  • quotes
  • resize
  • right
  • tab-size

background-color — цвет фона | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство background-color устанавливает цвет фона для элемента. Фон охватывает общий размер элемента, включая внутренние отступы и рамки (не распространяясь на внешний отступ — margin).

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

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

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

Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит воспользоваться свойством background-image. Так же стоит обратить внимание на свойство background-clip, используемое для определения области в элементе, на которую будет распространяться фон.

Значение по умолчанию: transparent
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.backgroundColor=»#00FF00″

Синтаксис

background-color: цвет|transparent|inherit;

Значения свойства

Значение Описание
цвет Цвет фона можно установить различными способами: указать имя цвета, использовать шестнадцатеричные значения, с помощью синтаксиса rgb (rgba) или hsl (hsla).
transparent Указывает, что фон будет прозрачным.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div {
border-style: solid;
border-bottom-width: thin;
}

Атрибут background | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
1.0+1.0+1.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

<body background="URL">
...
</body>

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

background

Валидация

Использование этого атрибута осуждается спецификацией HTML, валидный код получается только при использовании переходного <!DOCTYPE>.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Тег BODY, атрибут background</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body background="images/snow.gif">
  ...
 </body>
</html>

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

Давайте начнем с рассмотрения того, как сделать нашу первую HTML-страницу такой, какой мы хотим ее видеть.

В HTML мы можем установить цвет фона, используя относительный атрибут тега body. Итак:

  

Палитра цвета

В данной таблице цветов вы можете перевести выбранный вами цвет в RGB-код (для создания цвета в графическом редакторе) и HEX-код (для обозначения цвета в HTML) ).

Цвет в HTML: Цвет фона

bgcolor означает «цвет фона». Многие цвета используют с использованием ключевых слов на английском языке.

В качестве альтернативы предпочтительнее использовать стиль CSS, так как цвет фона является эстетической особенностью страницы:

  

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

  

HTML таблица цветов

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

Вот таблица с обозначениями некоторых цветов (многие из них также доступны в «темном» и «светлом» вариантах, например: «darkblue», «lightblue»):

ee7 # ee82ee 900
цвет ключевое слово шестнадцатеричное обозначение
оранжевый оранжевый # ffa500
синий синий # 0000ff
белый белый #ffffff
желтый желтый # ffff00
серый серый # 808080
коричневый коричневый # a52 a2a
черный черный # 000000
красный красный # ff0000
зеленый зеленый # 008000
фиолетовый фиолетовый

Кстати цвет фона в таблице задан вот таким образом

  # ffffff  

Количество доступных цветов зависит от видеокарты.Сегодня мы переходим от минимального разрешения 256 цветов к разрешению, обеспечивает миллионы цветов.

Цвет фона и настройки экрана

Как нет способа узнать видеокарта у пользователя, веб-дизайнеры давно установили на «безопасную палитру» из 256 цветов, на которую пользователь, безусловно, способен дисплей. Это называется безопасная веб- палитра .

Однако следует сказать, что подавляющее большинство компьютеров настроено как минимум тысячи цветов, поэтому использование «безопасного веб-палитры» уже не так строго необходимо (это было в первые годы существования Интернета).

.

Атрибут фон | htmlbook.ru

Internet Explorer Хром Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4,01 5,0 XHTML: 1,0 1,1

Описание

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

Синтаксис

  
...   

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

Значение по умолчанию

Нет.

Аналог CSS

фон

Валидация

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

Пример

HTML 4.01IECrOpSaFx

  

 
   Тег BODY, атрибут фон 
  
 
 
  ...
 
  
.

фон-цвет — цвет фона | Справочник CSS

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство background-color устанавливает цвет фона для элемента.Фон общий размер элемента, включая внутренние отступы и рамки (не распространяя на внешний отступ — маржа).

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

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

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

Совет: вместо монотонного цвета, в качестве фона, можно использовать любое изображение, для этого стоит использовать свойством background-image.Так же стоит обратить внимание на свойство background-clip, используемое для определения области в распространенте, на которую будет выполняться фон.

Значение по умолчанию: прозрачный
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: объект.style.backgroundColor = «# 00FF00»

Синтаксис

 цвет фона: цвет | прозрачный | наследование; 

Значения свойства

Значение Описание
цвет Цвет фона можно установить способами: указать имя цвета, использовать шестнадцатеричные значения, с помощью синтаксиса rgb (rgba) или hsl (hsla).
прозрачный Указывает, что фон будет прозрачным.
наследовать Указывает, что значение наследуется от родительского элемента.

Пример

div {
стиль границы: твердый;
ширина-нижняя граница: тонкая;
}

.

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

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