Какой атрибут тэга body позволяет задать цвет фона страницы
Перейти к содержимому

Какой атрибут тэга body позволяет задать цвет фона страницы

  • автор:

Какой атрибут тэга body позволяет задать цвет фона страницы


    Какими атрибутами, и в каком теге можно задать цвет фона и цвет текста?

Ответ. Цвет фона страницы задаётся атрибутом bgcolor , а цвет текста атрибутом text в теге BODY . Пример:

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

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

Если в открывающем теге написать:

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

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

Цвет абзаца изменён при помощи тега FONT :

Цвет абзаца изменён при помощи стилевого указания:

Последний способ предпочтительнее.

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

.mark

Тогда в коде документа специальные абзацы можно будет задавать так:

Такой способ очень привлекателен. Если выделение абзаца будет решено делать не красным, а зелёным цветом, то достаточно будет выполнить только одну правку в стилевом файле:

.mark

Ответ. С помощью атрибутов тега можно менять цвет текста (атрибут color ), размер шрифта (атрибут size ) и гарнитуру шрифта (атрибут face ).

Ответ. Указанного шрифта может не оказаться на компьютере пользователя. Самое лучшее — не задавать шрифт вовсе. Тогда браузер будет показывать документ шрифтом “по умолчанию”, заведомо установленным у пользователя.

Для изменения размеров шрифта есть специальные элементы, более подходящие для сохранения единого стиля оформления документа: BIG для укрупнения и SMALL для уменьшения.

Ответ. В компьютерной информатике распространена система кодирования цвета при помощи трёх составляющих — красной, зелёной и синей. Эта система носит название RGB (от Red — красный, Green — зелёный, Blue — синий).

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

Если каждая из составляющих цвета задаётся одним байтом, т. е. может принимать 256 разных значений, то число всех цветов в такой палитре: 256×256×256 = 16 777 216. То есть более 16 миллионов цветов.

Ответ. Цвет можно задавать при помощи фиксированных ключевых слов, таких как red , maroon , yellow или при помощи 16-го кода в формате:

  • rr — код красной составляющей (две 16-ные цифры);
  • gg — код зелёной составляющей (две 16-ные цифры);
  • bb — код синей составляющей (две 16-ные цифры).

  • #800000; — коричневый ( maroon );
  • #FF00FF; — сиреневый ( fuchsia );
  • #00FFFF; — голубой ( aqua ).

Цвет фона

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега .

Пример 1. Изменение цвета фона

    Цвет фона  

.

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

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

    Фоновый рисунок  

.

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

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

Пример 3. Использование фонового рисунка и цвета фона

    Цвет фона  

.

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties =» fixed » тега .

Пример 4. Задание фиксированного фона

При указании атрибута bgproperties , как показано в примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные материалы

  • Самоучитель HTML4
  • Самоучитель CSS
  • Как добавить картинку на веб-страницу?
  • Спецсимволы
  • Структура HTML-кода
  • Введение в HTML
  • Способы добавления стилей на страницу
  • Выравнивание текста
  • Якоря
  • Как добавить иконку сайта в адресную строку браузера?
  • Позиционирование элементов
  • Ссылки

Какой атрибут тэга body позволяет задать цвет фона страницы

На этой странице:

  • Цвет
  • Фон
    • Фоновый цвет
    • Фоновые изображения
    • Задание фоновой картинки
    • Повторения в определённом направлении
    • Позиционирование начального положения картинки
    • Позиционирование фона относительно окна
    • Интегрированное свойство для задания фона

    • Плитки плохо стыкуются
    • Текст не читается
    • О важности явного задания цветов текста и фона

    Цвет

    color
    Значения: | inherit
    По умолчанию: в зависимости от браузера
    Область применения: все элементы
    Наследование: да

    Свойство color задаёт цвет текста элемента и цвет его рамки (если цвет рамки отдельно не задан). Это свойство передаётся по наследству потомкам.

    Файл style.css

    Файл index.htm

    Фон

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

    Фоновый цвет

    background-color
    Значения: | transparent | inherit
    По умолчанию: transparent
    Область применения: все элементы
    Наследование: нет
    Файл style.css
    .warning
    Файл index.htm
    Файл style.css
    Файл index.htm

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

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

    Для фона, показанного слева, использована картинка — фоновая плиточка:

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

    На рисунке плиточка показана с рамкой для наглядности.

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

    Для “укладки паркета” на фон элемента можно воспользоваться свойством background-image .

    Задание фоновой картинки

    background-image
    Значения: | none | inherit
    По умолчанию: none
    Область применения: все элементы
    Наследование: нет

    Значение none приводит к тому, что и можно ожидать: изображение на фоне отсутствует.

    Файл style.css

    BODY < color:white; background-color:rgb(20%,20%,20%); background-image:url(pic/fon1.jpg); >

    Фоновая плиточка fon1.jpg :

    Заметим, что в примере, наряду с фоновой картинкой, задан и цвет фона. Так поступать рекомендуется всегда.

    Представьте, что картинка, по какой либо причине, не дошла по сети до браузера, или пользователь отключил показ картинок. Вот что тогда он увидит на экране, если цвет фона не задан:

    А если цвет фона задан, совсем другое дело:

    Повторения в определённом направлении

    По умолчанию фоновая картинка укладывается паркетом из начального положения и по горизонтали, и по вертикали. Этот алгоритм можно изменить, если воспользоваться свойством background-repeat .

    background-repeat
    Значения: repeat | repeat-x | repeat-y | no-repeat | inherit
    По умолчанию: repeat
    Область применения: все элементы
    Наследование: нет

    Значение repeat заставляет браузер укладывать паркет по всем направлениям, а значение no-repeat запрещает повторение. Значение repeat-x укладывает картинку только по горизонтали, а значение repeat-у — только по вертикали.

    Рассмотрим в качестве примера, как задаётся вертикальная полоска, играющая роль страничного поля (как на странице этого учебника).

    Файл style.css

    BODY < color:black; background-color:white; background-image:url(pic/fon.png); background-repeat:repeat-y; margin-left:0; padding-left:100px; >

    Фоновая плиточка fon.png :

    Реальная высота фоновой картинки — 1 пиксел. Здесь она показана более высокой для наглядности. Файл index.htm

    Позиционирование начального положения картинки

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

    Начальное положение фоновой картинки можно изменить при помощи свойства background-position .

    Смещение на 50 пикселов вправо и на 30 пикселов вниз.

    Центр картинки совпадает с центром элемента.

    Картинка в левом нижнем углу. background-position Значения:

    Запись
    [ || ]
    означает: либо оба параметра, либо любой один

    значение это:
    | | left | center | right

    значение это:
    | | top | center | bottom По умолчанию: 0% 0% Область применения: блочные и строчные замещаемые элементы Наследование: нет Проценты: относительно соответствующей точки элемента и картинки

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

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

    Ключевые слова

    Ключевые слова обычно используется в паре, например, right top : начальное положение картинки — правый верхний угол.

    Ключевое слово center совмещает центральную точку фоновой картинки (по соответствующей оси) с центральной точкой элемента (по той же оси).

    Допускается использование одного значения (по горизонтали или по вертикали), при этом значение второго автоматически полагается равным center :

    Одно ключевое слово Эквивалентные ключевые слова
    center center center
    top center top
    bottom center bottom
    left left center
    right right center

    Проценты

    Первое процентное значение задаёт смещение от левого верхнего угла по горизонтали, второе — по вертикали.

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

    Таким образом, указание 0% 0% размещает левый верхний угол картинки в левом верхнем углу элемента (эквивалентно left top ), а указание 100% 100% размещает правый нижний угол картинки в правом нижнем углу элемента (эквивалентно right bottom ). Указание 50% 50% размещает центральную точку картинки в центральной точке элемента (эквивалентно center center ).

    Если задано одно процентное значение, то оно используется как значение по горизонтали, а значение по вертикали автоматически полагается равным 50%.

    Единицы измерения размера

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

    Если задано одно значение, то оно используется как значение по горизонтали, а значение по вертикали автоматически полагается равным 50% (или, что то же самое — center ).

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

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

    Смесь

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

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

    Пример

    В качестве примера рассмотрим оформление замечания на страницах этой книги.

    Картинка, которую вы видите в шапке замечания, построена как фоновое изображение, в HTML-коде ей не соответствует элемент IMG .

    Файл style.css

    BODY < color:black; background-color:white; >/* Оформление замечания */ .note < border-left:1px dotted gray; padding-top:90px; padding-left: 1em; background-image:url(pic/note.gif); background-repeat:no-repeat; background-position:1em top; color:#666; font-size:0.9em; >

    Высота картинки — 82 пиксела, она помещается в верхний внутренний отступ размеров в 90 пикселов. Файл index.htm

    Позиционирование фона относительно окна

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

    При помощи свойства background-attachment можно перенести начало координат в левый верхний угол области просмотра окна браузера, если задать значение fixed .

    background-attachment
    Значения: sroll | fixed | inherit
    По умолчанию: sroll
    Область применения: все элементы
    Наследование: нет

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

    Файл style.css

    BODY < color:black; background-color:white; background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:

    Фон задан для BODY со значением scroll . Фон прокручивается вместе с документом. Файл index.htm

    Файл style.css
    BODY < color:black; background-color:white; background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:

    Фон задан для BODY со значением fixed . Фон не прокручивается вместе с документом. Файл index.htm

    Браузер IE вплоть до версии IE6 неправильно обрабатывает фиксированный фон в отличных от BODY элементах — фон позиционируется не относительно окна, а относительно элемента. Проверьте это, запустив следующий пример в разных браузерах.

    Файл style.css

    BODY < color:black; background-color:white; >P.first < background-image:url(pic/spider.png); background-repeat:no-repeat; background-attachment:
    

    Фон задан для первого абзаца со значением fixed . В браузерах, которые работают по стандарту, фоновая картинка видна лишь тогда, когда совмещается с первым абзацем (при прокрутке). Файл index.htm

    Интегрированное свойство для задания фона

    Все свойства фона можно свести в одну интегрированную запись при помощи свойства background .

    Свойство background объединяет все ранее рассмотренные свойства фона.

    Порядок, в котором идут параметры, не важен, кроме значения координат (): они должны стоять рядом, и если применяются значения размера или проценты, первым должно идти значение по горизонтали. background Значения:

    Запись вида
    [ || || ]
    означает: все параметры, либо с пропусками отдельных [ || || || || ] | inherit По умолчанию: см. отдельные свойства Область применения: все элементы Наследование: нет Проценты: разрешены для

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

    background: white url(pic/fon.gif); background: white url(pic/fon.gif) left top repeat scroll;

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

    background-color: white; background: white;

    Почему почти? Не надо забывать, что интегрированное свойство background устанавливает все параметры для фона, включая и те, которые в нём опущены (их значения устанавливаются по умолчанию).

    Пусть, например, для элементов H1 и H2 установлен фон с картинкой без укладки в паркет с выравниванием по центру элемента:

    H1, H2 < background: gray url(pic/fon.gif) center no-repeat; >

    Допустим, для H2 нужно сменить цвет фона, сохраняя все другие параметры. Определение

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

    H1, H2 < background: gray url(pic/fon.gif) center no-repeat; >H2

    Пример

    Предложим в качестве примера ещё один способ оформления замечания.

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

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

    Представим объект в виде блока note в который вложены два последовательных блока: header (заголовочная часть) и content (содержательная часть). На иллюстрации между блоками показаны промежутки для наглядности, реально их не будет.

    Макету на иллюстрации слева соответствует следующий HTML:

    Картинки, которые будем использовать для заголовка замечания:

    /* Блок замечания */ .note < margin: 1em 2em; /* Внешние отступы блока-замечания */ border: 1px dotted gray; /* Рамка */ /* Фон с градиентной растяжкой цвета */ > /* Заголовок внутри блока замечания */ .note .header < height:50px; /* Высота блока-заголовка */ color:white; /* Цвет текста заголовка */ font-size:40px; /* Фиксированный размер шрифта */ font-weight:bold; /* Жирное начертание */ /* Маркер */ padding-left:60px; /* Отступ текста от маркера */ border-bottom: 1px dotted gray; /* Рамка снизу */ > /* Содержательная часть замечания */ .note .content < /* Отступы содержания */ padding:0 10px 10px; >

    В данном конкретном случае можно было обойтись только одной фоновой картинкой:

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

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

    Атрибут background элемента BODY

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

    Атрибут background позволяет задать картинку лишь для сплошного (во всех направлениях) фонового паркета, и не имеет возможностей одноимённого стилевого свойства.

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

    Дизайн фона

    Рассмотрим вопросы дизайна, связанные с использованием картинки для фона.

    Плитки плохо стыкуются

    Чтобы фоновый “паркет” смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации.

    Плохая стыковка плиточек.

    Очень плохая стыковка плиточек.

    Хорошая стыковка простых плиточек.

    Хорошая стыковка сложных плиточек.

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

    Текст не читается

    На шершавом фоне текст всегда читается хуже, чем на гладком:

    Когда фоновая картинка кажется необходимой, текст надо выводить в гладкие области:

    О важности явного задания цветов текста и фона

    Цвета текста и фона могут быть заданы на странице CSS-свойствами color и background . Кроме того, они могут задаваться атрибутами text и bgcolor в теге < BODY >(CSS-свойства главнее).

    Если цвета не описаны, браузер будет использовать их значения по умолчанию (разные в разных браузерах).

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

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

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

    “Удар” по глазам пользователя:

    Плавный переход от гладкого фона к фактурному:

    А если фоновая картинка, цвет фона и цвет текста задаются при помощи стилевых свойств?

    BODY < background:#fbeee7 repeat-y url(pic/fon.gif); color:black; >

    Может быть в этом случае не нужно записывать соответствующие атрибуты для тега BODY ?

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

    1. Использование встроенного атрибута style . Добавление цвета на веб-страницу является частью встроенного стиля CSS. Чтобы установить цвет текста или фона в HTML, вам нужно использовать атрибут style . Вы можете применить атрибут style к HTML-тегам ,

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

    2. Использование внутреннего CSS. Вариант внутреннего стиля CSS популярен для применения свойств к отдельным страницам путем помещения всех стилей в элемент , размещенный в HTML-документов.

    Дизайн не является центральной особенностью HTML, поэтому специального цветового тега HTML не существует. Однако вы можете изменить цвет любого текста следующими способами:

    Дополнительные сведения об использовании цветовых кодов HTML см. в статье Цветовые коды HTML.

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

    Цвет текста

    Вы можете использовать встроенный атрибут style или элемент , чтобы изменить цвет текста, а затем установить значение с помощью свойства color . Свойство color устанавливает значение цвета переднего плана для текста элемента и оформления текста. Свойство color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

    Цвет текста с помощью имен цветов HTML

    Имя цвета отображает конкретное имя цвета HTML. Современные браузеры поддерживают 140+ названий цветов HTML, и вы можете использовать любое из них для своих элементов. Например, вы можете раскрасить текст, используя встроенный атрибут style , как показано в следующем примере:

    1html> 2 body> 3 h2 style="color:DarkCyan;">How to set text color using HTML color names?h2> 4 h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.h3> 5 h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.h4> 6 body> 7html>

    Тот же результат раскрашивания текста может быть достигнут с помощью внутреннего CSS, как показано в следующем примере:

     1html>  2head>  3style>  4h2   5 color:DarkCyan;  6>  7h3   8 color:DarkRed;  9> 10h4  11 color:DarkBlue; 12> 13style> 14head> 15 body> 16 h2>How to set text color using HTML color names?h2> 17 h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.h3> 18 h4>There are over 140 named colors to choose from that you can use.h4> 19 body> 20html>

    Отрендеренный HTML-код выглядит следующим образом:

    Text “Изображение отображает приведенный выше HTML-код”

    Вы можете узнать больше о применении встроенного, внутреннего и внешнего CSS и их редактировании с помощью Aspose.HTML API из Edit CSS. Примеры C# изменения цвета текста с помощью Aspose.HTML API вы можете найти в статье Как изменить цвет текста в HTML.

    Цвет текста с использованием цветовых кодов RGB, RGBA или HEX.

    Для раскрашивания текста HTML вы можете использовать RGB или HEX, которые являются наиболее часто используемыми цветовыми кодами. Значение RGB определяет цвет HTML путем смешивания красных, зеленых и синих значений. Значение цвета HEX работает почти так же, как RGB, но выглядит иначе. Если вы хотите узнать больше о кодах RGB, RGBA и HEX, посетите статью Цветовые коды HTML.

    Использование цветовых кодов RGB или HEX является наиболее распространенным способом добавления цвета на веб-страницы. Необходимо добавить атрибут style к текстовому элементу, который вы хотите раскрасить. В приведенном ниже примере мы используем элементы и , чтобы применить встроенный атрибут style и свойство color с кодами RGB, RGBA и HEX:

    1html> 2 body> 3 h2 style="color:rgb(50,150,200);">How to use Text Color?h2> 4 h3 style="color:rgba(220,30,100,1);"> 1. To colorize HTML text, add a style attribute to the text element you want to color.h3> 5 h3 style="color:#1A8D7E"> 2. Apply the color property to specify the color using RGB, RGBA or HEX code.h3> 6 body> 7html>

    Визуализированный HTML-код выглядит следующим образом:

    Текст “Изображение отображает HTML-код для установки цвета текста с использованием цветовых кодов HEX или RGB”

    Цвет текста с использованием цветовых кодов HSL или HSLA

    HSL (Hue, Saturation, Lightness) — это представление цветовой модели RGB в цилиндрических координатах. Оттенок (Hue) определяет основной цвет и измеряет его в градусах от 0 до 360 на цветовом круге RGB. Насыщенность (Saturation) — это интенсивность или чистота цвета, которая определяется в процентах от 0 (черный и белый) до 100 (яркий цвет). Легкость (Lightness) – это количество яркости или света в цвете. Он определяется в процентах от 0 (черный) до 100 (белый).

    Цветовые значения HSLA являются расширением цветовых значений HSL с альфа-каналом, определяющим непрозрачность цвета. Значение цвета HSLA указывается с оттенком, насыщенностью, яркостью и альфа-каналом, где параметр альфа определяет непрозрачность. Альфа-параметр представляет собой число от 0,0, что означает «полностью прозрачный», до 1,0, что означает «полностью непрозрачный».

    Используя тот же атрибут style , что и раньше, замените код RGB/RGBA/HEX или имя цвета значением HSL или HSLA в свойстве color :

    1html> 2 body> 3 h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codesh2> 4 p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.p> 5 p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.p> 6 body> 7html>

    Отрендеренный HTML-код выглядит следующим образом:

    Текст “Изображение отображает HTML-код для установки цвета текста с использованием цветовых кодов HSL и HSLA”

    Фоновый цвет - Background Color

    Цвет фона для определенного элемента HTML

    Вы можете использовать атрибут style , чтобы указать цвет фона для HTML-элемента, а затем установить значение, используя свойство background-color . Свойство background-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

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

    . Это также может быть тег … , или . В этом примере мы добавляем цвет фона к элементам :

     1html>  2 body>  3 p>The color name is "YellowGreen":p>  4 h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)h2>  5 h2 style="background-color:#9ACD32;">#9ACD32h1>  6 h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)h2>  7  8 p>RGBA values of name "YellowGreen" color, with different transparent:p>  9 h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)h2> 10 h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)h2> 11 h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)h2> 12 13 p>HSLA values of name "YellowGreen" color, with different transparent:p> 14 h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)h2> 15 h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)h2> 16 h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)h2> 17 body> 18html>

    Отрендеренный HTML-код выглядит следующим образом:

    Текст “Изображение отображает HTML-код для установки цвета фона с использованием цветовых кодов HEX, RGB, RGBA, HSL и HSLA”

    Цвет фона для всей веб-страницы

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

     1html>  2 body style="background-color:#e0e0e0">  3 h2 style="background-color:YellowGreen;">YellowGreenh2>  4 h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)h2>  5 h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)h2>  6 h2 style="background-color:#9ACD32;">#9ACD32h2>  7 h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)h2>  8 h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)h2>  9 body> 10html>

    Изображение отображает HTML-код для установки цвета фона для текста (название цвета YellowGreen указано в разных цветовых кодах) и всей веб-страницы.

    Текст “Изображение отображает HTML-код для установки цвета фона как для текста, так и для всей веб-страницы.”

    Еще один пример достижения эффекта окрашивания фона всей веб-страницы с помощью атрибута style со свойством background-color в открывающем теге секции :

    1html> 2 body style="background-color:#ffe0e0;"> 3 h2>How to set Background Color for the whole web page?h2> 4 p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.p> 5 body> 6html>

    Text “Изображение отображает HTML-код для установки цвета фона для всей веб-страницы.”

    Цвет границы - Border Color

    Вы можете использовать атрибут style со свойствами border-style и border-color , чтобы указать цвет границы для текстовых элементов. Свойство CSS border-color определяет цвет четырех границ элемента. Свойство border-color будет работать, только если сначала определено свойство border-style , которое используется для установки границ. Это свойство не будет работать в одиночку. Если это свойство не установлено, оно наследует цвет элемента. Свойство border-color принимает имена цветов, значения RGB, RGBA, HEX, HSL или HSLA.

    1html> 2 body> 3 p> The border-color property only works when the border-style property is defined first, which is used to set the borders.p> 4 h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?h2> 5 p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.p> 6 h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?h2> 7 body> 8html>

    Text “Изображение отображает html-код для установки цвета рамки для текста. “

    Aspose.HTML предлагает бесплатное онлайн-приложение Color Wheel Picker, которое позволяет создавать наборы цветов в цветовом коде HEX. Вы можете использовать это бесплатное онлайн-приложение, чтобы найти цветовые гармонии, используя правила сочетания цветов, но также важно экспериментировать с цветом. Color Wheel Picker предлагает отличный способ поэкспериментировать с цветом и самостоятельно создавать захватывающие цветовые комбинации. Приложение работает для компьютеров, планшетов и мобильных устройств. Так что создавайте свою уникальную палитру для любого проекта!

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

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