Как изменить стиль текста в css

Как использовать CSS для изменения шрифта на веб-страницах

Установите шрифт для определенных слов, абзацев или целых страниц

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

Как изменить шрифт с помощью CSS

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

Найдите текст, где вы хотите изменить шрифт. Мы будем использовать это в качестве примера:

 Этот текст в Arial 

 Этот текст в Arial 

 Этот текст в Arial 

 Этот текст написан на Arial 

Советы по использованию CSS для изменения шрифта

1. Наилучший подход – всегда иметь по крайней мере два шрифта в вашем стеке шрифтов (список шрифтов), так что если браузер не имеет первого шрифта, он может использовать второй шрифт. Разделите несколько вариантов шрифта запятой, например так:

 Семейство шрифтов: Arial, Женева, Helvetica, без засечек; 

  
Этот текст в Arial
  

RTL Styling 101 — подробное руководство по RTL-стилизации в CSS

Более 292 миллионов людей во всём мире говорят на арабском, как на родном языке. К ним отношусь и я, поэтому иногда разрабатываю сайты, которые должны поддерживать оба направления написания текста: слева направо (LTR – Left To Right) и справа налево (Right To Left).

Введение в RTL-стилизацию

В CSS по умолчанию используется направление LTR. Если вы проверите стили браузера для элемента html, увидите, что для свойства dir (или «direction») значение ltr является значением по умолчанию. Ниже приведён базовый пример для демонстрации различия между LTR и RTL разметкой.

Обратите внимание на блок RTL – в отличие от LTR, текст в нём читается справа налево. В этом простом примере браузер отобразил его правильно. Для смены направления языка документа, необходимо к корневому элементу добавить атрибут dir.

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

Стоит также упомянуть, что атрибуту dir можно задать значение «auto», которое автоматически будет меняет направление для элемента на основании анализа его содержимого. Согласно HTML-спецификации:

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

В дополнение к установке для элемента HTML атрибута dir=rtl, мы можем также добавить direction: rtl как CSS-стиль.

.element

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

Пример изменения направления разметки

Давайте рассмотрим более детальный пример, чтобы лучше понять, как менять направление разметки с LTR на RTL.

 
  
Blueberry Cheesecake
 
.
 
View Recipe
 
 
 

Изначально я использовал старый добрый float, чтобы выровнять изображение по левому краю в LTR разметке и, конечно же, применил clearfix.

.media:after < content: ""; display: block; clear: both; >.media img

Затем мы добавляем dir=«rtl» для элемента, содержащего арабский текст. Получается следующий результат:

Все элементы выровнялись по правую сторону, кроме изображения. Это произошло из-за того, что для изображения задано свойство float: left и margin-right: 16px. Чтобы исправить это, нужно переопределить следующие стили

.media[dir="rtl"] img

Английский и арабский контент в LTR макете

Что произойдёт, если некоторый текст будет иметь смесь английских и арабских слов, а разметка – направление LTR? Результат получится странным

Браузер будет показывать заголовок неправильно. Говорящих на арабском языке это будет сбивать с толку. Слова данного заголовка должны находиться в порядке, указанном на изображении ниже. Только начиная справа.

Чтобы избежать этой проблемы, устанавливайте соответствующее направление языка всякий раз, когда это возможно. Если элементу установить атрибут dir=«rtl», он отобразится так, как ожидается.

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

Когда элементу задан атрибут dir=«rtl», заголовок становится корректным. То есть, предложение выглядит грамматически правильным, а слова расположены в правильной последовательности.

Flexbox

Flexbox в основе своей работы учитывает режим написания, установленный в документе. Этот фактор используется для определения того, каким образом блоки будут выстраиваться на странице по умолчанию. Например, на англоязычном сайте они будут идти слева направо, а на китайском – сверху вниз. Для английского и арабского языков для свойства writing-mode значением по умолчанию служит horizontal-tb.

Согласно Mozilla Developer Network (MDN), значение horizontal-tb значит следующее:

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

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

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

 
1
 
2
 
3
 
 

.element < display: flex; flex-direction: row; /* Default value, added for clarity */ >

CSS Grid

Как и flexbox, css grid зависит от режима написания документа, что даёт нам те же преимущества, что и при использовании flexbox.

В приведённом ниже примере для направления LTR блок sidebar должен быть слева, а main справа. Для направления RTL – наоборот. Когда мы используем CSS Grid, это перестраивание будет производиться автоматически в соответствии с установленным на данной странице направлением.

 
Side
 
Main
 
 

.element

Основные ошибки при переключении на RTL направление

Разработчики, не владеющие арабским, допускают распространённые ошибки, которые сразу бросаются в глаза носителям языка.

1. Межбуквенный интервал (letter-spacing)

В английском языке распространено использование свойства letter-spacing для регулирования межбуквенного интервала внутри слова. Рассмотрим следующий пример с содержимым на английском. Выглядит вполне нормально.

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

Обратите внимание, что в тексте, к которому применено свойство letter-spacing буквы каждого слова отделены друг от друга. Это неправильно. Арабские буквы должны выглядеть связанными, а сохранение такого же межбуквенного интервала, как и в английском, препятствует этому. Убедитесь, что при работе с многоязычным сайтом не забыли в нужном месте установить свойство letter-spacing: 0.

2. Прозрачность текста

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

Появляются места, в которых цвет начертания символов меняется из-за их наложения. В этом примере свойство letter-spacing не было установлено, поэтому на проблему оно не влияет. Решение проблемы – задавать цвета без полупрозрачности (которая обычно выставляется через RGBa или opacity).

3. Различия размера слов в разных языках

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

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

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

Кнопка «Done» переведена на арабский как “تم”, из-за чего становится достаточно маленькой и вообще выглядит странно. Специально для таких случаев, было бы лучше задать для кнопки свойство min-width. Я добавил его через панель разработчика, чтобы показать, как это должно выглядеть:

А вот очень похожий пример из Twitter:

Обратите внимание, что указанные выше проблемы у LinkedIn и Twitter были обнаружены на момент написания статьи (13 декабря 2019 года).

4. Усечение текста

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

Усечение для английского текста неправильное. Это должно происходить в конце элемента, а не в его начале. Чтобы решить эту проблему, необходимо задать для этого элемента атрибут dir=«auto», и тогда браузер автоматически проанализирует содержимое и примет решение, какое значение dir применять.

أهلاً وسهلاً بكم في المقال الذي يتحدث عن تصميم صفحات الويب للغة العربية
 
Welcome to the article that explains how to design for RTL pages.
 

5. Выбор плохого RTL шрифта

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

• не очень хороший шрифт
• жирность ухудшает удобочитаемость
• точки слова очень маленькие и слишком близко расположены к буквам

Я привёл несколько примеров, которые выглядят гораздо понятнее:

6. Смешивание хинди и арабских цифр

• Хинди: ١ ٢ ٣ ٤ ٥ ٦ ٧ ٨ ٩
• Арабский: 0 1 2 3 4 5 6 7 8 9

Согласно Википедии:
Причина, по которой в Европе и Америке цифры называют «арабскими» в том, что они были введены в Европе в 10 веке арабоговорящими выходцами из Северной Африки.

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

Моменты, которые могут не работать при RTL

1. Высота строки (line-height)

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

Важно учитывать это и задать правильное значение для line-height для арабского текста.

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

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

2. Подчёркнутые ссылки

С арабскими словами стандартное подчеркивание ссылок из CSS выглядит плохо. Это связано с особенностями написания слов и букв в арабском языке и продемонстрировано на следующем изображении:

Я отметил проблемные области красным кругом. Подчёркивание перекрывает точки букв. Вот крупный план:

Точки, отмеченные красным кругом, перекрываются линией подчеркивания, что усложняет чтение. Решением является настройка кастомного подчёркивания с помощью CSS.

2.1. Оформление текста (text-decoration)

Существует возможность изменить стиль и цвет подчеркивания с помощью новых свойств text-decoration-style и text-decoration-color. Однако, нет гарантии, что это будет корректно работать со всеми семействами и размерами шрифтов. На момент написания статьи, Firefox является браузером с наилучшей поддержкой этих свойств.

.link-2

2.2 Тень (box-shadow)

Браузерная поддержка свойства box-shadow гораздо лучше, чем у text-decoration. Можно проверить наличие поддержки одного из новых свойств text-decoration, и если браузер не поддерживает его, применить фолбэк с помощью свойства box-shadow.

 .link-3 < color: #000; text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2); >@supports (text-decoration-color: red) < .link-3 < box-shadow: none; >> 

3. Перенос строки

Если вы используете свойство word-break, нужно проверять корректность его работы. Посмотрите на следующий пример:

Обведённые области – это разорванные переносом на новую строку арабские слова из-за применения word-break. А в арабском языке перенос слов не используется, потому что буквы каждого слова должны быть соединены друг с другом.

4. Сокращения

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

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

Двунаправленные значки

Симметричные значки не нуждаются в переворачивании при переходе между LTR и RTL макетами. Вот несколько примеров:

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

Переворачивание элементов

Работая над некоторыми компонентами, мне нужен способ быстро перевернуть их. В Sketch я скопирую компонент и переверну его соответствующей командой. Такой же функционал доступен в Adobe XD и Figma

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

Особенности дизайна для RTL

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

Иконки кнопок

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

Поля ввода

Некоторые поля ввода форм должны оставаться выровненными по левую сторону даже в RTL режиме. Например, поля ввода email или номера телефона.

Хлебные крошки

Стрелочки между разделами в хлебных крошках также должны быть повёрнуты.

Заголовок страницы

Компонент заголовка страницы содержит начальную и конечную секции. Обе они должны быть повёрнуты в RTL

Таблицы

Таблицы также должны быть повёрнуты

Закладки

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

Карточка

Для горизонтальной карточки изображение и текст нужно менять местами в RTL

Всплывающие уведомления

Как вы и могли ожидать, иконки «закрыть» и «предупреждение» следует поменять местами

Логические свойства CSS

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

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

.page-header

[dir="rtl"] .nav-item

Что если бы был способ добавить только одно значение для свойства text-align, которое изменяло бы сторону выравнивания, учитывая направление страницы? На выручку приходят логические свойства CSS!

.page-header

При его использовании, сторона, задаваемая свойством text-align, будет основываться на направлении страницы. Демо

Чтобы было легче увидеть разницу между start и end, я подготовил схему ниже. Значение start равнозначно значению left в LRT и значению right в RTL. То же с end, только наоборот.

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

Логический Padding

Предположим, у нас есть поле ввода с иконкой поиска справа. Мы должны задать padding с обеих сторон. Padding справа будет немного больше, чтобы избежать наложения иконки на текст.

.input--search

Логический Margin

Margin справа от иконки должен быть логическим, поэтому мы используем для этого margin-inline-end.

.page-header__avatar

Логические рамки (border)

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

.nav__item < border-inline-start: 3px solid transparent; >.nav__item.is-active

Логическое скругление углов (border-radius)

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

.nav__item < border-start-end-radius: 30px; border-end-end-radius: 30px; background-color: transparent; >.nav__item.is-active

Шпаргалка логических свойств

Если возникают сомнения насчёт выбора логического аналога свойства, определяющего сторону, можете подглядывать в шпаргалку ниже. Обратите внимание, что в ней приведены только те логические свойства, которые могут быть полезны при работе с LTR и RTL режимами. Я составил эту шпаргалку на основании замечательной статьи Адриана Роселли.

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

Браузерная поддержка

Поддержка браузерами довольно хорошая для свойств padding, margin и text-align. Однако, еще недостаточная для свойств border-radius. Ниже приведена таблица поддержки с сайта Can I Use:

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

.input--search

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

Соглашения об именовании в CSS

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

 
See more
 
 
Learn more
 
 

В обоих блоках ссылки одинаковые, но их названия разные. Во втором блоке класс see-link не имеет смысла. Хорошим именем может быть c-link. Приставка c– подставляется для компонентов, этот способ я перенял из ITCSS фреймворка.

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

Вместо того, чтобы давать элементам имена типа .c-page-header__left и .c-page-header__right, я называю их .c-page-header__start и .c-page-header__end. Это больше ориентировано на будущее и не предполагает, что сайт создаётся только в LTR или RTL режиме.

Инструменты автоматизации

Существуют отличные инструменты, облегчающие работу с LTR и RTL разметкой.

1. Bi-App-Sass

Bi-App-Sass от Анаса Накава позволяют писать одну версию стилей, которая компилируются в две разные таблицы стилей: одна для LRT, другая для RTL разметки.

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

.elem

Итоговый код CSS может быть следующим.

.elem

.elem

Заметьте, однако, что последний коммит в репозиторий на GitHub был четыре года назад (Ноябрь 2015).

2. RTLCSS

RTLCSS от Мохамеда Йонеса это фреймворк для конвертирования LTR таблиц стилей в RTL.

Отличие этого инструмента в том, что он применяется к уже собранной версии CSS-файла. Например, если у вас в проекте 50+ Sass-компонентов, RTLCSS пригодится для парсинга скомпилированного CSS-файла и создания из него RTL версии.

Практические примеры

Шапка сайта

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

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

.header__main, .header__sub

Поскольку работа CSS Flexbox учитывает направление, заданное на странице, как объяснялось раньше в этом руководстве, он автоматически развернётся при RTL-разметке.

Следующий момент – это разделительная линия между логотипом и навигацией. Сначала я думал использовать border-right. Это работает, но не идеально. Лучше использовать псевдоэлемент, поскольку он развернётся вслед за направлением страницы.

.c-brand:after

Вот текущий результат:

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

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

.topics-heading < margin-inline-end: 1.5rem; >.topics-list < margin-inline-end: 1rem; >.c-topic < padding-inline-start: 0.5rem; >.c-topic:not(:last-child) < margin-inline-end: 10px; >.c-topic__counter

Как вы можете видеть, я использую логические свойства CSS вместо значений left и right.

• При наведении цвет стрелки должен меняться
• При наведении, к стрелке должна применяться анимация

.c-link svg < margin-inline-start: 4px; transition: 0.15s ease-in; >.c-link:hover svg

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

.c-link:hover svg < transform: translateX(6px); >/* I’m using dir=rtl in the header for the purpose of clarity. It should be added to the root element. */ .c-header[dir="rtl"] .c-link svg < transform: scaleX(-1); >.c-header[dir="rtl"] .c-link:hover svg

Обратите внимание, что для RTL направления страницы я добавил scaleX(-1), чтобы развернуть иконку по горизонтали. Также можно использовать rotate(180deg), но вариант с масштабированием мне кажется более простым.

• Иконка поиска должна появляться в конце поля
• Расположение иконки поиска должно быть динамическим

.c-input--search < background-image: url("data:image/svg+xml. "); background-position: right 6px center; >.c-header[dir="rtl"] .c-input--search < /* We replace the original icon with a flipped one. */ background-image: url("data:image/svg+xml. "); background-position: right 6px center; >

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

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

Следующим идёт мобильное меню. Для его обозначения я буду использовать гамбургер-иконку. Расположение иконки будет меняться в зависимости от направления (LTR или RTL). То же касается и направления анимации смещения.

Ознакомиться с демо можно на CodePen

Благодарность

Особая благодарность моей жене Kholoud за её постоянную поддержку и множественное вычитывание руководства. Также выражаю благодарность Adebiyi Adedotun Lukman и Šime Vidas за их поразительный отзыв.

Настройка и создание стилей

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

Стили, описанные в этой статье, находятся в коллекции «Стили» на вкладке Главная. Чтобы применить стиль, просто выделите текст, который вы хотите отформатировать, и выберите нужный стиль в коллекции «Стили». Дополнительные сведения см. в статье Применение стиля к тексту в Word.

Изменение существующего стиля

Изменить стиль из коллекции «Стили» можно двумя способами:

• Обновление стиля в соответствии с форматированием в документе
• Изменение стиля вручную в диалоговом окне »Изменение стиля»

Обновление стиля в соответствии с форматированием в документе

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

1. Выделите в документе текст, к которому применен стиль, например «Заголовок 1». При выборе текста, к которому применен стиль, стиль выделяется в коллекции «Стили».
2. Отформатируйте выбранный текст так, как хотите. Например, вы можете изменить размер шрифта для стиля «Заголовок 1» с 16 до 14 пунктов.
3. На вкладке Главная в группе Стили щелкните правой кнопкой мыши стиль, который вы хотите изменить, и выберите команду Обновить [название стиля] в соответствии с выделенным фрагментом.

Примечание: Весь текст, к которому применен этот стиль, автоматически изменится.

Изменение стиля вручную в диалоговом окне »Изменение стиля»

Вы можете изменить стиль напрямую в коллекции «Стили», не настраивая текст в документе.

1. На вкладке Главная щелкните правой кнопкой мыши стиль в коллекции «Стили» и выберите команду Изменить.
2. В разделе Форматирование измените форматирование, например начертание, размер или цвет шрифта, выравнивание, междустрочный интервал и отступы.
3. Выберите, должен ли стиль применяться к текущему документу или же ко всем новым документам.

Создание стиля на основе форматирования документа

Вы можете выбрать отформатированный текст в документе, чтобы создать новый стиль и добавить его в коллекцию «Стили».

1. Щелкните правой кнопкой мыши текст, на основе которого вы хотите создать стиль.
2. На мини-панели инструментов нажмите кнопку Стили и щелкните Создать стиль.
3. В диалоговом окне Создание стиля введите имя стиля и нажмите кнопку ОК. Новый стиль появится в коллекции «Стили».

Примечание: Если вы хотите, чтобы новый стиль появился во всех новых Word документах, щелкните его правой кнопкой мыши в коллекции «Стили», выберите изменить ,а затем в нижней части диалогового окна выберите новые документы, основанные на этом шаблоне.

1. Щелкните правой кнопкой мыши текст, выберите Стили и щелкните Сохранить выделенный фрагмент как новый экспресс-стиль.
2. В диалоговом окне Создание стиля введите имя стиля и нажмите кнопку ОК. Новый стиль появится в коллекции «Стили».

Примечание: Если вы хотите, чтобы новый стиль появился во всех новых Word документах, щелкните его правой кнопкой мыши в коллекции «Стили», выберите изменить ,а затем в нижней части диалогового окна выберите новые документы, основанные на этом шаблоне.

Цвета и стили для Visual Studio

Область применения:Visual Studio Visual Studio для Mac Visual Studio Code

Использование цвета в Visual Studio

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

• Обмен данными о значении или принадлежности (например, модификаторы платформы или языка)
• Обратите внимание (например, указывающее изменение состояния)
• Повышение удобочитаемости и предоставление ориентиров для навигации по пользовательскому интерфейсу
• Увеличение желательности

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

• Общие сведения о различных службах и системах, используемых для определения цветов в Visual Studio.
• Выберите правильный параметр для заданного элемента.
• Правильно используйте выбранный вариант.

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

Методы назначения цвета элементам интерфейса Visual Studio

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

Темы Visual Studio

Visual Studio имеет три различных цветовых темы: светлые, темные и синий. Он также обнаруживает режим высокой контрастности, который является системной цветовой темой, предназначенной для специальных возможностей.

Пользователям предлагается выбрать тему во время первого использования Visual Studio и переключить темы позже, перейдя в раздел «Параметры > среды > инструментов>» и выбрав новую тему в раскрывающемся меню «Цветовая тема».

Пользователи также могут использовать панель управления для переключения всей системы в одну из нескольких тем высокой контрастности. Если пользователь выбирает тему высокой контрастности, то селектор цветов Visual Studio больше не влияет на цвета в Visual Studio, хотя все изменения темы сохраняются при выходе пользователя из режима высокой контрастности. Дополнительные сведения о режиме высокой контрастности см. в разделе «Выбор цветов высокой контрастности».

Служба VSColor

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

Внедрение

Исходный код Visual Studio содержит несколько файлов определения пакета, содержащих списки имен токенов и соответствующие значения цвета для каждой темы. Служба цветов считывает VSColors, определенную в этих файлах определения пакета. Эти цвета ссылаются в разметке XAML или коде, а затем загружаются с помощью IVsUIShell5.GetThemedColor метода или сопоставления DynamicResource.

Системные цвета

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

Общие цвета в службе VSColor

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

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

Настраиваемые пользователем цвета

Иногда необходимо разрешить пользователю настраивать пользовательский интерфейс, например при создании редактора кода или области конструктора. Настраиваемые компоненты пользовательского интерфейса находятся в разделе «Шрифты и цвета» диалогового окна «Параметры инструментов>», где пользователи могут изменить цвет переднего плана, цвет фона или оба.

Архитектура службы цвета среды разработки

Доступ к службе

Существует несколько различных способов доступа к службе VSColor в зависимости от того, какой цвет маркеров вы используете и какой код у вас есть.

Стандартные цвета среды

Из машинного кода

Оболочка предоставляет службу, которая предоставляет доступ к COLORREF цветам. Служба или интерфейс:

IVsUIShell2::GetVSSysColorEx(VSSYSCOLOR dwSysColIndex, DWORD *pdwRGBval) 

В файле VSShell80.idl перечисление __VSSYSCOLOREX имеет константы цвета оболочки. Чтобы использовать его, передайте в качестве значения индекса один из значений из enum __VSSYSCOLOREX документированного в MSDN или регулярного номера индекса, который принимает системный API GetSysColor Windows. Это возвращает значение RGB цвета, которое должно использоваться во втором параметре.

При сохранении пера или кисти с новым цветом необходимо AdviseBroadcastMessages (от оболочки Visual Studio) и прослушивать WM_SYSCOLORCHANGE сообщения WM_THEMECHANGED .

Чтобы получить доступ к цветовой службе в машинном коде, выполните вызов, похожий на следующее:

pUIShell2->GetVSSysColorEx(VSCOLOR_COLOR_NAME, &rgbLOCAL_COLOR); 

Возвращаемые COLORREF GetVSSysColorEx() значения содержат только компоненты R,G,B цвета темы. Если запись темы использует прозрачность, значение альфа-канала отключено карта перед возвратом. Таким образом, если цвет среды должен использоваться в месте, где важен канал прозрачности, следует использовать IVsUIShell5.GetThemedColor вместо IVsUIShell2::GetVSSysColorEx этого, как описано далее в этом разделе.

Из управляемого кода

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

private void VSColorPaint(object sender, System.Windows.Forms.PaintEventArgs e) < //getIVSUIShell2 IVsUIShell2 uiShell2 = Package.GetService(typeof(SVsUIShell)) as IVsUIShell2; Debug.Assert (uiShell2 != null, "failed to get IVsUIShell2"); if (uiShell2 != null) < //get the COLORREF structure uint win32Color; uiShell2.GetVSSysColorEx((int)__VSSYSCOLOREX.VSCOLOR_SMARTTAG_HOVER_FILL, out win32Color); //translate it to a managed Color structure Color myColor = ColorTranslator.FromWin32((int)win32Color); //use it e.Graphics.FillRectangle(new SolidBrush(myColor), 0, 0, 100, 100); >> 

Если вы работаете в Visual Basic, используйте:

Dim myColor As Color = ColorTranslator.FromWin32((Integer)win32Color) 

Из пользовательского интерфейса WPF

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

Вспомогательные классы и методы для управляемого кода

Для управляемого кода библиотека управляемой платформы пакетов оболочки ( Microsoft.VisualStudio.Shell.12.0.dll ) содержит несколько вспомогательных классов, упрощающих использование тематических цветов.

Вспомогательные методы в классе в Microsoft.VisualStudio.Shell.VsColors MPF включают GetThemedGDIColor() и GetThemedWPFColor() . Эти вспомогательные методы возвращают значение цвета записи темы как System.Drawing.Color или System.Windows.Media.Color , используемого в WinForms или пользовательском интерфейсе WPF.

IVsUIShell5 shell5; Button button = new Button(); button.BackColor = GetThemedGDIColor(shell5, SolutionExplorerColors.SelectedItemBrushKey); button.ForeColor = GetThemedGDIColor(shell5, SolutionExplorerColors.SelectedItemTextBrushKey); /// 
/// Gets a System.Drawing.Color value from the current theme for the given color key. ///
 /// The IVsUIShell5 service, used to get the color's value. /// The key to find the color for. /// The current theme's value of the named color. public static System.Drawing.Color GetThemedGDIColor(this IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey) < Validate.IsNotNull(vsUIShell, "vsUIShell"); Validate.IsNotNull(themeResourceKey, "themeResourceKey"); byte[] colorComponents = GetThemedColorRgba(vsUIShell, themeResourceKey); // Note: The Win32 color we get back from IVsUIShell5.GetThemedColor is ABGR return System.Drawing.Color.FromArgb(colorComponents[3], colorComponents[0], colorComponents[1], colorComponents[2]); >private static byte[] GetThemedColorRgba(IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey) < Guid category = themeResourceKey.Category; __THEMEDCOLORTYPE colorType = __THEMEDCOLORTYPE.TCT_Foreground if (themeResourceKey.KeyType == ThemeResourceKeyType.BackgroundColor || themeResourceKey.KeyType == ThemeResourceKeyType.BackgroundBrush) < colorType = __THEMEDCOLORTYPE.TCT_Background; >// This call will throw an exception if the color is not found uint rgbaColor = vsUIShell.GetThemedColor(ref category, themeResourceKey.Name, (uint)colorType); return BitConverter.GetBytes(rgbaColor); > public static System.Windows.Media.Color GetThemedWPFColor(this IVsUIShell5 vsUIShell, ThemeResourceKey themeResourceKey)

Класс также можно использовать для получения идентификаторов VSCOLOR для заданного ключа цветового ресурса WPF или наоборот.

public static string GetColorBaseKey(int vsSysColor); public static bool TryGetColorIDFromBaseKey(string baseKey, out int vsSysColor); 

Методы VsColors класса запрашивают службу VSColor для возврата значения цвета при каждом вызове. Для получения значения цвета в качестве System.Drawing.Color альтернативы лучшей производительности вместо этого следует использовать методы Microsoft.VisualStudio.PlatformUI.VSColorTheme класса, которые кэшируют значения цвета, полученные из службы VSColor. Класс подписывается внутренне на события трансляции сообщений оболочки и отменяется карта кэшированное значение при возникновении события изменения темы. Кроме того, класс предоставляет объект . Понятное событие NET для подписки на изменения темы. ThemeChanged Используйте событие, чтобы добавить новый обработчик и использовать GetThemedColor() метод для получения значений цвета для ThemeResourceKeys интересующих вас значений. Пример кода может выглядеть следующим образом:

public MyWindowPanel() < InitializeComponent(); // Subscribe to theme changes events so we can refresh the colors VSColorTheme.ThemeChanged += VSColorTheme_ThemeChanged; RefreshColors(); >private void VSColorTheme_ThemeChanged(ThemeChangedEventArgs e) < RefreshColors(); // Also post a message to all the children so they can apply the current theme appropriately foreach (System.Windows.Forms.Control child in this.Controls) < NativeMethods.SendMessage(child.Handle, e.Message, IntPtr.Zero, IntPtr.Zero); >> private void RefreshColors() < this.BackColor = VSColorTheme.GetThemedColor(EnvironmentColors.ToolWindowBackgroundColorKey); this.ForeColor = VSColorTheme.GetThemedColor(EnvironmentColors.ToolWindowTextColorKey); >protected override void Dispose(bool disposing) < if (disposing) < VSColorTheme.ThemeChanged -= this.VSColorTheme_ThemeChanged; base.Dispose(disposing);>> 

Выбор цветов высокой контрастности

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

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

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

Системный набор цветов

Таблица в блоге группы WPF: SystemColors Reference указывает полный набор системных цветов и соответствующие оттенки, отображаемые в каждой теме.

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

Пример того, как тонкие детали теряются в высокой контрастности

Выбор цветов текста в редакторе

Цветной текст используется в редакторе или на поверхности конструктора, чтобы указать значение, например, чтобы упростить идентификацию групп похожих элементов. Однако в теме высокой контрастности у вас нет возможности различать более трех цветов текста. WindowText, GrayText и HotTrackText являются единственными цветами, доступными на поверхностях WindowBackground. Так как вы не можете использовать более трех цветов, тщательно выберите наиболее важные различия, которые вы хотите отобразить в режиме высокой контрастности.

Оттенки для каждого из имен маркеров, разрешенных на поверхности редактора, так как они отображаются в каждой теме высокой контрастности:

Сравнение редактора высокой контрастности

Примеры поверхности редактора в синей теме:

Редактор в «Голубой» теме

Редактор в теме Высокой контрастности #1

Варианты использования

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

Системный цвет	Использование
ActiveCaption	— Активные IDE и кнопки с рафтированным окном глифы на наведении указателя мыши и нажатие клавиши — фон строки заголовка для интегрированной среды разработки и рафтированных окон — Фон строки состояния по умолчанию
ActiveCaptionText	— активные окна интегрированной среды разработки и рафтированные окна для переднего плана строки заголовка (текст и глифы) — Фон и граница активных кнопок окна при наведении указателя мыши и нажатия клавиши
Элемент управления	— Поле со списком, раскрывающийся список и элемент управления поиском по умолчанию и отключенный фон, включая кнопку раскрывающегося списка — Фон целевой кнопки «Закрепить» — фон панели команд — фон окна инструментов
ControlDark	— фон интегрированной среды разработки — Разделители строк меню и команд — граница панели команд — Тени меню — вкладка окна инструментов по умолчанию и наведите указатель мыши на границу и разделитель — Фон кнопки переполнения документа — граница глифа целевого объекта док-станции
ControlDarkDarkDark	— Нефокусировано, выбранное окно вкладки документа
ControlLight	— граница вкладки «Автоматическое скрытие» — поле со списком и граница раскрывающегося списка — фон и граница целевого целевого объекта док-станции
ControlLightLight	— Выбранная, ориентированная временная граница
ControlText	— поле со списком и раскрывающийся список глифов — Текст вкладки «Окно инструментов» без выбора
Серый текст	— Поле со списком и раскрывающийся список отключенные границы, раскрывающийся список глиф, текст и текст элемента меню — Отключенный текст меню — Текст заголовка элемента управления «Параметры поиска» — разделитель разделов элемента управления поиском
Выделить	— Все наведите указатель мыши и нажатые фоны и границы, кроме фона раскрывающегося списка со списком, а также границы кнопки переполнения документа — Фоны выбранных элементов
HighlightText	— все наведите указатель мыши и нажатые на переднем плане (текст и глифы) — Окно «Фокус» и элемент управления окном вкладки документа — Граница строки заголовка окна с выделенным инструментом — Фокус, выбранная временная вкладка переднего плана — Граница кнопки переполнения документа при наведении указателя мыши и нажатии клавиши — Выбранная граница значка
HotTrack	— фон полосы прокрутки и граница при нажатии клавиши — глиф стрелки со стрелкой прокрутки при нажатии
InactiveCaption	— Неактивная интегрированная среда разработки и глифы окна с рафированными глифами при наведении указателя мыши — фон строки заголовка для интегрированной среды разработки и рафтированных окон — отключенный фон элемента управления поиском
InactiveCaptionText	— неактивная интегрированная среда разработки и строка заголовков окон для переднего плана (текст и глифы) — Неактивные кнопки окна фона и границы при наведении указателя мыши — фон и граница окна нефокусированного окна инструментов — отключенный элемент управления поиска переднего плана
Меню	— фон раскрывающегося меню — установлен и отключен фон проверка метки
MenuText	— граница раскрывающегося меню — флажки — глифы меню — текст раскрывающегося меню — Выбранная граница значка
Полоса прокрутки	— Полоса прокрутки и фон со стрелкой прокрутки, все состояния
Окно	— Фон вкладки «Автоматическое скрытие» — фон строки меню и полки команд — фон и граница окна документа без фокусировки или отмены выбора, а также для открытых и временных вкладок — Фон строки заголовка окна без фокусировки инструментов — Фон вкладки окна инструментов, выбранный и не выбранный
Окно кадра	— граница интегрированной среды разработки
WindowText	— автоматическое скрытие вкладки переднего плана — вкладка «Выбранное окно инструментов» на переднем плане — вкладка «Нефокусированные» окна документа и нефокусированные или не выбранные временные вкладки переднего плана — представление дерева по умолчанию переднего плана и наведите указатель мыши на неизбираемый глиф — выбранная граница вкладки окна инструментов — фон полосы прокрутки, граница и глиф

Отображение цветов для конечных пользователей

Иногда необходимо разрешить пользователю настраивать пользовательский интерфейс, например при создании редактора кода или области конструктора. Наиболее распространенным способом этого является диалоговое окно «Параметры инструментов>». Если у вас нет специализированного пользовательского интерфейса, требующего специальных элементов управления, проще всего представить настройку на странице «Шрифты и цвета » в разделе «Среда» диалогового окна. Для каждого элемента, который предоставляется для настройки, пользователь может изменить цвет переднего плана, цвет фона или оба элемента.

Создание VSPackage для настраиваемых цветов

VSPackage может управлять шрифтами и цветами с помощью пользовательских категорий и отображения элементов на странице свойств Fonts и Colors. При использовании этого механизма VSPackages должны реализовать интерфейс IVsFontAndColorDefaultsProvider и связанные с ним интерфейсы.

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

Чтобы реализовать пользовательские категории или отображаемые элементы, необходимо выполнить следующее:

• Создайте или определите категории в реестре. Реализация IDE на странице свойств Fonts and Colors использует эти сведения для правильного запроса к службе, поддерживающей определенную категорию.
• Создайте или определите группы в реестре (необязательно). Может быть полезно определить группу, представляющую объединение двух или более категорий. Если определена группа, интегрированная среда разработки автоматически объединяет подкатегории и распределяет отображаемые элементы в группе.
• Реализуйте поддержку интегрированной среды разработки.
• Обработка изменений шрифта и цвета.

Создание или определение категорий

Создайте специальный тип записи реестра категорий, в которой [HKLM\SOFTWARE\Microsoft \Visual Studio\\\FontAndColors\\] не локализованное имя категории.

Заполните реестр двумя значениями:

Имя.	Тип	Data	Description
Категория	REG_SZ	GUID	Идентификатор GUID, созданный для идентификации категории
Пакет	REG_SZ	GUID	GUID службы VSPackage, поддерживающей категорию

Служба, указанная в реестре, должна предоставлять реализацию IVsFontAndColorDefaults для соответствующей категории.

Создание или идентификация групп

Создайте специальный тип записи реестра категорий, в которой [HKLM\SOFTWARE\Microsoft \Visual Studio\\\FontAndColors\\] не локализованное имя группы.

Заполните реестр двумя значениями:

Имя.	Тип	Data	Description
Категория	REG_SZ	GUID	Идентификатор GUID, созданный для идентификации категории
Пакет	REG_SZ	GUID	GUID службы VSPackage, поддерживающей категорию

Служба, указанная в реестре, должна предоставлять реализацию IVsFontAndColorGroup соответствующей группы.

Реализация интерфейса IVsFontAndColorGroup

Реализация поддержки интегрированной среды разработки

Реализуйте GetObject, который возвращает интерфейс IVsFontAndColorDefaults или IVsFontAndColorGroup интерфейс интегрированной среды разработки для каждой категории или guid группы.

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

• Списки отображаемых элементов в категории
• Локализуемые имена для отображаемых элементов
• Отображение сведений для каждого члена категории

Каждая категория должна содержать по крайней мере один отображаемый элемент.

Интегрированная среда разработки использует IVsFontAndColorGroup интерфейс для определения объединения нескольких категорий.

Его реализация предоставляет интегрированную среду разработки:

• Список категорий, составляющих определенную группу
• Доступ к экземплярам IVsFontAndColorDefaults , поддерживающим каждую категорию в группе
• Локализованные имена групп

Обновление интегрированной среды разработки

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

Обновление кэша выполняется через интерфейс IvsFontAndColorCacheManager и может выполняться глобально или только для выбранных элементов.

Обработка изменений шрифта и цвета

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

Для этого пакет VSPackage должен:

• обработайте события , созданные IDE, реализуя интерфейс IVsFontAndColorEvents . Интегрированная среда разработки вызывает соответствующий метод после изменений пользователей страницы шрифтов и цветов. Например, он вызывает метод OnFontChanged , если выбран новый шрифт. ИЛИ
• опрос интегрированной среды разработки для изменений. Это можно сделать с помощью интерфейса IVsFontAndColor, реализованного системой служба хранилища. Хотя в основном для поддержки сохраняемости метод GetItem может получить сведения о шрифте и цвете для отображаемых элементов. Дополнительные сведения о параметрах шрифта и цвета см. в статье MSDN по доступу к хранимым шрифтам и цвету Параметры.

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

Регистрация пользовательского шрифта и цветовой категории без реализации интерфейсов

В следующем примере кода показано, как зарегистрировать настраиваемый шрифт и цветовую категорию без реализации интерфейсов:

HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\8.0Exp\FontAndColors\CSharp Tool Window] "Package"="" "Category"="" "ToolWindowPackage"="" "NameID"=dword:00000064 

В этом примере кода:

• «NameID» = идентификатор ресурса локализованного имени категории в пакете
• «ToolWindowPackage» = GUID пакета
• «Category»=»» это просто пример, и фактическое значение может быть новым GUID, предоставляемым реализутелем.

Настройка GUID категории свойств «Шрифт» и «Цвет»

В приведенном ниже примере кода показано, как задать идентификаторы GUID категории.

// m_pView is your IVsTextView IVsTextEditorPropertyCategoryContainer spPropCatContainer = (IVsTextEditorPropertyCategoryContainer)m_pView; if (spPropCatContainer != null) < IVsTextEditorPropertyContainer spPropContainer; Guid GUID_EditPropCategory_View_MasterSettings = new Guid(""); hr = spPropCatContainer.GetPropertyCategory( ref GUID_EditPropCategory_View_MasterSettings, out spPropContainer); if(hr == 0) < hr = spPropContainer.SetProperty( VSEDITPROPID.VSEDITPROPID_ViewGeneral_FontCategory, catGUID); hr = spPropContainer.SetProperty( VSEDITPROPID.VSEDITPROPID_ViewGeneral_ColorCategory, catGUID); >>