Css цвет фона: background-color | htmlbook.ru

Использование цветов темы в настройках SharePoint Framework

• Статья
• 06/29/2022
• Чтение занимает 7 мин

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

Примечание

В этой статье в качестве примера используется клиентская веб-часть SharePoint Framework, но описанные способы применимы ко всем типам настроек SharePoint Framework.

Фиксированные цвета или цвета темы?

При формировании шаблонов новой клиентской веб-части SharePoint Framework используется фиксированная синяя палитра. Если добавить такую веб-часть на современный сайт с другой цветовой схемой, она будет выделяться и выглядеть неорганично.

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

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

Использование цветов темы в SharePoint Framework

Работая с фиксированными цветами, вы указываете их в свойствах CSS, как показано в примере ниже.

.button {
  background-color: #0078d7;
}

Чтобы вместо этого использовать цвет темы, замените фиксированный цвет на маркер темы:

.button {
  background-color: "[theme: themePrimary, default: #0078d7]";
}

Когда настройка SharePoint Framework загружается на страницу, пакет @microsoft/load-themed-styles, являющийся частью SharePoint Framework, будет искать маркеры темы в файлах CSS и пытаться заменить их соответствующим цветом из текущей темы. Если значение для указанного маркера недоступно, SharePoint Framework использует значение, указанное с помощью стандартного параметра, поэтому важно, чтобы оно всегда было включено.

Использование цветов темы в настройках

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

Примечание

Указанные ниже инструкции относятся к клиентской веб-части SharePoint Framework HelloWorld, созданной с помощью React. Для веб-частей, созданных с помощью других библиотек и типов настроек, может потребоваться соответствующая корректировка изменений.

Использование цветов темы

1. В редакторе кода откройте файл ./src/webparts/helloWorld/components/HelloWorld.tsx и из DIV с классом ms-Grid-row удалите класс ms-bgColor-themeDark

   .

2. В этой же папке откройте файл HelloWorld.module.scss. Измените селектор .row на следующий:

   .row {
     padding: 20px;
     background-color: "[theme: themeDark, default: #005a9e]";
   }
   

3. В селекторе .button замените свойства background-color и border-color указанными ниже:

   .button {
     /* ... */
     background-color: "[theme: themePrimary, default: #0078d7]";
     border-color: "[theme: themePrimary, default: #0078d7]";
     /* ... */
   }
   

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

Поддержка фона разделов

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

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

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

Доступные маркеры темы и их вхождения

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

Вы можете использовать следующие маркеры темы:

Примечание

Значения по умолчанию ниже соответствуют значениям по умолчанию на современном сайте группы при использовании красной палитры.

Маркер	По умолчанию	Примечания
themeDark	#7c1d21	Некоторые кнопки нажимают и цвет ссылки (например, «Вернуться к классическому SharePoint»). Значок заголовка «Подписаться» в заголовке, если используется третий цвет фона заголовка. Системные страницы: кнопка ОК, граница и наведение.
themeDarkAlt	#932227	Множество значков (например, в панели команд), некоторые границы, наведение кнопок / ссылок, фон вращающегося элемента, фокус элемента диапазона, наведение фона флажка, веб-части и списки, наведение кнопки, фокус элемента диапазона, добавление значка веб-части в третьем разделе цвет фона выбран.
themeDarker	#5b1519	Наведите курсор на цвет для некоторых ссылок. Системные страницы: Цвет посещенной ссылки.
themeLight	#e3afb2	Выбор диапазона наведения и фокусировка фона. Загрузка цвета фона счетчика в режиме просмотра содержимого сайта.
themeLighter	#f0d3d4	Цвет фона меню навигации, цвет фона при наведении курсора на панель добавления веб-частей, цвет фона изображения в некоторых веб-частях при выборе параметра цвета фона третьего раздела. Системные страницы: фон при наведении курсора на структуру навигации, фон при наведении курсора на кнопку отмены.
themeLighterAlt	#fbf4f4	Один из вариантов фона раздела. Cogwheel меню наведения фона в представлении содержимого сайта.
themePrimary	#a4262c	Некоторые фоны кнопок и флажков, ссылки, тексты, границы и значки, значки и ссылки. Также цвет фона нижнего колонтитула и один из вариантов фона раздела. Системные страницы: фон кнопки ОК, текстовые ссылки.
themeSecondary	#ae383e	Текст панели набора в просмотре содержимого сайта. Наведите курсор на цвет для некоторых ссылок. Цвет фона изображения в некоторых веб-частях при выборе цвета фона четвертого раздела. Второй цвет в значке палитры в «Изменение панели внешнего вида» (отсюда и название токена)
themeTertiary	#c86c70	Добавьте значок веб-части, если выбран четвертый цвет фона. Третий цвет в значке палитры в «Изменение панели внешнего вида» (отсюда и название токена)
neutralDark	#212121	Некоторые кнопки, ссылки и границы наведения текста, некоторые значки. Системные страницы: страницы хлебных крошек, заголовки текстов.
neutralLight	#eaeaea	Некоторые границы веб-части, указатель действий на панели команд, фон панели команд при выборе элемента списка, фон заголовка категории представления списка при выборе элемента, указатель кнопки. Системные страницы: фон вкладки ленты, граница кнопки «ОК», фон выбранного элемента навигации, отключенная граница текстового поля. Разделительная веб-часть. Цвет фона изображения в некоторых веб-частях, если выбран параметр цвета фона второго раздела.
neutralLighter	#f4f4f4	Некоторые фоны меню (например, панель команд), выбранный левый элемент навигации, некоторые фоны кнопок, одна опция для цвета фона раздела.
neutralLighterAlt	#f8f8f8	Фон при наведении курсора на левую панель навигации, фон текста информационной панели списка, цвет фона изображения в некоторых веб-частях при выборе цвета фона первого раздела, некоторые значки и текст при редактировании веб-частей. Системные страницы: фон кнопки «Отмена», фон отключенного текстового поля.
neutralPrimary	#333333	Текст заголовка сайта, текст в меню навигации, панель команд, кнопки и веб-части, фон значков, связанных с веб-частью, когда страница находится в режиме редактирования, текст и значки панели добавления веб-частей, текст панели настроек веб-части. Системные страницы: цвет стрелки выпадающего меню, некоторые тексты.
neutralPrimaryAlt	#3c3c3c	Фон панели набора в представлении содержимого сайта.
neutralSecondary	#666666	Текст некоторых меню, текст пустой библиотеки, фон при наведении курсора на некоторые значки, некоторые тексты в веб-частях, стрелки на панели команд, селектор диапазона. Системные страницы: цвет ссылки, некоторые значки и границы.
neutralTertiary	#a6a6a6	Текст некоторых кнопок, заголовки некоторых веб-частей, тексты настроек некоторых веб-частей, некоторые значки веб-частей, наведение курсора на границу в некоторых веб-частях, пунктирная граница раздела в режиме редактирования, граница элемента управления панелью настроек веб-части. Системные страницы: текстовое поле, раскрывающийся список и цвет рамки кнопки.
neutralTertiaryAlt	#c8c8c8	Некоторые тексты, например, на панели свойств веб-части, некоторые значки в веб-частях, фон селектора диапазона, некоторые кнопки на фоне щелчка мышью, фон управления переключением да / нет, изменение границы настройки цвета фона раздела.
neutralQuaternary	#d0d0d0	Фон панели команд при наведении фона, когда выбран элемент списка. Системные страницы: Границы
black	#000000	Выпадающий текст панели настроек веб-части, элементы управления каруселью, текстовая вкладка на вкладке «Содержимое сайта», тексты панели «Изменить внешний вид».
white	#ffffff	Фон основного текста, фон условий поиска, текст некоторых кнопок, текст навигации центрального сайта, если выбран фон заголовка themePrimary, один из доступных цветов фона раздела. Системные страницы: фон основного текста
neutralQuaternaryAlt	#dadada	Значок «Информация» и фон выбранного эллипса в списках, фоны некоторых элементов веб-части в режиме редактирования, фон выпадающего элемента панели свойств веб-части, фон выбранного элемента списка.
accent*	#ca5010	Четвертый цвет в палитре на панели «Изменить внешний вид».
whiteTranslucent40*	"rgba(255,255,255,.4)"	Закрывает остальную часть страницы, когда модальный диалог открыт.
blackTranslucent40*	"rgba(0,0,0,.4)"	Охватывает оставшуюся часть страницы в определенных состояниях модальных диалоговых окон, например при развертывании диалогового окна поиска веб-частей
backgroundOverlay*	(пусто)	Основной фон содержимого сайта, некоторые границы, т.е. между центром и навигацией по сайту
primaryBackground*	#ffffff	Некоторые фоны при редактировании настроек веб-части, некоторые фоны текстового поля

*Не входит в генератор тем.

Вхождение маркеров темы в пользовательском интерфейсе SharePoint зависит от выбранных цветов фона (т. е. маркер темы white используется для ссылок навигации заголовка, если выбран темный фон заголовка, в противном случае используется neutralSecondary). Для получения дополнительной информации см. раздел Дизайн фона» с использованием семантических слотов.

Примечание

В SharePoint Framework зарегистрировано больше токенов, хотя только подмножество, упомянутое выше, может быть назначено в пользовательских темах на современных сайтах SharePoint (остальные генерируются автоматически механизмом тем). Полный список доступных маркеров см. в значении свойства window.__themeState__.theme (используйте консоль в средствах разработчика веб-браузера).

Настройка цвета темы

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

См. также

• Темы и цвета SharePoint
• Проектирование фоновых разделов с использованием семантических слотов
• Фоны раздела SharePoint
• Использование цветов темы в веб-частях SPFX, Стефан Бауэр (разработка для Office, MVP)
• Как создать разноцветную тему для современного сайта SharePoint Online, Лаура Коккаринен (SharePoint PnP Core MVP)

Использование фона для оформления текста — Оформление текста — HTML Academy

Загрузка…
Через несколько секунд всё будет готово

• index. html
• style.css

HTML

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»utf-8″> <title>Дневник начинающего верстальщика</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <header> <p>Блог</p> <nav> <a href=»index.html»>На главную</a> </nav> </header> <main> <article> <h2>День второй. Хочу быть верстальщиком</h2> <p>Сегодня весь вечер просидел в интернете. Читал про преимущества работы верстальщиком. Часто отвлекался на видео с котиками, конечно, но кое-что я запомнил:</p> <ul> <li>ты делаешь полезное дело</li> <li>можешь работать удалённо</li> <li>интересные люди</li> <li>хорошая зарплата</li> </ul> <p>Желания учиться резко прибавилось. </p> </article> <aside> Тут могла быть ваша реклама </aside> </main> <footer> Подвал сайта </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 16px; line-height: 26px; font-family: «Arial», sans-serif; color: #222222; background: #ffffff url(«img/bg-page.png») no-repeat top center; } h2 { font-size: 24px; line-height: normal; } h3 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } .page-title { font-weight: bold; font-size: 36px; line-height: 42px; font-family: «Verdana», sans-serif; text-align: center; } .avatar-container { text-align: center; } .avatar { border-radius: 50%; } .blog-navigation { margin-bottom: 30px; padding: 20px; color: #ffffff; background-color: #4470c4; border: 5px solid #2d508f; } .blog-navigation h3 { margin-top: 0; } .blog-navigation ul { padding-left: 0; list-style: none; } . blog-navigation li { margin-bottom: 5px; } .blog-navigation a { color: #ffffff; } .skills dd { margin: 0; margin-bottom: 10px; background-color: #e8e8e8; } .skills-level { font-size: 12px; text-align: center; color: #ffffff; background-color: #4470c4; } .skills-level-ok { background-color: #47bb52; } footer { margin-top: 30px; }

Что в задании вам не понравилось?

Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)

Другое (сейчас напишу)

Спасибо! Мы скоро всё исправим)

Код изменился, нажмите «Обновить» или включите автозапуск.

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

ЗадачиВыполнено

1. Блоку <aside> добавьте класс partnership,
2. затем в правиле для .partnership задайте фоновый цвет background-color со значением #4a87fa,
3. фоновое изображение background-image с адресом url("img/bg-partnership. svg")
4. и цвет текста color со значением #ffffff.

Как сделать фон HTML/CSS/JS с изменяющимся цветом (как у Kahoot.it)

спросил 5 лет, 6 месяцев назад

Изменено 6 месяцев назад

Просмотрено 39 тысяч раз

Как мне сделать фон с изменяющимся/исчезающим цветом с помощью html и css и, возможно, javascript, аналогично тому, что есть на https://kahoot.it?

• html
• css
• цвета
• фон
• цвет фона

1

Вы должны научиться проверять и получать

 @keyframes bgcolor {
    0% {
        цвет фона: #45a3e5
    }

    30% {
        цвет фона: #66bf39
    }

    60% {
        цвет фона: #eb670f
    }

    90% {
        цвет фона: #f35
    }

    100% {
        цвет фона: #864cbf
    }
}

тело {
    -вебкит-анимация: bgcolor 20s бесконечный;
    анимация: bgcolor 10s бесконечная;
    -webkit-animation-direction: альтернативный;
    направление анимации: альтернативное;
} 

2

 корпус {
  анимация: 10000 мс плавное изменение цвета;
}

@keyframes изменение цвета {
  0% {
    цвет фона: бирюзовый;
  }
  20% {
    цвет фона: золото;
  }
  40% {
    цвет фона: индийский красный;
  }
  60% {
    цвет фона: фиолетовый;
  }
  80% {
    цвет фона: зеленый;
  }
  100% {
    цвет фона: бирюзовый;
  }
} 

0

Вы действительно ничего не показали нам с точки зрения ваших попыток.