Как я могу добавить фрагмент кода CSS в код vs

Есть ли возможность добавить фрагмент кода CSS, который содержит несколько элементов или тегов с их стилями в коде vs.

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

"reset the css": { "prefix": "resetcss", "body": [ "body { margin: 0}", "$1" ], "description": "Log output to console" }

Но вместо этого я хочу добавить (CSS RESET) как группу элементов и его стили как один фрагмент:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

Thank You.

css code-snippets vscode-snippets

05.03.2024 11:56

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

238

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, вы можете создать фрагмент кода CSS в Visual Studio Code, содержащий несколько элементов или тегов с их стилями. Вот как вы можете это сделать:

Откройте код Visual Studio.
Перейдите в меню «Настройки» и выберите «Пользовательские фрагменты».
Выберите язык, для которого вы хотите создать фрагмент (в данном случае CSS).

Добавьте фрагмент кода в файл JSON и сохраните файл. Теперь, когда вы вводите cssreset или что-то еще, что вы передаете в качестве префикса фрагмента в файле CSS, и нажимаете Tab, будет вставлен блок кода сброса CSS.

JSON-файл-

"CSS Reset": {
    "prefix": "cssreset",
    "body": [
        "html, body, div, span, applet, object, iframe,",
        "h1, h2, h3, h4, h5, h6, p, blockquote, pre,",
        "a, abbr, acronym, address, big, cite, code,",
        "del, dfn, em, img, ins, kbd, q, s, samp,",
        "small, strike, strong, sub, sup, tt, var,",
        "b, u, i, center,",
        "dl, dt, dd, ol, ul, li,",
        "fieldset, form, label, legend,",
        "table, caption, tbody, tfoot, thead, tr, th, td,",
        "article, aside, canvas, details, embed,",
        "figure, figcaption, footer, header, hgroup,",
        "menu, nav, output, ruby, section, summary,",
        "time, mark, audio, video {",
        "  margin: 0;",
        "  padding: 0;",
        "  border: 0;",
        "  font-size: 100%;",
        "  font: inherit;",
        "  vertical-align: baseline;",
        "}",
        "/* HTML5 display-role reset for older browsers */",
        "article, aside, details, figcaption, figure,",
        "footer, header, hgroup, menu, nav, section {",
        "  display: block;",
        "}",
        "body {",
        "  line-height: 1;",
        "}",
        "ol, ul {",
        "  list-style: none;",
        "}"
    ],
    "description": "CSS Reset"
}

06.03.2024 10:51

Другие вопросы по теме

Как настроить фрагмент суффикса, заменив переменную в VS Code?

Почтальон Как проверить не равно условию в почтальоне?

Фрагменты Xcode по умолчанию (if, for, struct и т. д.), не отображаемые в автозаполнении

Получите максимум средних предметных оценок, используя поток Java 8

Настройка положения курсора в zsh

Фрагмент кода wordpress php ограниченный доступ к страницам

Как отдать предпочтение фрагменту пользователя над фрагментом расширения в сравнении с кодом?

Как показать diff-представление фрагментов gitlab?

Фрагменты JavaScript в диспетчере фрагментов кода не отображаются в Intellisense

Макрос Scala 3 для отображения исходного кода файла

Как я могу добавить фрагмент кода CSS в код vs

Ответы 1

Другие вопросы по теме

Похожие вопросы