Доси:

CSS-LISTS

Приблизительное чтение: 2 минут 0 просмотров

list-style

list-style — универсальное свойство, которое определяет тип маркеров списка, их положение или использование изображений вместо маркеров.

 

Значения имеют следующий порядок:

первым указывается тип маркера (list-style-type),

затем позиция (list-style-position),

в конце указывается адрес изображения, которое будет отображаться в качестве маркера (list-style-image):

 

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

Краткая информация:

Նախասահմանված արժեքը   Здесь ничего нет
Ժառանգվում ենНет
Կիրառվում են<dd>, <dt>, <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item
Ենթարկվում է անիմացիայիНет
				
					ul {
  list-style: circle inside;
}
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul>
      В будущем мы будем изучать следующие языки:
      <li>Бутстрап/Sass</li>
      <li>Javascript:</li>
      <li>jQuery:</li>
      <li>Реагировать:</li>
    </ul>
  </body>
</html>

				
			

list-style-type

list-style-type  – սահմանում է тип маркеров списка. Используется только тогда, когда list-style-imageравно none из

Маркеры бывают разные մարկերային ցուցակով(<ul>) и: համարակալված ցուցակով(<ol>).

Краткие подробности:

Նախասահմանված արժեքը  disc-
    для
    decimal-
      для
Ժառանգվում ենДа
Կիրառվում են<li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item
Ենթարկվում է անիմացիայիНет

Значения следующие:

Մարկերային ցուցակ`

circle — круглые маркеры

disc — маркеры в виде точек

square — маркеры в форме квадрата



Համարակալված ցուցակ՝

armenian - Армянская буквенная нумерация (A, B, C, D...)

decimal - Арабские цифры (1, 2, 3, 4...)

decimal-leading-zero - Арабские цифры с ведущим нулем для чисел меньше десяти (01, 02, 03, 04...)

georgian - Нумерация грузинских букв

lower-alpha или lower-latin - Латинская строчная нумерация (a, b, c, d....)

lower-greek - нумерация строчными греческими буквами (α, β, γ, δ,...)

lower-roman – нумерация римскими цифрами: латинские строчные буквы (i, ii, iii, iv, v…..)

upper-alpha или upper-latin - нумерация латинскими заглавными буквами (A, B, C, D....)

upper-roman - нумерация римскими цифрами: латинская заглавная буква (I, II, III, IV, V....)

none – отменяет маркеры для списка.

				
					ul {
     list-style-type: armenian;
   }
				
			

list-style-position

list-style-position   – определяет положение маркеров вместе с текстом или отдельно от текста.

Краткая информация:

Նախասահմանված արժեքը   outside
Ժառանգվում ենДа
Կիրառվում են<dd>, <dt>, <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item
Ենթարկվում է անիմացիայիНет

Значения следующие:

inside - маркеры являются частью текста.

outside - маркеры размещаются отдельно от текста.

list-style-image

list-style-image   – устанавливает вместо маркеров любую картинку.

Краткая информация:

Նախասահմանված արժեքը   none
Ժառանգվում ենДа
Կիրառվում են<dd>, <dt>, <li>, <ol> <ul>, а также все элементы, которые включают в себя: display:list-item
Ենթարկվում է անիմացիայիНет

Значения следующие:

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

url() - определяет относительный или абсолютный адрес данного изображения. адрес может быть указан в одинарных или двойных кавычках ( ' или « ) или без них.

				
					  ul {
    list-style-image: url(icon20.png);
  }
  .li01 {
    list-style-image: none;
  }
				
			
				
					<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>hayti</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul>
      В будущем мы будем изучать следующие языки:
      <li class="li01">Бутстрап/Sass</li>
      <li>Javascript:</li>
      <li>jQuery:</li>
      <li>Реагировать:</li>
    </ul>
  </body>
</html>

				
			

Оставить комментарий

Կիսվել փաստաթուղթով
ԲՈՎԱՆԴԱԿՈՒԹՅՈՒՆ
ru_RURussian