Вебмастеру

Как сделать нумерованный список?

Для создания нумерованного списка применяется элемент <ol>, отдельные пункты списка делаются через элементы <li>, как показано в примере 1. Пример 1. Нумерованный список <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Нумерованный список</title> </head> <body> <ol> <li>Леонардо</li> <li>Рафаэль</li> <li>Донателло</li> <li>Микеланджело</li> </ol> </body> </html> Результат данного примера показан на рис. 1. Рис. 1. Вид нумерованного списка Нумерация пунктов списка происходит автоматически, начиная с 1. ...

Как сделать нумерацию списка с определённого числа?

Чтобы начать список с заданного числа, добавьте к первому элементу <li> атрибут value с числом в качестве значения. С этого числа и будет нумероваться дальнейший список (пример 1). Пример 1. Использование атрибута value <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список, начинающийся со ста</title> </head> <body> <p>Следующая сотня лучших фильмов</p> <ol> <li value="100">Баллада о солдате (1959)</li> <li>Хоббит: Нежданное путешествие (2012)</li> <li>Свидетель обвинения ...

Как сделать нумерацию русскими буквами?

В CSS исходно нет нумерации с русскими буквами, поэтому эту нумерацию придётся делать самостоятельно через стили. Для этого сперва создаём обычный нумерованный список через <ol>. Добавление букв осуществляется с помощью псевдоэлемента ::before и свойства content. Поскольку в каждой строке должна быть своя буква, используем псевдокласс :nth-child(1), где в скобках пишется номер буквы. Первой буквой, естественно, идёт А, второй — Б, третьей — ...

Как сделать вложенный список?

Вложенные списки предназначены для организации сложной иерархической структуры текста, обычно юридических или технических документов. Также вложенные списки используются при создании многоуровневых меню и навигации по сайту. Чтобы сделать такую структуру вначале создаётся список с помощью <ul>, а вложенный список вставляется внутрь одного из элементов <li>, как показано в примере 1. Обратите внимание, что <li> закрывается после вложенного <ul>. Пример 1. Вложенный ...

Как разместить пункты списка горизонтально?

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block, оно преобразует элемент в строчно-блочный (пример 1). Пример 1. Горизонтальный список <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Горизонтальный список</title> <style> ul.hr { /* Обнуляем значение отступов ...

Как изменить цвет текста в списке?

Для изменения цвета текста в списке используйте стилевое свойство color, добавляя его к селектору ul, ol или li, как показано в примере 1. Пример 1. Цвет фона в списке <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Цвет списка</title> <style> li { color: green; /* Цвет текста */ } </style> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> </body> </html> Результат данного ...

Как изменить цвет маркеров в списке?

Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста. Использование <span> Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы <li>текст</li> создаем конструкцию <li><span>текст</span></li> При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1). Пример 1. Использование вложенных тегов <!DOCTYPE ...

Как изменить стиль чисел в списке?

Напрямую управлять видом нумерации в списке нельзя, поэтому приходится идти иным путём — вообще убрать исходную нумерацию и сделать собственную с помощью набора свойств counter-reset и counter-increment. Вывод такой нумерации делается через псевдоэлемент ::before и свойство content, как показано ниже. ol { list-style-type: none; /* Убираем исходные маркеры */ counter-reset: my-counter; /* Задаём имя счетчика */ } li::before { content: counter(my-counter) ...

Как изменить расстояние от маркера до текста?

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора li, как показано в примере 1. Пример 1. Расстояние от маркера до текста <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Расстояние между маркером и текстом</title> <style> li { padding-left: 20px; /* Расстояние от маркера до текста */ } </style> </head> <body> <hr> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> </ul> <hr> ...

Как изменить вид маркера списка?

С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li (пример 1). Пример 1. Стандартные маркеры <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Квадратные маркеры</title> <style> ul { list-style-type: square; /* Квадратные маркеры */ } </style> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил ...

Как задать расстояние между пунктами списка?

Вертикальное расстояние между пунктами списка можно задать двумя способами. Первый, самый простой — добавить к селектору li свойство margin-bottom, которое задаёт отступ снизу для каждого элемента <li> (пример 1). В качестве значения можно использовать пиксели, em, rem и другие единицы. Пример 1. Использование margin-bottom <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Список</title> <style> li { margin-bottom: 1em; /* Расстояние снизу */ } </style> ...

Как вместо символа маркера использовать картинку?

Чтобы задать собственный рисунок маркера для пунктов списка, воспользуйтесь стилевым свойством list-style-image, добавляя его к селектору ul или li. В качестве значения указывается адрес желаемого изображения (рис. 1). Пример 1. Картинка вместо маркеров <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рисунок в качестве маркера</title> <style> ul { list-style-image: url(/example/image/book.png); /* Изображение маркера */ } </style> </head> <body> <ul> <li>Чебурашка</li> <li>Крокодил Гена</li> <li>Шапокляк</li> ...

Как в списке вывести римские цифры?

Для создания римской нумерации списка к элементу <ol> добавляется атрибут type со значением I (римские цифры в верхнем регистре — I, II, III) или значением i (римские цифры в нижнем регистре — i, ii, iii). В примере 1 показано создание списка с римскими цифрами. Пример 1. Использование атрибута type <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Римские цифры</title> </head> <body> <ol type="I"> <li>тысячелетие до ...

Как сделать рамку вокруг таблицы?

Рамка вокруг таблицы устанавливается с помощью стилевого свойства border, оно добавляется к селектору table. Через border можно одновременно задать толщину, цвет и стиль рамки. В примере 1 показано создание рамки толщиной два пикселя. Пример 1. Рамка вокруг таблицы <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка</title> <style> table { width: 100%; /* Ширина таблицы */ border: 2px solid #BC7062; /* Рамка вокруг ...

Как сделать подчёркивание заголовка?

Подчёркивание бывает разного вида, соответственно, различаются методы его создания. Ниже перечислены несколько популярных. Использование text-decoration Свойство text-decoration со значением underline добавляет подчёркивание к тексту; такого рода подчёркивание можно наблюдать для ссылок по умолчанию. Созданная таким образом линия равна ширине текста и будет такого же цвета, что и сам заголовок. Изменить цвет линии можно через свойство text-decoration-color. В примере 1 показано применение ...

Как сделать горизонтальную линию?

Горизонтальная линия делается с помощью свойства border-bottom, которое применяется обычно к элементу <div>. Это свойство добавляет линию снизу заданной толщины и стиля (пример 1). Чтобы не «портить» все <div>, используем класс line, и уже для класса указываем свойство border-bottom. Сам <div> остаётся пустым, никакое содержимое в нём не требуется, только стилевое оформление. Пример 1. Использование border-bottom <!DOCTYPE html> <html> <head> <meta ...

Как добавить рамку вокруг ячеек?

Рамка вокруг ячеек таблицы устанавливается с помощью свойства border, оно добавляется к селекторам td и th. Через border мы сразу же задаём толщину рамки, её цвет и стиль (пример 1). Пример 1. Свойство border <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Рамка</title> <style> table { width: 100%; /* Ширина таблицы */ } td { border: 2px solid #009542; /* Параметры рамки */ ...

Как добавить рамку вокруг кнопки?

Кнопки создаются с помощью элементов <button> или <input>, при этом вид кнопки меняется от браузера к браузеру. Если задать цвет фона у кнопки через свойство background-color (или background), то к кнопке автоматически добавляется трёхмерная рамка. Чтобы получить одинаковый вид в разных браузерах, для селектора button следует убрать рамку через свойство border со значением none или, наоборот, добавить свою рамку через ...

Как добавить вертикальную линию к тексту?

Цветная линия возле текста привлекает к нему внимание, а цвет линии и фона может информировать о разном статусе текста — цитата, сообщение, предупреждение, важная информация и др. Для вывода линии слева от текста применяется свойство border-left, оно создаёт линию заданной толщины, стиля и цвета. При этом высота линии привязывается к высоте текста и меняется вместе с ним. Чтобы линия и фон ...

Как увеличить картинку при наведении?

За изменение масштаба изображения отвечает свойство transform с функцией scale(). В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%. Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1. Пример 1. Увеличение картинки <!DOCTYPE ...

Как сделать обтекание картинки текстом?

Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору img. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам. В примере 1 введены два стилевых класса leftimg и rightimg, при добавлении их к ...

Как сделать круглые изображения?

Для скругления уголков элементов предназначено свойство border-radius, значением которого выступает радиус скругления. Если взять квадратное изображение и добавить к нему свойство border-radius со значением 50%, то мы получим уже не квадратное, а круглое изображение. Плюсом использования border-radius является то, что мы можем добавлять к элементу рамку, тень и они будут повторять контур. В примере 1 показано создание круглых изображений, для чего ...

Как сделать картинку чёрно-белой?

Обычно изображение для сайта готовят в графическом редакторе и в нём уже задают яркость, контрастность и другие параметры картинки. С помощью CSS этот процесс можно упростить и менять цветность «на лету», к примеру, при наведении указателя на изображение. Для этого используем свойство filter и функцию grayscale(1) для создания чёрно-белой картинки и grayscale(0) для цветной. Чтобы всё это менялось плавно и ...

Как сделать картинку ссылкой?

Чтобы картинка была ссылкой на сайт или веб-страницу, элемент <img> достаточно вставить внутрь ссылки <a> следующим образом. <a href="https://webref.ru"><img src="image/shark.jpg" alt=""></a> Здесь атрибут src определяет адрес картинки, а href — адрес сайта или веб-страницы, куда будет вести ссылка. В примере 1 показано добавление нескольких изображений, каждое из них является ссылкой. Пример 1. Изображения как ссылки <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...