Lists

[D Ash]

Сегодня довольно коротко. О списках.

Есть два типа. Нумерованные и ненумерованные.

Синтаксис.

Синтаксис следующий:

1. Тег открытия списка. Если вам нужен нумерованный - это <ol>, если ненумерованный - <ul>. Для выбора типа нумерации (например, арабские цифры, римские большие цифры, римские маленькие, большие буквы или маленькие буквы) используйте параметр style="list-style-type:значение;", список значений тут.
   
   Важно, что элементы списка не стоит раскидывать по разным строкам (если вам, конечно, не хочется, чтобы между ними была свободная строка). Т.е. на стыке элементов следует просто писать </li><li>.
2. Перечисление элементов. Каждый элемент должен содержаться внутри тэгов <li> и </li>.
3. Закрывающие теги </ol> или </ul>.

Примером является текст выше.

<ol style="list-style-type:upper-roman;"><li>Тег открытия списка. Если вам нужен нумерованный - это <b><ol></b>, если ненумерованный - <b><ul></b>. Для выбора типа нумерации (например, арабские цифры, римские большие цифры, римские маленькие, большие буквы или маленькие буквы) используйте параметр <b>style="list-style-type:значение;"</b>, список значений <a href="http://www.w3schools.com/cssref/pr_list-style-type.asp">тут</a>.

Важно, что элементы списка не стоит раскидывать по разным строкам (если вам, конечно, не хочется, чтобы между ними была свободная строка). Т.е. на стыке элементов следует просто писать <b></li><li></b>.</li><li>Перечисление элементов. Каждый элемент должен содержаться внутри тэгов <b><li></b> и <b></li></b>.</li><li>Закрывающие теги <b></ol></b> или <b></ul></b>.</li></ol>

Пока всё банально и просто, верно? Ниже чуть-чуть интереснее.

---

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

Как?

Как?

Проще всего - повесить стиль на <li>, верно? А чтобы это дело упростить ещё сильнее, можно использовать заранее прописанный класс "offtop". Но если так сделать, то цвет поменяет не только метка, но и текст внутри. Как решить эту задачу?

На деле - довольно просто. Надо просто вернуть стандартный стиль тексту внутри. Правда, для этого нам понадобится упаковать его в ещё два контейнера - первый (внешний) с классом "in-list" и второй (внутренний) - "postTitle".

Другими словами, вместо:

<li>Содержимое элемента.</li>

Вам надо написать:

<li class="offtop"><span class="in-list"><span class="postTitle">Содержимое элемента.</span></span></li>

Почему именно так? Честно - я просто не нашёл ничего проще в дайри. Основные настройки шрифта вписываются сразу в body, он классом не является, к тому же даже если бы - там куча всего другого, а все остальные места, куда вешается стандартный цвет шрифта для записи, помимо цвета меняют текст с других сторон (толщина, размер и т.п.).

Чтобы было проще, можете просто дважды выделить текст и кликнуть по кнопке добавления кода оффтопа, а потом переписать только имена классов.

Примеры.

Примеры. ^__^

• Строка раз. Представьте тут что-нибудь умное.
• Строка два. В ней ничего интересного, поэтому мы всю её затеняем.
• Строка три. Косит под массовку.
• Строка три-2. Косит под массовку.
• Строка три-3. Косит под массовку.
• Строка четыре. Она тут самая крутая, с тем самым обрамлением.
• И строка пять. Мне стало скучно, и я полез прописывать ей стиль... Кстати, простым обрамлением, описанным выше, всю эту кутерьму не отменить.

<ul><li>Строка раз. Представьте тут что-нибудь умное.</li><li class="offtop">Строка два. В ней ничего интересного, поэтому мы всю её затеняем.</li><li>Строка три. Косит под массовку.</li><li>Строка три-2. Косит под массовку.</li><li>Строка три-3. Косит под массовку.</li><li class="offtop"><span class="in-list"><span class="postTitle">Строка четыре. Она тут самая крутая, с тем самым обрамлением.</span></span></li><li style="color:#ff0000;text-shadow:0 0 3px #ff0000; padding:10px; border:3px dashed #444; font-size:16px; font-weight:bold;">И строка пять. Мне стало скучно, и я полез прописывать ей стиль... Кстати, простым обрамлением, описанным выше, всю эту кутерьму не отменить.</li></ul>

И ещё один, небольшой. Он не идеален в том плане, что некоторые из пунктов могут быть не видны в ряде дизайнов, но всё же.

• Парам.
• Парам.
• Парам.
• Парам.
• Парам.
• Парам.
• Парам.
• Парам.

<ul><li style="color:#000;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#f00;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#0f0;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#00f;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#ff0;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#0ff;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#f0f;"><span class="in-list"><span class="postTitle">Парам.</span></span></li><li style="color:#fff;"><span class="in-list"><span class="postTitle">Парам.</span></span></li></ul>

---

Напоследок ещё можно сказать, что на элементы списка разрешено устанавливать свои изображения вместо символов и точек с квадратиками (см. list-style-image) (ясно, предварительно эти изображения надо в БИ закинуть, а ссылку потом пофиксить). Кроме того, можно делать вложенные списки.

Примеры.

Примеры.

• Текст номер раз.
• Два.
• Три.

<ul style="list-style-image:url('/userdir/1/9/2/4/1924297/72373108.png');"><li>Текст номер раз.</li><li>Два.</li><li>Три.</li></ul>

1. Параграф раз.
2. Параграф два.
3. Параграф три.
   
   1. Подпараграф раз.
   2. Подпараграф два. Он скучный, так что тусклый.
   3. Подпараграф три.
4. Параграф четыре.
   А тут пара важных пунктов, порядок для которых не имеет значения.
   
   • Типа меня...
   • ...меня...
   • ...и меня.

<ol style="list-style-type:upper-latin;"><li>Параграф раз.</li><li>Параграф два.</li><li>Параграф три.
<ol style="list-style-type:lower-latin;"><li>Подпараграф раз.</li><li class="offtop">Подпараграф два. Он скучный, так что тусклый.</li><li>Подпараграф три.</li></ol></li><li>Параграф четыре.
А тут пара важных пунктов, порядок для которых не имеет значения.
<ul><li class="offtop"><span class="in-list"><span class="postTitle">Типа меня...</span></span></li><li class="offtop"><span class="in-list"><span class="postTitle">...меня...</span></span></li><li class="offtop"><span class="in-list"><span class="postTitle">...и меня.</span></span></li></ul></li></ol>

---

That's kinda it. (^__^)

@темы: Дневник, CSS, Теги оформления записи, Записи, Комментарии

Comments

[Тайя.]

Как клаcсно с картинками! Спасибо!

• раз


• два


• три

[D Ash]

Тайя, которая душит романтиков,
You're welcome. (^__^)

[Любительница Хэппи Эндов]

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

[D Ash]

Любительница Хэппи Эндов, стандарт веба: jpg, png, gif.