Как связать html и css в visual studio

Обновлено: 28.04.2024

Чтобы начать проектировать веб-страницу, дважды щелкните на веб-странице в окне Solution Explorer.

Visual Studio предоставляет три режима для просмотра веб-страницы: Source (Исходный код), Design (Конструктор) и Split (Комбинированный). Выбрать желаемый режим можно, просто щелкнув на одной из трех имеющих соответствующие названия кнопок в нижней части окна с веб-страницей.

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

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

Добавив элемент управления, можно изменить его размер или сконфигурировать его свойства в окне Properties (Свойства). Многие разработчики предпочитают компоновать новые веб-страницы в режиме Design, но выполнять перегруппировку элементов управления или более детальную настройку — в режиме Source. Исключением являются лишь случаи, когда речь идет об HTML-разметке: хотя в панели Toolbox и имеется вкладка с HTML-элементами, обычно легче ввести дескрипторы необходимых элементов управления вручную, чем перетаскивать их на страницу по одному за раз.

На рисунке ниже показана веб-страница в режиме Split с исходной разметкой в верхней части и графической поверхностью в нижней:

Тем, у кого установлен широкоэкранный монитор, наверняка захочется, чтобы области в режиме Split отображались бок о бок (а не вверху и внизу). К счастью, Visual Studio позволяет легко получить такой вариант отображения. Все, что требуется сделать — это выбрать в меню Tools (Сервис) пункт Options (Параметры), в дереве параметров перейти в раздел HTML Designer --> General (Визуальный конструктор HTML --> Общие), выбрать опцию Split Views Vertically (Отображать представления вертикально) и щелкнуть на кнопке ОК.

Чтобы сконфигурировать элемент управления, сначала нужно щелкнуть на нем для его выбора или же выбрать его по имени в раскрывающемся списке в верхней части окна Properties (Свойства), а затем изменить все необходимые свойства, например, Text (Текст), ID (Идентификатор), ForeColor (Цвет переднего плана).

Эти установки автоматически преобразуются в соответствующие атрибуты дескрипторов элементов управления ASP.NET и определяют исходный внешний вид этих элементов. Visual Studio даже предоставляет специальные "селекторы" (известные как UITypeEditor), позволяющие выбирать расширенные свойства. Например, можно выбрать из раскрывающегося списка цвет или же сконфигурировать шрифт с помощью стандартного диалогового окна выбора шрифта.

Абсолютное позиционирование

Для позиционирования элемента управления на странице необходимо использовать все обычные приемы HTML-дизайна, такие как абзацы, разрывы строк, таблицы и стили. По умолчанию Visual Studio предполагает, что элементы должны размещаться с использованием гибкого режима потокового (flow) позиционирования, который позволяет содержимому увеличиваться и уменьшаться динамически без возникновения проблем с компоновкой.

Однако у разработчика также есть возможность применить и режим абсолютного (absolute) позиционирования с помощью стандарта CSS. Все, что от него требуется — это добавить для своего элемента управления внутристрочный CSS-стиль с параметрами абсолютного позиционирования. Например, ниже показан CSS-стиль, указывающий, что кнопка должна размещаться в точности в 100 пикселях от левого края и 50 пикселях от верхнего края страницы:

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

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

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

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

Контейнер , по сути, представляет собой "плавающее" поле. В приведенном ниже примере, он имеет фиксированную ширину, которая составляет 200 пикселей, и нефиксированную высоту, которая будет изменяться в соответствии с размером отображаемого внутри него содержимого:

Интеллектуальные дескрипторы

Интеллектуальные дескрипторы (смарт-теги) упрощают конфигурирование сложных элементов управления. Они предлагаются не для всех элементов управления, а только для многофункциональных, таких как GridView, TreeView и Calendar.

О доступности смарт-тега свидетельствует наличие в верхнем правом углу при выборе элемента управления небольшой стрелки. Если щелкнуть на этой стрелке, появится окно со ссылками (и другими элементами управления), позволяющими решать задачи более высокого уровня.

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

Статические дескрипторы HTML

В состав Visual Studio входит очень удобный конструктор стилей, который позволяет форматировать любой статический элемент HTML с помощью свойств CSS.

Чтобы испробовать его, перетащите на страницу из раздела HTML в панели Toolbox элемент . Этот элемент появится на странице в виде не имеющей границ панели. Далее щелкните на этой панели, чтобы выделить ее, и затем щелкнуть внутри поля Style в окне Properties (Свойства). После этого в поле Style появится кнопка с изображением троеточия (. ). Щелчок на ней приводит к открытию диалогового окна Modify Style (Изменение стиля) с опциями для настройки цветов, шрифта, компоновки и рамки элемента:

Созданный подобным образом новый стиль будет сохраняться как внутристрочный и записываться в отвечающий за стиль атрибут изменяемого элемента. В качестве альтернативы можно определить именованный стиль в текущей странице (как предлагается по умолчанию) или в отдельной таблице стилей.

При желании сконфигурировать элемент HTML как серверный элемент управления для того, чтобы иметь возможность обрабатывать события и взаимодействовать с ним в коде, нужно переключиться в режим Source и добавить в дескриптор элемента управления требуемый для этого атрибут runat="server".

Таблицы HTML

Visual Studio обеспечивает эффективную поддержку для создания HTML-таблиц на этапе проектирования. Чтобы испробовать ее, перетащите на страницу с вкладки HTML панели Toolbox элемент, представляющий таблицу. Изначально эта таблица будет иметь стандартный внешний вид и размер 3x3, но ее можно быстро трансформировать с помощью функций редактирования, которые больше напоминают собой текстовый редактор, нежели инструмент программирования.

Ниже перечислены основные действия, которые может потребоваться выполнить:

Чтобы перейти в таблице из одной ячейки в другую, нужно использовать либо клавишу , либо клавиши со стрелками. Текущая ячейка выделяется рамкой синего цвета. Внутри каждой ячейки можно вводить статические HTML-дескрипторы, а также перетаскивать элементы управления из панели Toolbox. При попытке перейти с помощью клавиши к ячейке, находящейся после последней ячейки, Visual Studio добавляет новую строку.

Чтобы добавить в таблицу новые строки или столбцы, нужно щелкнуть правой кнопкой мыши внутри ячейки и выбрать из нескольких опций в подменю Insert (Вставка) ту, которая представляет необходимое действие.

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

Чтобы отформатировать какую-нибудь одну ячейку, нужно щелкнуть в окне Properties внутри поля Style, а затем на кнопке с изображением троеточия (. ). После этого откроется то же диалоговое окно New Style (Новый стиль), которое было показано на предыдущем рисунке.

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

Чтобы объединить ячейки (например, превратить две ячейки в одну, охватывающую два столбца), необходимо просто выделить необходимые ячейки, щелкнуть правой кнопкой мыши и выбрать в контекстном меню пункт Modify --> Merge (Изменить --> Объединить).

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

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

Структурирование разметки HTML

Для форматирования одного и того же фрагмента HTML-кода существует просто бесконечное количество способов. Вложенные дескрипторы могут выделяться с помощью отступов, а длинные дескрипторы часто разбиваются на несколько строк для повышения удобочитаемости. Однако то, сколько именно должно быть отступов, и какой должна быть длина строки, каждый разработчик выбирает сам.

Из-за обилия возможных вариантов Visual Studio принудительно никакого форматирования не применяет, а наоборот — всегда сохраняет ту схему применения заглавных букв и отступов, которую использует разработчик. Недостаток такого поведения заключается в том, что оно способствует отсутствию согласованности и созданию веб-страниц с сильно разнящимися соглашениями о форматировании или некорректно разбросанными дескрипторами.

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

Чтобы испробовать ее, переключите страницу в режим Source. Далее выделите какой-нибудь произвольный фрагмент HTML-кода, щелкните на нем правой кнопкой мыши и выберите в контекстном меню пункт Format Selection (Форматировать выделенный фрагмент). После этого Visual Studio автоматически исправит выделенное HTML-содержимое, расставив правильно заглавные буквы, отступы и окончания строк.

Конечно, после вышесказанного возникает вопрос о том, а кто же определяет, какие параметры форматирования являются правильными? Хотя для начала Visual Studio использует собственные целесообразные параметры по умолчанию, у вас есть возможность настроить их довольно обширным образом.

Чтобы сделать это, находясь в режиме Source, щелкните правой кнопкой мыши в любом месте и выберите в контекстном меню пункт Formatting and Validation (Форматирование и проверка. ). Откроется диалоговое окно Options (Параметры) с развернутым разделом Text Editors --> HTML --> Formatting (Текстовый редактор --> НТМL --> Форматирование):

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

Правила форматирования применяются всякий раз, когда используется команда Format Selection, и всякий раз, когда HTML-содержимое добавляется путем перетаскивания элементов управления из панели Toolbox в режиме Design. В случае, когда HTML-содержимое вводится вручную, Visual Studio не применяет правила форматирования для его "исправления".

Если вы настроены еще более решительно, можете щелкнуть на кнопке Tag Specific Options (Параметры для тегов) и установить правила, применяющиеся только к определенным дескрипторам.

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

При написании мы использовали Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux

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

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

С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.

Создание файлов и папок HTML и CSS

Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.

Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.

Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.

Сохраните файл и оставьте его открытым.

Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.

Затем вам нужно добавить в файл index.html строку кода, которая скажет браузеру использовать файл styles.css в качестве таблицы стилей сайта. Для этого вам понадобится HTML-тег и ссылка на файл styles.css. Добавьте следующий фрагмент кода в свой HTML-документ:

Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.

Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.

Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для нашего сайта CSS:

Папка по имени css содержит файл styles.css.
Пустая папка images.
Файл index.html

Если вы используете Visual Studio Code, ваш редактор должен теперь отображать следующее дерево файлов:

Обратите внимание, что имена файлов включают расширения (.html и .css), которые указывают на тип их содержимого. В следующих мануалах этой серии мы добавим контент в эти файлы.

Отладка и устранение неполадок CSS и HTML

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

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

Ошибки HTML и CSS могут быть вызваны несколькими причинами. Для начала проверьте свои правила разметки и CSS на наличие лишних или недостающих пробелов, неправильно записанных тегов, а также лишних знаков пунктуации или символов. Вам также следует убедиться, что вы случайно не поставили фигурные или книжные кавычки (“ или “), которые часто используются текстовыми редакторами. Фигурные кавычки предназначены для чтения текста человеком и вызовут ошибку в коде, поскольку они не распознаются браузерами как кавычки. Вводя кавычки прямо в редакторе кода, вы можете быть уверены, что используете правильный тип.

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

Краткое примечание по автоматической поддержке HTML

Некоторые редакторы кода (к ним относится и Visual Studio Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.

Заключение

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

Visual Studio Code provides basic support for HTML programming out of the box. There is syntax highlighting, smart completions with IntelliSense, and customizable formatting. VS Code also includes great Emmet support.

IntelliSense

As you type in HTML, we offer suggestions via HTML IntelliSense. In the image below, you can see a suggested HTML element closure

as well as a context specific list of suggested elements.

Document symbols are also available for HTML, allowing you to quickly navigate to DOM nodes by id and class name.

You can also work with embedded CSS and JavaScript. However, note that script and style includes from other files are not followed, the language support only looks at the content of the HTML file.

You can trigger suggestions at any time by pressing ⌃Space (Windows, Linux Ctrl+Space ) .

You can also control which built-in code completion providers are active. Override these in your user or workspace settings if you prefer not to see the corresponding suggestions.

Close tags

Tag elements are automatically closed when > of the opening tag is typed.

The matching closing tag is inserted when / of the closing tag is entered.

You can turn off autoclosing tags with the following setting:

Auto update tags

When modifying a tag, the linked editing feature automatically updates the matching closing tag. The feature is optional and can be enabled by setting:

Color picker

The VS Code color picker UI is now available in HTML style sections.

It supports configuration of hue, saturation and opacity for the color that is picked up from the editor. It also provides the ability to trigger between different color modes by clicking on the color string at the top of the picker. The picker appears on a hover when you are over a color definition.

Hover

Move the mouse over HTML tags or embedded styles and JavaScript to get more information on the symbol under the cursor.

Validation

The HTML language support performs validation on all embedded JavaScript and CSS.

You can turn that validation off with the following settings:

Folding

You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Folding regions are available for all HTML elements for multiline comments in the source code.

Additionally you can use the following region markers to define a folding region: and

If you prefer to switch to indentation based folding for HTML use:

Formatting

To improve the formatting of your HTML source code, you can use the Format Document command ⇧⌥F (Windows Shift+Alt+F , Linux Ctrl+Shift+I ) to format the entire file or Format Selection ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F ) to just format the selected text.

The HTML formatter is based on js-beautify. The formatting options offered by that library are surfaced in the VS Code settings:

html.format.wrapLineLength : Maximum amount of characters per line.
html.format.unformatted : List of tags that shouldn’t be reformatted.
html.format.contentUnformatted : List of tags, comma separated, where the content shouldn’t be reformatted.
html.format.extraLiners : List of tags that should have an extra newline before them.
html.format.preserveNewLines : Whether existing line breaks before elements should be preserved.
html.format.maxPreserveNewLines : Maximum number of line breaks to be preserved in one chunk.
html.format.endWithNewline : End with a newline.
html.format.indentInnerHtml : Indent and sections.
html.format.wrapAttributes : Wrapping strategy for attributes:

auto : Wrap when the line length is exceeded
force : Wrap all attributes, except first
force-aligned : Wrap all attributes, except first, and align attributes
force-expand-multiline : Wrap all attributes
aligned-multiple : Wrap when line length is exceeded, align attributes vertically
preserve : Preserve wrapping of attributes
preserve-aligned : Preserve wrapping of attributes but align

Tip: The formatter doesn’t format the tags listed in the html.format.unformatted and html.format.contentUnformatted settings. Embedded JavaScript is formatted unless ‘script’ tags are excluded.

The Marketplace has several alternative formatters to choose from. If you want to use a different formatter, define "html.format.enable": false in your settings to turn off the built-in formatter.

Emmet snippets

VS Code supports Emmet snippet expansion. Emmet abbreviations are listed along with other suggestions and snippets in the editor auto-completion list.

Tip: See the HTML section of the Emmet cheat sheet for valid abbreviations.

If you’d like to use HTML Emmet abbreviations with other languages, you can associate one of the Emmet modes (such as css , html ) with other languages with the emmet.includeLanguages setting. The setting takes a language identifier and associates it with the language ID of an Emmet supported mode.

For example, to use Emmet HTML abbreviations inside JavaScript:

HTML custom data

You can extend VS Code’s HTML support through a declarative custom data format. By setting html.customData to a list of JSON files following the custom data format, you can enhance VS Code’s understanding of new HTML tags, attributes and attribute values. VS Code will then offer language support such as completion & hover information for the provided tags, attributes and attribute values.

You can read more about using custom data in the vscode-custom-data repository.

HTML extensions

Install an extension to add more functionality. Go to the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and type ‘html’ to see a list of relevant extensions to help with creating and editing HTML.

Tip: Click on an extension tile above to read the description and reviews to decide which extension is best for you. See more in the Marketplace.

Next steps

Read on to find out about:

— VS Code has first class support for CSS including Less and SCSS. — Learn about VS Code’s powerful built-in Emmet support. — Emmet, the essential toolkit for web-developers.

Common questions

Does VS Code have HTML preview?

No, VS Code doesn’t have built-in support for HTML preview but there are extensions available in the VS Code Marketplace. Open the Extensions view ( ⇧⌘X (Windows, Linux Ctrl+Shift+X ) ) and search on ‘live preview’ or ‘html preview’ to see a list of available HTML preview extensions.

html не ссылается на файл css в коде Visual Studio

Однако, когда я открываю html в браузере, веб-страница отображается отлично. Так что, похоже, что что-то не так с моим кодом Visual Studio.

HTML

CSS

файлы

страница интернета

Я хотел бы знать, как избавиться от этой проблемы.

Редактировать 17/9/3 19:03

Спасибо за ответы, ребята. Следующие не работали.

Я не верю, что прыгаю на классы css, и ids поддерживается изначально Vscode. Попробуйте расширение CSS Peek, оно делает то, что вы хотите красиво.

Убедитесь, что путь, который вы предоставили для доступа к файлу style.css, является правильным. Если это не сработает, попробуйте добавить inline css в index.html:

Это альтернативное решение.

По моему мнению, ваш браузер не обновляет файл, поэтому вы можете обновить/перезагрузить всю страницу, нажав CTRL + F5 в окнах для Mac CMD + R

Попробуйте, если у вас все еще проблема, вы можете протестировать его, используя инструмент firebug для firefox.

Для IE8 и Google Chrome вы можете проверить это, нажав F12, появится инструмент разработчика, и вы увидите Html и css.

Каскадные таблицы стилей обеспечивают межплатформенное решение для форматирования веб-страниц, которое работает в HTML или XHTML и поддерживается практически всеми современными браузерами. Собственно говоря, первые версии Visual Studio автоматически генерировали файл Styles.css, который можно было использовать в веб-сайтах. (Во избежание путаницы, в последующих версиях Visual Studio эта практика была отменена.)

Создание таблицы стилей

Таблицу стилей CSS можно использовать для определения набора предварительных настроек форматирования. Впоследствии эту таблицу стилей можно будет подключить к соответствующему элементу управления с помощью свойства CssClass. Чтобы испытать ее в действии и добавить (почти) пустую таблицу стилей в свой веб-проект, в Visual Studio выберите пункт меню Websites --> Add New Item. Затем выберите элемент Style Sheet (Таблица стилей), укажите нужное имя файла и щелкните на кнопке OK:

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

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

После того как правило определено, можно добавить соответствующую информацию о форматировании. В следующем примере для стиля heading1 устанавливается крупный полужирный шрифт текста и зеленый цвет фона. В качестве шрифта выбирается Verdana (если таковой доступен), Arial (если шрифт Verdana отсутствует) или используемая по умолчанию гарнитура Sans-Serif (на случай, если шрифты Verdana и Arial не установлены):

Можно также создавать правила, которые будут применяться к HTML-дескрипторам автоматически. Для этого в качестве имени правила должно указываться имя дескриптора. Ниже показано правило, которое затрагивает все дескрипторы на странице, использующей таблицу стилей:

Если создание правил CSS вручную представляется слишком трудоемким, не стоит беспокоиться - Visual Studio позволяет создавать правила стилей в том же визуальном конструкторе, который используется для форматирования HTML-дескрипторов. Чтобы воспользоваться этой возможностью, вначале добавьте объявление правила. Затем щелкните правой кнопкой мыши между двумя фигурными скобками и в контекстном меню выберите пункт Build Style (Построить стиль). Откроется диалоговое окно Modify Style (Изменить стиль), в котором посредством наведения курсора мыши и щелчка можно выбрать способ настройки шрифтов, границ, фона и выравниваний:

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

В Visual Studio доступно окно CSS Outline (Структура каскадной таблицы стилей), в котором можно просмотреть обзор правил в таблице стилей. Чтобы открыть окно CSS Outline во время редактирования таблицы стилей, выберите пункт меню View --> Other Windows --> Document Outline.

При редактировании отображенной таблицы стилей ее структура выглядит, как показано на рисунке ниже. На рисунке ясно видно, что данная таблица стилей содержит одно правило элемента (то, которое форматирует body) и три правила класса. Для перехода к нужному правилу необходимо щелкнуть на нем:

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

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

Применение правил таблиц стилей

Чтобы использовать правило на веб-странице, сначала страница должна быть связана с соответствующей таблицей стилей. Для этого в раздел страницы понадобится добавить элемент . Элемент ссылается на файл со стилями, которые требуется использовать. Ниже показан пример, в котором странице разрешено применять стили, определенные в файле Styles.css, при условии, что этот файл хранится в той же папке, что и веб-страница:

Теперь любой HTML-элемент или элемент управления можно связать с правилами стиля. Например, если необходимо, чтобы к обычной надписи применялся формат heading1, свойству Label.CssStyle следует присвоить значение heading1, как показано ниже:

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

Присоединять таблицы стилей и применять стили вручную нет необходимости. Для этого можно также воспользоваться средствами поддержки, встроенными в Visual Studio. Чтобы добавить элемент к веб-странице, перетащите свою таблицу стилей из окна Solution Explorer на поверхность проектирования страницы (или в раздел в окне представления исходного кода). Чтобы применить стиль, можно открыть окно Apply Style в Visual Studio.

Для этого откройте веб-страницу и выберите пункт меню View --> Apply Styles. Окно Apply Styles (Применить стили) откроется в левой части экрана наряду с панелью инструментов и окном Server Explorer (Проводник сервера) подобно другим окнам CSS, с которыми вам уже приходилось сталкиваться.

Это окно отображает список всех стилей, которые доступны в присоединенных таблицах стилей, а также предварительное представление каждого стиля. Чтобы применить стиль, просто выделите элемент на веб-странице и щелкните на соответствующем стиле в окне Apply Styles:

Visual Studio самостоятельно выберет подходящий способ применения стиля в зависимости от того, что было выбрано на веб-странице:

В случае выбора веб-элемента управления Visual Studio добавит или изменит свойство CssClass.

При выборе обычного HTML-элемента Visual Studio добавит или изменит атрибут класса.

При выборе раздела с HTML-содержимым Visual Studio добавит элемент или (в зависимости от того, какой тип содержимого был выделен) и установит его атрибут класса.

Чтобы настроить способ работы окна Apply Styles, щелкните на кнопке Options. Например, можно сделать так, чтобы предварительный просмотр стилей выполнялся в другом порядке, или чтобы в него включались только те стили, которые используются в текущей странице.

Visual Studio предоставляет еще несколько средств для работы с таблицами стилей. Ниже перечислены те из них, которые могут помочь при повседневной работе со стилями:

Окно Manage Styles

В этом окне в одном списке можно бегло просмотреть все стили, примененные в текущей веб-странице. Чтобы открыть это окно, откройте веб-страницу и выберите пункт меню View --> Manage Styles. В этом окне можно просмотреть описание стиля (для этого понадобится навести указатель мыши на стиль), отредактировать его (щелкнув на стиле правой кнопкой мыши и выбрав в контекстном меню пункт Go То Code) или разработать стиль с помощью инструмента для создания стилей (щелкнув на стиле правой кнопкой мыши и выбрав в контекстном меню пункт Modify (Изменить)).

Панель инструментов Style Sheet

Эта панель инструментов удобна при разработке таблицы стилей; она содержит кнопки для изменения существующего стиля или добавления нового. Чтобы отобразить эту панель, щелкните правой кнопкой мыши на панели инструментов и отметьте пункт Style Sheet.

Окно CSS Properties

Это окно позволяет просмотреть стиль во всех его деталях и изменить его свойства форматирования. Чтобы открыть его, выберите пункт меню View --> CSS Properties. Найдите элемент с назначенным ему стилем и выберите его на поверхности проектирования веб-страницы. Окно CSS Properties отобразит детальный список всех свойств стиля CSS, упорядоченный по группам и подгруппам, который похож на список свойств веб-элемента управления в окне Properties:

Если к выбранному в данный момент времени элементу применяется более одного правила стиля, окно CSS Properties отобразит список всех правил стилей, упорядоченных по приоритету. Затем можно выделить одно правило, чтобы просмотреть или отредактировать его. Свойства, которые заданы в родительском элементе, но которые не применяются к выбранному в данный момент времени элементу (либо потому, что не наследуются, либо по причины переопределений другим стилем), отображаются перечеркнутыми красной линией.

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense "из-коробки".

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:

Последний, впрочем, может быть заменен на XO.

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве "бекенда" он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Align

Beautify

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. :)

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов "звездочками". К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

Читайте также: