Перейти к основному контенту
Deutsch English (US) Español Français Italiano 日本語 한국어(대한민국) Polski Português do Brasil 简体中文 繁體中文

Настройка Brandguide с помощью CSS

  • Обновлено
Добро пожаловать в новый Brandguide! В этой статье, а также в статьях Начало работы с бренд-гидом и Создание и стиль бренд-гида , вы узнаете, как перенести содержание нового опыта. Редактирование возможностей вашего существующего Brandguide будет уходить 1 сентября 2023 года. С 1 декабря 2023 года унаследованный Brandguide редактор больше не будет доступен. 
 
CSS или "Каскадные таблицы стилей" - это язык дизайна, который используется веб-разработчиками для создания единой и наглядно выглядящей страницы сайта. HTML определяет текстовое содержимое, но CSS определяет визуальную структуру, структуру и эстетику сайта.

Синтаксис JSON

Синтаксис CSS состоит из набора правил. Эти правила состоят из 3 частей: селектор, свойство и значение. 
Selector {
свойство: значение;
}
Переключатель представляет HTML-элемент, который вы хотите стилизовать. Свойство относится к специфическим аспектам элемента HTML, таким как цвет, шрифт или маржа. Каждое использованное в CSS свойство имеет набор принятых значений, например шестнадцатеричный код или значение пиксела.
Селектор может иметь несколько пар свойств и значений, разделенных точками с запятой. Например, следующие значения свойств будут применены ко всем тэгам h1:
h1 {
font-family: comic sans;
font-size: 12px;
цвет: синий;
}
 

Общие CSS селекторы

Выбор типа узла

CSS-селектор выбирает все элементы определенного типа на веб-странице.
Вот несколько примеров общих селекторов типов:
  • p: Выбирает все теги параграфов.
  • a: Выбирает все гиперссылки.
  • h1: Selects all h1 header tags.
  • span: Выбор всех охватывающих теги.
  • Тело: Выбирает все элементы в теле веб-страницы.
  • кнопка: Выбор всех кнопок на веб-странице.
  • li: Выбор всех элементов списка.

Выбор набора

CSS класс является атрибутом, используемым для определения группы элементов HTML. Это позволяет настраивать несколько элементов с помощью одного селектора. Это можно сделать, набрав в CSS определенный (.) символ перед именем класса. Например, чтобы изменить шрифт образца заголовка и абзаца ниже:
 <h1 class="i-am-a-class">заголовок</p>
<p class="i-am-a-class">абзац</p>
Мы будем использовать следующий CSS для цели всех элементов класса i-am-a-класс:
Selector {
свойство: значение;
}

Переключатель CSS

CSS id является атрибутом, используемым для определения единого уникального элемента на веб-странице. Чтобы выбрать элемент с определенным идентификатором, введите хэш (#) перед идентификатором. Например, чтобы изменить шрифт образца заголовка и абзаца ниже:
 <p id="i-am-an-id">параграф</p>
Мы будем использовать следующий CSS для цели всех элементов класса i-am-a-класс:
Selector {
свойство: значение;
}

Свойство CSS

Свойства текста

  • шрифт-семейство: Устанавливает шрифт текста, например"Arial" или "Times"
  • Размер шрифта: Устанавливает размер шрифта, например5px или 1em
  • вес шрифта: Устанавливает вес шрифта или "смелость" напр."жирный" или 200
  • цвет: Устанавливает цвет текста, напримерсиний, #add8e6 или rgb(135,206,250)
  • Высота линии: Вертикальное пространство между строками, например5px или 1em
  • пробел буквы: пробел между символами, например5px или 1em
  • Размер шрифта: Устанавливает размер шрифта, например5px или 1em

Свойства фона

  • цвет фона:Установите цвет фона элемента (например, синий, #add8e6 или rgb(135,206,250)
  • фоновое изображение:Устанавливает фоновое изображение на основе ссылки, например url('sample-image.jpg')
  • фоновое положение:Устанавливает начальную позицию фонового изображения, например центр или 50%

Свойства раздела

Следующие свойства принимают авто, наследование, % или любой блок длины CSS 
  • Высота: Устанавливает высоту элемента 
  • ширина: Устанавливает ширину элемента 
  • Закладка: Устанавливает пространство для заполнения элемента
  • Закладка: Устанавливает пространство для заполнения элемента 

Язык и единицы измерения

  • px: Пикселей (1px = 1/96th из 1 дюйма)
  • em: Относительно размера шрифта элемента (3em = 3 раза по размеру текущего шрифта)
  • vw: Относительно 1% ширины витрины
  • вр: Относительно 1% высоты зрения
  • %: Относительно родительского элемента

 

Поиск элементов с помощью Chrome DevTools

Chrome DevTools - это набор инструментов для веб-разработчиков, встроенных непосредственно в браузер Google Chrome. Мы можем использовать эти инструменты для быстрого нахождения элементов HTML и существующих CSS стилей на любом сайте. 
1. Для доступа к DevTools, вы можете щелкнуть правой кнопкой мыши на странице и выбрать "Инспектировать", или используйте короткие команды, такие как Command+Option+C (Mac) или Control+Shift+C (Windows, Linux, Chrome OS).
 
 
2. Когда панель DevTools открыта, выберите инструмент Инспектирования в верхней части страницы.
 
3. Затем вы можете щелкнуть по элементу на странице, которую вы хотите стилизовать. Селекторы, которые могут быть использованы для настройки этого элемента будут выделены на вкладке элементов. На вкладке Стили ниже будут показаны правила стиля CSS, которые в настоящее время применяются к этому элементу.
 
 
4. В этом примере мы изменим цвет навигационных ссылок на #6b646b, используя "nav-link" класс, который мы нашли с помощью инспектора DevTools. Мы также добавим "! свойство mportant" в конце объявления, чтобы переопределить все предыдущие стили для этого свойства элемента.
 
 
5. После того, как CSS был обновлён и изменения были сохранены, цвет текста навигации изменился на #6b646b:
 
 

Добавление сторонних шрифтов

@font-face — это правило CSS, которое дает вам возможность импортировать и использовать сторонние шрифты в вашем Brandguide. Мы рекомендуем вам добавить шрифт через CSS на глобальном уровне настроек (в отличие от уровня блоков).

Вы можете добавить сторонний шрифт двумя способами.

Копирование и вставка URL

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

Навигация по бренду

Вы можете скопировать синтаксис ниже и добавить его в раздел CSS вашего Brandguide. Это единственный CSS, который вам нужно будет импортировать шрифт. Чтобы импортировать другой шрифт, просто измените имя шрифта, URL источника и формат выбранного шрифта.
@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) формат ('woff2');
}

Поиск URL и формат шрифта:

1. Перейдите в выбранную библиотеку шрифтов и выберите шрифт, который вы хотите добавить в ваш Brandguide. В нашем случае мы выберем "Удовлетворение" из Google шрифтов.
 
2. После выбора вам нужно скопировать и вставить URL @import в новую вкладку браузера. 
 
 
3. Это приведет вас на страницу, содержащую URL и формат, необходимые для импорта шрифта в ваш Brandguide.
4. Скопируйте URL-адрес src и вставьте его в код @fontface вместе с семейством шрифтов. Затем вставьте код в поле CSS. Ваши изменения будут автоматически обновляться. 
 
Нажмите кнопку «Обновить библиотеку», чтобы сохранить изменения. 
 
 
Новый импортированный шрифт будет заполняться в раскрывающемся списке по умолчанию (Global Settings flyou).
 

Преобразование шрифта в формат WOFF или WOFF2

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

Собственный код 

1. Преобразование шрифта в woff или woff2 формат. Это веб-шрифт более совместим с браузерами, чем форматы текстовых файлов ttf/otf. 
 
2. Загрузите шрифт в раздел файлов в Библиотеке. 
 
3. Откройте актив, перейдите на вкладку Встраивание и выберите Копировать Ссылку. 
 
4. Перейдите в глобальные настройки. Вы можете скопировать синтаксис ниже и добавить его в CSS раздел глобальных настроек. Это единственный CSS, который вам нужно будет импортировать шрифт. Чтобы импортировать другой шрифт, просто измените имя шрифта, URL источника и формат выбранного шрифта. Как только синтаксис будет введен, ваши изменения будут сохранены.  
@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}
5. Шрифты, импортированные таким образом, не будут приводить к отображению шрифта в раскрывающемся списке по умолчанию. Вместо этого вам нужно вручную применить шрифт в секции CSS. Ниже приведен пример применения шрифта Bold Web к импортированным параграфам. 
p {
font-family: 'boldweb';
color: #333;
}
 

Добавление видео

Вы можете добавить видео в ваш Brandguide следуя этим шагам: 
 
  1. Открыть модуль актива для видео.
  2. Перейдите на вкладку «Пользовательские настройки».  
  3. Найдите код вставки видео и выберите Копировать ссылку. 
  4. Вставьте код в HTML-блок.
Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 0 из 0
В начало

Похожие статьи