Добрый день!
Меня зовут Николай и это канал HTML/CSS-курсы.
На предыдущей лекции мы с вами разобрали почти все основные свойства CSS для редактирования текста. Сегодня мы с вами разберём основные свойства для редактирования списков и поближе познакомимся с инструментами разработчика в браузере.
Итак, сперва вернёмся к теме редактирования текста и разберём возможности редактирования списков через CSS.
В ранее заготовленном нами документе обратимся к нашему ненумерованному списку. Поскольку ненумерованный список у нас на странице только один, то обратиться к нему в CSS-документе можно напрямую через тег, не присваивая класс.
В списках мы можем редактировать сам текст, как мы уже разобрали на предыдущем занятии, и можем редактировать параметры именно списка. Для изменения маркеров нашего списка мы будем использовать свойство list-style-type. В этом свойстве мы можем указать желаемую форму маркеров или вовсе их убрать. По умолчанию используется значение disc. Вы можете поэкспериментировать со значениями и выбрать самый подходящий для конкретного случая. Для примера, я поставлю значение circle:
ul {
list-style-type: circle;
}
С помощью этого свойства также можно превратить ненумерованный список в нумерованный и наоборот, т. к. значения у этого свойства для обоих типов списка одни и те же.
Для списков ещё используется свойство list-style-position. Это свойство может иметь одно из двух значений: inside или outside. Inside включает маркеры списка в блок самого текста, а outside отодвигает их в отдельный блок.
В конечном счёте, мы можем отредактировать списки, к примеру, следующим образом:
На этом мы пока остановимся в работе с самими файлами HTML и CSS и перейдём к знакомству с инструментами разработчика. Разберём мы пока два основных назначения.
Вот, наконец, у нас создана первая текстовая HTML-страница, и нам нужно разобраться, как правильно проверить её в браузере. И для этого нам нужны инструменты разработчика в первую очередь.
Давайте перейдём в браузер и откроем данный инструмент клавишей F12 или через меню браузера.
Мы с вами видим, что прямо в окне браузера открылся раздел с несколькими подразделами и внутренними вкладками. Сейчас нас пока интересует только вкладка Elements. Открыв её мы видим уже знакомый, написанный нами код HTML-страницы, а в соседнем подразделе, во вкладке Styles стили, которые мы к ней применяли.
Первое назначение этих инструментов состоит в том, что здесь, в режиме просмотра страницы, мы можем изменять её (изменять значения свойств, отключать их, менять заголовок текст и любой другой контент, содержащийся на странице) и наблюдать, как всё это будет отображаться на странице в реальном времени. Здесь можно сделать наброски страницы, но на вашем сохранённом документе эти изменения никак не отобразятся. Достаточно будет обновить страницу, и все изменения, внесённые в инструменты разработчика, сбросятся.
Второе, тоже не маловажное назначение, заключается в том, что здесь можно проверять ошибки и опечатки в коде. К примеру, если прописывая какое-либо свойство или значение для класса или тега вы опечатались, то в подразделе стилей страницы напротив строки с этим свойством будет стоять восклицательный знак, а сама строка будет перечёркнута, обозначая, что браузер этой строки не понимает, а значит это свойство им не читается.
Инструменты разработчика имеют ещё очень много назначений, но на данный момент нам нужно знать только эти два основных, а другие мы будем изучать в процессе практики. На этом наша сегодняшняя лекция подходит к концу. Не забывайте подписываться на канал чтобы не пропустить новые выпуски!
