Каскадные таблицы стилей. Практическая работа №2 каскадные. Отчет по практическому заданию 2 Каскадные таблицы стилей
Скачать 471.66 Kb.
|
Федеральное государственное автономное образовательное учреждение высшего образования «СИБИРСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ» Институт Космических и информационных технологий институт Кафедра «Информатика» кафедра ОТЧЕТ ПО ПРАКТИЧЕСКОМУ ЗАДАНИЮ №2 «Каскадные таблицы стилей» тема Преподаватель А.К. Погребников подпись, дата инициалы, фамилия Студент КИ17-16Б 031721 817 Д.А. Петров номер группы, зачетной книжки подпись, дата инициалы, фамилия Красноярск 2019 2 1 Цель работы Изучить основы каскадных таблиц стилей CSS. 2 Задание Создать стилевой файл. Используя связывание, подключить его в документ; используя таблицы стилей, изменить оформление текста в нескольких элементах; используя таблицы стилей, изменить цвет и фон в нескольких элементах; используя таблицы стилей, изменить свойства шрифта (написание, размер, оформление) в нескольких элементах; оформить нумерованные и ненумерованные списки с помощью стилей; продемонстрировать селекторы с выборкой по элементу, классу, идентификатору, комбинированные; продемонстрировать различные способы применения стилей к документу (внедрение, связывание, встраивание); создать стилевой файл с альтернативным оформлением (сохранить его таким образом, чтобы можно было применить либо первый, либо второй стилевой файлы). 3 3 Ход работы Начнем с создания стилевого файла. Для этого создадим в папке с HTML- документом файл с расширением .css. Сразу же подключим его в документ, добавив в содержимое тега HEAD тег LINK с заданными атрибутами REL (отношение между документом и файлом), HREF (путь к файлу) и TYPE (тип данных подключаемого файла) (Приложение А.1). В текстовом файле изменим оформление текста в трех случаях – текст находится в теге P, в теге DIV с значением атрибута ID равным “content” или является элементом нумерованного списка (Приложение А.2). В первом случае текст будет иметь цвет peru, шрифт Comic Sans MS, размер 20px и максимальную толщину (Рисунок 1), во втором – цвет burlywood, шрифт Calibri, размер 24px и минимальную толщину (Рисунок 2), а в третьем – цвет lightblue, шрифт Impact, размер 26px (Рисунок 3). Рисунок 1 – Параграф Рисунок 2 – Контейнер DIV 4 Рисунок 3 – Элементы нумерованного списка Для нумерованных и ненумерованных списков зададим значение background – black и white соответственно – а также list-style-type – upper-roman и circle. Для элементов этих списков тоже изменим это значение – на darkslategray и black – а также изменим цвет на lightblue и deepskyblue соответственно (Приложение А.3, Рисунки 3 и 4). Рисунок 4 – Ненумерованный список 5 При задании всех этих правил были продемонстрированы селекторы с выборкой по элементу, идентификатору и комбинированные. Необходимо теперь применить селекторы с выборкой по классу. Для этого создадим правило для класса centered, представители которого располагаются по центру страницы (Рисунок 5). Также создадим правила для псевдоклассов link и visited тега A (Приложение А.4, Рисунок 6). Рисунок 5 – Изображения по центру страницы Рисунок 6 – Внешний вид ссылок 6 До этого все правила записывались в отдельный файл, который подключался к HTML-документу, т.е. использовалось связывание. Разместим теперь в содержимом HEAD тег STYLE, в котором изменим цвет ссылок на red (обычная ссылка) и crimson (посещенная) (Приложение А.5). В стилевом файле уже было изменение этих цветов, однако при запуске видно, что приоритет у внедренных правил (Рисунок 7). Используем также встраивание правил для тега P – поменяем размер шрифта и его толщину (Приложение А.6, Риуснок 8). Рисунок 7 – Внешний вид ссылок после внедрения Рисунок 8 – Результат встраивания Наконец, создадим альтернативый стилевой файл, в котором опишем правила для другого оформленя страницы, и разместим его в той же папке, где находится первый. 4 Вывод Были изучены основы каскадных стилевых таблиц, были получены навыки оформления WEB-страницы при помощи CSS. 7 ПРИЛОЖЕНИЕ А (обязательное) Листинги Листинг 1 – Подключение стилевого файла Листинг 2 – Изменение оформления текста ol li { background: darkslategray; color: lightblue; font-family: Impact; font-size: 26px; } p { color: peru; font-weight: 900; font-family: Comic Sans MS; font-size: 20px; } #content { border: solid 3px silver; color: burlywood; font-weight: 100; font-family: Calibri; font-size: 24px; } Листинг 3 – Оформление списков ul { background: white; list-style-type: circle; } ul li { background: black; color: deepskyblue; 8 } ol { background: black; list-style-type: upper-roman; } ol li { background: darkslategray; color: lightblue; font-family: Impact; font-size: 26px; } Листинг 4 – Правила псевдоклассов тега A и класса .centered a:link { color: greenyellow; } a:visited { color: green; } .centered { display: block; margin-left: auto; margin-right: auto; } Листинг 5 – Внедрение Листинг 6 – Встраивание Dmitriy Petrov |