МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
федеральное государственное автономное образовательное учреждение высшего образования
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»
ИНСТИТУТ НЕПРЕРЫВНОГО И ДИСТАНЦИОННОГО ОБРАЗОВАНИЯ
КАФЕДРА 41
|
ОЦЕНКА
ПРЕПОДАВАТЕЛЬ
старший преподаватель |
|
|
|
Н. А. Соловьева |
должность, уч. степень, звание |
|
подпись, дата |
|
инициалы, фамилия |
ПРАКТИЧЕСКАЯ РАБОТА №2
|
ПРИМЕНЕНИЕ КАСКАДНЫХ ТАБЛИЦ СТИЛЕЙ
|
по дисциплине: Основы профилизации |
РАБОТУ ВЫПОЛНИЛ
СТУДЕНТ ГР. № |
Z9411 |
|
|
|
Р. С. Кафка |
|
номер группы |
|
подпись, дата |
|
инициалы, фамилия |
Студенческий билет № |
2019/3603 |
|
|
|
|
Санкт-Петербург 2022
Цель работы: применение каскадных таблиц стилей (css) при оформлении HTML-страниц.
Задание:
HTML-страницы, разработанные в рамках лабораторной работы № 1, оформить с применением каскадных таблиц стилей. Выполнить задания:
Использовать три варианта подключения таблиц css:
- связные таблицы стилей (отдельный внешний файл)
- глобальные таблицы стилей (блок css в файле html (тег style))
- локальные таблицы стилей (локально для одного тега (атрибут style)).
В таблицах
- оформить границы;
- в одну из ячеек вставить картинку, сохранив при этом выравнивание в таблице.
Использовать следующие технические средства:
- селекторы: тегов, классов, идентификаторов, составной;
- указание размера: в пикселях, в миллиметрах, через процент;
- указание цвета: слово, шестнадцатеричный формат, десятичный формат.
Выполнить задание по индивидуальному варианту (Таблица1).
Вариант оформления таблицы и списка №8:
Оформление таблицы: Прокрутка в таблице.
Оформление списков: Раскрывающийся список.
Ход работы:
1. Различные способы подключения таблиц CSS.
1.1. Для описания стилистической составляющей сайта создадим специальный файл с расширением .css. Внутри вкладки, представленной на рисунке 1, будем менять внешний вид элементов страницы, используя селекторы различных типов.
|
Рисунок 1 – Файл с расширением .css |
Чтобы изменения, внесенные в данном файле, отображались на нашем сайте, необходимо его подключить. Для этого в HTML-документе в блоке <head> требуется указать ссылку на созданный файл с помощью тега <link> и атрибутов href, real, type. Общий вид инструкции: <link href="Style_1.css" rel="stylesheet">.
1.2. Другой способ подключения каскадных таблиц стиля – это встраивание их в раздел <style>. Данный блок должен располагаться во вкладке <head> HTML-документа.
Общий вид программных инструкций для подключения внутреннего стиля:
<head>
<style>
…
</style>
<meta charset="utf-8">
</head>
1.3. Последний способ подключения таблиц стиля – описание внутри открывающего тега элемента с помощью атрибута <style>.
Элементам на странице, которые располагаются внутри блока <body>, можно добавить инструкцию style. Значением этого атрибута могут быть свойства и параметры CSS, которые будут применены к выбранному объекту.
Например, попробуем разместить на странице изображение слева от текстового блока. Для этого пропишем следующую строку: <p style="border: 4px double black; background: #fc3; padding: 10px">. Атрибут style задает тексту двойную рамку чёрного цвета, фон и отсутаы. Результат выполнения инструкции приведен на рисунке 2.
|
Рисунок 2 – Пример применения встроенных стилей |
2. Оформим таблицу «Поколения ЭВМ» и в ячейки добавим изображения.
Чтобы таблица сохранила презентабельный внешний вид, воспользуемся каскадными таблицами стиля, применяя их именно к этому объекту через составной селектор Отметим атрибут height. Программные инструкции в блоке <style> имеют следующий вид:
td img{
height: 10mm;
}
Внешний вид оформленной таблицы приведен на рисунке 3.
|
Рисунок 3 – Формирование таблицы с изображением в ячейке |
3. Применение различных технических средств.
3.1. С помощью селекторов можно выбирать объекты, на которые будут распространяться заданные стили. Селекторы прикрепляются к элементам с помощью указания тегов, классов, идентификаторов. Существуют также составные селекторы.
Селекторы элементов позволяют форматировать все элементы данного типа на странице сайта.
Попробуем задать настройки границ таблиц на первой странице нашего сайта. Для этого в блоке css пропишем следующий код:
table {
color:black;
border-radius: 1%;
border: 2px double;
}
th {
background: #fc0;
padding: 5px;
border: 1px solid grey;
}
td {
background: rgb(255, 244, 235);
padding: 5px;
border: 1px solid grey;
} Результат работы данных инструкций приведен на рисунке 4.
|
Рисунок 4 – Стиль таблиц на первой странице сайта |
Обратим внимание, что цвет был определен в rgb формате. Подобная запись представляет собой обозначение rgb, за которым сразу следуют три значения цвета через запятую – красный, зелёный, синий. Минимальное обозначение – 0, максимальное - 255.
Параметр border задает толщину границы таблицы, её величина задана в пикселях.
3.2. Зададим настройки внешнего вида содержания элементов списка и заголовков на второй странице нашего сайта. Чтобы выделить именно эти объекты, воспользуемся идентификаторами. Так как каждый элемент содержания ссылается на идентификатор, то можем использовать этот атрибут также для настройки.
Код HTML:
<h2>Содержание</h2>
<ul id="content">
<li><a href="#micro">Что такое микроэлектроника</a></li>
<ul>
<li><a href="#pokoleniye1">Поколения ЭВМ и элементная база</a></li>
<li><a href="#pokoleniye2">Второе поколение ЭВМ 1955 – 1970 гг</a></li>
<li><a href="#pokoleniye3">Третье поколение ЭВМ 1965 – 1980 гг</a></li>
<li><a href="#pokoleniye4">Четвертое поколение ЭВМ 1980 – настоящее время</a></li>
</ul>
<li><a href="#elembaza">Элементная база бытовой электроники</a></li>
</ul>
Пример заголовков в HTML:
<h2 id="pokoleniye1">Поколения ЭВМ и элементная база</h2>
В том же файле в разделе <style> пропишем следующие свойства:
#micro, [href="#micro"] {
color:red;
font-weight:bold;
}
#pokoleniye1, [href="#pokoleniye1"] {
color:orange;
font-weight:bold;
}
#pokoleniye2, [href="#pokoleniye2"] {
color:rgb(158, 158, 0);
font-weight:bold;
}
#pokoleniye3, [href="#pokoleniye3"] {
color:green;
font-weight:bold;
}
#pokoleniye4, [href="#pokoleniye4"] {
color: blue;
font-weight:bold;
}
#elembaza, [href="#elembaza"]{
color: blueviolet;
font-weight:bold;
}
С помощью приведенных инструкций задали жирный текст и указали её цвет словом.
Результат применения данного стиля приведен на рисунках 5-6.
|
Рисунок 5 – Задание стиля заголовков внутри списка
|
Рисунок
6 – Задание стиля заголовков4. Выполнение заданий по индивидуальному варианту.
4.1. Настроим в таблице прокрутку.
HTML код таблицы заключим в тег <div> чтобы работать непосредственно с ним. Добавим класс и назовём его «container».
<div class="container">
<table>
…
</table>
</div>
В CSS напишем следующие параметры для класса:
.container{
height: 250px;
overflow-y: scroll;
}
Таким образом мы ограничили высоту блока div и включили прокрутку по вертикальной оси.
Результат выполнения описанных команд приведен на рисунке 6.
|
Рисунок 6 – Прокрутка таблицы |
Разработаем раскрывающийся список.
В HTML коде создадим новый блок div и добавим туда тег select для добавления раскрывающегося списка:
<div class="city">
<p>Из какого вы города? </p>
<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>
</div>
Добавим оформления в CSS файле:
.city {
border: 4px double black;
background: rgb(126, 246, 255);
padding: 10px 20px 30px 50px;
margin-right: 70%;
}