Как сделать список по горизонтали
Перевернуть столбец или строку при помощи кнопки «Транспонировать» в Excel.
Конечно не каждый пользователь «Excel» часто встречается с потребностью «переворачивать» список из горизонтального положения в вертикальное, но пригодится опция транспонирования может каждому. Кроме того, опция транспонирования данных значительно расширяет возможности аналитического анализа, выполняемого в «экселе» и упрощает сильно работу с таблицами.
Транспонировать (англ. Transpose) — переставлять, перемещать.
Рассмотрим работу опции «транспонировать» на примере случайно придуманного списка овощей, хранящихся на овоще базе.
Список овощей расположен вертикально:
| Овощи |
| Томаты; |
| Свекла; |
| Огурцы; |
| Репа; |
| Редька черная; |
| Редька белая. |
Приведенный список требуется расположить горизонтально.
Пошаговые действия:
Шаг 1.
Выделить ячейки со списком;
Шаг 2.
Копировать ячейки сочетанием клавиш » ctrl»+»C» или вызвав правой кнопкой мыши контекстное меню и выбрав строчку «Копировать»;
Шаг 3.
Перенести курсор в начало предполагаемого горизонтального списка;
Шаг 4.
Вызвать меню специальной вставки и выбрать опцию «Транспонировать».
Скопированные ячейки из колонки (столбца) будут вставлены в строку горизонтально.
Отделяем заголовки от абзацев или структурирование текста на html странице
Здравствуйте, уважаемые читатели блога! Сегодня мы поговорим о структурировании текста на web-страницах, об особенностях его отображения и рассмотрим как разбить текст на отдельные логические фрагменты: заголовки, абзацы, списки.
Для работы с текстом в html есть множество тегов, но для начала необходимо поговорить о некоторых особенностях отображения текста в браузере. Во-первых, любое количество пробелов, знаков табуляции и переносов строк, идущих подряд, отображается как один пробел. Т.е. позиционировать текст с помощью пробелов и знаков табуляций не получится.
Для примера эти строки на web-странице будут отображаться одинаково не смотря на их разное написание:
Исключение составляет тег pre, внутри которого все пробелы и переносы отображаются как есть.
Во-вторых, текст занимает ширину окна браузера. Если длинная строка текста шире окна браузера, то в местах пробелов или дефиса автоматически будут вставлены переносы строк. Если в строке нет ни пробелов, ни дефисов, а строка не умещается по ширине окна, то в браузере появится горизонтальная полоса прокрутки.
Теперь перейдем к рассмотрению структурных элементов текста в разметке html.
Абзацы в языке HTML
Обычно, блоки текста разделяют между собой абзацами(параграфами). Это облегчает чтение больших кусков текста. Язык HTML для создания абзаца содержит парный тег «p». Синтаксис создания абзацев следующий:
Абзацы на html-странице отделяются небольшими отступом от предыдущего и последующего элементов. Тег «Р» также является блочным элементом. Что такое блочные элементы я писал в статье «Как создать web-страницу». Напомню, что блочные элементы характеризуются тем, что занимают всю доступную ширину html-страницы, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
Рассмотрим пример применения абзацев на web-странице. Откроем текстовый редактор, наберем HTML-код и сохраним с расширением html:
При открытии данного файла будет примерно такая картина:
Пока, что наша страница содержит одни абзацы.
Для выравнивания текста в абзаце тег «Р» поддерживает атрибут align. Он может принимать одно из четырех значений:
По умолчанию атрибут align имеет значение left. Пример использования атрибута align:
И так это отобразится в браузере:
Заголовки в языке HTML
Для выделения разделов текста на web-странице применяются заголовки. В html существует шесть уровней заголовков. Самым верхним уровнем является уровень 1 — тег h1, а самым нижним — уровень 6, тег «h6». Теги h1 — h6 являются блочными элементами страницы. Содержимое заголовка первого уровня отображается самым крупным шрифтом жирного начертания, а заголовки последнего шестого уровня — самым мелким.
Синтаксис создания заголовков:
Также заголовки играют важную роль при раскрутке сайта, так как поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка.
Добавим заголовки в нашу страницу:
И видим, что на нашей странице кроме абзацев появились выделенные большим жирным шрифтом заголовки:
Теги h1-h6, как и тег «Р», используют атрибут align для выравнивания текста. При использовании этого атрибута все аналогично как с тегом «Р».
Нумерованные и маркированные списки в HTML
Список применяется для того, чтобы сформировать пронумерованный или непронумерованный перечень каких-либо фраз или значений. Список с пронумерованными пунктами называется нумерованным, а с непронумерованными пунктами — маркированным.
В маркированных списках пункты помечаются маркерами, которые ставятся левее пунктов списка. Web-браузер отображает список с отступом слева и самостоятельно расставляет необходимые маркеры или нумерацию. Списки и их пункты относятся к блочным элементам Web-страницы.
Любой список в HTML представляет собой набор элементов, каждый из которых помещается внутрь тега «li». Затем все элементы помещаются внутрь тега «ul», если нужен маркированный список, или внутрь тега «ol», если нужен нумерованный список.
И выглядят они примерно так:
В маркированных списках могут применяться различные типы маркеров. Для определения типа маркера в тег «ul» добавляется атрибут type, если мы хотим задать вид маркера для всех элементов списка или добавить это же атрибут в тег «li» если необходимо задать вид маркера для конкретного элемента. Атрибут type может принимать следующие значения:
По умолчанию атрибут type равен disc. Пример использования:
Отображение в браузере:
Нумерованный список также поддерживает атрибут type, с помощью которого можно задавать следующие типы маркера:
По умолчанию в нумерованном списке атрибут type устанавливает в качестве маркеров арабские цифры. Кроме атрибута type нумерованный список поддерживает атрибут start, который задает число с которого будет начинаться список. В спецификации HTML5 для нумерованного списка появился еще атрибут reversed, который меняет нумерацию на обратный порядок. Т.е. вместо 1, 2, 3 список будет нумероваться 3, 2, 1. Но атрибут reversed поддерживается еще очень малым количеством браузеров.
Списки можно помещать друг в друга, создавая вложенные списки. Вложенный список помещается внутрь элементов «li» внешнего списка:
В HTML есть еще третий вид списка — список определений, который представляет из себя перечень терминов и их определений. Этот список задается с помощью парного тега «dl». Внутри него помещают пары «термин — определение». Термины заключают в парный тег «dt», а определения — в парный тег «dd»:
Отображение в браузере:
На нашей Web-странице есть абзац классификации автомобилей. Сделаем эту классификацию при помощи маркированного списка:
И посмотрим результат:
Горизонтальные линии
Для разделения или дополнительного выделения блоков текста в HTML есть одинарный тег HR — горизонтальная линя. Так это выглядит в коде html:
И вот как это отображается:
Горизонтальная линия HTML растягивается по горизонтали на всю ширину Web-страницы и имеет один-два пиксела в толщину, в зависимости от используемого браузера.
С помощью атрибутов можно задавать внешний вид горизонтальной линии. Тег «hr» поддерживает следующие атрибуты:
Вставим горизонтальную линию на нашу WEB-страницу. Сделаем ее зеленым цветом, толщиной в 1 пиксель и шириной 320 пикселей:
Результат будет примерно таким:
Комментарии html
В html есть возможность вставлять комментарии. Комментарий — это часть html-кода, которая не отображается в WEB-браузере. Текст комментария размещается между открывающим тегом. Пример:
Комментариями можно помечать какие-то участки кода, чтобы в будущем можно было легче разобраться в нем.
На этом все и, как обычно, подведу итог поста. В данной статье мы рассмотрели основные html-элементы для разделения текста страницы на логические части. Напомню все эти элементы:
Остальные материалы о тегах html ищите в рубрике HTML и CSS и подписывайтесь на обновления моего блога. До встречи в следующих постах!
Списки CSS
CSS позволяет создать маркированные и нумерованные списки, также в качестве маркера можно установить изображение. Для работы со списками в CSS есть три свойства.
Свойство list-style-type
Свойство list-style-type устанавливает вид маркера. Вот таблица допустимых значений для этого свойства:
Теперь пример использования этого свойства:
Обратите внимание, мы превратили нумерованный список
- в маркированный.
Рисунок 1. Свойство list-style-type.
Свойство list-style-type достаточно простое, как и остальные свойства по работе со списками.
Свойство list-style-image
Свойство list-style-image устанавливает символом маркера графический файл.
Вот результат работы этого кода:
Рисунок 2. Свойство list-style-image.
Мы видим, что теперь маркеры списка отмечены графическим файлом http://komotoz.ru/_images/bullet_li.gif.
Свойство list-style-position
Перед тем, как приступить к изучению этого свойства, более детально изучим модель форматирования элемента
- .
» title=»Форматируем блок
- «> Рисунок 3. Форматируем блок
- .
Вот что мы получим:
» title=»Форматируем блок
- «> Рисунок 4. Форматируем блок
- .
Теперь маркеры списка вышли за пределы контейнера
- . Таким образом маркеры могут выйти и за пределы контейнера статьи, к которой принадлежит список, что нарушит внешний вид сайта.
Вот что мы получили:
Рисунок 5. Свойство list-style-position.
Свойство list-style
Свойство list-style является сокращённой формой, позволяющей использовать значения всех трёх предыдущих свойств.
Пример: сделаем картинку маркером и поместим маркер внутрь блока пункта списка.
Рисунок 6. Свойство list-style.
Мы в одном свойстве list-style указали два значения: положение маркера и путь графичекого файла маркера.
Свойство list-style используют чаще всего, даже для задания одного значения. Оно короткое, его легко написать.
Многоуровневый список в HTML: как создать и настроить?
Дата публикации: 2016-08-16
От автора: всех приветствую. Наверняка большинству из вас нравятся красиво оформленные списки, так как это позволяет очень легко воспринимать информацию, которая в них записана. В этой статье мы создадим многоуровневый список в html, а также немного оформим его с помощью css. Приступим!
Базовая теория
Понятно, что для создания многоуровневого списка нужно хотя бы понимать, как создать простой список. Собственно, самих видов списков в html существует два: нумерованный и маркированный. Созданы они для разных целей. Нумерованный стоит применять тогда, когда, например, какоу-то перечисление действий нужно выполнять строго в указанном порядке. Соответственно, такой список подошел бы для планирования дня или записи рецепта.
В маркированном пункты просто стоят друг за другом, но при этом если их поменять местами, то ничего не поменяется, так как пункты не привязаны к какой-то строгой нумерации.
Это просто теория, о которой нужно знать, но на практике не случится ничего страшного, если вы будете использовать списки по-разному в разных ситуациях. Я особо не заморачиваюсь по поводу того, какой тип выбрать.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Собственно, тег ol создает нумерованный список, а тег ul – маркированный. Это понятно. Надеюсь, вы также имеете представление о том, как создавать простейший список, поэтому мы сразу перейдем к созданию многоуровневого.
Многоуровневый список: как его делать?
Собственно, тянуть резину долго не буду, вот разметка, можете вставить в свой html-файл.
Итак, если вы внимательно просмотрели разметку, то наверное уже уловили суть? Сначала мы открываем ol, это будет наш родительский список, в котором будут содержаться вложенные списки и все пункты. Пункты, как вы понимаете, создаются парным тегом li, внутри которого пишется содержимое.
Соответственно, вложенный список мы обязательно должны вложить в один из наших пунктов. То есть открыли тег li, написали в нем нужный контент, но после этого не закрываем тег. Закрывать будем только после того, как создадим внутри точно такой же список.
В нашем случае получается такой себе план на день. Не забудьте правильно закрыть все теги. Вообще минус многоуровневых списков, как и таблиц, это громоздкая разметка. Представьте, что мы были дописали сюда еще списки для 19-го и 20-го чисел, а пункты разбили на подпункты, которые вынесли бы в отдельные перечни, которые, в свою очередь, располагались бы уже внутри вложенных. То есть была бы уже вложенность 2-го уровня. Итого все это заняло бы 30-60 строк кода.
Кстати, вот так это выглядит:
Как видите, браузер автоматически проставляет отступы для вложенного списка, чтобы визуально было понятно, что он относится к первому пункту. Единственная проблема в том, что внутренний перечень получает такой же нумератор – числа, а это не совсем правильно.
Чтобы изменить нумератор, необходимо уже использовать css. Обратимся к вложенным спискам так:
2.4. CSS-позиционирование
CSS рассматривает макет html-документа как дерево элементов. Уникальный элемент, у которого нет родительского элемента, называется корневым элементом. Модуль CSS-позиционирование описывает, как любой из элементов может быть размещен независимо от порядка документа (т.е. извлечен из «потока»).
В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему позиционирования. Расположение этих блоков регулируется:
Схемы позиционирования
В CSS блок элемента может быть расположен в соответствии с тремя схемами позиционирования:
Нормальный поток
Обтекание
Абсолютное позиционирование
Элементом «вне потока» может быть плавающий, абсолютно позиционированный или корневой элемент.
1. Содержащий блок
2. Выбор схемы позиционирования: свойство position
Свойство position определяет, какой из алгоритмов позиционирования используется для вычисления положения блока.
Свойство не наследуется.
Относительно позиционированный блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
Относительно позиционированный блок создает новый содержащий блок для абсолютно позиционированных потомков.
Отступы margin абсолютно позиционированных блоков не схлопываются.
Содержимое абсолютно позиционированного элемента не может обтекать другие блоки. Абсолютно позиционированный блок могут скрывать содержимое другого блока (или сами могут быть скрыты), в зависимости от значения z-index перекрывающихся блоков.
«Липкий» блок может перекрывать другие блоки, а также создавать полосы прокрутки в случае переполнения.
«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство, первоначально зарезервированное для него.
«Липкий» блок создает новый содержащий блок для абсолютно и относительно позиционированных потомков.
При печати фиксированные блоки повторяются на каждой странице, содержащим блоком для них устанавливается область страницы. Блоки с фиксированным положением, которые больше области страницы, обрезаются.
Рис. 1. Разница между статичным, относительным и абсолютным позиционированием
3. Смещение блока: свойства top, right, bottom, left
| top | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство top задает расстояние, на которое верхний край абсолютно позиционированного блока (с учетом его margin ) смещается ниже верхнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно верхнего края самого блока (то есть блоку задается позиция в нормальном потоке, а затем смещение от этой позиции в соответствии с этим свойством).
| right | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство right указывает расстояние, на которое правый край абсолютно позиционированного блока (с учетом его margin ) смещен влево от правого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно правого края самого блока.
| bottom | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно высоты содержащего блока. Для «липкого» блока — относительно высоты корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство bottom указывает расстояние, на которое нижний край блока смещен вверх относительно нижнего края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно нижнего края самого блока.
| left | |
|---|---|
| Значение: | |
| auto | Влияние значения зависит от типа элемента. Значение по умолчанию. |
| длина | Смещение на фиксированном расстоянии от указанного края. Отрицательные значения допускаются. |
| % | Процентные значения вычисляются относительно ширины содержащего блока. Для «липкого» блока — относительно ширины корневого элемента. Отрицательные значения допускаются. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство left указывает расстояние, на которое левый край смещен вправо от левого края содержащего блока. Для относительно позиционированных блоков определяет смещение относительно левого края самого блока.
Положительные значения смещают элемент внутрь содержащего блока, а отрицательные — за его пределы.
4. Обтекание: свойство float
Обтекание позволяет блокам смещаться влево или вправо на текущей строке. «Плавающий блок» смещается влево или вправо до тех пор, пока его внешний край не коснется края содержащего блока или внешнего края другого плавающего блока. Если имеется линейный блок, внешняя верхняя часть плавающего блока выравнивается с верхней частью текущего линейного блока.
При использовании свойства float для элементов рекомендуется задавать ширину. Тем самым браузер создаст место для другого содержимого. Если для плавающего элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор, пока не уместится. При этом остальные элементы уровня блока будут его игнорировать, а элементы уровня строки будут смещаться вправо или влево, освобождая для него пространство и обтекая его.
Свойство не наследуется.
| float | |
|---|---|
| Значение: | |
| none | Отсутствие обтекания. Значение по умолчанию. |
| left | Элемент перемещается влево, содержимое обтекает плавающий блок по правому краю. |
| right | Элемент перемещается вправо, содержимое обтекает плавающий блок по левому краю. |
| inherit | Наследует значение свойства от родительского элемента. |
Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются.
Рис. 2. Обтекание элементов
5. Управление потоком рядом с плавающими элементами: свойство clear
Свойство clear указывает, какие стороны блока/блоков элемента не должны прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.
Свойство не наследуется.
| clear | |
|---|---|
| Значение: | |
| none | Означает отсутствие ограничений на положение элемента относительно плавающих блоков. Значение по умолчанию. |
| left | Смещает элемент вниз относительно нижнего края любого плавающего слева элемента, находящемся выше в исходном документе. |
| right | Смещает элемент вниз относительно нижнего края любого плавающего справа элемента, находящемся выше в исходном документе. |
| both | Смещает элемент вниз относительно нижнего края любого плавающего слева и справа элемента, находящемся выше в исходном документе. |
| inherit | Наследует значение свойства от родительского элемента. |
Для предотвращения отображение фона или границ под плавающими элементами используется правило
6. Определение контекста наложения: свойство z-index
В CSS каждый блок имеет позицию в трех измерениях. В дополнение к горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально накладываются друг на друга.
Рис. 3. Положение элементов вдоль оси Z
Порядок, в котором дерево документа отрисовывается на экране, описывается с помощью контекста наложения. Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень, который является его положением на оси Z относительно других блоков в том же контексте наложения.
Свойство z-index позволяет изменить порядок наложения позиционированных элементов в случае, когда они накладываются друг на друга.
Свойство не наследуется.
6.1. Контекст наложения
Если для элементов свойства z-index и position не заданы явно, контекст наложения равен порядку их расположения в исходном коде и браузер отображает элементы на странице в следующем порядке: