Главная страница
Навигация по странице:

  • ОТЧЕТ ПО ПРАКТИЧЕСКОМУ ЗАДАНИЮ №2

  • ПРИЛОЖЕНИЕ А (обязательное) Листинги

    		•

    Каскадные таблицы стилей. Практическая работа №2 каскадные. Отчет по практическому заданию 2 Каскадные таблицы стилей


    Скачать 471.66 Kb.
    НазваниеОтчет по практическому заданию 2 Каскадные таблицы стилей
    АнкорКаскадные таблицы стилей
    Дата06.03.2023
    Размер471.66 Kb.
    Формат файлаpdf
    Имя файлаПрактическая работа №2 каскадные.pdf
    ТипОтчет
    #972308

    Федеральное государственное автономное образовательное учреждение высшего образования
    «СИБИРСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»
    Институт Космических и информационных технологий институт
    Кафедра «Информатика» кафедра
    ОТЧЕТ ПО ПРАКТИЧЕСКОМУ ЗАДАНИЮ №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

    написать администратору сайта