Смещение css. Позиционирование в CSS. Box-модель в CSS и типы позиционирования

Для Windows 13.04.2019
Для Windows

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

маркированный список —

    — каждый элемент списка
  • отмечается маркером,
    нумерованный список —
      — каждый элемент списка
    1. отмечается цифрой,
      список определений — — состоит из пар термин
      —
      определение.

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

      Создание HTML-списков

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

      Маркированный список представляет собой неупорядоченный список (от англ. Unordered List) . Создаётся с помощью парного тега

      . В качестве маркера элемента списка выступает метка, например, закрашенный кружок.

      Браузеры по умолчанию добавляют следующее форматирование блоку списка:

      Каждый элемент списка создаётся с помощью парного тега

    2. (от англ. List Item) .
      доступны .
    • Microsoft
    • Google
    • Apple
    Рис. 1. Маркированный список

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

    Нумерованный список создаётся с помощью парного тега . Каждый пункт списка также создаётся с помощью элемента

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

    Блок списка также имеет стили браузера по умолчанию:

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

    Для тега

      доступны следующие атрибуты:

      Таблица 1. Атрибуты тега
      Атрибут Описание, принимаемое значение
      reversed Атрибут reversed задает отображение списка в обратном порядке (например, 9, 8, 7…).
      start Атрибут start задает начальное значение, от которого пойдет отсчет нумерации, например, конструкция
        первому пункту присвоит порядковый номер «10». Также можно одновременно задавать тип нумерации, например,
          .
      type Атрибут type задает вид маркера для использования в списке (в виде букв или цифр). Принимаемые значения:
      1 — значение по умолчанию, десятичная нумерация.
      A — нумерация списка в алфавитном порядке, заглавные буквы (A, B, C, D).
      a — нумерация списка в алфавитном порядке, строчные буквы (a, b, c, d).
      I — нумерация римскими заглавными цифрами (I, II, III, IV).
      i — нумерация римскими строчными цифрами (i, ii, iii, iv).
      1. Microsoft
      2. Google
      3. Apple
      Рис. 2. Нумерованный список

      3. Список определений

      Списки определений создаются с помощью тега

      . Для добавления термина применяется тег
      , а для вставки определения — тег
      .

      Блок списка определений имеет следующие стили браузера по умолчанию:

      Для тегов

      ,
      и
      доступны .

      Режиссер:
      Петр Точилин
      В ролях:
      Андрей Гайдулян
      Алексей Гаврилов
      Виталий Гогунский
      Мария Кожевникова
      Рис. 3. Список определений

      4. Вложенный список

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

      • Пункт 1.
      • Пункт 2.
        • Подпункт 2.1.
        • Подпункт 2.2.
          • Подпункт 2.2.1.
          • Подпункт 2.2.2.
        • Подпункт 2.3.
      • Пункт 3.

      Рис. 4. Вложенный список

      5. Многоуровневый нумерованный список

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

      1. пункт
      2. пункт
        1. пункт
        2. пункт
        3. пункт
          1. пункт
          2. пункт
          3. пункт
        4. пункт
      3. пункт
      4. пункт

      Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
      counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
      counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
      content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.

      Ol { /* убираем стандартную нумерацию */ list-style: none; /* Идентифицируем счетчик и даем ему имя li. Значение счетчика не указано - по умолчанию оно равно 0 */ counter-reset: li; } li:before { /* Определяем элемент, который будет нумероваться — li. Псевдоэлемент before указывает, что содержимое, вставляемое при помощи свойства content, будет располагаться перед пунктами списка. Здесь же устанавливается значение приращения счетчика (по умолчанию равно 1). */ counter-increment: li; /* С помощью свойства content выводится номер пункта списка. counters() означает, что генерируемый текст представляет собой значения всех счетчиков с таким именем. Точка в кавычках добавляет разделяющую точку между цифрами, а точка с пробелом добавляется перед содержимым каждого пункта списка */ content: counters(li,".") ". "; }
      Рис. 5. Многоуровневый нумерованный список

Сегодня нет практически ни одного сайта, где бы не использовались HTML списки (

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

      А теперь посмотрите демо-версию, чтобы увидеть, что же мы с вами будем создавать.

      Выглядят гораздо лучше, не так ли? И вы тоже можете создать такие списки при помощи простого CSS кода. Хотите знать как? Читайте!

      Список #1: Простая система навигации

      Чаще всего списки используются при создании навигационного меню. Код данного HTML/CSS примера позволяет создать простую, даже немного скромную, но привлекательную систему навигации.

      • Home
      • Blog
      • About
      • Contact

      /* LIST #1 */ #list1 { } #list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; } #list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; } #list1 ul li a { text-decoration:none; color:#eee; } #list1 ul li a:hover { text-decoration:underline; }

      Список #2: Использование различного шрифта при нумерации

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

        The Netherlands is a country in ...

        The United States of America is a federal constitutional ...

        The Philippines officially known as the Republic ...

        The United Kingdom of Great Britain and ...

      /* LIST #2 */ #list2 { width:320px; } #list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; } #list2 ol li { } #list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; } #list2 ol li p em { display:block; }

      Список #3: Изображения-маркеры

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

      • Java
      • .NET

      /* LIST #3 */ #list3 { } #list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; } #list3 ul li { line-height:30px; }

      Список #4: iPhone-стиль

      Данный список взят из статьи the iPhone Contacts App, созданный при помощи CSS и jQuery. Так выглядят списки на iPhone. Очень привлекательно, не так ли? Хотите такой на свой сайт?

      • Toronto2004
      • Beijing2008
      • London2012
      • Rio de Janeiro2016

      /* LIST #4 */ #list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; } #list4 ul { list-style: none; } #list4 ul li { } #list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; } #list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; } #list4 ul li a strong { margin-right:10px; }

      Список #5: Вложенные списки

      Вложенные списки могут быть необыкновенно полезны и выглядят красиво. Изменив третью технику (Изображения-маркеры), мы можем создать «расширенный список». Конечно же не без помощи jQuery:

      1. Google
        1. Picasa
        2. Feedburner
        3. Youtube
      2. Microsoft
        1. Corel Corporation
        2. Zignals
        3. ByteTaxi
      3. Yahoo!
        1. Xoopit
        2. BuzzTracker
        3. MyBlogLog

      /* LIST #5 */ #list5 { color:#eee; } #list5 ol { font-size:18px; } #list5 ol li { } #list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; } #list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

      Список #6: Римская нумерация + многострочный тип

      По умолчанию в списке используются стандартная нумерация (1, 2, 3, 4 и т.д.). Изменив значение в CSS, вы можете задать другой тип нумерации, к примеру, римский.
      Так же по умолчанию, нумерация и маркеры располагаются вне списка (отличный пример тому - наш список под номером 2). Но и это исправимо, всего лишь нужно изменить значение list-style-position свойства на inside.

      1. Lorem ipsum dolor sit amet, ...
        Fusce sit amet ...
      2. Aenean placerat lectus tristique...
        Vivamus interdum ...
      3. Mauris eget sapien arcu, vitae...
        Phasellus neque risus...
      4. Phasellus feugiat lacus ...
        Duis rhoncus ...

      /* LIST #6 */ #list6 { font-family: "Trebuchet MS", "Lucida Grande", Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; } #list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; } #list6 ol li { }

      Список #7: Линейный список, в котором пункты перечисляются через запятую

      Обычно списки используются для отображения количества чего-либо и отражаются в виде столбика. Но как быть, если вам нужен линейный список? Это достигается путем смены значения display свойства на inline. Но если вам вдруг понадобится встроить список в текст, то по правилам, пунктики списка должны быть разделены запятой. Как этого добиться? А, просто, при помощи элемента:after символического кода.

      • First inline item
      • Second inline item
      • Third inline item
      • Fourth inline item

      /* LIST #7 */ #list7 { } #list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; } #list7 ul li { display: inline; } #list7 ul li:after { content: ", "; } #list7 ul li.last:after { content: ". "; }

      Список #8: Вращающееся навигационное меню

      Вот и последняя техника, для работы которой понадобится CSS3 (поддерживается только последними версиями Firefox, Safari и Chrome). При наведении курсора на один из элементов блока включается эффект - вращение. Конечно не самый удобный способ, но очень красивый.

      • Home
      • Blog
      • About
      • Contact

      /* LIST #8 */ #list8 { } #list8 ul { list-style:none; } #list8 ul li { font-family:Georgia,serif,Times; font-size:18px; } #list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px; text-decoration:none; color:#bfe1f1; } #list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000; -webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000; transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

      Заключение

      Как видите, реально создать уникальные вещи из обычного html-списка. И все это силами CSS. Очень рад, если вы узнали много интересного для себя.

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

      CSS стили списка маркера.

      list-style-type

      list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none ;

      Значение :

      disk – маркированный список в виде закрашенного кружка

      circle – маркированный список в виде не закрашенного кружка

      square – маркированный список в виде закрашенного квадратика

      decimal – нумерованный список арабскими числами (1,2,3 и т.д.)

      upper-roman – нумерованный список большими римскими цифрами (I,II,III,IV и т.д.)

      lower-roman – нумерованный список маленькими римскими цифрами (i,ii,iii,iv и т.д.)

      upper-alpha – нумерованный список заглавными буквами (A,B,C и т.д.)

      lower-alpha – нумерованный список строчными буквами (a,b,c и т. д.)

      none – без маркера.

      Пример :

      Свойства списков в css

      • Верь в лучшее, ожидай худшее.
      • Жизнь - это болезнь, со смертельным исходом.
      • Никогда не говори никогда.

      Результат :

      Бывают такие случаи, когда отображения маркера в списке нужно убрать. Для этого в коде CSS пропишите

      list-style-type: none;

      Пример :

      Свойства списков в css

      • Верь в лучшее, ожидай худшее.
      • Никогда не говори никогда.

      Результат :

      Можно обычные маркеры в списке заменить собственными изображениями. Это можно сделать с помощью свойства list-style-image .

      list-style-image

      list-style-image: url(картинка.png);

      Пример :

      Свойства списков в css

      • Верь в лучшее, ожидай худшее.
      • Жизнь - это болезнь со смертельным исходом.
      • Никогда не говори никогда.

      Результат :

      Можно также задать маркированному списку расстояние от текста. Это можно сделать с помощью свойства padding-left для селектора li.

      Пример :

      Свойства списков в css

      • Верь в лучшее, ожидай худшее.
      • Жизнь - это болезнь со смертельным исходом.
      • Никогда не говори никогда.

      Результат :

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

    • текст

      • Пример :

      Свойства списков в css

      • Верь в лучшее, ожидай худшее.
      • Жизнь - это болезнь со смертельным исходом.
      • Никогда не говори никогда.

      Результат :

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

      Пример :

      Свойства списков в css

      • Верь в лучшее, ожидай худшее.Пункт 1
      • Жизнь - это болезнь со смертельным исходом.Пункт 2
      • Никогда не говори никогда.Пункт 3
      • Это все что я знал. Пункт 4

      Результат :

      Вот и подошла к завершению тема .

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

      С элементом

        связаны следующие особенности:

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

          На рис.1 показан результат примера, иллюстрирующий приведённые особенности маркированного списка.

          Рис. 1. Вид маркированного списка

          Вид маркера

          Маркеры могут принимать один из трёх видов: закрашенный кружок (по умолчанию), незакрашенный кружок и квадрат. Для выбора типа маркера используется свойство list-style-type или универсальное list-style (пример 1). Применяются следующие значения:

          • disc - маркеры в виде закрашенного кружка;
          • circle - маркеры в виде незакрашенного кружка;
          • square - квадратные маркеры.

          Пример 1. Изменение вида маркера

          Списки

          • Сепульки
          • Сепулькарии
          • Сепуление

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

        • не получится, поэтому придётся действовать в обход. Для этого прячем маркеры списка с помощью свойства list-style со значением none и в тексте перед содержимым
        • добавляем свой собственный символ с помощью псевдоэлемента ::before . В примере 2 в качестве такого маркера выступает треугольник.

          Пример 2. Использование::before

          Списки

          • Сепульки
          • Сепулькарии
          • Сепуление

          Результат данного примера показан на рис. 2. Поскольку использование свойства list-style со значением none не убирает маркеры совсем, а только скрывает их от просмотра, то список получается смещённым вправо. Чтобы избавиться от этой особенности, в примере добавляется свойство text-indent с отрицательным значением. Его задача - переместить текст левее на один символ.

          Рис. 2. Произвольные маркеры в списке

          Символ не обязательно должен быть в шестнадцатеричном формате, его можно вставить и непосредственно в текст. Главное, сохранить документ в кодировке UTF-8 и чтобы редактор её поддерживал. Сами символы и их коды можно взять, например, из LibreOffice Writer (рис. 3).

          Рис. 3. Выбор символа в LibreOffice

          Список с рисованными маркерами

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

          Пример 3. Использование изображения в качестве маркера

          Списки

          • Сепульки
          • Сепулькарии
          • Сепуление

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

          Рис. 4. Рисунок в качестве маркера

          Применение list-style-image обладает некоторыми недостатками:

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

          Этих недочётов можно избежать с помощью свойства background , оно устанавливает фоновое изображение. Для каждого элемента списка

        • мы убираем исходные маркеры и устанавливаем фоновую картинку без повторения. А чтобы текст не выводился поверх рисунка, смещаем его вправо через padding-left (пример 4).

          Пример 4. Использование background

          Ul { margin-left: -1em; } li { list-style: none; background: url(images/bullet.png) no-repeat 0 2px; padding-left: 20px; }

          Положение текста и маркера

          Существует два способа размещения маркера относительно текста: маркер выносится за границу элементов списка или обтекается текстом (рис. 5).
          inside outside

          Рис. 5. Размещение маркеров относительно текста

          Чтобы управлять положением маркеров, применяется свойство list-style-position . Оно имеет два значения: outside - маркеры размещаются за пределами текстового блока (это значение по умолчанию) и inside - маркеры являются частью текстового блока и отображаются в элементе списка (пример 5).

          Пример 5. Изменение положения маркеров

          Списки

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

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

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

          В табл. 1 перечислены свойства элементов, предназначенных для создания и изменения списков.

          Табл. 1. Свойства CSS для управления видом списка
          Свойство Значение Описание Пример
          list-style-type disc
          circle
          square
          decimal
          lower-roman
          upper-roman
          lower-alpha
          upper-alpha
          none           		Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style-type: circle}
          LI {list-style-type: upper-alpha}
          list-style-image none
          URL           		Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
          list-style-position outside
          inside           		Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}
          list-style Универсальное свойство, включает одновременно все вышеперечисленные свойства.

          Поскольку тег

        • наследует стилевые свойства тега
            или
              , который выступает в качестве его родителя, то можно устанавливать стиль как для селектора UL , так и для селектора LI . Так, в примере 1 используется селектор UL , для него и задаются стилевые параметры.

              Пример 1. Создание маркированного списка

              Списки

              Результат данного примера показан на рис. 1. Используются квадратные маркеры и их внешнее размещение относительно текста.

              Рис. 1. Вид списка, измененого с помощью стилей

              Чтобы установить свое собственное изображение в качестве маркера применяется свойство list-style-image , как показано в примере 2.

              Пример 2. Использование изображений в качестве маркера

              Списки

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

              Результат данного примера показан на рис. 2. В качестве маркеров используется маленькая картинка.

              Рис. 2. Изображения в качестве маркеров

              Некоторые примеры создания различных списков приведен в табл. 2.

              Табл. 2. Возможные виды списков
              Код HTML Пример
              		• Что следует учитывать при тестировании сайта:
              • работоспособность всех ссылок
              • поддержку разных браузеров
              • читабельность текста
              		• Что следует учитывать при тестировании сайта:
              • работоспособность всех ссылок
              • поддержку разных браузеров
              • читабельность текста

              • Нумерованный список с арабскими цифрами:

              1. первый
              2. второй
              3. третий

              • Нумерованный список со строчными римскими цифрами:

              1. первый
              2. второй
              3. третий

              • Нумерованный список с заглавными римскими цифрами:

              1. первый
              2. второй
              3. третий

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

              1. первый
              2. второй
              3. третий

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

              1. первый
              2. второй
              3. третий


Рекомендуем почитать