Рубрика «Дизайн сайта»

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

Рамка вокруг таблицы устанавливается с помощью стилевого свойства border, оно добавляется к селектору table. Через border можно одновременно задать толщину, цвет и стиль рамки. В примере 1 показано создание рамки толщиной два пикселя.

Пример 1. Рамка вокруг таблицы

<!DOCTYPE html>
<html>
 

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

Для создания римской нумерации списка к элементу <ol> добавляется атрибут type со значением I (римские цифры в верхнем регистре — I, II, III) или значением i (римские цифры в нижнем регистре — i, ii, iii). В примере 1 показано создание списка с римскими

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

Чтобы задать собственный рисунок маркера для пунктов списка, воспользуйтесь стилевым свойством list-style-image, добавляя его к селектору ul или li. В качестве значения указывается адрес желаемого изображения (рис. 1).

Пример 1. Картинка вместо маркеров

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Рисунок в 

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

Вертикальное расстояние между пунктами списка можно задать двумя способами. Первый, самый простой — добавить к селектору li свойство margin-bottom, которое задаёт отступ снизу для каждого элемента <li> (пример 1). В качестве значения можно использовать пиксели, em, rem и другие единицы.

Пример 1.

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

С помощью CSS допускается устанавливать один из трёх типов маркеров: disc (точка), circle (кружок), square (квадратик). Добавлять эти значения нужно к стилевому свойству list-style-type, которое указывается для селектора ul или li (пример 1).

Пример 1. Стандартные маркеры

<!DOCTYPE html>
<html>
 <head>
  

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

Для изменения расстояния между маркером списка и текстом используйте свойство padding-left для селектора li, как показано в примере 1.

Пример 1. Расстояние от маркера до текста

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Расстояние между маркером и текстом</title>
  <style>
   li {
    padding-left: 

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

Напрямую управлять видом нумерации в списке нельзя, поэтому приходится идти иным путём — вообще убрать исходную нумерацию и сделать собственную с помощью набора свойств counter-reset и counter-increment. Вывод такой нумерации делается через псевдоэлемент ::before и свойство content, как показано ниже.

ol 

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

Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.

Использование <span>

Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы

<li>текст</li>

создаем конструкцию

<li><span>текст</span></li>

При этом цвет маркеров

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

Для изменения цвета текста в списке используйте стилевое свойство color, добавляя его к селектору ul, ol или li, как показано в примере 1.

Пример 1. Цвет фона в списке

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Цвет списка</title>
  <style>
   li {
    

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

Пункты списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору li следует добавить стилевое свойство display со значением inline-block, оно преобразует элемент в строчно-блочный