Лабораторные работы. Краева / Web-технологии. Отчет №2
.pdfМинистерство цифрового развития, связи и массовых коммуникаций Российской Федерации
Федеральное государственное бюджетное образовательное учреждение Высшего образования «Санкт-Петербургский государственный университет телекоммуникаций им. Проф. М. А. Бонч-Бруевича» (СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Программной инженерии и вычислительной техники
Лабораторная работа №2
По дисциплине «Web-технологии»
На тему «Подключение стилей CSS к сайту»
Выполнил: Студент 3-го курса Дневного отделения Группы ИКПИ-32 Яковлев М. А. Преподаватель: Краева Е. В.
Санкт-Петербург 2025
Цель работы
Цель работы — изучить методы подключения стилей CSS.
Ход выполнения
Упражнение №1. Стили через атрибут
Был создан файл с базовой структурой html5. Добавлен текст о пользе овощей и фруктов, разбитый на абзацы с помощью тега <p>.
К первому абзацу применены стили через атрибут style: <p style=”margin: 10px 0; padding: 8px; border: 1px solid #999; color: blueviolet;”>
Упражнение №2. Стили через тег <style>
Добавлен новый абзац текста с помощью тега <div>.
В секцию <head> добавлен тег <style>, внутри которого описаны стили. В тело документа добавлены новые элементы, к которым применены созданные стили через атрибуты class и id.
Стиль текста изменился на следующий:
Упражнение №3. Стили через подключение внешнего файла
Создан внешний файл стилей style.css. В него добавлено правило для класса
.paragr.
Файл стилей подключен к HTML-документу с помощью тега <link>.
Стиль текста изменился на следующий:
Заключение
В ходе выполнения лабораторной работы были изучены три способа подключения стилей CSS к HTML-документу: через атрибут style, через тег <style> и через внешний файл.
Контрольные вопросы
№1. Если к одному тегу написаны стили всеми тремя способами, то в каком порядке и с каким приоритетом они будут применяться?
Стиль, заданный через атрибут style, имеет наивысший приоритет. Далее следуют стили, объявленные в теге <style> в секции <head>. Стили из внешнего файла имеют наименьший приоритет.
№2. В чем особенности каждого из способов подключения стилей?
·Атрибут style: Применяются непосредственно к одному элементу. Имеют высший приоритет, но усложняют чтение кода, увеличивают его объем и не позволяют повторно использовать стили.
·Тег <style>: Позволяют описать стили для всей страницы в одном месте. Удобны для уникального оформления отдельной страницы, но не позволяют использовать одни и те же стили на разных страницах сайта без копирования кода.
·Внешние стили (файл .css): Наиболее предпочтительный способ. Стили хранятся в отдельном файле, который можно подключить к любым страницам сайта. Это обеспечивает единообразие оформления, легкость внесения изменений и уменьшение объема кода на каждой странице.