Изменить маркеры списка css. Хочу изменить вид маркера на другой символ
Читайте также
Сегодня разберемся, как создаются списки на веб-странице, какие маркеры используются и протестируем разные стили для изменения внешнего вида.
Напомню, как подключаются стили к Html странице:
Существуют маркированный, или ненумерованный список css и нумерованный.
Маркеры списка представляют собой изображения разных фигур: кружочки, квадратики, галки и тому подобное. Их еще называют пульками. В качестве маркеров для списка используются и собственные рисунки.
Нумерованный список представляет собой вывод информации под номерами 1, 2, 3 и т.д.
Обычно маркеры представляют собой простые черные кружочки, что привычно для пользователя, но с другой стороны не привлекают особого внимания к тексту.
Если вы решили заменить эти кружки на дизайнерские, то нужно освоить оформление списка с помощью css . Чем мы сегодня и займемся.
Основа любого списка состоит из следующего кода веб-страницы:
- Первый элемент списка
- Второй элемент списка
- Последний элемент списка
Выглядит этот блок так:
- Первый элемент списка
- Второй элемент списка
- Последний элемент списка
Css оформление маркеров списка
Внешний вывод будем прописывать в файле стилей style.css . Он может называться и по-другому, но иметь расширение.css.
Стандартные маркеры CSS: кружок (circle) – не закрашенный кружок, точка (disk) – закрашенный кружок, квадрат (square) – закрашенный квадрат.
Формирует список в css код ul - с его помощью мы задаем, какой из стандартных маркеров будет выводиться на странице.
Например, выведем списки с использованием кружка (circle). Запись в css файле будет такая:
Ul {list-style-type: circle}
Но часто нужно заменить маркеры не во всех выводимых списках, а только в определенных блоках. К примеру, изменить в постах, но не в комментариях. В этом случае, код ul не должен иметь никакого значения, а стиль кружка нужно прописать только для списков в постах. Так выглядит код без значения:
Ul {list-style-type: none}
Если вы не можете найти код в файле css, отвечающий за вывод списка в нужном вам блоке, то воспользуйтесь плагином для Firefox - Firebug или в Google Chrom нажмите правой кнопкой мыши на веб-странице блога. Затем «просмотр кода элемента».
Например, один из вариантов изменения внешнего вида списка в постах на стандартный кружок, если для блока контента нет ul :
Post-content ul {list-style-type: circle}
Или другой пример:
#content-blok ul{list-style-type:square}
Полный курс «Css практика»
]]> ]]>
Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы.
Для тех, кто хочет очень быстро научиться трюкам css стилей , ]]> рекомендую ]]> расширенный курс "CSS практика" Евгения Попова .
Следующие статьи:
Графические маркеры для списка.
Отступ списка css.
Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.
Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.
Скачать красивые маркеры для списков сайта.
CSS-списки — набор свойств, отвечающих за оформление списков. Использование HTML-списков очень распространено при создании панелей навигации по сайту. Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера списка , добавить изображение для маркера , а также изменить местоположение маркера . Высоту блока маркера можно задать свойством line-height .
Оформление списков с помощью CSS-стилей
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.
| list-style-type | |
|---|---|
| Значения: | |
| disc | Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок. |
| armenian | Традиционная армянская нумерация. |
| circle | В качестве маркера выступает незакрашенный кружок. |
| cjk-ideographic | Идеографическая нумерация. |
| decimal | 1, 2, 3, 4, 5, … |
| decimal-leading-zero | 01, 02, 03, 04, 05, … |
| georgian | Традиционная грузинская нумерация. |
| hebrew | Традиционная еврейская нумерация. |
| hiragana | Японская нумерация: a, i, u, e, o, … |
| hiragana-iroha | Японская нумерация: i, ro, ha, ni, ho, … |
| katakana | Японская нумерация: A, I, U, E, O, … |
| katakana-iroha | Японская нумерация: I, RO, HA, NI, HO, … |
| lower-alpha | a, b, c, d, e, … |
| lower-greek | Строчные символы греческого алфавита. |
| lower-latin | a, b, c, d, e, … |
| lower-roman | i, ii, iii, iv, v, … |
| none | Маркер отсутствует. |
| square | В качестве маркера выступает закрашенный или незакрашенный квадрат. |
| upper-alpha | A, B, C, D, E, … |
| upper-latin | A, B, C, D, E, … |
| upper-roman | I, II, III, IV, V, … |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Ul {list-style-type: none;}
ul {list-style-type: square;}
ol {list-style-type: none;}
ol {list-style-type: lower-alpha;}
Рис. 1. Пример оформления маркированного и нумерованного списков
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.
Синтаксис
Ul {list-style-image: url("images/romb.png");}
ul {list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);}
Рис. 2. Оформление маркированного списка с помощью изображения
Рис. 3. Оформление маркированного списка с помощью градиента
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.
- Изменение вида стандартного маркера для нумерованных списков
- Установка типа маркера для маркированных списков
- Установка изображения вместо маркера для элементов списка
С помощью HTML-тегов можно создать два типа списков, имеющих маркеры: нумерованные и маркированные . По умолчанию большинство браузеров отображает маркеры маркированных списков в виде окружности, а маркеры нумерованных в виде чисел, идущих по порядку. CSS предоставляет возможность изменения внешнего вида стандартных маркеров. Далее будут продемонстрированы примеры с различными видами маркеров, с помощью которых, вы сможете изменить внешний вид своих списков.
Изменение и удаление маркеров
Для изменения стандартного внешнего вида маркера в CSS используется свойство list-style-type , в качестве значения задается тот вид маркера, на который вы хотите заменить стандартный.
Пример, демонстрирующий некоторые виды маркеров для нумерованных списков:
list-style-type:
Результат:
- Кликните на значение свойства list-style-type
- Наблюдайте за сменой маркеров
- Используйте для своих списков наиболее подходящие маркеры
Ol#myList {
list-style-type: decimal
;
}
Кликните на любое значение свойства, чтобы увидеть результат
Для маркированных списков существует всего три вида маркеров, которые можно задать с помощью значений circle, disk и squred:
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
С помощью значения none можно удалить маркеры у пунктов в списке, но отступ слева при этом все равно останется:
- Кофе
- Чай
- Кофе
- Чай
Замена маркеров картинками
Если вам не подходит ни один из предлагаемых по умолчанию маркеров, то CSS предоставляет возможность заменить их любой картинкой, в этом вам поможет свойство list-style-image , в значении которого нужно прописать путь к выбранному изображению.
Примите во внимание тот факт, что изображение не будет автоматически масштабироваться под список и будет отображено собственным размером, поэтому придется подбирать изображение подходящее по размеру или редактировать существующее, уменьшив или увеличив его до нужного:
- Кофе
- Чай
- Кофе
- Чай
Отступ списка
При удалении маркеров у пунктов списка можно также удалить или уменьшить размер левого отступа, устанавливаемый браузером по умолчанию. Для полного удаления отступа нужно будет воспользоваться свойством padding-left , которое позволяет регулировать внутренний отступ:
- Кофе
- Чай
- Кофе
- Чай
В примере мы полностью убрали отступ с левой стороны, поэтому пункты списка теперь вплотную прилегают к краю окна браузера. И как видно из примера маркированный список отображается именно так, как и было задумано, но в нумерованном списке пропали маркеры. Причина кроется в самих маркерах - по умолчанию маркеры не являются частью содержимого пунктов списка, поэтому если убрать левый отступ они не сдвигаются вместе с содержимым элементов
Свойство list-style-position указывает, должен ли маркер располагаться внутри или снаружи пунктов списка. Данное свойство может принимать два значения:
- outside - маркер располагается слева от содержимого (является значением по умолчанию)
- inside - маркер располагается внутри пункта списка вместе с содержимым
Теперь можно переписать предыдущий пример так, чтоб отступ с левой стороны был убран, но маркеры при этом не уезжали за край браузера:
- Кофе
- Чай
- Кофе
- Чай
- Кофе
- Чай
В примере к каждому пункту списка была добавлена рамка, чтобы визуально показать границы пунктов списка.
Использование списков в статье положительно сказывается как на SEO, так и на восприятии пользователем информации. Существует множество способов красиво отобразить маркеры (картинкой или с помощью CSS). Мы же рассмотрим достаточно простой, но стильный метод, как изменить маркеры списка на CSS.
Как это выглядит?
В этом случае нам не обойтись без новых технологий, а именно - CSS3 с поддержкой псевдокласса before. С помощью одних лишь только стилей и базовой верстки HTML мы преобразим наскучившие стандартные маркеры, не отвечающие современным стандартам.
В первом случае будем использовать маркированный список, который нам предлагает тег
- :
- Что у нас получилось.
- Неплохо, правда?
- Слева от текста число.
- Продолжение списка на необходимое нам количество полей.
- Элемент 1
- Элемент 2
- Элемент 1
- Элемент 2
Соответственно, во втором случае нумерованный список от тега
- :
Элементы находятся на одном расстоянии от начала текстового блока, что придает им дополнительный шарм.
Красивый маркированный список
В качестве символов можно использовать различные значения. Достаточно вписать новый код в свойство content.
HTML
CSS
ul { list-style-type: none; } ul li:before { content: "\203A "; padding-right: 6px; font-size: 16px; color: #00bf80; font-weight: bold; }Красивый нумерованный список
С помощью нумерованного списка можно как симпатично оформить блок текста на странице, так и создать удобное и понятное , как в начале этого материала.
HTML
CSS
ol { margin-left: 63px; list-style-type: none; counter-reset: li; } ol li:before { content: counter(li); counter-increment: li 1; padding: 0px 6px; margin-left: -28px; font-size: 12px; text-align: center; color: white; position: absolute; background: #00bf80; }Оформляйте свои статьи правильно, чтобы пользователь не повысил процент отказов.
Создать список в Microsoft Word можно довольно просто, достаточно сделать всего несколько кликов. Кроме того, программа позволяет не только создавать маркированный или нумерованный список по ходу набора текста, но и преобразовать в список текст, который уже был набран.
В этой статье мы детально рассмотрим то, как сделать список в Ворде.
Если вы только планируете печатать текст, который должен быть оформлен в виде маркированного списка, выполните следующие действия:
1. Установите курсор в начале строки, в которой должен находиться первый пункт списка.
2. В группе “Абзац” , которая расположена во вкладке “Главная” , нажмите кнопку “Маркированный список” .
3. Введите первый пункт нового списка, нажмите “ENTER” .
4. Введите все последующие пункты маркированного списка, нажимая в конце каждого из них “ENTER” (после точки или точки с запятой). Когда закончите вводить последний пункт, дважды нажмите “ENTER” или нажмите “ENTER” , а затем “BackSpace” , чтобы выйти из режима создания маркированного списка и продолжить обычный набор текста.
Преобразование готового текста в список
Очевидно, что каждый пункт будущего списка должен находиться в отдельной строке. Если ваш текст еще не разделен на строки, сделайте это:
1. Установите курсор в конце слова, фразы или предложения, которое должно быть первым пунктом в будущем списке.
2. Нажмите “ENTER” .
3. Повторите это же действие для всех следующих пунктов.
4. Выделите фрагмент текста, который должен стать списком.
5. На панели быстрого доступа во вкладке “Главная” нажмите кнопку “Маркированный список” (группа “Абзац” ).
- Совет:
Если после созданного вами маркированного списка еще нет текста, дважды нажмите “ENTER”
в конце последнего пункта или нажмите “ENTER”
, а затем “BackSpace”
, чтобы выйти из режима создания списка. Продолжите обычный набор текста.
Если вам необходимо создать нумерованный список, а не маркированный, нажмите кнопку “Нумерованный список” , расположенную в группе “Абзац” во вкладке “Главная” .
Изменение уровня списка
Созданный нумерованный список можно сместить влево или вправо, изменив таким образом его “глубину” (уровень).
1. Выделите созданный вами маркированный список.
“Маркированный список” .
3. В выпадающем меню выберите пункт “Изменить уровень списка” .
4. Выберите уровень, который вы хотите задать для созданного вами маркированного списка.
Примечание: С изменением уровня изменится и маркировка в списке. О том, как изменить стиль маркированного списка (вид маркеров, в первую очередь), мы расскажем ниже.
Аналогичное действие можно выполнить и с помощью клавиш, причем, вид маркеров в таком случае изменен не будет.
Примечание: Красной стрелкой на скриншоте показана начальная позиция табуляции для маркированного списка.
Выделите список, уровень которого нужно изменить, выполните одно из следующих действий:
Примечание: Одно нажатие клавиши (или клавиш) смещает список на одну позицию табуляции. Комбинация “SHIFT+TAB” будет работать только в том случае, если список находится на расстоянии хотя бы в одну позицию табуляции от левого поля страницы.
Создание многоуровневого списка
При необходимости вы можете создать многоуровневый маркированный список. Более детально о том, как это сделать, вы можете узнать из нашей статьи.
Изменение стиля маркированного списка
Помимо стандартного маркера, устанавливаемого в начале каждого пункта списка, для его маркировки вы можете использовать и другие знаки, доступные в MS Word.
1. Выделите маркированный список, сnиль которого необходимо изменить.
2. Нажмите на стрелку, расположенную справа от кнопки “Маркированный список” .
3. Из выпадающего меню выберите подходящий стиль маркера.
4. Маркеры в списке будут изменены.
Если по каким-то причинам вас не устраивают стили маркеров, доступные по умолчанию, вы можете использовать для маркировки любой из присутствующих в программе символов или рисунок, который можно добавить с компьютера или загрузить из интернета.