Урок 3. Списки. Картинки.

Введение

На этом уроке мы изучим создание списков, работу с изображениями и их стилизацию с помощью CSS. CSS позволяет изменять внешний вид элементов: задавать цвета, шрифты, фон и многое другое, что помогает создавать уникальный дизайн.

Если вы работаете в VS Code, создайте в папке проекта:

файл.html
папкуcss(с файлом style.css)
папкуimg(для изображений)

В HTML-документе подключите стили:

<head>
    <link rel=" stylesheet" type=" text/css" href="css/style.css">
</head>

Создание списков

Списки встречаются повсюду: списки дел, покупок, фильмов и т. д. Они бывают маркированные (с точками, значками) и нумерованные(с цифрами, буквами).

Маркированные списки

Используется тег<ul>, а элементы списка —<li>.

Пример списка покупок:

<ul>
    <li>Хлеб</li>
    <li>Молоко</li>
    <li>Яйца</li>
    <li>Фрукты</li>
</ul>

Стилизация в CSS:

ul {
    padding: 15px;
    margin: 3px;
    background: #f5f5f5;
    list-style: disc; /* маркеры в виде точек */
}
ul li {
    padding: 5px;
    margin: 5px 15px;
    background: #ffffff;
}

Хлеб
Молоко
Яйца
Фрукты

Нумерованные списки

Используется тег <ol>.

Пример списка дел на день:

<ol>
    <li>Позавтракать</li>
    <li>Сходить на работу</li>
    <li>Сделать покупки</li>
    <li>Приготовить ужин</li>
</ol>

Стилизация:

ol {
    padding: 15px;
    margin: 3px;
    background: #f5f5f5;
    list-style: decimal; /* обычные цифры */
}
ol li {
    padding: 5px;
    margin: 5px 15px;
    background: #ffffff;
}

Позавтракать
Сходить на работу
Сделать покупки
Приготовить ужин

Создание навигационного меню

Списки можно превратить в меню сайта, убрав маркеры и добавив ссылки.

html:

<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Новости</a></li>
    <li><a href="#">Каталог</a></li>
    <li><a href="#">Контакты</a></li>
</ul>

CSS для горизонтального меню:

ul, li {
    margin: 0;
    padding: 0;
}
ul {
    display: flex;
    list-style: none;
    width: 100%;
}
a {
    background: #4CAF50;
    color: #FFFFFF;
    display: block;
    font: bold 13px sans-serif;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
}
li:hover a {
    background: #45a049;
}

Работа с изображениями

Изображения добавляются тегом <img>.

Пример:

<img src="img/TOP.jpg" alt="TOP" width="300" draggable="false">

Атрибуты:

src— путь к изображению
alt— альтернативный текст
width / height— размеры
draggable — можно ли перетаскивать картинку

Оформление изображений

С помощью CSS можно добавить тени, скругления и рамки.

Пример стилей для фото продукта:

img { 
    margin: 15px;
    background-color: #f9f9f9;
    box-shadow: 5px 5px 10px 0px #cccccc;
    border-radius: 10px;
    border: 1px solid #dddddd;
}

Эффекты:

box-shadow — тень
border-radius — скругление углов
border — рамка

Изображение в качестве ссылки

Картинку можно сделать кликабельной, обернув её в тег <a>.

<a href="TOP.html">
    <img src="img/TOP.jpg" alt="TOP">
</a>

Итог

На этом уроке мы изучили:

Создание списков (<ul> , <ol>).
Стилизацию списков и меню.
Добавление и оформление изображений.

Теперь вы можете создавать списки покупок, дел и красиво оформлять изображения товаров!