Style background color: background-color | htmlbook.ru

Содержание

Как установить цвет фона CSS для HTML с помощью JavaScript

Изменение CSS

HTMLElement

Вы можете изменить большинство свойств CSS с помощью JavaScript, используйте этот оператор:

document.querySelector(<selector>).style[<property>] = <new style>

где <selector>, <property>, <new style>все Stringобъекты.

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

Следующий оператор установит #containerкрасный цвет фона:

documentquerySelector('#container').style.background = 'red'

Вот быстрая демонстрация, меняющая цвет коробки каждые 0,5 с:

colors = ['rosybrown', 'cornflowerblue', 'pink', 'lightblue', 'lemonchiffon', 'lightgrey', 'lightcoral', 'blueviolet', 'firebrick', 'fuchsia', 'lightgreen', 'red', 'purple', 'cyan']

let i = 0
setInterval(() => {
  const random = Math.
floor(Math.random()*colors.length) document.querySelector('.box').style.background = colors[random]; }, 500)
.box {
  width: 100px;
  height: 100px;
}
<div></div>

Изменение CSS нескольких

HTMLElement

Представьте, что вы хотите применить стили CSS более чем к одному элементу, например, сделать цвет фона всех элементов именем класса box lightgreen. Тогда ты можешь:

  1. выберите элементы с помощью .querySelectorAllи разверните их в объект Arrayс синтаксисом деструктуризации :

    const elements = [...document.querySelectorAll('.box')]
  2. перебрать массив с помощью .forEachи применить изменение к каждому элементу:

    elements.forEach(element => element.style.background = 'lightgreen')

Вот демо:

const elements = [..
.document.querySelectorAll('.box')] elements.forEach(element => element.style.background = 'lightgreen')
.box {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin: 10px;
}
<div></div>
<div></div>
<div></div>
<div></div>

Другой способ

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

Предполагая, что вы можете заранее подготовить стили в CSS, вы можете переключать классы, обращаясь classListк элементу и вызывая toggleфункцию:

document.querySelector('.box').classList.toggle('orange')
.box {
  width: 100px;
  height: 100px;
}

.orange {
  background: orange;
}
<div></div>

Список свойств CSS в JavaScript

Вот полный список:

alignContent
alignItems
alignSelf
animation
animationDelay
animationDirection
animationDuration
animationFillMode
animationIterationCount
animationName
animationTimingFunction
animationPlayState
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
backgroundClip
backgroundOrigin
backgroundSize</a></td>
backfaceVisibility
borderBottom
borderBottomColor
borderBottomLeftRadius
borderBottomRightRadius
borderBottomStyle
borderBottomWidth
borderCollapse
borderColor
borderImage
borderImageOutset
borderImageRepeat
borderImageSlice
borderImageSource  
borderImageWidth
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRadius
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderSpacing
borderStyle
borderTop
borderTopColor
borderTopLeftRadius
borderTopRightRadius
borderTopStyle
borderTopWidth
borderWidth
bottom
boxShadow
boxSizing
captionSide
clear
clip
color
columnCount
columnFill
columnGap
columnRule
columnRuleColor
columnRuleStyle
columnRuleWidth
columns
columnSpan
columnWidth
counterIncrement
counterReset
cursor
direction
display
emptyCells
filter
flex
flexBasis
flexDirection
flexFlow
flexGrow
flexShrink
flexWrap
content
fontStretch
hangingPunctuation
height
hyphens
icon
imageOrientation
navDown
navIndex
navLeft
navRight
navUp>
cssFloat
font
fontFamily
fontSize
fontStyle
fontVariant
fontWeight
fontSizeAdjust
justifyContent
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginBottom
marginLeft
marginRight
marginTop
maxHeight
maxWidth
minHeight
minWidth
opacity
order
orphans
outline
outlineColor
outlineOffset
outlineStyle
outlineWidth
overflow
overflowX
overflowY
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
pageBreakInside
perspective
perspectiveOrigin
position
quotes
resize
right
tableLayout
tabSize
textAlign
textAlignLast
textDecoration
textDecorationColor
textDecorationLine
textDecorationStyle
textIndent
textOverflow
textShadow
textTransform
textJustify
top
transform
transformOrigin
transformStyle
transition
transitionProperty
transitionDuration
transitionTimingFunction
transitionDelay
unicodeBidi
userSelect
verticalAlign
visibility
voiceBalance
voiceDuration
voicePitch
voicePitchRange
voiceRate
voiceStress
voiceVolume
whiteSpace
width
wordBreak
wordSpacing
wordWrap
widows
writingMode
zIndex

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

CSS свойства

Определение и применение

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


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


Подробную информацию об использовании цветов в HTML и CSS, способах указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов, вы сможете найти в следующих статьях учебников:

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

CSS синтаксис:

background-color: "color | transparent | initial | inherit";

JavaScript синтаксис:

object.style.backgroundColor="#00FF00"

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

ЗначениеОписание
colorОпределяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета").
transparentУказывает, что цвет фона должен быть прозрачным. Значение по умолчанию.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование CSS свойства background-color </title>
<style> 
body {
background-color:CornflowerBlue;
}
h3 {
background-color:#FFFF00;
}
p {
background-color:rgb(0,255,0);
}
</style>
</head>
	<body>
		<h3>Заголовок второго уровня</h3>
		<p>Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
	</body>
</html>

В этом примере мы с использованием CSS свойства background-color указали цвет заднего фона для:

  • Элемента <body> с использованием предопределенного цвета (
    CornflowerBlue
    ).
  • Элемента <h3> с использованием шестнадцатиричного значения цвета (#FFFF00 - желтый).
  • Элемента <p> с использованием системы RGB (rgb(0,255,0) - зеленый).

Результат нашего примера:

Пример использования свойства background-color.CSS свойства

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;
}

HTML-стилей


Атрибут стиля HTML используется для добавления к элементу стилей, таких как цвет, шрифт, размер и т. Д.



Атрибут стиля HTML

Установить стиль элемента HTML можно с помощью атрибута style .

Атрибут стиля HTML имеет следующий синтаксис:

< тэг style = " property : value; ">

Свойство является свойством CSS.Значение - это значение CSS.

Вы узнаете больше о CSS позже в этом руководстве.


Цвет фона

Свойство CSS background-color определяет цвет фона. для элемента HTML.

Пример

Установите цвет фона для страницы на синий:

Это заголовок


Это абзац.

Попробуй сам "

Пример

Установить цвет фона для двух разных элементов:

Это заголовок


Это абзац.

Попробуй сам "

Цвет текста

Свойство CSS color определяет цвет текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Шрифты

Свойство CSS font-family определяет используемый шрифт. для элемента HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Размер текста

Свойство CSS font-size определяет размер текста для элемент HTML:

Пример

Это заголовок


Это абзац.

Попробуй сам "

Выравнивание текста

Свойство CSS text-align определяет горизонтальное выравнивание текста для элемента HTML:

Пример

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


Абзац по центру.

Попробуй сам "

Краткое содержание главы

  • Используйте атрибут стиля для стилизации элементов HTML
  • Используйте background-color для цвета фона
  • Используйте цвет для цветов текста
  • Использовать font-family для текстовых шрифтов
  • Используйте размер шрифта для размера текста
  • Использовать выравнивание текста для выравнивания текста

Упражнения HTML



background-color - CSS: каскадные таблицы стилей

Свойство CSS background-color устанавливает цвет фона элемента.

 
цвет фона: красный;
цвет фона: индиго;


цвет фона: # bbff00;
цвет фона: # bf0;
цвет фона: # 11ffee00;
цвет фона: # 1fe0;
цвет фона: # 11ffeeff;
цвет фона: # 1fef;


цвет фона: rgb (255, 255, 128);
цвет фона: rgba (117, 190, 218, 0,5);


цвет фона: hsl (50, 33%, 25%);
цвет фона: hsla (50, 33%, 25%, 0,75);


цвет фона: текущий цвет;
цвет фона: прозрачный;


цвет фона: наследовать;
цвет фона: начальный;
цвет фона: вернуться;
цвет фона: не задано;
  

Свойство background-color задано как одно значение > .

Значения

<цвет>
Единый цвет фона. Он отображается за любым заданным фоновым изображением , хотя цвет по-прежнему будет виден через любую прозрачность изображения.

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

Коэффициент контрастности цвета определяется путем сравнения яркости текста и значений цвета фона. Чтобы соответствовать текущим правилам доступности веб-содержимого (WCAG), требуется соотношение 4,5: 1 для текстового содержимого и 3: 1 для более крупного текста, такого как заголовки. Большой текст определяется как 18,66 пикселей и полужирный или больше, или 24 пикселей или больше.

 <цвет> 

, где
<цвет> = | | | | <шестнадцатеричный цвет> | <имя-цвета> | текущий цвет | <цвет устаревшей системы>

, где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)
= hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?)

, где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> |

HTML

  
Lorem ipsum dolor sit amet, consctetuer
Lorem ipsum dolor sit amet, consctetuer
Lorem ipsum dolor sit amet, consctetuer

CSS

 .exampleone {цвет фона: прозрачный; }

.exampletwo {
  цвет фона: rgb (153,102,153);
  цвет: rgb (255,255,204);
}

.examplethree {
  цвет фона: # 777799;
  цвет: #FFFFFF;
}
  

Результат

Таблицы BCD загружаются только в браузере

CSS bgcolor

Возможно, вы знакомы со старым атрибутом HTML bgcolor . Этот атрибут (устаревший в HTML 4 и прекращенный в HTML 5) позволял вам устанавливать цвет фона элементов HTML.Например, используя этот атрибут, вы можете установить цвет фона таких элементов, как элемент

или элемент .

Хотя нет свойства или атрибута CSS bgcolor , есть свойство CSS background-color . Свойство background-color является эквивалентом CSS старого атрибута HTML bgcolor . Фактически, свойство CSS background-color более мощное, чем атрибут HTML bgcolor .Одним из основных преимуществ свойства background-color является то, что его можно применить к любому элементу.

Пример использования

Цвет фона элемента

.

Пример цвета фона CSS.

В следующем примере цвет фона устанавливается только для элемента

внутри

.

Пример цвета фона CSS.

Также см. Свойство CSS background для установки всех свойств фона элемента.

Стиль и цвет | HTML

В этом уроке мы коснемся стилизации веб-страниц.Когда мы работаем с HTML, мы, по сути, определяем структуру или архитектуру нашего веб-сайта.

Однако после того, как вы определили макет сайта, вы захотите добавить стили.

Стиль веб-сайта - это то, что отличает один сайт от другого. Он привносит индивидуальность, бренд и удобство использования из простого HTML, который мы уже видели в этом курсе.

В качестве введения в стиль, давайте рассмотрим несколько основных способов добавления цвета на наши сайты!


Одну в сторону, стилизация веб-сайтов - это отдельная тема.На самом деле существует совершенно отдельный язык, который мы можем использовать для стилизации сайтов, который называется CSS (каскадная таблица стилей).

В этом уроке будут представлены некоторые самые базовые методы стилизации, но если вы хотите узнать больше, чем просто основы, ознакомьтесь с моим курсом CSS (хотя я бы рекомендовал сначала закончить курс HTML).


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

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

 Копия  

Синий текст

Выше у нас есть абзац с синим текстом. Обратите внимание, как мы добавили атрибут стиля . Внутри я определил, что цвет текста должен быть синим. На самом деле это инструкция CSS. Операторы CSS позволяют нам изменять определенные стилистические аспекты элемента HTML.

Оператор CSS имеет следующую структуру:

  styleProperty: значение;
  

Слева у нас есть свойство стиля.Это аспект стиля HTML-элемента, который мы хотим изменить. В приведенном выше случае color изменяет цвет текста. После свойства идет двоеточие, за ним следует значение и точка с запятой.

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

Цвет фона

Внутри тегов стилей вы можете настроить более одного стиля.Если вы узнаете больше о CSS, вы откроете для себя всевозможные свойства стиля, которые вы можете использовать, а пока я познакомлю вас с еще одним, связанным с цветом: background-color .

Так же, как мы можем указать цвет текста, мы также можем указать цвет фона:

 Копия  

Синий текст на оранжевом фоне

Уведомление выше Я добавил background-color к абзацу. Если вы хотите указать более одного свойства стиля, вы можете просто написать их одно за другим (не забывая использовать точку с запятой для их разделения).

В этом случае теперь у абзаца будет синий текст на оранжевом фоне!

Стили вложения

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

 Копия  
     

Стиль и цвета

текст абзаца

В приведенном выше коде мы используем те же свойства color и background-color , но применили их к более сложной структуре HTML.Я помещу тот же HTML-код сюда, на эту страницу, чтобы вы могли увидеть, как он работает:

Стиль и цвета

текст абзаца

Обратите внимание на то, как применяется стиль выше. У нас есть светло-голубой цвет в теге body, который окрашивает всю структуру, включая заголовок. Заголовок будет иметь собственный зеленый цвет.

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

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

Последние мысли

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

Также имейте в виду, что с этими типами стилей мы можем сделать больше, чем просто изменить цвет!

Установить или изменить цвет фона HTML

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

Определение и использование.

Свойство HTML background-color задается для изменения или установки цвета фона элемента. Фон - это общий размер элемента, включая отступы и границу, но не поля.


Установить свойство background-color в элементе HTML

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

Пример 1:

  
        
        
             Документ 
        
            
        
          

Вот как HTML-код выше будет отображаться в браузере:

Можно ли установить цвет фона HTML в элементе? Да мы можем.Например, мы изменим цвет фона элемента

.

Пример 2:

  
        
        
             Документ 
        
            

                

Раскрашивание фона элемента div

Это абзац

Раскрашивание фона элемента div

Это абзац

Раскрашивание фона элемента div

Это абзац

Вот как HTML-код выше будет отображаться в браузере:

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

Шестнадцатеричный цветовой код со свойством background-color - самый популярный способ установить цвет фона HTML.Цвет Hex имеет хэштег '#' и цветовой код RRGGBB (#RRGGBB). Это пример применения шестнадцатеричного цветового кода непосредственно к элементу HTML.

Пример 3:

  
        
        
             Документ 
        
            

                

Раскрашивание фона элемента div с использованием шестнадцатеричного цвета

Цвет шестигранника # FF0000

Раскрашивание фона элемента div с использованием шестнадцатеричного цвета

Цвет шестигранника # 00FF00

Раскрашивание фона элемента div с использованием шестнадцатеричного цвета

Цвет шестнадцатеричного кода # 0000FF

Вот как HTML-код выше будет отображаться в браузере:


Установить цвет фона с помощью имени цвета HTML

Второй способ установить цвет фона в HTML - использовать имя цвета HTML.Название цвета - это самый простой способ изменить цвет в HTML-документе. Просто введите название цвета, например Red, Green или Blue, со свойством background-color.

Пример 4:

  
        
        
             Документ 
        
            

                

Раскрашивание фона элемента div с использованием названия цвета

Название цвета Красный

Раскрашивание фона элемента div с использованием названия цвета

Название цвета: зеленый

Раскрашивание фона элемента div с использованием названия цвета

Название цвета: синий

Раскрашивание фона элемента div с использованием названия цвета

Название цвета Голубой

Раскрашивание фона элемента div с использованием названия цвета

Название цвета Пурпурный

Раскрашивание фона элемента div с использованием названия цвета

Название цвета Желтый

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с использованием значений цвета RGB

Теперь мы установим свойство HTML background-color, используя значения RGB.Используйте тот же атрибут стиля, что и раньше, но замените шестнадцатеричный цвет или имя цвета на значения RGB.

Пример 5:

  
            
            
                 Документ 
            
                

                    

Раскрашивание фона элемента div с использованием значений RGB

Значения RGB rgb (255,0,0)

Раскрашивание фона элемента div с использованием значений RGB

Значения RGB rgb (0,255,0)

Раскрашивание фона элемента div с использованием значений RGB

Значения RGB rgb (0,0,255)

Вот как HTML-код выше будет отображаться в браузере:

При использовании значений RGB у вас есть дополнительная опция для установки, указывающая уровень непрозрачности с альфа-каналом.Это будет контролировать уровень прозрачности фона. Альфа объявляется с буквой «а». Если используется альфа, код формата - «rgba». Значение альфа - 0 и 1, 0 для полной прозрачности и 1 для непрозрачности. Это пример использования значений «rgba».

Пример 6:

  
            
            
                 Документ 
            
                

                    

Раскрашивание фона элемента div с использованием RGB с альфа-каналом

rgba (255,0,0,0.5)

Раскрашивание фона элемента div с использованием RGB с альфа-каналом

rgba (0,255,0,0.5)

Раскрашивание фона элемента div с использованием RGB с альфа-каналом

rgba (0,0,255,0.5)

Вот как HTML-код выше будет отображаться в браузере:

Установить цвет фона с использованием значений цвета HSL

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

Пример 7:

  
        
        
             Документ 
        
        
        
          

Вот как HTML-код выше будет отображаться в браузере:


Как и в случае с RGB, вы также можете добавить альфа-канал, чтобы установить уровень непрозрачности для значений HSL.

Пример 8:

  
        
        
             Документ 
        
        

            

Раскрашивание фона элемента div с помощью HSL с альфа-каналом

hsla (0,100%, 50%, 0,5)

Вот как HTML-код выше будет отображаться в браузере:

Есть несколько способов установить или изменить цвет фона HTML.Это так легко и просто, запомните это, если вы хотите установить цвет, используйте атрибут «style» и свойство CSS background-color. Синтаксис такой:

  <тег>  

Если вы хотите узнать больше о цветовом коде, вы можете увидеть в предыдущем руководстве о цветовых кодах HTML. Вы можете найти полный исходный код этих примеров на нашем GitHub.

Это только основное. Если вам нужно больше узнать о HTML, CSS, Javascript или других подобных областях, вы можете пройти следующий дешевый курс:

Спасибо!

Цвет фона HTML: как настроить фон

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

Темы в статье

Цвет фона корпуса с использованием названий цветов

Одним из наиболее распространенных способов изменения цвета фона HTML веб-страницы является использование простых названий цветов, таких как красный, зеленый, синий и т. Д. Атрибут, используемый для изменения цвета фона - background-color. Ниже приведен пример изменения цвета фона с помощью встроенных стилей.

 

Эта веб-страница имеет красный цвет фона!

Атрибуту background-color присвоено значение красного цвета. Таким образом, цвет фона HTML теперь красный. Красный можно заменить любым названием цвета.


Цвет фона корпуса с использованием шестнадцатеричных кодов цветов

Мир полон красок. Есть много цветов, которые можно использовать при разработке веб-страниц. У каждого цвета есть свое название, например красный, желтый, черный и т. Д.Но у каждого цвета столько оттенков. Например, красный цвет доступен в различных оттенках, таких как темно-красный, светло-красный, малиновый, кирпичный и т. Д. То же самое и со многими другими цветами. Итак, как использовать эти цвета в HTML? Ответом на это является модель RGB. Красный, зеленый и синий цвета можно смешивать, чтобы получить широкий спектр цветов. Каждый из этих оттенков имеет шестизначный код. Этот код известен как шестнадцатеричный цветовой код.

Цветовые коды

Hex также можно использовать с HTML и CSS для изменения цвета фона HTML веб-страницы.Они также используются с атрибутом background-color. Вместо названия цвета используется цифровой знак (#), за которым следует шестизначный код оттенка. Ниже приведен пример изменения цвета фона с помощью метода встроенных стилей CSS.

 

Это демонстрационная веб-страница

Обратите внимание на приведенный выше код. Все аналогично предыдущему методу, но с небольшими изменениями.Вместо присвоения имени цвета как значения атрибуту background-color используется # FF00FF. # FF00FF - шестнадцатеричный код пурпурного цвета.

Щелкните здесь, чтобы выбрать любой оттенок с его шестнадцатеричным кодом цвета.

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

Что делать, если вы хотите изменить цвет фона HTML только для некоторой части веб-страницы? Это тоже возможно. Div используется для определения подразделения или раздела на веб-странице. Цвет фона таких разделов или разделов также можно изменить с помощью CSS.Есть несколько способов сделать это. Но я объясню самые простые и быстрые из них, то есть встроенные стили.

 

Цвет фона этого тега div красный, а цвет фона этой веб-страницы - желтый

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


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

Таблицы играют важную роль в веб-дизайне. У таблиц много ролей. Столы также должны выглядеть привлекательно. Есть много способов, с помощью которых стол может выглядеть лучше и привлекательнее. Один из таких способов - задать цвет фона. Подобно тегу body и тегу div, тегу таблицы также могут быть присвоены встроенные стили с атрибутом background-color. Ниже приведен пример таблицы с тремя строками и тремя столбцами и зеленым фоном (# 00FF00).

 

<стиль>
table, th, td {
граница: сплошной черный 1px;
}



<таблица>
Имя Страна Возраст
Джон США 21
Сэм Испания 22

В приведенном выше коде встроенный стиль используется в теге таблицы.Это изменит фон всей таблицы. Если вы хотите изменить цвет фона определенной строки, добавьте встроенные стили с атрибутом background-color в теге tr. Сделайте то же самое с тегом td, если вы хотите изменить цвет фона определенного столбца.


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

На веб-странице всегда много текста. Как правило, тексты не имеют определенного цвета фона. Но если есть необходимость в тексте с определенным цветом фона, встроенные стили также можно использовать в теге span.Ниже приведен пример изменения цвета фона текста с помощью встроенных стилей.

 

у этого текста нет цвета фона

этот текст имеет красный цвет фона

этот текст имеет зеленый цвет фона

В приведенном выше коде первый абзац не имеет цвета фона.У второго абзаца фон красного (# FF0000) цвета, а у третьего абзаца фон зеленого (# 00FF00) цвета.

Заключение

С цветами все выглядит лучше. Цвета играют большую роль в веб-дизайне. В начале истории Интернета на экранах не было цветов. Итак, первые реализации HTTP / HTML не имели такой поддержки. Они часто используются в HTML и CSS для создания привлекательных веб-страниц. Цвета могут быть применены ко всей веб-странице или к некоторой части веб-страницы с помощью тега div.Таблицам также можно задать цвет фона HTML. Даже определенные строки и столбцы также могут иметь цвет фона. Цвет фона также можно применить к тексту с помощью тега span. HTML и CSS предоставляют множество возможностей для изменения цвета фона практически всего. Следует только знать, как эффективно использовать эти параметры, чтобы веб-сайты выглядели более привлекательно и лучше.

цветовых кодов и названий CSS

цветовых кодов и названий CSS.

CSS цвет

Цветовой код может быть одним из:

Шестнадцатеричный формат: #rrggbb

Формат RGB: RGB (красный, зеленый, синий)

Формат имени: имя

Пример

Для оранжевого цвета:

Шестнадцатеричный формат: # FFA500

Формат RGB: rgb (255,165,0)

Формат имени: оранжевый

Настройка цвета элемента

Для конкретного элемента:

Для всех элементов одного типа.Поместите код в тег

Пример

Установка красного цвета текста абзаца:

Установка цвета определенного абзаца:

Немного текста ...

Просмотр:

Немного текста ...

Установка цвета всех абзацев

<стиль>
п {цвет: # FF0000; }

Установка цвета фона элемента

элемент {фон: код ; }

Пример

Установка красного цвета фона абзаца:

Установка цвета фона определенного абзаца:

Какой-то текст...

Просмотр:

Немного текста ...

Установка цвета фона всех абзацев:

<стиль>
p {фон: # FF0000; }

Установка цвета границы элемента

элемент {border-color: topcode rightcode bottomcode leftcode }

Пример

Установка красного, зеленого, синего и черного цвета границы абзаца:

Установка цвета границы конкретного абзаца:

Какой-то текст...

Просмотр:

Немного текста ...

Установка цвета границы всех абзацев:

<стиль>
п {цвет границы: # FF0000 # 00FF00 # 0000FF # 000000; }

Красный цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светлый лосось # FFA07A RGB (255,160,122)
лосось # FA8072 RGB (250,128,114)
темный лосось # E9967A RGB (233,150,122)
светло-коралловый # F08080 RGB (240,128,128)
индийский красный # CD5C5C RGB (205,92,92)
малиновый # DC143C RGB (220,20,60)
огнеупорный кирпич # B22222 RGB (178,34,34)
красный # FF0000 RGB (255,0,0)
темно-красный # 8B0000 RGB (139,0,0)

Оранжевый цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
коралловый # FF7F50 RGB (255,127,80)
помидор # FF6347 RGB (255,99,71)
оранжево-красный # FF4500 RGB (255,69,0)
золото # FFD700 RGB (255,215,0)
оранжевый # FFA500 RGB (255,165,0)
темно-оранжевый # FF8C00 RGB (255,140,0)

Желтые цвета

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светло-желтый # FFFFE0 RGB (255,255,224)
лимонный шифон #FFFACD RGB (255,250,205)
светло-золотисто-желтый # FAFAD2 RGB (250,250,210)
papayawhip # FFEFD5 RGB (255 239 213)
мокасины # FFE4B5 RGB (255 228 181)
персиковый # FFDAB9 RGB (255 218 185)
бледно-золотой # EEE8AA RGB (238,232,170)
хаки # F0E68C RGB (240,230,140)
даркхаки # BDB76B RGB (189 183 107)
желтый # FFFF00 RGB (255,255,0)

Зеленые цвета

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
зеленый # 7CFC00 RGB (124,252,0)
шартрез # 7FFF00 RGB (127,255,0)
зеленовато-зеленый # 32CD32 RGB (50,205,50)
лайм # 00FF00 RGB (0.255,0)
лесозеленый # 228B22 RGB (34,139,34)
зеленый # 008000 RGB (0,128,0)
темно-зеленый # 006400 гб (0,100,0)
зелено-желтый # ADFF2F RGB (173,255,47)
желто-зеленый # 9ACD32 RGB (154,205,50)
весенне-зеленый # 00FF7F RGB (0,255,127)
средне-весенний зеленый # 00FA9A RGB (0,250,154)
светло-зеленый # 90EE90 RGB (144 238 144)
бледно-зеленый # 98FB98 RGB (152 251 152)
темно-синий # 8FBC8F RGB (143 188 143)
средний зеленый # 3CB371 RGB (60,179,113)
Сигрин # 2E8B57 RGB (46,139,87)
оливковый # 808000 RGB (128,128,0)
темно-оливковый, зеленый # 556B2F RGB (85,107,47)
Olivedrab # 6B8E23 RGB (107,142,35)

Голубые цвета

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
светло-голубой # E0FFFF RGB (224,255,255)
голубой # 00FFFF RGB (0,255,255)
аква # 00FFFF RGB (0,255,255)
аквамарин # 7FFFD4 RGB (127,255,212)
средний аквамарин # 66CDAA RGB (102,205,170)
палитра бирюза #AFEEEE RGB (175 238 238)
бирюза # 40E0D0 RGB (64,224,208)
средний бирюзовый # 48D1CC RGB (72,209,204)
темно-бирюзовый # 00CED1 RGB (0,206,209)
светло-зеленый # 20B2AA RGB (32,178,170)
кадетсиний # 5F9EA0 RGB (95,158,160)
темно-синий # 008B8B RGB (0,139,139)
бирюзовый # 008080 RGB (0,128,128)

Синий цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
голубой # B0E0E6 RGB (176,224,230)
голубой # ADD8E6 RGB (173 216 230)
светло-голубой # 87CEFA RGB (135,206,250)
голубой # 87CEEB RGB (135,206,235)
темно-синий # 00BFFF RGB (0,191,255)
светло-голубой # B0C4DE RGB (176,196,222)
dodgerblue # 1E90FF RGB (30,144,255)
васильковый # 6495ED RGB (100,149,237)
голубой # 4682B4 RGB (70,130,180)
королевский синий # 4169E1 RGB (65,105,225)
синий # 0000FF RGB (0,0,255)
средний синий # 0000CD RGB (0,0,205)
темно-синий # 00008B RGB (0,0,139)
темно-синий # 000080 RGB (0,0,128)
полуночный синий # 1 RGB (25,25,112)
средний голубой # 7B68EE RGB (123,104,238)
голубой # 6A5ACD RGB (106,90,205)
темно-синий # 483D8B RGB (72,61,139)

Пурпурный

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
лаванда # E6E6FA RGB (230,230,250)
чертополох # D8BFD8 RGB (216,191,216)
слива # DDA0DD RGB (221,160,221)
фиолетовый # EE82EE RGB (238,130,238)
орхидея # DA70D6 RGB (218,112,214)
фуксия # FF00FF RGB (255,0,255)
пурпурный # FF00FF RGB (255,0,255)
среднеорхид # BA55D3 RGB (186,85,211)
средне-пурпурный # 9370DB RGB (147,112,219)
сине-фиолетовый # 8A2BE2 RGB (138,43,226)
темно-фиолетовый # 9400D3 RGB (148,0 211)
даркорхид # 9932CC RGB (153,50,204)
темно-пурпурный # 8B008B RGB (139,0,139)
фиолетовый # 800080 RGB (128,0,128)
индиго # 4B0082 RGB (75,0,130)

Розовые тона

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
розовый # FFC0CB RGB (255,192,203)
светло-розовый # FFB6C1 RGB (255 182 193)
Hotpink # FF69B4 RGB (255 105 180)
диппинк # FF1493 RGB (255,20,147)
палево-фиолетовый # DB7093 RGB (219,112,147)
средний фиолетовый # C71585 RGB (199,21,133)

Белый цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
белый #FFFFFF RGB (255,255,255)
снег #FFFAFA RGB (255,250,250)
медовая роса # F0FFF0 RGB (240,255,240)
мятный крем # F5FFFA RGB (245,255,250)
лазурный # F0FFFF RGB (240,255,255)
aliceblue # F0F8FF RGB (240 248 255)
белый привидение # F8F8FF RGB (248 248 255)
белый дым # F5F5F5 RGB (245 245 245)
морская ракушка # FFF5EE RGB (255 245 238)
бежевый # F5F5DC RGB (245 245 220)
старое # FDF5E6 RGB (253,245,230)
цветочный белый # FFFAF0 RGB (255,250,240)
слоновая кость # FFFFF0 RGB (255,255,240)
антиквелый # FAEBD7 RGB (250 235 215)
белье # FAF0E6 RGB (250,240,230)
бледно-лиловый # FFF0F5 RGB (255 240 245)
туманная роза # FFE4E1 RGB (255,228,225)

Серые цвета

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
Gainsboro #DCDCDC RGB (220,220,220)
светло-серый # D3D3D3 RGB (211,211,211)
серебро # C0C0C0 RGB (192,192,192)
темно-серый # A9A9A9 RGB (169 169 169)
серый # 808080 RGB (128,128,128)
димгрей # 696969 RGB (105,105,105)
серый свет # 778899 RGB (119,136,153)
серый # 708090 RGB (112,128,144)
темно-серый # 2F4F4F RGB (47,79,79)
черный # 000000 RGB (0,0,0)

Коричневый цвет

Цвет HTML / CSS
Название цвета
Шестнадцатеричный код
#RRGGBB
Десятичный код
(R, G, B)
корнсилк # FFF8DC RGB (255 248 220)
бланшированный миндаль #FFEBCD RGB (255,235,205)
бисквит # FFE4C4 RGB (255 228 196)
навайовит #FFDEAD RGB (255 222 173)
пшеница # F5DEB3 RGB (245 222 179)
бурливуд # DEB887 RGB (222 184 135)
загар # D2B48C RGB (210,180,140)
розово-коричневый # BC8F8F RGB (188 143 143)
песочно-коричневый # F4A460 RGB (244,164,96)
золотарник # DAA520 RGB (218,165,32)
перу # CD853F RGB (205,133,63)
шоколад # D2691E RGB (210,105,30)
седло-коричневый # 8B4513 RGB (139,69,19)
сиена # A0522D RGB (160,82,45)
коричневый # A52A2A RGB (165,42,42)
бордовый # 800000 RGB (128,0,0)


См.

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

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