Об Anvil

Anvil — это платформа для создания полнофункциональных веб-приложений с использованием только Python. Нет необходимости возиться с JS, HTML, CSS, Python, SQL и всеми их фреймворками — просто создайте все это на Python. Начните с одного из наших уроков или посмотрите пример приложения. Для получения дополнительной помощи у нас есть подробная документация для разработчиков и дружественный форум сообщества.

Использование CSS в Anvil

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

CSS — это язык, используемый для стилизации веб-страниц. В этом руководстве мы познакомимся с CSS и узнаем, как с его помощью можно изменять внешний вид веб-страниц. Мы увидим, как с помощью CSS можно выделять компоненты на веб-странице и писать правила для изменения внешнего вида этих компонентов. По ходу дела вы сможете проверить свои навыки с помощью некоторых задач. Затем мы поэкспериментируем с CSS на живой домашней странице Anvil, используя инструменты разработчика, встроенные в ваш браузер. Затем мы рассмотрим пример использования CSS для настройки внешнего вида приложения Anvil с помощью темы Material Design.

В этом руководстве по использованию CSS в Anvil мы рассмотрим:

1. Рассмотрим HTML и его связь с CSS
2. Более подробно рассмотрим синтаксис CSS, включая:
   • Использование селекторов и классов
   • комбинирование селекторов
3. Используйте инструменты разработчика браузера на домашней странице Anvil, чтобы:
   • Выбрать элемент HTML
   • Проверить код HTML
   • Проверить код CSS
4. Узнайте больше об использовании CSS для стилизации приложений Anvil, в том числе:
   • Применение CSS с помощью Python
   • Написание CSS в файле theme.css
   • Использование ролей Anvil

Лучшим внешним ресурсом для изучения CSS и HTML является Mozilla Developer Network Web Docs. MDN Web Docs — это проект с открытым исходным кодом, который предоставляет справочные руководства и учебники по веб-языкам и технологиям. Они содержат подробные и понятные ресурсы для начинающих и опытных пользователей. В этом руководстве я буду часто ссылаться на MDN Web Docs.

HTML и CSS

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

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

HTML определяет элементы на странице с помощью «тегов». Самый простой элемент HTML — это <div>, который представляет собой обычный контейнер без каких-либо заданных стилей. Очень часто элементы HTML вложены друг в друга, как и в Anvil, где мы часто вставляем компоненты в контейнеры, такие как ColumnPanels и FlowPanels. Например, следующий код определяет <div> и добавляет на страницу кнопку с надписью «Отправить»:

<div>
  <button>Submit</button>
</div>

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

button {
  border: 1px solid pink;
  background-color: gray;
}

Далее мы более подробно рассмотрим CSS и его синтаксис.

Синтаксис CSS

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

1. Селектор: Он «выбирает», к какому элементу или элементам HTML применить правило.
2. Свойство: Это свойство элемента, к которому будет применено правило.
3. Значение: Описывает, как свойство будет отображаться в браузере.

Селекторы и классы

В предыдущем примере мы использовали CSS для выделения элементов <button>. Мы сделали это, просто написав имя тега, а затем определив правило. Это называется селектором типа.

Чаще всего мы выбираем элементы, присваивая им класс. Классы можно применять к любому количеству элементов HTML. Это способ применения одного и того же стиля к нескольким элементам без повторения кода. Чтобы добавить класс в HTML, мы используем атрибут class, а чтобы использовать селектор классов, мы используем ., за которым следует имя класса.

Давайте расширим наш предыдущий пример и присвоим кнопке класс. Затем мы можем применить правила стилизации к этому классу. Таким образом, мы не будем изменять все кнопки на странице, а только те, на которые мы хотим нацелиться. Давайте присвоим кнопке класс submit и применим те же правила стилизации только к этому классу:

<div>
  <button class="submit">Submit</button>
</div>

.submit {
  border: 1px solid pink;
  background-color: gray;
}

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

Попробуйте сами

Теперь ваша очередь! Откройте следующий код в CodePen и:

1. Присвойте второму <button> класс cancel.
2. В CSS выделите этот класс и задайте ему другой цвет фона.

Свойство background-color может принимать некоторые текстовые значения, а также шестнадцатеричные и rgb значения. Подробнее о background-color здесь

Комбинирование селекторов

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

Несколько селекторов

Селекторы можно группировать с помощью ,, чтобы применить одни и те же правила к нескольким селекторам. В приведенном ниже примере элементы с классами submit или cancel будут иметь размер шрифта 16px:

.submit, .cancel {
  font-size: 16px;
}

Комбинирование селекторов типа и класса

Селектор класса может идти непосредственно после селектора типа (без пробела между ними) для выбора элементов данного типа с данным классом. Например, мы можем использовать следующий код для выбора элементов <button> с классом submit (в случае, если есть другие типы элементов с тем же именем класса):

button.submit {
  border: 1px solid pink;
  background-color: gray;
}

Выбор потомков

Иногда мы хотим выбрать элементы, которые вложены в другие элементы. Например, мы можем выбрать кнопки, которые находятся внутри контейнера card, но без других кнопок. Пробел между двумя селекторами будет выбирать элементы, являющиеся потомками первого элемента, а > будет выбирать элементы, являющиеся дочерними (прямыми потомками) первого элемента.

Например, следующий HTML код определяет элемент <div> с классом card, который имеет другой <div> с классом buttons-div, вложенный внутрь. Внутри этого <div> находятся два элемента <button>:

<div class="card">
  <div class="buttons-div">
    <button class="submit">Submit</button>
    <button class="cancel">Cancel</button>
  </div>
</div>

Поскольку элементы <button> находятся внутри <div> с классом card, мы можем выделить их с помощью следующего CSS:

.card button {
  border: 1px solid pink;
  background-color: gray;
}

Однако <button> не являются дочерними элементами card, поскольку они не вложены непосредственно в <div>, но они являются дочерними элемента buttons-div. Первое правило ниже не выберет <button>, в то время как второе правило выберет:

/* This won't select the buttons because they aren't children of the "card" <div> */
.card > button {
  border: 1px solid pink;
  background-color: gray;
}

/* This will select the buttons because they are children of the "buttons-div" <div> */
.buttons-div > button {
  border: 1px solid pink;
  background-color: gray;
}

Подробнее о комбинировании селекторов CSS смотрите в веб-документации MDN.

Попробуйте сами

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

1. Выберите второй <p> и присвойте ему цвет розовый. А первый <p> оставьте прежним.
2. Придайте кнопкам submit и clear background-color lightblue, но оставьте кнопку cancel такой, какая она есть.
3. Придайте <div> внутри card свойство border в виде 1px solid pink.

Застряли? Посмотрите решение.

Свойства CSS

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

Использование инструментов разработчика

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

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

Выбор элемента

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

На сайте можно щелкнуть правой кнопкой мыши и выбрать «Inspect», чтобы вызвать инструменты разработчика браузера. (Я использую Google Chrome, но другие браузеры имеют очень похожие инструменты разработчика).

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

Давайте выберем ссылку «Начните с краткого руководства» на сайте Anvil. Это выделит соответствующий HTML в инструментах разработчика и покажет нам CSS, связанный с этим элементом.

Проверка HTML

Это HTML, отвечающий за отображение этой ссылки:

Здесь у нас есть <a>, или элемент якоря. Элементы якоря — это ссылки, а атрибут href определяет «цель» ссылки: обычно это URL-адрес, который открывается при нажатии на него. У элемента также есть атрибут class. У этого конкретного элемента есть два класса: nowrap и tutorial.

Существует также элемент <svg>, вложенный внутрь элемента <a>. SVG отображает стрелку в ссылке. Поскольку элемент <svg> вложен непосредственно в элемент <a>, можно сказать, что он является дочерним элементом элемента <a>.

Проверка CSS

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

Первая строка — это селектор. Этот конкретный селектор означает «выбрать элемент с классом tutorial, который является потомком элемента с классом sub-hero-links, который является потомком элемента с классами col-hero и home«.

Следующая строка правила CSS — это свойство, на которое мы хотим нацелиться, и то, как оно должно отображаться. Данное правило делает color элемента светло-серым.

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

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

Использование CSS в приложениях Anvil

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

Чтобы увидеть, как CSS используется в приложениях Anvil, давайте создадим новое приложение Anvil и выберем тему Material Design.

Применение CSS через Python

Компоненты Anvil имеют свойства, которые можно изменять через редактор или с помощью кода Python. Когда мы изменяем свойства компонента, CSS применяется к HTML компонента в атрибуте style. Чтобы увидеть это в действии, давайте перетащим компонент Button в наше приложение Anvil и изменим его цвет фона на серый в панели свойств:

Мы также можем изменять свойства из кода. Давайте переключимся в режим просмотра кода и изменим цвет переднего плана нашей кнопки в __init_ кода нашей формы.

class Form1(Form1Template):

  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    self.button_1.foreground = "white"

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

<button class="btn btn-default to-disable" ontouchstart=""
style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; background-color: gray ; color: white;">...</button>

В атрибуте style мы видим свойство background-color, которое мы добавили в панели свойств, и свойство color (foreground в Anvil), которое мы добавили в коде формы.

Запись CSS в таблице стилей

Мы также можем нацеливать компоненты Anvil и записывать правила CSS в таблицу стилей приложения. Каждое приложение Anvil имеет связанную с ним таблицу стилей theme.css, которую можно найти в браузере приложений в разделе «Активы».

Поскольку мы создали приложение Anvil с темой Material Design, таблица стилей нашего приложения уже заполнена правилами CSS. Давайте откроем theme.css и изменим некоторые из них.

Найдем код CSS, связанный со стилизацией кнопок. Нажмите Ctrl + F и найдите «button». Это должно привести нас к строке 548. Здесь мы видим некоторые CSS, которые применяются к компонентам с классом btn. Если мы запустим наше приложение и снова осмотрим кнопку, то увидим, что у нее есть класс btn. В этом правиле давайте изменим background-color на что-то другое:

.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: lightblue; /* This line is changed */
  ...
}

Теперь, если мы запустим приложение, то увидим, что ничего не изменилось. Давайте осмотрим кнопку, чтобы понять, что происходит. Мы видим, что background-color, который мы добавили в theme.css, перечеркнут, а вместо него приоритет имеет background-color, который мы добавили в панели свойств.

Когда свойства CSS конфликтуют друг с другом, в CSS есть правила, определяющие, какое свойство будет применено. Сначала будут применены правила стилизации, написанные в таблице стилей, а затем правила, написанные в HTML. Вот почему наша кнопка gray, а не lightblue. Свойство background-color: gray, написанное в HTML, будет применено последним и поэтому отменяет свойство background-color: lightblue в theme.css.

Если правила стилей CSS, записанные в таблице стилей, противоречат друг другу, то последнее правило отменяет предыдущие. Именно поэтому таблицы стилей являются каскадными. Например, если бы в таблице стилей был следующий код (а в HTML не было бы добавлено противоречащих правил стилизации), то кнопки имели бы розовый фон:

button {
  background-color: gray;
}

button {
  background-color: pink;
}

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

.submit {
  background-color: gray;
}

button {
  background-color: pink;
}

Каскадные правила и правила специфичности можно отменить, используя !important. !important применяется к свойству внутри правила, чтобы сделать его значение более важным, чем любое другое конфликтующее значение, но это почти всегда плохая идея. Мы обсудим, почему !important следует избегать, но сначала давайте посмотрим, как это работает, сделав свойство background-color, которое мы установили в theme.css !important:

.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: lightblue !important;
  ...
}

Если мы снова запустим приложение, кнопка теперь будет иметь светло-голубой фон. Осмотр кнопки показывает, что background-color, установленный в атрибуте style, на этот раз перечеркнут. На практике мы не должны использовать здесь !important. Вместо этого мы должны либо установить нужный нам background-color на панели свойств, либо удалить установленный там background-color и установить его в theme.css, не делая его !important.

В целом, использования !important следует избегать. Иногда вам может понадобиться использовать его, чтобы отменить правила стилизации по умолчанию, к которым у вас нет доступа. (Но переопределение каскада затрудняет отладку и часто причиняет боль и путаницу другим разработчикам (и вашему будущему «я»). Вместо этого попробуйте изменить порядок правил и использовать более конкретные селекторы. Подробнее о специфичности и !important вы можете прочитать здесь.

Роли Anvil

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

Давайте создадим новую роль в нашем приложении, чтобы применить ее к кнопке. На боковой панели нажмите на «Тема», затем выберите «Роли». Нажмите «+ Добавить новую роль» и выберите имя для роли. Я назвал свою роль submit и ограничил ее так, чтобы она могла применяться только к компонентам кнопки.

Теперь давайте вернемся к Form1 и присвоим кнопке роль submit. Также удалим все свойства, которые мы задали в редакторе или в коде формы.

Мы также должны изменить код, который мы изменили в theme.css. Сейчас все кнопки в нашем приложении будут светло-синими, но давайте воспользуемся ролью, которую мы только что определили, чтобы сделать синими только кнопки с ролью submit. Таким образом, код, который мы изменили в theme.css, должен выглядеть следующим образом:

.btn, .btn-default, .file-loader>label {
  border-radius: 2px;
  font-size: 14px;
  ...
  background-color: transparent; /* this line is changed back */
  ...
}

Кнопка теперь имеет роль submit, что означает, что Anvil присвоит компоненту CSS-класс. Имя класса будет именем роли с префиксом anvil-role-. Теперь мы можем перейти в theme.css и написать несколько правил стилизации для класса anvil-role-submit.

В самом низу theme.css выделим класс anvil-role-submit и изменим цвет фона, цвет шрифта и размер шрифта:

.anvil-role-submit {
  background-color: lightblue;
  color: white;
  font-size: 22px;
}

Запустите приложение, чтобы посмотреть, как сработал код.

Наша кнопка выглядит не совсем правильно, поэтому мы должны проинспектировать приложение, чтобы понять, что происходит. Если мы выделим элемент со светло-голубым фоном, то увидим, что это <div>, который имеет класс anvil-role-submit. Внутри этого <div> находится кнопка, на которую мы хотим нацелиться.

Давайте вернемся к theme.css и изменим селектор, чтобы выбрать <button>, вложенную внутрь <div>.

Есть несколько способов сделать это, но давайте будем максимально конкретными и выберем элементы <button>, имеющие класс btn, которые являются дочерними элементами класса .anvil-role-submit:

.anvil-role-submit > button.btn {
  background-color: lightblue;
  color: white;
  font-size: 22px;
}

Теперь давайте повторно запустим наше приложение, чтобы проверить, правильно ли мы выбрали элемент.

Отлично, все сработало!

Резюме

В этом руководстве мы рассмотрели основы использования CSS в приложениях Anvil. Мы кратко рассмотрели HTML и то, как он связан с CSS. Мы также рассмотрели, как писать правила CSS с помощью селекторов и свойств. Мы также рассмотрели, как можно использовать инструменты разработчика браузера для проверки кода и внесения локальных изменений. При использовании CSS в Anvil мы можем редактировать свойства компонентов Anvil с помощью Python или путем написания правил CSS в таблице стилей приложения. Мы также можем определить роли Anvil для добавления CSS-классов в компоненты Anvil.

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

Если вы хотите узнать больше о том, как использовать CSS, ознакомьтесь с предложенными ниже ресурсами:

Дополнительное чтение

• Для получения краткого руководства, которое поможет вам начать работу с CSS, ознакомьтесь с основами CSS в MDN.

• Для введения в HTML в MDN есть хороший, простой и понятный учебник, предназначенный для начинающих.

• Для более глубокого знакомства с CSS в MDN также есть хороший учебник по CSS, который не предполагает предварительных знаний CSS, но предполагает, что вы прошли учебник по HTML.

• Полный список свойств CSS и примеры их использования можно найти в веб-документах MDN.

• Если вы предпочитаете более интерактивные учебники, я очень рекомендую Scrimba. Их краш-курс по HTML и CSS предназначен для начинающих.

• Статьи по темам CSS и интересные трюки смотрите в разделе Трюки CSS.