Как добавить css в html visual studio
Перейти к содержимому

Как добавить css в html visual studio

  • автор:

Учебник: добавление пользовательского CSS на сайт

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

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

Из этого руководства вы узнаете, как выполнять следующие задачи:

  • Загружать собственный файл CSS
  • Изменить CSS в Visual Studio Code для Интернет

Предварительные условия

  • Подписка или пробная версия Power Pages. Получите пробную версию Power Pages здесь.
  • Создание сайта Power Pages. Создайте сайт Power Pages.
  • Файл пользовательской темы, созданный с использованием предпочитаемого вами CSS-редактора.

Любая создаваемая пользовательская тема должна быть совместима с Bootstrap v3.

Добавление пользовательского CSS на сайт

В следующем видео показано, как применить пользовательский код CSS на сайте.

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

    Чтобы создать образец, в своем предпочитаемом CSS-редакторе создайте файл пользовательской темы button_shadow.css и сохраните его.

.button1
  • Переход к Power Pages.
  • Выберите сайт, на который вы хотите добавить пользовательскую тему, и выберите Изменить.
  • Откройте рабочую область Стили.
  • Выберите тему, выберите . (многоточие) и выберите Управление CSS. Откройте панель управления CSS из рабочей области стилей.
  • В разделе Пользовательский CSS выберите Отправить и выберите свой пользовательский файл CSS. Вы можете отправить только один файл CSS за раз, но можно отправить несколько файлов. Если несколько файлов CSS обновляют один и тот же атрибут, будет применяться атрибуты в файле CSS внизу списка. Вы можете настроить порядок ваших пользовательских файлов CSS.
  • Вы должны сразу же увидеть результаты обновлений на холсте страницы. Эффект тени от кнопки из отправленного файла CSS.
  • Вы можете отключить свои пользовательские файлы CSS или изменить их порядок. Файл в конце списка имеет приоритет над остальными. Отключение файла CSS или изменение порядка файлов.
  • Вы можете редактировать CSS-файл напрямую, выбрав многоточие (. ) и выбрав Изменить код. При этом откроется редактор Visual Studio Code for the Web. Выберите CTRL-S, чтобы сохранить изменения. Редактирование файла CSS в Visual Studio Code for the Web.
  • Выберите Синхронизация в студии дизайна, чтобы обновить CSS и просмотреть изменения.
  • Выберите Предварительный просмотр для просмотра пользовательской темы на сайте.
  • Чтобы полностью удалить пользовательскую тему, удалите запись веб-файла в приложении «Управление порталом».

    Редактор для HTML: пишем код, чтобы было удобно

    Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.

    Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если Mac OS или Linux — нажмите Other platforms.

    Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.

    Шаг 2. Запускаем редактор и осматриваемся

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

    Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

    По шагам на скриншоте:

    1. Add workspace folder — открывает меню выбора папки.
    2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
    3. Нажмём Add.

    После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.

    Шаг 3. Добавляем файлы

    После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.

    Шаг 4. Делаем работу удобнее

    Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.

    Шаг 5. Добавляем код

    Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.

       Сайт начинающего верстальщика  
    Взгляд упал на кота.
    Подвал сайта

    Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.

    Шаг 6. Запускаем код и смотрим на результат

    Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html . Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.

    Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.

    Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.

    После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.

    Чтобы запустить код, нажмите кнопку Go Live на нижней панели.

    Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.

    Что мы сделали

    1. Установили и настроили редактор кода.
    2. Создали рабочую папку и добавили туда файлы нашего проекта.
    3. Научились редактировать и сохранять файлы с кодом.
    4. Установили расширение, чтобы сразу видеть результат вёрстки.

    «Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

    Подготовка проекта CSS и HTML с помощью Visual Studio Code

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

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

    Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

    Для работы с 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-страниц.

    Просмотр HTML-файла в браузере с помощью Visual Studio Code

    Часто разработчикам, особенно начинающим, приходится столкнуться с задачей просмотра HTML-файла в браузере. Например, они создали веб-страницу, написали для нее код и теперь хотят увидеть, как она выглядит в реальном времени. В некоторых текстовых редакторах, таких как Notepad++, есть функция «Запустить в браузере». Но что делать, если используется Visual Studio Code от Microsoft?

    В Visual Studio Code такой функции из коробки нет, но есть возможность установить расширение, которое позволяет открывать HTML-файлы в браузере.

    Одно из таких расширений называется open in browser . Чтобы установить его, нужно сделать следующее:

    1. Открыть Visual Studio Code.
    2. Перейти на вкладку «Extensions» (или нажать Ctrl+Shift+X ).
    3. В поисковой строке ввести open in browser и нажать Enter .
    4. Найти расширение open in browser в списке и нажать Install .

    После установки расширения, можно будет открыть HTML-файл в браузере следующим образом:

    1. Открыть нужный HTML-файл в Visual Studio Code.
    2. Нажать правой кнопкой мыши в области редактора кода и выбрать Open in Default Browser или Open in Other Browsers если нужно выбрать браузер, отличный от браузера по умолчанию.

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *