В статье представлено несколько способов, которые позволяют установить определенный маркер для ненумерованного списка, а также указаны их достоинства и недостатки
Если проанализировать какой-либо сайт, то можно обнаружить тот факт, что в контенте очень часто присутствуют списки разного рода: меню, список товаров и т. д. В HTML-коде за нумерованный список отвечает тег , а за маркированный – .
Еще стоит отметить тот факт, что на практике маркированные списки встречаются намного чаще, но при этом у них есть один небольшой недостаток. Маркер в списке отображается по-разному, в зависимости от используемого браузера. Для серьезного дизайнера это проблема.
Чтобы устранить этот негативный эффект надо отменить вывод маркера, воспользовавшись свойством list-style :
ol, ul { list- style: none; }
С этого начинается формирование списка с уникальными маркерами и значками. Ниже представлены наиболее распространенные способы представления уникальных и одинаковых для всех браузеров значков элементов списка.
Маркеры через картинки
Наиболее распространенный и простой способ указать для списка маркер – это воспользоваться бекграундной картинкой (свойство background). Метод основывается на указании в таблице стилей фонового рисунка для элементов списка, а также внутренний отступ (свойство padding), который зарезервирует место для нового маркера. Ниже представлен пример кода:
ul { list- style: none; } li{ background: url(путь- к- картинке) no- repeat; padding- left: 20px; }
Этот способ радует своей уникальностью, так как позволяет установить абсолютно любой маркер в виде картинки. Ниже показано, как наш код будет выглядеть в браузере:
Главная положительная сторона этого метода заключается в 100%-ной кроссбраузерности, но, не смотря на это, есть маленький недостаток. Использование картинки – это дополнительное обращение к серверу.
Маркеры с помощью before
Существует вариант, когда можно обойтись без картинки, если дизайнерские условия позволяют это. Такое очень часто допускается при оформлении основного контента, когда список маркируется простейшими элементами, типа квадратик ( ) или стрелочка (→). Таким образом, мы подошли к тому, что в качестве маркера может выступать какой-либо подходящий спецсимвол.
Далее возникает вопрос, каким образом спецсимволы вставлять в элементы списка. Естественно не в ручную, иначе это был бы очень затянутый и нудный процесс, плюс ко всему еще и трудоемкий. Выйти из этой ситуации нам поможет псевдоэлемент before , применение которого привязывается к определенному селектору, что позволяет автоматизировать наш процесс присвоения маркеров из спецсимволов. Такое решение подходит к большинству браузеров, с учетом того, что для IE , будет прописан expression .
Ниже представлен пример кода, который формирует маркированный список с коротким тире:
li{ this. innerHTML = "-" + this. innerHTML) /*хак для IE*/ } li: before{ content: "\201 3" ; }
На практике получим такую картину:
Напоминаю о том, что в реальных условиях хаки подключаются условными комментариями .
При использовании этого метода главное знать кодировку необходимого значка. Также стоит отметить, что для expression спецсимволы прописываются числовой комбинацией или мнемоническим кодом. Что касается свойства content , то в этом случае вначале ставится слеш, а потом идет запись шестнадцатеричного кода.
Использование insertAdjacentHTML
Вышеупомянутый способ не всегда корректно отрабатывает в легендарном IE (не смотря на хак). Точнее, «костыли» для этого браузера не до конца доработанные. Более действенным является метод, основанный на insertAdjacentHTML , ниже представлен код этого метода:
li{ //z-index: expression(runtimeStyle.zIndex = 1, insertAdjacentHTML("afterBegin", "-")); }
Маркеры, нарисованные CSS-свойствами
Некоторые квадратные маркеры можно нарисовать с использованием некоторых CSS-свойств. К примеру, квадрат с цветной заливкой рисуется через свойство background-color , а квадратик в виде рамки – border (кстати говоря, квадрат с заливкой можно нарисовать и таким способом). Пример записи в CSS-файле:
li{ //z-index: expression(runtimeStyle.zIndex = 1, this. innerHTML = "" + this. innerHTML) /* хак для ие6 и 7 */ } li: before, . listMarkerBackColor{ background- color: #539127; width: 7px; height: 7px; content: "" ; float: left; margin: 6px 6px 0 0 ; overflow: hidden; } html . listMarkerBackColor{ margin- right: 1px; /* исправляем маленткий косяк в IE6 */ }
Таким образом рисованный CSS-свойствами маркер будет выглядеть на практике:
Использование before и first-child в комплексе
Такой метод частенько применяется при оформлении хлебных крошек на сайте. Кто не знает о чем речь, смотрим на пример ниже
В таком случае каждая ссылка отделяется друг от друга спецсимволом, но перед первым элементом никакого спецсимвола быть не должно. В этом нам поможет псевдокласс first-child , который обращается только к первому элементу списка. В кодовом виде это должно выглядеть так
HTML
< ul> < li>< a href= "#" > Главная < li>< a href= "#" > Блог < li>< a href= "#" > CSS < li> Валидный код при использовании target= "_blank"
li: before{ content: "\21 92" ; } li: first- child: before{ content: "" ; }
Стоит также отметить, что такой прием используют не только для хлебных крошек, но и для обычных маркированных списков, в зависимости от дизайнерского задания.
В каких браузерах работает?
| 6.0+ | 4.0+ | 9.5+ | 3.0+ | 3.0+ | - | - |
Выводы
Подводя итог, можно отметить тот факт, что применение псевдоэлемента before является оправданным и рациональным в основном контенте, так как там не выдвигают особых требований к оформлению списков. Это в свою очередь позволит уменьшить нагрузку на сервер, в сравнении с вариантом, когда используют картинку. А если еще отметить тот факт, что в основном контенте может быть очень много маркированных списков, то разница может стать существеннее. Но картинки значительно выигрывают в плане дизайнерских решений маркера.
Microsoft Word - одна из самых популярных программ обработки текста, используемая в домах и офисах во всем мире. Чтобы выдвинуть на первый план важные моменты и организовать текст в последовательные списки, Вы можете создать маркированные или пронумерованные пункты. Это важно практически для каждого вида документов - от научных работ до презентаций, докладов, брошюр и книг. Вот как можно добавить маркеры и нумерацию страниц в MS Word.
Инструкция
- 1 Из верхней строки меню Microsoft Word выберите Формат> Список и Нумерация. Если у Вас уже есть текст, в котором Вы хотели бы создать маркированный или пронумерованный список, сначала выберите текст, затем Формат> Список и Нумерация. В любом случае, в окне отражаются и маркеры, и нумерация.
- 2 Для создания маркированного списка нажмите кнопку Маркировка. Выберите нужный стиль, затем нажмите OK, чтобы добавить маркеры в документ.
- 3 Для создания пронумерованного списка выберите кнопку Нумерация. Выберите нужный стиль нумерации, затем нажмите OK, чтобы добавить пронумерованный список в документ.
- 4 Для создания многоуровневого (вложенного) списка перейдите на вкладку Многоуровневый. Выберите нужный стиль, затем нажмите OK, чтобы добавить список в документ.
Создать список в 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. Маркеры в списке будут изменены.
Если по каким-то причинам вас не устраивают стили маркеров, доступные по умолчанию, вы можете использовать для маркировки любой из присутствующих в программе символов или рисунок, который можно добавить с компьютера или загрузить из интернета.
Маркеры структурируют текст, облегчают задачу восприятия. С маркированным списком материал становится визуально легче для прочтения. Как сделать маркированный список в Ворде?
Инструменты списков обычно находятся на общей панели инструментов в программе.
Начало работы с маркерами:
Внешний вид маркеров можно менять в зависимости от стиля текста:
На заметку! Необязательно нажимать на все стили для выбора между ними. При наведении курсора на 1 из вариантов, он отражается на списке в режиме предварительного просмотра.
Для отмены функции список с последующим сохранением текста выделите всю информацию списка и зажмите кнопку «Маркеры» сортировка удалится, а информация останется.
Чтобы удалить список вместе с содержимым, выделите текст в списке и зажмите кнопку «Delete», после чего нажмите кнопку «Маркеры».
Важно! Перечисленные действия возможны в программе, установленной на операционной системе Windows.
Создание списка в программе на Mac требует другого алгоритма действий:
Форматирование перечня также предполагает возможность изменения расстояния между элементами списка.
На заметку! Кроме того, увеличить отступ можно сняв флажок в графе «Не добавлять интервал между абзацами одного стиля» в этой же вкладке.
Видео — Делаем маркированный список в Microsoft Word
Создание маркированного списка в автоматическом режиме
Автоматическая функция маркирования упрощает задачу писателю, экономит время на выполнение лишних действий.
Настройка включения/выключения автоматической функции:
Для начала автоматического списка:
Единоразовая отмена функции возможна при нажатии выпадающей панели «Параметры автозамены».
Как создать нумерованный список?
Для пошагового перечисления действий, выделения важности, очередности вместо маркированного используется нумерованный список.
Работа с числовыми перечнями полностью повторяет оформление маркеров. Разница заключается только в кнопке, которая запускает данную функцию. Она называется «Нумерация» и находится справа от маркеров.
Как изменить номер в списке:
Важно! Внешний вид номеров (их цвет, шрифт, начертание) можно менять независимо от текста в списке. Для этого нужно нажать на одно из чисел, чтобы выделить все, и выбрать необходимые параметры на панели инструментов.
Создание нумерованного списка в автоматическом режиме
Настройка автоматического режима нумерованного списка аналогична работе с маркированным.
Для ввода числового перечня:
Многоуровневый список: способы создания
Многоуровневый список позволяет разделить информацию по иерархии, разбить данные по категориям и подкатегориям.
Чтобы начать работу над многоуровневым перечислением, достаточно нажать стрелку справа от кнопки «Многоуровневый список» и выбрать нужный стиль маркеров или нумерации.
Одноуровневый перечень также можно разбить на несколько уровней:
На заметку! Еще один вариант изменения уровня графы в списке – установить курсор в начале текста графы и нажать кнопку «Tab». Чем ниже уровень вам нужен, тем больше раз нужно нажимать данную кнопку. Чтобы вернуть необходимую графу на уровень выше, нажмите кнопку «Backspace».
В уже существующем списке из нескольких категорий легко сменить стиль обозначений:
На заметку! Примечательно, что в одном многоуровневом списке могут присутствовать как символы, так и числа .
Чем различаются схожие команды «Определить новый многоуровневый список» и «Определить новый стиль списка»? Первая подходит для работы с единичными перечнями или в случаях, когда список точно не будет подвергаться изменениям. Вторая нужна для внесения правок в уже существующий стиль – это может отразиться на многоуровневых списках по всему документу.
Как сделать список из готового текста?
Готовый текст при необходимости легко преобразовать в список:
Работа со списком завершается двумя нажатиями кнопки «Enter».
Сортировка списков в Word
Сортировка пунктов списка в алфавитном порядке упрощает задачу поиска нужной графы. Особенно, если список обширный, вроде оглавления или списка использованной литературы в научных материалах.
Видео — Как сделать маркированный, нумерованный и многоуровневый список в Ворде
В этой статье рассмотрим, как вместо цифр, кружочков, и квадратиков в , сделать и установить красивые маркеры-изображения.
Между прочем маркеры можно и нарисовать средствами CSS и HTML и о том как это делается вот , ну а здесь поработаем с изображениями.
Сначала нужно получить картинку маркера.
Можно найти её в интернете, тем у кого есть фотошоп, можно сделать в нём. Я покажу, как сделать маркеры в редакторе Paint, так как он есть во всех Windows по умолчанию.
Картинку можно взять прямо отсюда.
Для этого делаем снимок экрана (нажать клавишу Prt Sc Sys Rd), и открыв Paint, щёлкаем по иконке «Вставить».
Затем выбираем «Выделить — прямоугольная область», аккуратно, с минимальным зазором выделяем выбранный маркер, и щёлкаем «Обрезать».
Если нужен маркер помельче, то можно уменьшить масштаб экрана браузера(в Paint у меня, например, масштабирование работает очень грубо), и вырезать картинку помельче.
Если у Вас фон отличается от белого, то чтобы закрасить белые углы (картинка-то вырезается квадратная), можно воспользоваться онлайн фотошопом
Загрузив в него картинку нужно войти в меню «Коррекция» и выбрать «Color balanse». Затем, передвигая бегунки, подобрать нужный Вам фон, и сохранить подправленное изображение обратно на свой компьютер, пройдя в меню «Файл», и выбрав «Сохранить как …»
Если фон Вашей страницы вообще тёмный, то можно подобрать заливку цвета, из панели инструментов (слева), и аккуратненько залить белые углы, так называемое полотно изображения. Сама картинка останется такой же как и была.
Теперь приступим к украшению списка этой картинкой. Свойство, применяемое для вставки картинки маркера в список, называется list-style-image . В значении его указывается путь к картинке.
ul
{
}
Если Вам потребуется заключить список в рамку, то в селектор ul добавляется свойство list-style-position: inside;. Это свойство указывает на то, что маркеры должны располагаться внутри рамки, отодвинув при этом содержание.
ul
{
border
: 2px solid #ffff00
;
list-style-image
: url(images/2.png)
;
list-style-position
: inside
;
}
Можно сделать список в блоке с закруглёнными углами и тенью. Для этого в селектор ul добавляются свойства border-radius и box-shadow.
border-radius
: 5px
;
Пример, html документ, с использованием этих блоков для списка с маркерами-картинками.
- Строка списка
- Строка списка
- Строка списка
- Строка списка
В этом коде Вам нужно будет только вставить своё название картинки в свойстве list-style-image, там где 2.png, а у меня получился вот такой список
