Начало работы с веб-разработкой с помощью Visual Studio Code
Выполните начальные действия по разработке веб-сайтов, создав простой веб-проект в Visual Studio Code, содержащий веб-страницу, CSS-файл и файл JavaScript. Узнайте, как использовать средства разработчика в браузере для проверка вашей работы.
Цели обучения
В этом модуле вы узнаете, как:
- Создавать базовую веб-страницу с помощью HTML.
- Применять стили к элементам страницы с помощью CSS.
- Создавать темы с помощью CSS.
- Добавление возможности переключения между темами с помощью JavaScript
- Проверять веб-сайт с помощью средств разработчика браузера.
Предварительные требования
- Microsoft Visual Studio Code
- Опыт работы с одним или несколькими языками программирования и языком разметки, например HTML
- Компьютер под управлением одной из следующих операционных систем:
- Windows: Windows 10 или 11
- Mac: macOS 10.15 или более поздней версии
- Linux: Ubuntu, Debian, Red Hat, Fedora или SUSE
Подготовка проекта 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-страниц.
Как в visual studio создать css
Если до этого урока вы пробовали верстать только с помощью онлайн-сервисов, то настало время установить редактор кода, который позволит сохранять результаты вашей работы на компьютере или сервере.
На самом деле, в отличие от многих языков программирования для вёрстки возможно использовать лишь один «Блокнот» или другой стандартный текстовый редактор в вашей системе. Именно так и верстали сайты в 90-х — начале 2000-х. Ведь HTML и CSS отрабатывают в браузере, а это значит, что наша задача — верно дать ему данные.
И сейчас вы можете сделать именно так, но развитие редакторов принесло множество полезных функций, которые недоступны в стандартных текстовых редакторах:
- Подсветка HTML и CSS. С помощью подсветки можно просто отделять одни части от других. Например, в CSS подсветка разграничивает селекторы, названия свойств и их значения.
- Автодополнение кода. Начав вводить нужное свойство или значение редактор предложит вам возможные варианты. Это похоже на то, как было во вкладке Styles в Chrome DevTools.
- Валидация кода. То есть его проверка на корректность. Используя HTML, очень просто забыть закрыть блочный элемент. Браузеры как могут стараются сглаживать такие ошибки и автоматически закрывать блоки, но они не всегда могут угадать ваш замысел.
Visual Studio Code
В настоящее время есть множество разных редакторов. В этом уроке мы остановимся на одном из самых популярных решений от компании Microsoft — Visual Studio Code. Это мощный инструмент, который можно использовать не только для вёрстки, но и для программирования на любом языке. После его настройки вы получите инструмент, с помощью которого сможете как верстать, так и программировать.
Скачать редактор вы можете с официального сайта. С самого начала он хорошо настроен для работы с HTML и CSS, поэтому приступать к экспериментам можно уже сейчас.
Просто создайте новый файл с помощью комбинации Ctrl + N и сохраните его с расширением .html. Например, index.html. Скопируйте следующий HTML-код и посмотрите, как редактор подсветит все HTML-теги
Попробуйте добавить любой HTML-элемент в эту разметку и вы увидите, что редактор начнёт предлагать вам различные варианты тегов, которые подходят под ту комбинацию символов, которую вы уже ввели.
Обратите также внимание на то, что закрывающий тег section стал красного цвета. Так редактор нам подсказывает, что в разметке есть ошибка. Она связана с тем, что пока мы не дописали тег и не закрыли его.
В качестве интересного примера попробуйте в пустом HTML-файле ввести символ ! и нажать клавишу Enter . Вы получите базовую разметку HTML-документа со всеми основными тегами и мета-тегами, которые используются в реальных проектах.
Это возможно благодаря встроенному в Visual Studio Code плагину Emmet. С работой этого плагина мы познакомимся в одном из следующих уроков.
Теперь создайте любой файл с расширением .css. Например, style.css. Редактор кода так же автоматически определит, что в этом файле идёт работа с CSS, и подключит специальную подсветку для данного языка.
Вы можете увидеть, что селектор, название свойства и его значение выделены тремя разными цветами. Это отлично помогает ориентироваться в больших CSS-файлах.
Это основные моменты при работе с HTML и CSS в редакторе Visual Studio Code, которые пригодятся вам в самом начале. При работе с этим редактором вы также познакомитесь с прекрасной системой установки плагинов. Так вы сможете настроить редактор под свои нужды и задачи.
Другие редакторы
Конечно же, выбор редактора для работы не ограничен только одним решением. В настоящее время на рынке достаточно много различных редакторов кода, которые вы можете использовать. Среди них есть как платные, так и бесплатные. Среди отличных бесплатных решений также есть:
- Atom. Мощный редактор, который схож во многих моментах с Visual Studio Code.
- Sublime Text — частично бесплатный редактор. Может быть достаточно сложен в первоначальной настройке, но всё равно он заслуженно любим многими программистами за небольшой вес и стабильную работу.
- Vim — решение для любителей пощекотать себе нервы. Невероятно лёгкий и при этом сложный редактор. За всем этим стоит возможность гибкой настройки. Редактору уже скоро стукнет 30 лет, но он пользуется невероятной популярностью.
- Brackets — редактор, рассчитанный на работу с HTML, CSS и Javascript. Не настолько расширяемый, как другие, но свою работу выполняющий хорошо.
Вы можете попробовать различные редакторы и остаться на том, который вам больше всего нравится. Запомните, что редактор — не более чем инструмент. Он не сделает за вас всю работу, поэтому достаточно один раз привыкнуть к любому редактору и менять его нет смысла.
Урок 1. Начало работы с Visual Studio Code. Создание дизайна страниц
В процессе выполнения всех уроков, вами будет создан полноценный веб-сайт юридической конторы.
Структура веб-страниц представлена на рисунке 1.
1 — Структура итогового веб-сайта
Цель: ознакомиться с Visual Studio Code, а так же создать страницу с дизайном для всего сайта.
– Исследовать рабочую область.
– Научиться создавать новую страницу, используя содержимое HTML5, CSS.
– Научиться сохранять документ.
– Научиться изменять название страницы и текстовые заголовки.
– Научиться добавлять изображения на передний план и в качестве фоновых изображений.В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 1.1):
Рисунок 1.1 — Предварительный просмотр веб-страницы
Подготовка к созданию проекта, изучение редактора Visual Studio Code. (Установка Visual Studio Code)
Для создания проекта «Юридическая контора «Советник»» нам понадобится рабочая папка под проект.
Создайте папку на локальном диске посредствам проводника или другого файлового менеджера.Для реализации проекта в качестве редактора вы будете использовать современный инструмент — Visual Studio Code.
Visual Studio предлагает общедоступные инструменты и гибкость, необходимые для создания и развертывания современных веб-приложений.– HTML5, CSS3, LESS/SASS, JavaScript
– ASP.NET, Node.js, Python, JavaScript
– NuGet, Grunt, Gulp, Bower, npm.
– Платформа и среда выполнения с открытым кодом.
– Развертывание в Windows, Azure, Mac или Linux.
– Бесплатно для небольших групп и разработчиков открытого кода.– Запустите Visual Studio Code. В боковой панели навигации кликните по иконке страниц.(рисунок 1.2).
1.2 — Боковая панель
– В появившемся меню, кликните на кнопку Открыть папку и в открывшемся окне выберите созданную заранее папку Sovetnik. Кликните кнопку Выбор папки.
1.3 — Боковая панель. Выбранная папка
– Для создания первой страницы сайта design.html наведите мышку на область названия папки(проекта) SOVETNIK и кликните значок . В появившейся форме введите design.html
1.4 — Создан файл design.html
Наполнение папки Sovetnik
Для создания проекта, нам понадобятся дополнительные файлы: CSS, JS, мультимедиа.
– Для этого скачайте в созданную вами папку, папки и файлы из папки work_files.
1.5 — Папка Sovetnik
– Откройте редактор. Папки появились в навигационном меню проекта. Они будут задействованы позже.
1.6 — Название страницы
Создание дизайна сайта.
Для создания дизайна сайта нами будет подключен файл CSS, в котором указаны свойства для элементов HTML5. Изучение CSS в данном электронном учебном пособии не предусмотрен.
– Заполните файл design.html согласно стандартной структуре HTML5 документа, как на рисунке 1.7:
1.7 — Стандартная структура
– Между тегами title введите название страницы ЮК Советник (рисунок 1.8).
1.8 — Название страницы
– Следующим шагом будут meta и link данные. Между тегами head добавьте следующие строки (рисунок 1.9):
1.9 — Добавлены meta и link данные
Данным кодом вы к файлу design.html подключили css файл со свойствами для элементов HTML5, а так же meta name=»viewport» для того ,что бы сообщить браузеру, что ваша страница предназначена для правильного поведения области просмотра как на персональных компьютерах ,так и на мобильных устройствах.
– Для отображения страницы как на примере, нужно прописать id для тэгов и разделительную полосу при помощи тега hr.
1.10 — Выделеные области нужно добавить на свою страницу.
– Добавим логотип на страницу. Логотип у вас используется в формате SVG, если же у пользователя поддерка SVG не предусмотрена браузером выводиться будет альтернативное изображения в формате PNG.
Вся область логотипа и подпись снизу будет обернута DIV с именем center для того, что бы все объекты внутри распологались по центру. Клик по картинке будет переводить вас на главную страницу сайта (рисунок 1.11).
1.11 — Код добавления логотипа на страницу.
1.12 — Логотип технологии SVG и формата PNG.
– Следующим шагом будет создание навигации на сайте. Стиль навигации уже прописан в CSS файле. Вам осталось добавить ссылки между тегоми nav. В конце добавим div clearfix. Clearfix — метод отмены действия float без изменения структуры HTML-документа (рисунок 1.13).
1.13 — Код ссылок для вставки навигации
– Добавьте копирайт в подвал сайта между тегами footer (рисунок 1.14).
1.14 — Добавлены meta и link данные
– Дизайн готов. Добавим обзац с текстом Контент, для визуального восприятия области для контента.
1.15 — Выделеные области нужно добавить на свою страницу.
Поздравляем! Вы создали свою первую веб-страницу на HTML5 (рисунок 1.16): добавили текст и цвета, добавили изображения и подключили CSS, а также быстро создали профессиональную веб-страницу. Вы выполнили предварительный просмотр страницы в браузере (рисунок 1.16).
1.16 — Предварительный просмотр веб-страницы
Контрольные вопросы
1. Какой редактор используется в уроках для редактирования страниц HTML5?
2. Между какими тегами размещается пара тегов ?
3. Какой метатег сообщает браузеру, что сайт предназначен для просмотра как на персональных компьютерах, так и на мобильных устройствах?
4. При добавлении логотипа была использована технология SVG, что будет отображаться браузером, если браузер не поддерживает SVG?
5. Между какими тегами распологаются ссылки навигационного меню сайта?Подготовка проекта CSS и HTML с помощью Visual Studio Code
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Для работы с 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-страниц.
Использование CSS
Чтобы придать дизайну веб-сайта завершенный вид, прежде всего, нужно выработать единообразный визуальный стиль. Другими словами, понадобится стандартизировать каждый элемент дизайна. Если желаете настроить шрифт или границы кнопки, то эти изменения должны затронуть каждую кнопку веб-сайта. Сохранение единообразия не всегда просто. Чтобы упростить эту задачу, можно воспользоваться каскадными таблицами стилей (Cascading Style Sheets — CSS) или темами ASP.NET.
Каскадные таблицы стилей обеспечивают межплатформенное решение для форматирования веб-страниц, которое работает в 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-дескрипторам автоматически. Для этого в качестве имени правила должно указываться имя дескриптора. Ниже показано правило, которое затрагивает все дескрипторы на странице, использующей таблицу стилей:
Несмотря на кажущуюся полезность автоматического применения таблицы стилей, в ASP.NET делать это не особенно удобно, поскольку обычно придется иметь дело с элементами управления, а не отдельными 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 отобразит список всех правил стилей, упорядоченных по приоритету. Затем можно выделить одно правило, чтобы просмотреть или отредактировать его. Свойства, которые заданы в родительском элементе, но которые не применяются к выбранному в данный момент времени элементу (либо потому, что не наследуются, либо по причины переопределений другим стилем), отображаются перечеркнутыми красной линией.
Применение таблиц стилей позволяет решить сразу две задачи. Во-первых, это обеспечивает стандартизацию макета, чтобы можно быстро форматировать новые страницы, не допуская возникновения мелких ошибок или различий. Во-вторых, это отделяет информацию о форматировании, благодаря чему она вообще не появится на веб-страницах. Это позволит модифицировать формат, не отслеживая каждую страницу и не компилируя код повторно. И хотя CSS не являются одним из стандартов .NET, Visual Studio все же обеспечивает широкую их поддержку.
Похожие публикации:
- Как проверить прошилась ли arduino
- Как прошить atmega8 через arduino
- Как развернуть картинку в css
- Как разместить текст по центру css