Ознакомьтесь с нашей политикой обработки персональных данных
21:10 

Lists

D Ash
Embrace your dreams and prove your honor...
Сегодня довольно коротко. О списках.

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

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

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



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



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

Как?

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

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

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

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


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

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

Примеры. ^__^

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


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

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




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

Примеры.

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

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




That's kinda it. (^__^)

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

Комментарии
2011-11-20 в 12:44 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Как клаcсно с картинками! Спасибо! :red:


  • раз

  • два

  • три


2011-11-20 в 12:57 

D Ash
Embrace your dreams and prove your honor...
2013-02-02 в 21:58 

Любительница Хэппи Эндов
поднять - подняли, но еще и разбудить пытаются))
К теме маркировки списка: какие именно картинки можно использовать в качестве маркера?

2013-02-03 в 23:26 

D Ash
Embrace your dreams and prove your honor...
Любительница Хэппи Эндов, стандарт веба: jpg, png, gif.

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная