Тема: Оформление списков CSS . Цвета и краски CSS .
ПЛАН ЗАНЯТИЯ
Дисциплина: ОП.16 Основы web - технологий
Преподаватель: Машарова Р.В.
Курс: 2
Группа: 1ИСП-21
Специальность: Информационные системы и программирование
Дата: 21.04.2023
Время проведения: 13.30-15.00, 4 пара
Тема: Оформление списков CSS. Цвета и краски CSS.
Цель занятия:
Дидактическая: познакомиться с оформлением списков CSS. Цвета и краски CSS.
Развивающая: развивать логическое и критическое мышление, умение обобщать и синтезировать знания
Вид занятия лекция
Литература:
1. Храмцов П.Б., Брик С.А.,. Русак А.М., Сурин А.И., Основы web-технологий. Курс лекций. -3- е изд., пер. и доп. – Интернет-Университет Информационных Технологий, 2017. – 512 с.
2. Гаврилов М.В., Информатика и информационные технологии. Учебник для прикладного бакалавриата /М.В.Гаврилов, В.А.Климов. -4-е изд., пер. и доп. – М.: Юрайт, 2017. – 383с.
3. Новожилов О.П. Информатика. Учебник для прикладного бакалавриата /О.П.Новожилов. -3-е изд., пер. и доп. – М.: Юрайт, 2018. – 619с.
4. Симонович С.В. «Основы Информатики. Базовый курс» СПб: Питер 2018 год – 640 с.
Тема: Оформление списков CSS . Цвета и краски CSS .
1. Внешнее оформление списков
2. Позиционирование пунктов списка
3. Группировка стилей списков
4. Вложенные списки
5. Цвет текста
6. Цвет фона
7. Фоновые изображения
8. Группировка значений, задающих фон
При создании Web-документов возникает необходимость в организации списков. Стандартные спецификации языка html содержат определенный набор вариантов оформления списков, но, как правило, он не устраивает разработчиков Web-документов. Для решения данной проблемы была разработана методика, предлагающая оформление и позиционирование списков согласно дизайну разрабатываемого Web-документа.
1. Внешнее оформление списков
В CSS предусмотрено несколько способов внешнего оформления списков. Все они так или иначе определяют возможность применения различных маркеров для отделения одних пунктов списка от других. Использование контекстных селекторов позволяет назначать свои собственные стили подпунктам, "подподпунктам" и так далее по иерархии вложения.
Назначение стандартных типов маркеров происходит в соответствии с синтаксисом:
{list-style-type: значение}
Пример:
<html><head><title> Пример </title></head>
<body>
<ul>
<li style="list-style-type: disk"> Маркер - диск</li>
<li> Маркер - диск</li>
<li style="list-style-type: circle"> Маркер - кольцо</li>
<li> Маркер - кольцо</li>
<li style="list-style-type: square"> Маркер - квадрат</li>
<li> Маркер - квадрат</li>
<li style="list-style-type: none"> Нет маркера</li>
<li> Нет маркера</li>
</ul>
</body></html>
Назначение маркера наследуется, т.е. достаточно указать маркер для одного (например, для первого) пункта списка, и все последующие пункты будут так же отмечены этим маркером, пока не последует новое назначение. Результат, соответствующий примеру, показан на рисунке 6.1.
Рисунок 6.1 - Пример оформления списков
Аналогичным образом назначаются маркеры и для упорядоченных списков.
Пример:
<html><head><title> Пример </title>
<style type=text/css>
ol .lower-roman {list-style-type: lower-roman}
ol .upper-roman {list-style-type: upper-roman}
ol .lower-alpha {list-style-type: lower-alpha}
ol .upper-alpha {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol class=decimal>
<li>Арабские цифры</li>
<li>Арабские цифры</li>
</ol>
<ol class=lower-roman>
<li>Малые римские цифры</li>
<li>Малые римские цифры</li>
</ol>
<ol class=upper-roman>
<li>Большие римские цифры</li>
<li>Большие римские цифры</li>
</ol>
<ol class=lower-alpha>
<li>Строчные латинские буквы</li>
<li>Строчные латинские буквы</li>
</ol>
<ol class=upper-alpha>
<li>Прописные латинские буквы</li>
<li>Прописные латинские буквы</li>
</ol>
</body></html>
Кроме стандартных символов, в CSS в качестве маркера может быть использовано любое изображение, согласно синтаксису:
{list-style-image: url(имя_файла)}
Свойству list-style-image придается вид адресной ссылки URL, указывающей на месторасположение изображения.
Пример:
<html><head><title> Пример </title>
<ul style="list-style-image: url(bullit.gif)">
</style>
</head>
<body>
<ul>
<li>Первый</li>
<li>Второй</li>
</ul>
</body></html>
Результат исполнения кода показан на рисунке 6.2.
Рисунок 6.2 - Пример задания стиля для маркеров списка
В примере имеется ссылка на локальную машину, но использование URL предполагает возможность обращения к удаленным ресурсам. В этом случае запись назначения стиля будет выглядеть следующим образом:
<ulstyle="list-style-image: url(http://worker.inion.ru/bullit.gif)">
2. Позиционирование пунктов списка
С помощью свойства list-style-position определяется положение содержимого пунктов списка в пространстве, отведенном для всего списка. Для определения позиции в синтаксическую форму
{list-style-position: значение}
подставляется на выбор одно из значений - inside или outside.
Пример:
<html><head><title> Пример </title>
<ul style="list-style-position:inside">
</style>
</head>
<body>
<ul>
<li>Основы CSS<br>ComputerWeekly #1, 1998.</li>
<li>Работа со шрифтами<br>ComputerWeekly #2, 1998.</li>
<li>Оформление текстов<br>ComputerWeekly #3, 1998.</li>
</ul>
</body></html>
Рисунок 6.3 - Пример использования оформления списков с маркером внутри текста
Применение значения outside в этом же примере приведет к результату, представленному на рисунке 6.4.
Рисунок 6.4 - Пример использования оформления списков с маркером вне текста
Данные конструкции позволяют компенсировать отсутствие в CSS конструкции списка с определением (словарного списка), описываемого тегами DL, DT и DD языка HTML.
3. Группировка стилей списков
В CSS предусмотрена возможность придания создаваемому списку нескольких типов оформления сразу. Достигается это подстановкой в выражение, согласно синтаксису:
{list-style:значение1 значение2 значениеN},
сразу нескольких значений, определяющих тот или иной стиль, как это сделано в следующем примере.
Пример.
<html><title> Пример </title>
<ul style="list-style: inside url(bullit.gif)">
<li>Основы CSS<br>ComputerWeekly #1, 1998.</li>
<li>Работа со шрифтами<br>ComputerWeekly #2, 1998.</li>
<li>Оформление текстов<br>ComputerWeekly #3, 1998.</li>
</ul>
</html>
Результат исполнения кода показан на рисунке 6.5.
Рисунок 6.5 - Пример группировки стилей маркеров списка
На практике возможны случаи, когда пользователи сохраняют загруженные браузером страницы для последующего их просмотра. Если при этом в качестве маркеров списка использовались изображения, то сохраненный список останется без маркеров. Чтобы это исключить, маркеры-изображения дублируются маркерами-символами - дисками, кольцами или квадратами. Для этого совмещаются задания маркера-изображения и маркера-символа, согласно примеру:
ul {list-style: url(http://worker.inion.ru/bullit.gif) disk}
4. Вложенные списки
При программировании вложенных списков, следует обращать внимание на принципы наследования свойств между списками разного уровня, а также на порядок каскадирования, особенно при использовании контекстных селекторов.
Пример:
<style type="text/css">
ol.alpha li {list-style: upper-alpha}
ul li {list-style: disc}
</style>
Пример:
<html><head><title> Пример </title></head>
<style type="text/css">
ol.alpha li {list-style: upper-alpha}
ul li {list-style: disc}
</style>
<body>
<ol class=alpha>
<li>Основной список
<ul>
<li>Встроенный список
</ul>
</ol>
</body></html>
Невозможно маркировать основной список прописными латинскими буквами, а вложенный, неупорядоченный, список - дисками, поскольку на экране отобразится только стилевое решение, которое задано первым. Таким образом, списка будут промаркированы исключительно буквами. Решить эту проблему можно тремя способами. Во-первых, назначить стилевое решение непосредственно для пунктов списка, во-вторых, применить специальный селектор, определяющий порядок наследования.
Синтаксис:
тег1~тег2 {свойство: значение}
Данный селектор напоминает обычный контекстный селектор, только теги в нем разделены тильдой. Используя его, строго определяется порядок наследования, указывая при этом, что пункты именно основного списка будут промаркированы прописными латинскими буквами:
<style type="text/css">
ol.alpha ~ li {list-style: upper-alpha}
ul li {list-style: disc}
</style>
Третий способ заключается в отказе от контекстных селекторов и применении свойства list-style только к конкретным спискам. Этот способ является самым оптимальным. Результат исполнения кода именно с таким указанием стилей представлен на рисунке 6.6.
Рисунок 6.6 - Пример назначения стиля вложенным спискам
5. Цвет текста
При разработке Web-страниц важным является не только дизайн отдельных элементов, но и дизайн самой страницы в целом: цвет фона, изображений и т. д. В данном разделе будут рассмотрены основные методы задания различных стилевых решений посредством CSS.
Для назначения тексту определенного цвета используется синтаксис:
{color: значение}
В качестве значений могут использоваться общепринятые английские названия цветов или указания цвета в формате RGB, например, как:
{color: coral}
Назначение цвета в формате RGB может быть представлено в нескольких видах:
в шестнадцатеричном виде:
{color: #ff0000};
в шестнадцатеричном виде с трехзначной записью (без "лишних" нулей):
{color: #ff0};
в функциональном виде с указанием значения насыщенности в диапазоне 0 - 255:
{color: rgb(64,224,208)};
в функциональном виде с процентным указанием насыщенности цвета:
{color: rgb(100%, 0%, 0%)}.
Пример:
<html><head><title> Пример </title></head>
<div style="color: coral"> Цвет CORAL (255,127,80) </div>
<div style="color: rgb(64,224,208)"> Цвет TURQUOISE (64,224,208) </div>
</html>
Результат исполнения кода представлен на рисунке 7.1.
Рисунок 7.1 - Пример задания цвета для шрифта
6. Цвет фона
В CSS предусмотрена возможность назначения цвета фона того или иного элемента - надписи, ячейки таблицы или страницы целиком. Синтаксис такого назначения:
{background: значение}
Задается оно теми же методами, что и цвет текста, как это описано в примере.
Пример.
<html><head><title> Пример </title>
<style type="text/css">
body {background:rgb(64,224,208)}
div {font-size: 30; color:white; background: blue}
</style>
</head>
<body>
<div>Белым по синему.</div>
</body></html>
Результат исполнения кода приведен на рисунке 7.2.
Рисунок 7.2 - Пример задания цвета фона
7. Фоновые изображения
Фоновые изображения встречаются почти на любой Web-странице. Как правило, фоновые изображения представляют собой некий рисунок, повторенный на странице столько раз, сколько необходимо для покрытия им всего пространства, для которого это фоновое изображение назначено. Синтаксис задания фонового изображения аналогичен синтаксису назначения тех свойств, значение которых меняется в зависимости от использования того или иного внешнего файла:
{background: url(имя_файла)}
Указывая согласно синтаксису имя нужного файла, получаем код
<html> <head><title> Пример </title><head>
<style type="text/css">
body {background:url(coco.gif)}
div {color:blue;}
</style>
</head>
<div>
Плюшевый крокодил
</div>
</html>
Результат исполнения кода на рисунке 7.3.
Рисунок 7.3 - Пример фонового изображения