1с элементы стиля как использовать

как при открытии формы изменить в ней стиль?

(2)
Форма (Form)
Стиль (Style)
Использование:
Чтение и запись.
Описание:
Тип: Стиль. Определят стиль отображения формы. Может быть установлено в одно из значений коллекции стилей глобального контекста или в значение «Авто».

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

1С:Предприятие 8. Стили

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

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

Любая форма может быть показана в каком-либо стиле, что настраивается в свойствах формы в Конфигураторе. Для всей конфигурации в целом также может быть выбран один из доступных стилей. Таким образом, для всех служебных обработок, например, можно применить специальный стиль с другим цветом фона, чтобы пользователь более внимательно относился к их использованию. Или, например, изменить стиль всей конфигурации и сделать ее отличной от других:

УФ: Программное добавление элементов условного оформления формы в 1С

Рассмотрим пример программного добавления элементов условного оформления на форму документа. Сделаем так, чтобы возможность редактирования строки таблицы грУсловияОплатыТаблица зависела от реквизита формы АктивныйСчет (тип Булево) и от реквизита таблицы Редактирование (тип Булево) (рис. 1):

Рис. 1. Реквизиты формы, от которых будет зависеть возможность редактирования строки таблицы

Если АктивныйСчет = Истина и Объект.грУсловияОплатыТаблица.Редактирование = Ложь, тогда редактирование строки таблицы будет недоступно: установим свойство ТолькоПросмотр = Истина. Можно добавить аналогичный код для случая, когда АктивныйСчет = Истина, Объект.грУсловияОплатыТаблица.Редактирование = Истина, и включить возможность редактирования строки: установить свойство ТолькоПросмотр = Ложь.

Эти условия можно задать в свойстве формы УсловноеОформление (рис. 2 и рис. 3):

Рис. 2. Свойство формы УсловноеОформление

Рис. 3. Настройка условного оформления

Иногда в коде очищают свойство формы УсловноеОформление и все заданные настройки (рис. 2 и рис. 3) пропадают. В таких случаях можно программно задать нужное условное оформление.

Описание текста процедуры модуля формы для программного добавления элементов условного оформления

1. Название процедуры может быть любым; ее вызов может быть, например, из обработчика события формы ПриСозданииНаСервере.
2. Очищаем условное оформление формы (для примера, не обязательно).
3. Добавляем новый элемент условного оформления ЭлементОформления.
4. Устанавливаем свойство оформления ТолькоПросмотр = Истина.
5. Добавляем условия (отборы), при выполнении которых будет действовать настройка.
6. В примере это два условия И, поэтому добавляем группу элементов отбора ГруппаЭлементовОтбора с типом группы ГруппаИ, и два элемента отбора ЭлементОтбора (для АктивныйСчет = Истина и Объект.грУсловияОплатыТаблица.Редактирование = Ложь).
7. Указываем поля, для которых будет действовать настройка.

В нашем примере это будет вся строка таблицы грУсловияОплатыТаблица, поэтому добавляем одно поле ПолеОформления с названием таблицы грУсловияОплатыТаблица.

Эту статью хорошо дополняют

UI в 1С: как быстро создать интерфейс сервисом 1C Maker

Простой и доступный инструмент для оперативного решения вопросов по визуализации ТЗ

1С Hard Skills / 8.11.2022

Производительный режим RLS в 1С

Преимущества и недостатки стандартного и производительного режима RLS

1С Hard Skills / 13.07.2022

Как работают виртуальные таблицы Остатки, Обороты, ОстаткиИОбороты, особенности применения в СКД. Особенности объекта СтандартныйПериод

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

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

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

Подключить как внешний CSS файл к документу. Для этого достаточно прописать тег <link rel=»stylesheet» href=»путь/до/файла.css»> в теге <head>. Это наиболее распространенный способ подключения таблиц стилей к документу, когда внешнее оформление страниц выносится в отдельный внешний CSS файл.

Прописать стили в самом документе, используя тег <style>.

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

Пример вывода опции из админки в тело документа:

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

1.2 CSS синтаксис

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

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

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

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
   Пример использования !important:
2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее: <section style=»background-color: #eee;»>
3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
4. Еще меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега <link>
5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
   В результате тег <p>, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

И т.д. по логической цепочке.

И в завершение по приоритетам важно отметить, что стили, идущие в последующих объявлениях ниже по документу также имеют наибольший приоритет. Например:

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

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

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

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

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.