CSS — Базовый курс 11


37 просмотров.

Краткое описание видео: .продолжаем изучение css в данном уроке.мы займемся.css и списками то есть как можно с.помощью каскадных таблиц стилей.управлять внешним видом списков если в.курсе по html.мы уже изучили как допусти менять.маркеры у списков вот как задавать.вместо допустим цифры буквы и так далее.то здесь мы это будем делать через css.естественно для этого нам понадобится.список поэтому где не будет внизу.страницы создайте хотя бы один.ненумерованный список перейдем в html.код и где-нибудь вот за два абзаца до.конца давайте создадим ненумерованный.список.напомним создается через тпр парни такой.да а элементом списка у нас является ли.нам допустим пишем первый элемент и.закрываем петли вот таким же образом.сделайте пять элементов в итоге вот что.у меня получилось если мы сохраним.данную страницу посмотрим в браузере вот.наш список отлично теперь следующий.момент который нам понадобится это вот.такое изображение галочки которые мы.будем ставить на место маркера вот она.также есть в архиве с дополнительными.материалами к этому курсу поэтому.возьмите и оттуда и скопируйте вот в эту.папку до в которой мы работаем.отлично это мы сделали теперь можно.переходить к стилем и создавать новый.стиль для списка давайте назовем этот.тип как-нибудь.лист например да при этом можно написать.что данные стиле у нас конкретно для.списков открываем фигурную скобку.закрываем ее и между ними пишем всего.основных у списков.три свойства это тип маркера то есть это.будет либо цифра либо римская либо буква.и так далее да.затем оппозиция как этот маркер будет.расположена либо снаружи.списка либо внутри это мы еще увидим да.и картинка если нужно за место маркер.будет становиться картинкам итак 1.первое свойство это лист tire & style.1 toy она отвечает за то какой будет.маркер если мы хотим сделать маркер.цифрами дату мы должны писать письма это.будет означать что список будет.нумерованный то есть даже если он по.сути своей.ненумерованный долг через уэльс создан.то через месяц можно переопределить его.и сделать нумерованного адрес мы сейчас.доедем нашему списку класс лист и.посмотрим браузере мы увидим что он стал.нас нумерованных хотя по своей сути он.не номерами да ну css позволяет нам.делать все что угодно с ним и допустим.следующий момент это мы хотим сделать.большими римскими делать как опер.те же рома сохраняем обновляем видим что.у нас нумерация прошла большими римскими.до маллинз маленькими и римскими будет.вот так новый роман а если нам нужно.обычные буквами то мы пишем допустим.большими буквами на опер альфа таким.образом сохраняем проверяем вот обычным.большими буквами если надо маленькими.также лазер альфа.если там вообще маркеры не нужны мы.можем просто здесь прописать но храним.проверяем на сообщение от маркера до.отлично так оставим пока д символ и идем.дальше следующее свойство которое вы.должны знать это как располагается.маркер относительно контейнера снова да.и сейчас мы это посмотрим более детально.для этого нам понадобится придать списку.рамку давайте подойдем рамку допустим 1.пикселей.один пиксель точнее сплошное и серую.так и посмотрим вот сейчас посмотрим.пока без этого свойства вот мы видим что.у нас маркеры находятся вне как бы.объекта да никак вот этой рамки самих.объектов списка вот если нам нужно.поместить вот эти маркеры внутрь то.делается это с помощью свойства.list style позишн стран : и ясно нужен.внутрь мы пишем inside по умолчанию она.стоит take out сайт то есть снаружи да.ясно нужно внутрь.напишем сохраняем обновляем и видим что.у нас маркер и переехали внутрь.списка вот такое свойствам и последний.момент здесь кстати снова снаружи.out сайт но она стоит по умолчанию.поэтому можно не писать и последний.момент если мы хотим поставить на место.вот этих цифр вот такую красивую галочку.на допустим вот мы знаем что это галочка.лежит нас той же папке где сам css.документ имеет имя мини подчёркиванием.бэн . gif поэтому мы сейчас пропишем.третье свойство лист there & style.первый демейдж то есть какое изображение.должно быть на фоне.заместо маркеры дастан : пишем как.обычный url и указываем где лежит.изображение которое будет маркером.бюджетом в папке поэтому пишем просто.название минивэн ..здесь ставим точку , отлично сохраняем.теперь.данную таблицу стиле возвращаемся в.браузер обновляем и видим что у нас.вместо маркеров появились те самые.галочки вот так работает это свойство.раллист ставил image.а компоновать и мы любим список как.список.вот у нас список из галочек вот это.имеете ввиду.со списками тоже обычно работа бывает он.даже кстати на примере можете видеть да.вот как используется на практике есть.для этого списка одна галочка 1 класс.прописан до для этого уже другая синяя.пошла другой класс прописано здесь.красное вот то что мы сейчас с вами.научились делать на этом я данный урок.заканчиваю следующем будем продолжать.изучение sins

CSS — Базовый курс 11

Как? Вы еще не смотрели? Ну это зря...