Содержание

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

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

Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример доступен на Github (проверьте также источник кода.)

HTML для нашего примера списка представлен ниже:

<h3>Shopping (unordered) list</h3>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Hummus</li>
  <li>Pita</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h3>Recipe (ordered) list</h3>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.
 
 </p>

<ol>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

<h3>Ingredient description list</h3>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Hummus</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pita</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.
 
 
 </dd>
</dl>

Если вы перейдете к живому примеру прямо сейчас и изучите элемент списка используя инструменты разработчика браузера, то вы заметите несколько стилей установленных по умолчанию:

  • Элементы <ul> и <ol> имеют верхний и нижний margin по 16px (1em) и padding-left 40px (2.5em.)
  • Объекты списка (элементы <li>) не имеют заданных значений по умолчанию для интервалов.
  • Элемент <dl> имеет верхний и нижний margin по
    16px     (1em), но padding не задан.
  • Элементы <dd> имеют margin-left 40px (2.5em.)
  • Элементы <p> которые мы включили для ссылок (сноски) имеют верхний и нижний margin по 16px (1em), точно так же, как и различные типы списков.

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

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



html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h3 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}




dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
  • Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
  • Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов.
    Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
  • Правило 4 задает одинаковую высоту line-height в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
  • Правила 5 и 6 применяются к списку описаний — мы задаем одинаковую высоту line-height между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.  

Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов <ul> или <ol>:

  • list-style-type (en-US): задает тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.
  • list-style-position (en-US): управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.
  • list-style-image: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.

Стили маркеров

Как указано выше, свойство list-style-type (en-US) позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:

ol {
  list-style-type: upper-roman;
}

Это дает нам следующий вид:

Вы можете найти гораздо больше опций, заглянув на справочную страницу list-style-type (en-US).

Позиция маркера

Свойство list-style-position (en-US) устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — outside, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.

Если вы установите значение на inside, то маркеры будут находиться внутри строк:

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

Использование пользовательского изображения как маркер

Свойство list-style-image позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:

ul {
  list-style-image: url(star.svg);
}

Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств background, о которых вы узнаете намного больше в модуле Styling boxes. А пока вот вам образец для дегустации!

В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url(star. svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

Мы сделали следующее:

  • Установили padding-left элемента <ul> с 40px по умолчанию на 20px, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
  • Установили list-style-type (en-US) на none, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства background для управления маркерами.
  • Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
    • background-image: Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.
    • background-position: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим 0 0, что значит что маркер будет появляться в самом верху слева каждого пункта списка.
    • background-size: Задает размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер 1.6rem (16px), что очень хорошо сочетается с отступом (padding) 20px, который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.
    • background-repeat: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение no-repeat.

Это дает нам следующий результат:

короткая запись list-style

Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, list-style (en-US). Например, следующий CSS:

ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}

Может быть заменен этим:

ul {
  list-style: square url(example.png) inside;
}

Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — disc, none, и outside). Если указаны и type и image, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.

Иногда вам может понадобиться вести счет в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счет с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.

start

Атрибут start позволит вам начать счет списка с цифры отличной от 1. Например:

<ol start="4">
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

что даст вам такой результат:

reversed

Атрибут reversed начнет отсчет по убыванию вместо возрастания. Например:

<ol start="4" reversed>
  <li>Toast pita, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

что даст вам такой результат:

Обратите внимание: Если пунктов в списке в обратном списке больше, чем значение атрибута start, счет продолжится до нуля и далее отрицательные значения.

value

Атрибут value позволит вам установить специфичные цифровые значения к пунктам списка. Например:

<ol>
  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li value="6">Wash and chop the salad.</li>
  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>

что даст вам такой результат:

Обратите внимание: Даже если вы используете нечисловой list-style-type (en-US), вам все равно надо использовать эквивалентное цифровое значение в атрибуте value.

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

  1. Задали неупорядоченному списку квадратные маркеры.
  2. Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
  3. Задали упорядоченному списку маркеры в виде строчных букв.
  4. Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдете.

Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы застрянете, нажмите кнопку Show solution чтобы посмотреть возможный ответ.

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

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

Стиль списка. Учебник CSS.

Глава 13

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

В этой главе мы немного поколдуем над списками с помощью свойств CSS. Так мы будем говорить о стиле списка, то для обучения Вам понадобится базовая информация о тегах: <ul> <ol> <li> <dl> <dt> <dd> — изложенная в учебнике HTML глава 9 «Списки» — рекомендую освежить в голове информацию о данных элементах, прежде чем приступать к работе.

Ну а если в голове и так свежо тогда начнем!

Если Вы помните, то в чистом HTML вид маркера в списке определял атрибут type и одно из его возможных значений, в CSS данную задачу берёт на себя свойство: list-style-type которое, в свою очередь, тоже имеет свои стандартные значения определяющие вид маркера как всего списка сразу, так и его отдельного «пункта».

Значения list-style-type:

  • disc — Диск. (по умолчанию для <ul>)
  • circle — Полый круг.
  • square — Квадрат.
  • decimal — Арабские цифры. (по умолчанию для <ol>)
  • lower-roman — Строчные римские цифры.
  • lower-alpha — Строчные буквы.
  • upper-roman — Заглавные римские цифры.
  • upper-alpha — Заглавные буквы.
  • none — Маркер отсутствует.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Вид маркера в списке</title>
</head>
<body>
<ul>
<li>Пункт 1.
<li>Пункт 2.
<li >Пункт 3 (особенный).
</ul>
<ul>
<li>Пункт 1.
<li>Пункт 2.
<li>Пункт 3.
</ul>
</body>
</html>

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

Эту задачу выполняет свойство list-style-image которое определяет в качестве маркера списка некое графическое изображение с указанием пути к нему.

Значений данного свойства всего два:

  • none — Отменяет графическое изображение маркера.
  • url — Путь к файлу с рисунком маркера.

Путь к рисунку после url указывается в круглых скобках.

Вот так:

list-style-image: url(graphics/marker.gif)

— Такая запись будет говорить о том, что рядом с документом есть папка graphics в которой лежит файлик-рисунок: »  » — под названьем marker.gif

Теперь попрубуем сделать так, что бы каждый пункт нашего списока был промаркерован этим рисунком. Смотрим пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Нестандартный маркер-рисунок</title>
</head>
<body>
<ul>
<li>Первый любимый пункт.
<li>Второй любимый пункт.
<li>И не менее любимый третий пункт.
</ul>
</body>
</html>

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

Возможных значений свойства list-style-position всего два:

  • outside — Маркер находится в стороне от списка.(по умолчанию)
  • inside — Маркер обтекается текстом.

Пример для наглядности:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Обтекание маркера текстом</title>
<style type=»text/css»>
body {
margin: 0px;
background: #e8e8e8
}
div {
width: 300px;
height: 200px;
float:left;
margin: 10px;
padding: 10px;
border: RGB(25, 125, 25) 2px ridge;
background: #fff
}
h4 {
text-align: center
}
</style>
</head>
<body>
<div>
<h4>Здесь маркер обтекается текстом:</h4>
<ul>
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
</ul>
</div>
<div>
<h4>А здесь нет:</h4>
<ul >
<li>Пункт, в котором говорится о том, что хорошо бы было сделать, что-то там, где это что-то еще не сделано.
<li>Пункт, в котором говорится о том, что неплохо бы было сделать, нечто там, где это нечто еще не сделано.
</ul>
</div>
</body>
</html>

Базовое свойство list-style используется, когда стилю списка необходимо одновременно присвоить несколько значений. Может иметь от одного до трёх значений из свойств применяемых к стилю списка, в любой последовательности через пробел.

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

Если в голове остались какие то пробелы можете вернуться и перечитать.

Пример:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Стиль списка</title>
</head>
<body>
<div>
<ul>
<li>- Этот список использует в качестве маркера рисунок.
<li>- Текст этого списка обтекает маркер.
</ul>
</div>
</body>
</html>

  • Списки наряду с заголовками, выделенным текстом и картинками, являются элементами, которые приковывают взгляд посетителя при беглом просмотре страницы. Умелое и ненавязчивое размещение таковых элементов залог того, что посетитель окунётся в чтение Вашего документа более глубоко.

  • Так как списки являются великолепным инструментом для структуризации данных, а свойства CSS позволяют создать практически любой их дизайн, используйте списки, помимо их основного назначения, в качестве «меню» — навигации по сайту, где каждый пункт является ссылкой на ту или иную страницу Вашего сайта.



Работа с маркерами списков ul на CSS

Мы с вами еще в начале книги разбирались со списками ul и вы наверняка помните о том, что список ul имеет маркеры в виде точек. Однако, вид этих маркеров можно сменить или даже убрать их совсем. Делается это с помощью свойства list-style-type. Давайте посмотрим, какие значения оно может принимать для списка ul.

Значение square

Значение square позволяет сделать маркеры в виде квадратиков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: square; }

:

Значение circle

Значение circle позволяет сделать маркеры в виде кружков:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: circle; }

:

Значение disc

Значение disc делает маркеры в виде закрашенных кружков (это значение по умолчанию):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: disc; }

:

Значение none

Значение none убирает маркеры совсем:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> ul { list-style-type: none; }

:

Практические задачи

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

Сделайте список без маркеров, как в данном образце:

Цвет маркеров ul отличный от текста

ВидHTML-кодCSS-кодОписание
☃☃\2603Снеговик
☦☦\2626Православный крест
⚓⚓\2693Якорь
➳➳\27B3Стрела направо
✆✆\2706Знак телефона
☕☕\2615Горячие напитки
✎✎\270EКарандаш, направленный вправо-вниз
✏✏\270FКарандаш
✐✐\2710Карандаш, направленный вправо-вверх
✑✑\2711Незакрашенное острие пера
✒✒\2712Закрашенное острие пера
⚜⚜\269CГеральдическая лилия
⛑⛑\26D1Шлем с белым крестом
⚝⚝\269DНачерченная белая звезда
❄❄\2744Снежинка
❤❤\2764Закрашенное жирное сердце
❅❅\2745Зажатая трилистниками снежинка
❆❆\2746Жирная остроугольная снежинка
★★\2605Закрашенная звезда
☆☆\2606Незакрашенная звезда
✪✪\272AНезакрашенная звезда в закрашенном круге
✫✫\272BЗакрашенная звезда с незакрашенным кругом внутри
✯✯\272FВращающаяся звезда
❉❉\2749Звёздочка с шарообразными окончаниями
❋❋\274BЖирная восьмиконечная каплеобразная звёздочка-пропеллер
✲✲\2732Звёздочка с незакрашенным центром
⍟⍟\235FApl функциональный символ звезда в круге
⊛⊛\229BОператор звездочки в круге
☀☀\2600Закрашенное солнце с лучами
☁☁\2601Облака
☂☂\2602Зонтик
☑☑\2611Галочка в квадрате
☒☒\2612Крестик в квадрате
☹☹\2639Нахмуренный смайлик
☺☺\263AУлыбающийся смайлик
☻☻\263BЗакрашенный улыбающийся смайлик
☭☭\262DСерп и молот
☰☰\2630Триграмма
✿✿\273fЗакрашенный цветок
❀❀\2740Незакрашенный цветок
✾✾\273EЦветок с шестью лепестками
❁❁\2741Закрашенный обведённый цветок
❂❂\2742Цветок из точек
✉✉\2709Конверт
❦❦\2766Сердце в виде цветка
❶❶\2776Номер 1
❷❷\2777Номер 2
❸❸\2778Номер 3
❹❹\2779Номер 4
❺❺\277AНомер 5
❻❻\277BНомер 6
❼❼\277CНомер 7
❽❽\277DНомер 8
➒➒\2792Номер 9
➓➓\2793Номер 10
➠➠\27A0Летящая стрела
➤➤\27A4Наконечник стрелы
➥➥\27A5Изогнутая стрела, указывающая вниз и вправо
➦➦\27A6Изогнутая стрела, указывающая вверх и вправо
❜❜\275CЖирная одинарная верхняя запятая
❛❛\275BЖирная одинарная повёрнутая верхняя запятая
✖✖\2716Жирный знак умножения
✘✘\2718Жирный крестик
✔✔\2714Жирная отметка галочкой
✚✚\271AЖирный крест
↺↺\21BAКруглая стрелка с наконечником против часовой стрелки
↻↻\21BBКруглая стрелка с наконечником против часовой стрелки
\003CЗнак «меньше чем» (начало тега)
>>\003EЗнак «больше чем» (конец тега)
««\00ABЛевая двойная угловая скобка
»»\00BBПравая двойная угловая скобка
‹‹\2039Левая угловая одиночная кавычка
››\203AПравая угловая одиночная кавычка
««\0022Двойная кавычка
′′\2032Одиночный штрих
″″\2033Двойной штрих
‘‘\2018Левая одиночная кавычка
’’\2019Правая одиночная кавычка
‚‚\201AНижняя одиночная кавычка
““\201CЛевая двойная кавычка
””\201DПравая двойная кавычка
„„\201EНижняя двойная кавычка
&&\0026Амперсанд
‘‘\0027Апостроф (одинарная кавычка)
§§\00A7Параграф
©©\00A9Знак copyright
¬¬\00ACЗнак отрицания
®®\00AEЗнак зарегистрированной торговой марки
¯¯\00AFЗнак долготы над гласным
°°\00B0Градус
±±\00B1Плюс-минус
¹¹\00B9Верхний индекс «1»
²²\00B2Верхний индекс «2»
³³\00B3Верхний индекс «3»
¼¼\00BCОдна четверть
½½\00BDОдна вторая
¾¾\00BEТри четверти
´´\00B4Знак ударения
µµ\00B5Микро
\00B6Знак абзаца
··\00B7Знак умножения
¿¿\00BFПеревернутый вопросительный знак
ƒƒ\0192Знак флорина
™™\2122Знак торговой марки
••\2022Маркер списка
……\2026Многоточие
‾‾\203EНадчеркивание
––\2013Среднее тире
——\2014Длинное тире
‰‰\2030Промилле
}}\007DПравая фигурная скобка
{{\007BЛевая фигурная скобка
==\003DЗнак равенства
≠≠\2260Знак неравенства
≅≅\2245Конгруэнтность (геометрическое равенство)
≈≈\2248Почти равно
≤≤\2264Меньше чем или равно
≥≥\2265Больше чем или равно
∠∠\2220Угол
⊥⊥\22A5Перпендикулярно (кнопка вверх)
√√\221AКвадратный корень
∑∑\2211N-ичное суммирование
∫∫\222BИнтеграл
←←\2190Стрелка влево
↑↑\2191Стрелка вверх
→→\2192Стрелка вправо
↓↓\2193Стрелка вниз
↔↔\2194Стрелка влево-вправо
↵↵\21B5Стрелка вниз и влево – знак возврата каретки
⇐⇐\21D0Двойная стрелка налево
⇑⇑\21D1Двойная стрелка вверх
⇒⇒\21D2Двойная стрелка направо
⇓⇓\21D3Двойная стрелка вниз
⇔⇔\21D4Двойная стрелка влево-вправо
¢¢\FFE0Цент
££\FFE1Фунт стерлингов
₽₽\20BDРоссийский рубль
¥¥\00A5Йена или юань
€€\20ACЕвро
$$\0024Доллар
₴₴\20B4Знак гривны
₹₹\20B9Индийская рупия
圓圓\5713Китайский юань
₸₸\20B8Казахстанский тенге

list-style-type: нет, когда элементы списка являются ссылками, и показывать маркеры, когда элементы списка не являются ссылками? CSS



Если у меня есть пара пуль на странице, и некоторые списки содержат обычный текст (без элементов абзаца), а некоторые содержат ссылки, возможно ли иметь не пули на ссылках, а пули на текстовых элементах?

Чтобы удалить все пули я это делаю:

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none}

Но если элемент является ссылкой, Я хочу показать пули. Я попробовал с:

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px;}

#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a ,
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a,
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none}

Без успеха, какие-нибудь идеи?

html css
Поделиться Источник peter     27 января 2011 в 00:27

2 ответа

  • Суммирование столбцов списка 2D, где некоторые элементы являются строками

    У меня есть список списков формы: my_list=[[1,2,’A’],[4,5,’B’],[7,8,’C’]] и я хочу суммировать первый элемент каждого списка (1+4+7), чтобы получить общую сумму. Я попробовал следующее, что не сработало, потому что некоторые элементы списка являются строками: new_list = list(zip(*my_list)) print…

  • Разыменование списков внутри списка в Python

    Когда я определяю список способом generic: >>>a=[[]]*3 >>>a [[],[],[]] а затем попробуйте добавить только ко второму элементу внешнего списка: >>>a[1].append([0,1]) >>>a [[[0,1]], [[0,1]], [[0,1]]] он присоединяется ко всем элементам внешнего списка, как видно…


1

Вам придется прибегнуть к предварительной обработке на стороне сервера или Javascript. В CSS нет способа стилизовать элемент на основе того, что представляют собой его дочерние элементы, или изменить стиль родителя из объявления стиля дочернего элемента. Вот ссылка на селектор W3 CSS2 и ссылка на рабочий проект селектора CSS3, и ни один из них не упоминает родительские селекторы.

Поделиться jball     27 января 2011 в 00:35


0

Хотя вы не можете изменить стиль элемента списка на основе любого элемента(ов), который он содержит, существует чистый обходной путь CSS, который достигает более или менее того же результата :

  1. Установите block в качестве свойства отображения всех элементов списка
  2. Установите list-item в качестве свойства отображения элементов ссылки вместе с допустимым значением для list-style-position и list-style-type .

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

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

ПРИМЕР КОДА :

#WebPartWPQ1 li {
    margin-left: -25px;
    display: block;
}

#WebPartWPQ1 li a {
    display: list-item;
    list-style-position: inside;
    list-style-type: disk;
}
<ul>
    <li>Item 1 (ordinary item)</li>
    <li><span>Item 2 (wrapped in a "span" tag)</span></li>
    <li><a href="#">Item 2 (wrapped in an "a" tag)</a></li>
</ul>

В FIDDLE :

http://jsfiddle.net/6kt8jhfo/5 /

Поделиться John Slegers     08 сентября 2015 в 12:27

Похожие вопросы:


JQuery автозаполнение, где результаты являются ссылками

Я пытаюсь создать окно автозаполнения JQuery, где слова, предлагаемые для автозаполнения, являются ссылками (аналогично тому, что происходит на Facebook или Quora). В принципе, я хочу, чтобы…


Наследование имущества list-style-type в Firefox (ошибка в Firebug?)

Давайте посмотрим на некоторые комментарии 1) на странице, сгенерированной WordPress (это не сайт, который я поддерживаю, Мне просто интересно, что здесь происходит). Поскольку эти страницы могут…


Почему мои маркеры элементов списка перекрывают плавающие элементы

У меня есть страница (XHTML Strict), на которой я плаваю изображение рядом с обычными абзацами текста. Все идет хорошо, за исключением случаев, когда вместо абзацев используется список. Маркеры…


Суммирование столбцов списка 2D, где некоторые элементы являются строками

У меня есть список списков формы: my_list=[[1,2,’A’],[4,5,’B’],[7,8,’C’]] и я хочу суммировать первый элемент каждого списка (1+4+7), чтобы получить общую сумму. Я попробовал следующее, что не…


Разыменование списков внутри списка в Python

Когда я определяю список способом generic: >>>a=[[]]*3 >>>a [[],[],[]] а затем попробуйте добавить только ко второму элементу внешнего списка: >>>a[1].append([0,1])…


создание плоского списка из списка списков, где элементы являются строками

Я знаю, что подобный вопрос был задан здесь, делая плоский список из списка списков в Python Но когда элементы списков являются строками, этот метод не разрезает их: arr = [[‘i’, ‘dont’], ‘hi’]…


cscope для файлов, которые являются символическими ссылками

У меня есть исходный каталог с несколькими файлами. Некоторые из них являются символическими ссылками на другие файлы. Я создал файл cscope.files. Но когда я выполняю cscope. Он жалуется на файлы,…


«list-style-type: нет» не работает в Outlook 2007

list-style-type: нет не работает в Outlook 2007 Я запрограммировал рассылку по электронной почте с html. Я могу изменить отображение элементов списка с помощью list-style-type. E.g. если я напишу…


R Markdown слайды с reveal.js: Как выровнять элементы списка по левому краю (маркеры и цифры)?

Как выровнять элементы списка по левому краю страницы слайда ? Похоже, что revealjs всегда использует самый длинный текст элемента списка, центрирует его на слайде, а затем выравнивает все остальные…


Циклирование списка python,элементы которого также являются списком

У меня есть список, его элементы также являются списком. напр.: outlier=[[20,2,67], [90,6,12], [23,16,7]]. как мне написать одиночную линию кода в цикле список outlier принимая элементы из того же…

Маркированный список css. Установка маркера списка разными способами

— С какой цифры начать нумерацию

В зависимости от того, где указать тип нумерации, можно поменять ее у всего списка или у конкретного элемента.

Список определений (definition list)

Список определений был разработан для словарных статей.

Есть общий контейнер ‘dl’. Внутри него стоят ‘dt’ (definition termin — термин) и ‘dd’ (definition description — описание). Простейший пример:

Отдел маркетинга
Данный отдел занимается продвижением товаров и услуг
Финансовый отдел
Данный отдел занимается всеми финансовыми операциями

Все элементы всех списков — блочные. Но внутри элемента ‘dt’ можно ставить только строчные элементы. В элементы ‘dd’ и ‘li’ можно ставить все, что угодно. Отсюда появляются вложенные списки.

Вложенные (смешанные списки)

Это многоуровневые списки, внутри которых есть иерархия. Часто такие списки применяются при построении карты сайта. Пример:

Смешанный список
НОВОСТЬ ДНЯ
  • Сегодня идет дождь
  • Дождь будет идти весь день
    НОВОСТЬ НОЧИ
  • Ночью будет идти дождь
  • Завтра начнется новый день

    • Доброго времени суток!

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

    Данная статья — третья в данном небольшом курсе по основам HTML. Перед прочтением данного урока рекомендую пройти предыдущие два:

    Только началась статья, а вы уже можете заметить использование стандартного маркированного списка. У меня на сайте он выглядит достаточно просто: слева есть небольшой отступ с линией и квадратный маркер. Далее в статье мы подробно рассмотрим какие бывают маркеры, как сделать цифры, а также как сделать собственный маркер.

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

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

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

    А вот так выглядит в браузере:

    Рис. 1.1. Стандартный вид маркированного ненумерованного списка HTML в браузере

    1.1 Стандартные маркеры для маркированного списка

    На изображении выше (Рис 1.1.) можно заметить кружки в начале каждого элемента меню. Это и есть маркер. По умолчанию он в браузере в виде закрашенного круга. Всего есть несколько видов маркеров в HTML: закрашенный круг, пустой круг и квадрат. Они не требуют ни CSS ни подключения сторонних изображений:

    1.2 Маркер списка в виде пустого круга

    Значения атрибута вы знаете, а сейчас посмотрим как сделать маркированный список HTML в коде. Из таблицы выше мы выбрали второе значение «circle» для атрибута type и задали его нашему маркированному списку:

    html > head > title > Пример маркированного списка с маркером в виде пустого круга/ title > / head > body > p > Звезды:/ p > ul type = «circle» > li > Сириус/ li > li > Арктур/ li > li > Поллукс/ li > li > Бетельгейзе/ li > li > Солнце/ li > / ul > / body > / html >

    Сразу смотрим как этот код будет выглядеть в браузере:

    Рис. 1.2. Вид маркера для списка в виде окружности в браузере

    1.3 Маркер списка в виде квадрата

    Посмотрим также и последний пример с квадратным маркером для HTML списка:

    Обратите внимание на маркер, он стал квадратным:

    Рис. 1.3. Вид маркера для списка в виде квадрата в браузере

    Важное замечание: сейчас уже не используется такой способ для создания стилей маркированным спискам. Существует четкое разделение CSS (что такое CSS читайте ) и HTML. HTML — для разметки, а CSS — для создания привлекательного внешнего вида.

    Код, который содержит данный атрибут, при указания типа текущего документа как HTML5 («»), выдаст ошибку при валидации. Если не слышали что такое валидация, то вам сюда — .

    Ошибка будет следующая:

    Рис. 1.4. Ошибка на валидаторе при использовании атрибута «type» у списка

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

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

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

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Пример стандартного нумерованного списка/ title > / head > body > p > От одного до пяти:/ p > ol > li > Первый/ li > li > Второй/ li > li > Третий/ li > li > Четвертый/ li > li > Пятый/ li > / ol > / body > / html >

    Таким образом выглядит нумерованный список со стандартными настройками в браузере:

    Рис. 2.1. Нумерованный список в браузере со стандартными настройками

    Как и у его предшественника (маркированного списка) у него есть свои стили для вывода цифр. Обычная нумерация — это не единственный вид маркеров у нумерованного списка в HTML.

    2.1 Стандартные маркеры для нумерованного списка

    Здесь у нас есть выбор не из трех видов маркеров, а из пяти:

    Название маркераЗначение атрибута «type»Пример списка
    Маркеры в виде арабских чисел1
    • Бадминтон
    • Бейсбол
    Маркеры в виде строчных латинских буквa
    • Джомолунгма
    • Чогори
    • Канченджанга
    Маркеры в виде заглавных латинских буквA
    • Summit Plummet
    • Tantrum Alley
    • Insano
    Маркеры в виде римских цифр в нижнем регистреi
    • Филиппинское море
    • Аравийское море
    • Коралловое море
    Маркеры в виде римских цифр в верхнем регистреI
    • Красный
    • Зеленый
    • Синий

    2.2 Своя нумерация в списке HTML

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

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html > head > title > Произвольная нумерация для нумерованного списка/ title > / head > body > p > Начинаем нумерацию с двенадцати:/ p > ol type = «a» start = «12» > li > Двенадцать/ li > li > Тринадцать/ li > li > Четырнадцать/ li > li > Пятнадцать/ li > li > Шестнадцать/ li > / ol > / body > / html >

    Вот как это будет отображаться на реальном сайте:

    Рис. 2.2. Нумерация с произвольного числа в нумерованном списке

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

    Ну а сейчас перейдем к вложенным спискам HTML.

    3. Как сделать многоуровневый (вложенный) список в HTML

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

    На примере моделей автомобилей мы построим многоуровневый список в HTML:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html > head > title > Вложенный маркированный список HTML/ title > / head > body > ul > li > Citroen ul > li > Berlingo/ li > li > C1/ li > li > C2/ li > li > C3 Picasso/ li > li > C4 Grand Picasso/ li > / ul > / li > li > KIA/ li > li > Toyota/ li > li > Audi/ li > li > Lexus/ li > / ul > / body > / html >

    Обратите внимание, как выглядит многоуровневый список в браузере:

    Рис. 3.1. Пример многоуровневого списка в HTML

    Мы делали многоуровневый список с помощью маркированного (тег

    css li убрать маркер | Все о Windows 10

    На чтение 4 мин. Просмотров 28 Опубликовано

    За управление маркерами есть специальное свойство CSS list-style-type .

    Синтаксис свойства CSS list-style-type

    • disc — маркер в виде закрашенного кружка
    • circle — маркер в виде прозрачного кружка
    • square — маркер в виде закрашенного квадрата
    • none — отсутствие маркера

    Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
    4.0+1.0+4.0+1.0+1.0+1.0+1.0+

    Задача

    Скрыть отображение маркеров в списке.

    Решение

    Для этой цели применяется стилевое свойство list-style-type со значением none . Его следует добавить к селектору UL или LI как показано в примере 1.

    Пример 1. Список без маркеров

    HTML5 CSS 2.1 IE Cr Op Sa Fx

    Результат данного примера показан на рис. 1.

    Рис. 1. Список без маркеров

    Маркеры хотя и не отображаются в списке, но текст при этом всё равно оказывается сдвинут вправо. Чтобы управлять положением элементов списка, для селектора UL в данном примере добавлены свойства margin-left и padding-left . Два свойства вместо одного требуется, чтобы одинаково показывать результат в разных браузерах.

    Тип маркера

    Существует возможность установки внешнего вида маркера элементов списка. В том числе, можно вообще убрать маркер списка CSS. Для этого есть свойство list-style-type . У него достаточно много значений. Часть значений применяется для маркированного, другая часть для нумерованного списка.

    Для маркированного списка:

    list-style-type: disc — в виде диска (по умолчанию)

    list-style-type: circle — в виде круга

    list-style-type: square — в виде квадрата

    Для нумерованного списка

    list-style-type: decimal — арабские цифры (по умолчанию)

    list-style-type: decimal-leading-zero — арабские цифры c 0 впереди для чисел 1-9

    list-style-type: upper-roman — заглавные римские цифры

    list-style-type: lower-roman — строчные римские цифры

    list-style-type: upper-latin — заглавные латинские буквы

    list-style-type: upper-alpha — то же, что и upper-latin

    list-style-type: lower-latin — строчные латинские буквы

    list-style-type: lower-alpha — то же, что и lower-latin

    list-style-type: lower-greek — строчные греческие буквы

    list-style-type: armenian — армянские числа

    list-style-type: georgean — грузинские числа

    list-style-type: none — позволяет убрать маркеры списка. Для обоих списков

    list-style-type: inherit — значение принимается от родительского элемента. Для обоих списков

    Создадим на странице маркированный и нумерованный списки и установим для них тип маркера:

    Попробуйте установить другие типы маркера.

    Как убрать маркеры списка в CSS

    Значение none позволяет убрать маркеры списка. Пример:

    Позиция маркера

    Маркер может занимать в списке две позиции. Он может находиться за пределами элемента списка и занимать своё место на странице. А может находиться внутри элемента списка и быть частью текста. Это выгладит так:

    • В этом пункте списка маркер находится за пределами элемента и занимает своё место на странице.
    • В этом пункте списка маркер входит в элемент списка и является частью текста

    Позицию маркера устанавливает свойство list-style-position . Оно принимает значения:

    list-style-position: outside — за пределами элемента (по умолчанию)

    list-style-position: inside — внутри элемента

    Добавим в маркерованный список ещё один пункт с длинным текстом и добавим селектору #nl1 свойство list-style-position :

    Маркер в виде изображения

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

    Для использлвания изображения существует свойство list-style-image . Значением свойства является путь к файлу изображения.

    Для примера Вы можете использовать это изображение: Нажмите на него правой кнопкой мыши и выберите «Сохранить изображение как».

    Добавим на страницу ещё один список и установим для него маркер в виде картинки. Назовём файл marker, он имеет расширение JPEG. Разместим его в той же папке, где находится страница. Иначе путь к файлу нужно прописывать по-другому.

    Краткая запись

    Существует возможность указать рассмотренные свойства более коротким способом. Для этого есть свойство list-style . В нём перечисляются через пробел сначала тип маркера, затем положение маркера, затем картинка. При этом, все свойства указывать не обязательно. Указываются только те свойства, которые нужны. Если изображение не установлено, то маркер зависит от того, маркерованный список или нумерованный, и от типа маркера.

    Добавим на страницу ещё один список и установим ему стиль с помощью свойства list-style .

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

    Коприрование материалов сайта возможно только с согласия администрации

    Пользовательские маркеры с помощью CSS :: marker

    Теперь легко настроить цвет, размер или тип числа или маркера при использовании