Маркеры списка css: Стилизация списков — Изучение веб-разработки

Leave a Comment / Css / By /

НОУ ИНТУИТ | Лекция | Списки в CSS

< Лекция 8 || Лекция 9: 12 || Лекция 10 >

Аннотация: Рассматриваются параметры списков в CSS и способы задания маркеров для элементов списка.

Ключевые слова: css, ‘list-style-type’, ‘list-style-position’, ‘list-style-image’, decimal-leading-zero, lower-roman, upper-roman, lower-greek, ‘lower-latin’, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, ‘marker-offset’, BAN, GAN

Параметры списков в CSS позволяют разместить и изменять маркеры элементов списка, задавать изображение в качестве маркера элемента списка.

Примеры:
  1. Этот пример показывает, как задать различные маркеры элементов списка.
    <html>
<head>
<style type="text/css">
ol.no {list-style-type: none}
ul.ds {list-style-type: disc}
ol.sqr {list-style-type: square}
ul. crl {list-style-type: circle}
</style>
</head>
<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
  2. Этот пример показывает, как задать различные маркеры элементов списка.
     
    <html>
<head>
<style type="text/css">
ul.dec {list-style-type: decimal}
ol.lwrm {list-style-type: lower-roman}
ul.uprm {list-style-type: upper-roman}
ol.lwalph {list-style-type: lower-alpha}
ul.upalph {list-style-type: upper-alpha}
</style>
</head>
<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Первый элемент</li>
<li>Чай</li>
<li>Третий элемент</li>
</ul>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
</body>
</html>
  3. intuit.ru/2010/edi»>Этот пример показывает, как задать изображение в качестве маркера элемента списка.
    <html>
<head>
<style type="text/css">
ol 
{
list-style-image: url("http://www.intuit.ru/ssi/html5/img/logo.png")
}
</style>
</head>
<body>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>
</body>
</html>
  4. Этот пример показывает, как можно задать расположение маркера элемента списка.
    <html>
<head>
<style type="text/css">
ol.in
{
list-style-position: inside
}
ul.out
{
list-style-position: outside
}
</style>
</head>
<body>
<ol>
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
<pre>Cписок имеет <i><u>list-style-position</u></i> = "<b>inside</b>"</pre>
</ol>
<ul>
<li>Это первый элемент списка</li>
<li>Это второй элемент списка</li>
<li>Это третий элемент списка</li>
</ul>
<pre>Список имеет <i><u>list-style-position</u></i> = "<b>outside</b>"</pre>
</body>
</html>
  5. intuit.ru/2010/edi»>Пример показывает, как задать все параметры списка в одном объявлении.
    <html>
<head>
<style type="text/css">
ol 
{
list-style: disc outside url("http://www.intuit.ru/departament/speciality/image.gif")
}
</style>
</head>
<body>
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
</body>
</html>

Дальше >>

< Лекция 8 || Лекция 9: 12 || Лекция 10 >

Маркер списка css и его оформление

Люблю копаться в css файлах. Это те, которые содержат код,  настраивающий всё оформление вашего блога. Сегодня я расскажу как оформить и настроить список и свои картинки для маркированного списка на блоге через css.

Можете еще посмотреть интересную статью по затемнению картинок через css, которая нашла много хороших отзывов: Как затемнить картинку через css.

Порядок такой: Я объясню какие команды отвечают за оформление списков, расскажу отдельно по каждой настройке, после этого расскажу как сделать свою картинку-марке для списка

Если у кого то будут возникать вопросы по другим маркировкам, то спрашиваем в комменты.

Код, формирующий список в css

код ul — формирует список в css. С помощью него можно задать, какой маркер из стандартных может выводиться. Стандартные маркеры: кружок (circle), точка (disk) и квадрат (square).

Например, если  в файле вашего блога style.css будет запись вида

ul {list-style-type: circle}

то все списки будут выводиться с маркером-кружочком. Для того, чтобы для каждого блока задавать свою картинку вместо маркера, код ul должен не иметь значения и записываться в таком виде:

ul {list-style-type: none}

где конкретно это необходимо будет прописывать я укажу ниже.

Код, формирующий картинку вместо маркера

Для того, чтобы использовать вместо стандартного маркера свою картинку, используется код ul li. У него есть значения, которые необходимо будет настроить.

ul li{border-top:1px solid #e3e3e3;list-style-type:none;padding:11px 0px 0px 13px;background:#fff url(images/arrow.jpg)  no-repeat}

Для красивого отображения нашего списка, я думаю, прописать лучше каждый элемент, но это у кого как горит. Если не интересно, крутите до кода background

border-top — устанавливает толщину, стиль и цвет границы (линии вокруг рамки) — можете не устанавливать. 1px значит, что толщина рамки равна одному пикселю; solid показывает стиль рамки, можно вставлять один из слудющих:

и наконец #e3e3e3 — (html код цвета) указывает, каким цветом будет линия.

list-style-type — устанавливаем значение none. То есть оставляем как в примере: list-style-type:none

padding — задает величину свободного поля  с левой, правой сторон, сверху и снизу. Первое значение задет верхний отступ, второе — нижний, третье — с правой стороны и четвертое — с левой стороны: Выглядеть будет так padding: 11px 0px 0px 13px — то есть 11 пикселей отступ сверху и 13 пикселей слева.

Последний и самое важное значение, с помощью которого и указывается та картинка, которую следует вывести вместо стандартного маркера (так же ей можно задавать цвет фона в списке)

Устанавливаем свою картинку вместо обычного маркера

background — можно установить фон в списке просто — командой #345234 (код можете вставить ваш). Можно не вписывать фон вообще

Чтобы установить маркер списка css необходимо:

1) Ищем картинку, которую вы хотели бы использовать в качестве маркера. Размеры моего маркера равны 11 на 11 пикселей.

2) Загружаем вашу картинку на на сервер в тему в папку images. (показываю как у меня выглядит путь к этой папке) wp-content/themes/Krem_Jam/kremjam/images/  — заливаем туда картинку

3) Ищем тот блок, в котором хотите сделать список со своим маркером. Это могут быть посты, сайдбары. Обычно списки в сайдбарах, где показаны рубрики, новые комменты, новые посты и т.д. (см. как у меня в боковой колонке)

Кто не знает как узнать как в вашем файле style.css отображается тот или иной блок, используем плагин для Firefox — Firebug.

Для тех кто использует Google Chrom все будет легче: нажимаем правой кнопкой мыши на странице вашего блога. Далее  выбираем «просмотр кода элемента».

Для многих поиск блока может вызвать затруднения. Будут вопросы, задавайте, помогу с настройкой списка на вашем блоге.

4) Открываем файл style.css и ищем ваш блок по названию. Привожу пример со своим блогом. Блок поста (статьи) у меня называется blok, блок левого сайдбара — col2, блок правого сайдбара — col3.

Я например хочу установить свою картинкe-маркер в левый сайдбар, т.к. там у меня много списков (рубрики, комменты, последний посты).

Я ищу в файлу style.css (с помощью поиска) название col2. Если у вас уже есть значение ul то меняем его на

ul{list-style-type:none}

Если нет такого, то вставляем по такому типу — название блока и код списка:

#col2 ul{list-style-type:none}

Далее вставляем код ul li

#col2 ul li{border-top:1px solid #e3e3e3;list-style-type:none;padding:11px 0px 0px 13px;background:#fff url(images/arrow.jpg) no-repeat}

естественно настраиваем свои значения.

Последний штрих — вписываем к значению background путь к картинке-маркеру. т.к. мы залили картинку в папку images, то путь прописываться в коде будет так:

background: url(images/arrow.
 
 
 jpg) no-repeat

Важно. Необходимо правильно настроить значение padding, т.к. если указать значение меньше чем высота картинки, то картинка видна не будет. Если сделать отступ меньше, то текст заедет на картинку.

Поэкспериментируйте со значениями.

В итоге у вас должны быть две строчки. где в background вы указываете путь к вашей картинке :

#col2 ul{list-style-type:none}
#col2 ul li{border-top:1px solid #e3e3e3;list-style-type:none;padding:11px 0px 0px 13px;background:#fff url(images/arrow.jpg) no-repeat}

Все интересующие вопросы можете задавать в комментах. Если что-то не будет получаться — помогу с настройкой списков на вашем блоге.

Очередной выпуск 100500 вопросов:
httpv://youtube.com/watch?v=2Rs2w3SSYZ0&feature=player_embedded

Правильное оформление маркеров списка – Tempertemper

Опубликовано 7 октября 2020 г. в CSS и разработка

Маркеры списка стилей всегда были чем-то вроде борьбы. Даже простые стили, такие как изменение цвета маркеров/цифр или их увеличение, потребовали немало CSS.

В первые дни CSS предлагал нам очень мало возможностей для настройки, что разочаровывало многих дизайнеров. Все, что мы могли сделать, это изменить:

  • по умолчанию заполненный маркер ( диск ) в квадрат ( квадрат ) или полый круг ( круг )
  • номера в упорядоченном списке римскими цифрами или буквами (‘a’, ‘b’, ‘c’), в верхнем или нижнем регистре

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

Как мы это делали

Долгое время стилизация списков путем замены маркеров по умолчанию на пользовательские ::before псевдоэлементы — это то, как мы получили эти маркеры и цифры, выглядящие причудливо.

Сначала мы бы избавились от стиля списка по умолчанию и вернули пользовательские маркеры. Здесь я просто использую символ круга ASCII ( \25CF ) в качестве маркера, но вы можете использовать любой символ ASCII, который вам нравится. :

 ул, 
 ол { 
 стиль списка: нет; 
 padding-left: 0; 
 } 
 li { 
 padding-left: 1.5em; 
 позиция: относительная; 
 } 
 
 li::before { 
 содержимое: "\25CF"; 
 цвет: зеленый; 
 позиция: абсолютная; 
 слева: 0; 
 }

Но это означает, что упорядоченные списки также будут иметь маркеры, а это не то, что нам нужно. Опираясь на предыдущий CSS, мы дали бы

    число, добавив следующее:

     ol { 
     counter-reset: item; 
     } 
     ol li::before { 
     content: counter(item) "\002E"; 
     приращение счетчика: элемент; 
     }

    Примечание: "\002E" добавляет точку после числа, чтобы воспроизвести стиль по умолчанию, но, опять же, вы можете добавить сюда любой символ ASCII, который вам нравится.

    Способ, которым мы можем это сделать сейчас

    Это лот кода, если сравнить его с тем, как мы можем сделать это сейчас, используя относительно новый псевдоэлемент

    ::marker :

     li::marker { 
     цвет: зеленый; 
     }

    Легко пишется, легко читается и делает то же самое; создание маркеров списка зеленый , но без:

    • удаление и замена интервала по умолчанию
    • снятие и замена маркера
    • причудливый счетчик CSS для упорядоченных списков

    Вы можете стилизовать маркер так же, как и обычный текст, так что есть масса возможностей управления. И, конечно же, у вас все еще есть доступ к list-style-type , так что вы можете сделать маркер квадратным или считать римскими цифрами.

    Хорошая поддержка браузерами

    На момент написания этой новой методики стилизации маркеров списков прекрасно работали в Firefox и Safari. Он еще не поддерживается в Chrome, Edge или Opera, но хорошая новость заключается в том, что он появится в следующей версии Chrome (версия 86), а это означает, что поддержка в Edge и Opera не за горами, поскольку они оба используют тот же браузерный движок, что и Chrome.

    Подписаться

    В последний день каждого месяца я отправляю информационный бюллетень, содержащий:

    • Обзор опубликованных мною статей
    • Горячий выбор из моих архивов
    • Несколько интересных постов из сети

    Адрес электронной почты

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

    Еще сообщения

    Вот еще пара постов для вашего удовольствия. Если этого недостаточно, взгляните на полный список.

    1. Какие изображения нуждаются в описательном тексте?

      Альтернативный текст изображения чрезвычайно важен для многих пользователей, но как узнать, какие изображения следует описывать, а какие нет?

    2. Кнопки с иконками и текстом

      Мы все можем согласиться с тем, что кнопки, состоящие только из значков, — плохая идея, но как мы можем обеспечить наиболее удобный интерфейс, сочетая значок с видимым текстом?

    html — выбор маркеров (маркеров, нумерации и т.

    д.) определенного списка с использованием CSS

    спросил

    Изменено 1 год, 4 месяца назад

    Просмотрено 495 раз

    У меня есть следующий код 1 , в котором псевдоэлемент ::marker используется для стилизации маркеров списков (то есть маркеров и нумерации). Однако он выбирает маркеры всех списков, которые используются в html-документе:

     

<голова>
<стиль>
:: маркер {
  цвет синий;
  размер шрифта: 23px;
}


<тело>
<ул>
  
  1. Кофе
    2. 
  
  2. Чай
    3. 
  
  3. Молоко
    4. 

<ол>
  
  4. Первый
    5. 
  
  5. Второй
    6. 
  
  6. Третий
    7.

Я хочу стилизовать только маркеры неупорядоченного списка

    , поэтому я изменил код CSS псевдоэлемента на:

     ул::маркер {
цвет синий;
размер шрифта: 23px;
}

    Но когда я запускаю этот код, стиль не применяется ни к одному списку и дает мне простой вывод без каких-либо стилей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *