Методичка по Веб. Методичка 2курсWEB. 1. Ввод и форматирование текста Webстраницы 4

• Название: 1. Ввод и форматирование текста Webстраницы 4
• Анкор: Методичка по Веб
• Дата: 25.12.2022
• Размер: 0.95 Mb.
• Имя файла: Методичка 2курсWEB.docx
• Тип: Контрольная работа; #862540
• страница: 8 из 9

Практические задания

1. 
   Выполнить все примеры из текста
   
2. 
   Отредактировать текст по образцу (образец в папке CSS-задания/ задания_рамки, текст страницы файл текст.doc в этой ж папке)
   

Оформление списков в CSS

Основные свойства CSS списков перечислены в таблице:

Свойство	Описание
list-style-image	Устанавливает изображение в качестве маркера пункта списка
list-style-position	Указывает, должны ли маркеры пункта списка появляться внутри или снаружи содержания
list-style-type	Указывает тип маркера пункта списка

Свойство list-style-type

Значение свойства для ul

Значение	Описание
circle	Делает кружки (точки с дыркой)
disc	Закрашенные кружки (то, что стоит по умолчанию).
square	Квадратики.
none	Вообще без маркеров.
inherit	Наследует значение родителя.

Значение по умолчанию: disc.

Значение свойства для OL

Значение	Описание
armenian	Традиционная армянская нумерация.
decimal	Арабские числа (1, 2, 3, 4,...).
decimal-leading-zero	Арабские числа с нулем впереди для цифр меньше десяти (01, 02, 03,...).
georgian	Традиционная грузинская нумерация.
lower-alpha	Строчные латинские буквы (a, b, c, d,...).
lower-greek	Строчные греческие буквы (α, β, γ, δ,...).
lower-latin	Это значение аналогично lower-alpha.
lower-roman	Римские числа в нижнем регистре (i, ii, iii, iv, v,...).
upper-alpha	Заглавные латинские буквы (A, B, C, D,...).
upper-latin	Это значение аналогично upper-alpha.
upper-roman	Римские числа в верхнем регистре (I, II, III, IV, V,...).
none	Вообще без маркеров.
inherit	Наследует значение родителя.

Значение по умолчанию: decimal.

Некоторые значения свойства list-style-type для неупорядоченных списков, и некоторые - для упорядоченных.

Свойство list-style-image

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

Пример:

ul 
{ 
list-style-image:url('sqpurple.gif'); 
} 

Пример выше не отображается одинаково во всех браузерах. IE и Opera будут отображать маркер-изображение чуть выше, чем Firefox, Chrome, и Safari.

Если вы хотите, чтобы изображение-маркер размещался одинаково во всех браузерах, кросс-браузерное решение объяснено ниже.

Кросс-браузерное Решение

Следующий пример отрисовывает изображение-маркер одинаково во всех браузерах:

ul 
{ 
list-style-type:none; 
padding:0px; 
margin:0px; 
} 
li 
{ 
background-image:url(sqpurple.gif); 
background-repeat:no-repeat; 
background-position:0px 5px; 
padding-left:14px; 
} 

Объяснение примера:

• 
  Для ul:
  
  • 
    Установка list-style-type в none - чтобы удалить маркер пункта списка
    
  • 
    Установка свойств padding и margin в 0px (для кросс-браузерной совместимости)
    
• 
  Для li:
  
  • 
    Установка адреса URL для изображения, и значения no-repeat (чтобы изображение выводилось только один раз)
    
  • 
    Позиционирование изображения в желаемом месте (влево на 0px и вниз на 5px)
    
  • 
    Установка левого отступа для текста в списке
    

Свойство list-style-position

Значения:

• 
  Inside - Маркер является частью текстового блока и отображается в элементе списка
  
• 
  Outside - Текст выравнивается по левому краю, а маркеры размещаются за пределами текстового блока.
  

Пример:

ul {

list-style-image: url(images/book.gif); */

list-style-position: inside;

}