Лабораторные работы. Краева / Web-технологии. Отчет №2
.docxМинистерство цифрового развития, связи и массовых коммуникаций Российской Федерации
Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Программной инженерии и вычислительной техники
Лабораторная работа №2
По дисциплине «Web-технологии»
На тему «Подключение стилей CSS к сайту»
Выполнил:
Студент 3-го курса
Дневного отделения
Группы ИКПИ-32
Яковлев М. А.
Преподаватель:
Краева Е. В.
Санкт-Петербург
2025
Цель работы
Цель работы — изучить методы подключения стилей CSS.
Ход выполнения
Упражнение №1. Стили через атрибут
Рисунок
1. Код программы
Рисунок
2. Отображение страницы
Упражнение №2. Стили через тег <style>
Рисунок
3. Дополнительный абзац текста
В секцию <head> добавлен тег <style>, внутри которого описаны стили. В тело документа добавлены новые элементы, к которым применены созданные стили через атрибуты class и id. [Рис. 4].
Рисунок
5. Отображение страницы
Рисунок
4. В секцию <head> добавлен тег <style>
Упражнение №3. Стили через подключение внешнего файла
Рисунок
6. Содержимое CSS-файла
оздан
внешний файл стилей style.css [Рис.
6].
Рисунок
7. Файл подключен к HTML-документу
Стиль текста изменился на следующий [Рис. 8]:
Рисунок 8. Отображение страницы
Заключение
В ходе выполнения лабораторной работы были изучены три способа подключения стилей CSS к HTML-документу: через атрибут style, через тег <style> и через внешний файл.
Контрольные вопросы
№1. Если к одному тегу написаны стили всеми тремя способами, то в каком порядке и с каким приоритетом они будут применяться?
Стиль, заданный через атрибут style, имеет наивысший приоритет. Далее следуют стили, объявленные в теге <style> в секции <head>. Стили из внешнего файла имеют наименьший приоритет.
№2. В чем особенности каждого из способов подключения стилей?
· Атрибут style: Применяются непосредственно к одному элементу. Имеют высший приоритет, но усложняют чтение кода, увеличивают его объем и не позволяют повторно использовать стили.
· Тег <style>: Позволяют описать стили для всей страницы в одном месте. Удобны для уникального оформления отдельной страницы, но не позволяют использовать одни и те же стили на разных страницах сайта без копирования кода.
· Внешние стили (файл .css): Наиболее предпочтительный способ. Стили хранятся в отдельном файле, который можно подключить к любым страницам сайта. Это обеспечивает единообразие оформления, легкость внесения изменений и уменьшение объема кода на каждой странице.