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

Настраивать CSS рекомендуется только в том случае, если вы хорошо разбираетесь в CSS. Служба поддержки не сможет помочь вам, если вы внедряете в Brandguide свой собственный код.

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

Синтаксис CSS

Синтаксис CSS состоит из набора правил. Эти правила состоят из трех частей: селектора, свойства и значения.

Selector { property: value; }

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

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

h1 { font-family: comic sans; font-size: 12px; color: blue; }

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

Селектор типов CSS

Селектор типов CSS выбирает все элементы определенного типа на веб-странице.

Вот несколько примеров распространенных селекторов типов:

• p: Выбирает все теги абзацев.
• a: Выбирает все гиперссылки.
• h1: Выбирает все теги заголовков h1.
• span: Выбирает все теги span.
• body: Выбирает все элементы в теле веб-страницы.
• кнопка: Выбирает все кнопки на веб-странице.
• li: выбирает все элементы списка.

Селектор классов CSS

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

заголовок 
параграф

Мы используем следующий CSS, чтобы нацелить все элементы с классом i-am-a-class:

.i-am-a-class { font-family: helvetica; }

Селектор идентификаторов CSS

CSS id - это атрибут, используемый для определения уникального элемента на веб-странице. Чтобы выбрать элемент с определенным идентификатором, введите символ хэша (#) перед идентификатором. Например, чтобы изменить шрифт в приведенном ниже абзаце:

параграф

Мы используем следующий CSS, чтобы нацелить только элемент с id i-am-an-id:

#i-am-an-id { font-family: helvetica; }

Свойства...

Свойства...

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

Фоновые свойства

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

Свойства интервалов

Следующие свойства принимают значения auto, inherit, % или любую единицу длины CSS

• высота: Устанавливает высоту элемента
• width: Устанавливает ширину элемента
• padding: Устанавливает площадь подложки элемента
• margin: Устанавливает пространство между полями элемента

Длины и единицы измерения

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

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

Chrome DevTools - это набор инструментов для веб-разработчиков, встроенных непосредственно в браузер Google Chrome. С помощью этих инструментов мы можем быстро найти HTML-элементы и существующие стили CSS на любом сайте.

1. Чтобы получить доступ к DevTools, вы можете щелкнуть правой кнопкой мыши на странице и выбрать Inspect или воспользоваться короткими командами, такими как Command+Option+C (Mac) или Control+Shift+C (Windows, Linux, Chrome OS).

2. Когда панель DevTools будет открыта, выберите инструмент Inspect в верхней части страницы.

3. Затем вы можете щелкнуть на элементе страницы, которому хотите придать стиль. Селекторы, которые можно использовать для настройки этого элемента, будут выделены на вкладке Элементы. На вкладке "Стили" под ним отобразятся правила стилей CSS, которые в данный момент применяются к этому элементу.

4. В этом примере мы изменим цвет навигационной ссылки на #6b646b, используя класс nav-link, который мы нашли с помощью инспектора DevTools. Мы также добавим свойство "!important" в конец объявления, чтобы отменить все предыдущие стили для этого свойства элемента.

5. После обновления CSS и сохранения изменений вы увидите, что цвет текста навигации изменился на #6b646b:

Добавление шрифтов сторонних производителей

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

Добавить шрифт стороннего производителя можно двумя способами.

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

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

Синтаксис

Вы можете скопировать приведенный ниже синтаксис и добавить его в раздел Custom CSS вашего Brandguide. Это единственный CSS, который вам понадобится для импорта шрифта. Чтобы импортировать другой шрифт, просто измените font-family, URL источника и формат на выбранный вами шрифт.

@font-face { font-family: 'Satisfy'; src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2'); }

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

1. Перейдите в библиотеку шрифтов и выберите шрифт, который вы хотите добавить в Brandguide. В нашем случае мы выберем Satisfy из Google Fonts.

2. После выбора скопируйте и вставьте URL-адрес @import в новую вкладку браузера.

3. Вы перейдете на страницу, содержащую URL-адрес и формат, необходимые для импорта шрифта в Brandguide.

4. Скопируйте URL-адрес src и вставьте его в код @fontface и font-family. Затем вставьте код в поле CSS. Ваши изменения автоматически обновятся.

5. Нажмите Готово, чтобы сохранить изменения.

6. Новый импортированный шрифт появится в выпадающем списке "Шрифт по умолчанию" во всплывающем окне "Глобальные настройки".

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

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

Собственные шрифты

1. Преобразуйте шрифт в формат woff или woff2. Этот формат веб-шрифтов более совместим с браузерами, чем форматы текстовых файлов ttf/otf.

2. Загрузите шрифт в раздел файлов в Brandfolder.

3. Откройте актив, перейдите на вкладку embed и выберите Copy Link.

4. Перейдите к всплывающему окну "Глобальные настройки". Вы можете скопировать приведенный ниже синтаксис и добавить его в раздел CSS всплывающего окна "Глобальные настройки". Это единственный CSS, который вам понадобится для импорта шрифта. Чтобы импортировать другой шрифт, просто измените font-family, URL источника и формат на выбранный вами шрифт. После ввода синтаксиса ваши изменения будут сохранены.

@font-face { font-family: 'boldweb'; src: url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff'); }

5. Шрифты, импортированные таким образом, не будут отображаться в раскрывающемся списке Default Typeface. Вместо этого вы должны вручную применить шрифт в разделе CSS. Ниже приведен пример применения шрифта Bold Web к импортированным тегам абзацев.

p { font-family: 'boldweb'; color: #333; }

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

Вы можете добавить видео в свой Brandguide, выполнив следующие действия:

1. Откройте модальное окно активов для видео.
2. Перейдите на вкладку Embed. 
3. Найдите код Video Embed Code и выберите Copy Link. 
4. Вставьте код в блок HTML.