Найти в Дзене
Практика HTML
270 подписчиков

Изучаем CSS display

1387
2 мин
Одним из важнейший CSS-свойств является display. Оно позволяет переопределять тип отображения элемента не изменяя семантику кода. Рассмотрим основные значения этого свойства: Задачи Задачи на добавление всего одной строки кода. Смотрите HTML-код, подумайте, какое CSS-свойство спасёт ситуацию. Поиграйтесь со значениями этого свойства. Все необходимые для выполнения задачи знания описаны в этой главе. 1. Напишите CSS-код, позволяющий скрыть этот элемент
Посмотреть задачу 2. Не меняя HTML-кода, сделайте так, чтобы каждое предложение начиналось с новой строки
Посмотреть задачу 3. Сделайте так, чтобы все элементы списка шли в одну строку
Посмотреть задачу 4. Добавьте одно свойство так, чтобы меню стало широким
Посмотреть задачу 5. Сделайте так, чтобы счёт шёл слева направо, а не снизу вверх
Посмотреть задачу 6. Добавьте одну строку так, чтобы получилась таблица
Посмотреть задачу
Это одно из важнейших свойств, постарайтесь хорошо его изучить. Эту и другие статьи можно почитать в моём пра

Одним из важнейший CSS-свойств является display. Оно позволяет переопределять тип отображения элемента не изменяя семантику кода. Рассмотрим основные значения этого свойства:

  • none — скрывает элемент;
  • block — определяет элемент как "блочный", что означает, что элемент не обтекается другими объектами, а переносится на новую строку и заполняет её полностью. Следующий элемент будет отрисован под блочным элементом. Является стандартным значением элементов div, p, ul, article, section и других;
  • inline — определяет элемент как "строчный", что означает, что элемент ведёт себя как текст. Является стандартным значением элементов span, a, s, b и других;
CSS display: block and display: inline
CSS display: block and display: inline
  • inline-block — смесь строчного и блочного. Фактически, являясь блочным, элемент получает возможность обтекаться строчными элементами, как тег img;
  • flex — превращает элемент в flex-контейнер. Это означает, что внутренние элементы выстраиваются так, как мы зададим с помощью свойств flex, flex-direction, flex-wrap, align-items, justify-content и других. Более подробно о flex-контейнерах стоит прочитать тут: Выравнивание элементов в Flex контейнере;
  • grid — превращает элемент в grid-контейнер. Гриды это новая технология построения сеток. При помощи свойств управления сетками, например, grid-template-columns, мы можем управлять отображением содержимого внутри грида. Более подробно о гридах можно почитать здесь: Основные понятия Grid Layout.

Задачи

Задачи на добавление всего одной строки кода. Смотрите HTML-код, подумайте, какое CSS-свойство спасёт ситуацию. Поиграйтесь со значениями этого свойства. Все необходимые для выполнения задачи знания описаны в этой главе.

1. Напишите CSS-код, позволяющий скрыть этот элемент
Посмотреть задачу

2. Не меняя HTML-кода, сделайте так, чтобы каждое предложение начиналось с новой строки
Посмотреть задачу

3. Сделайте так, чтобы все элементы списка шли в одну строку
Посмотреть задачу

4. Добавьте одно свойство так, чтобы меню стало широким
Посмотреть задачу

5. Сделайте так, чтобы счёт шёл слева направо, а не снизу вверх
Посмотреть задачу

6. Добавьте одну строку так, чтобы получилась таблица
Посмотреть задачу

Это одно из важнейших свойств, постарайтесь хорошо его изучить.

Эту и другие статьи можно почитать в моём практическом руководстве HTML Practice: https://artik-man.github.io/HTML-Practice/ Если у вас возникли идеи для новой главы этой книги, присылайте issue на GitHub: https://github.com/Artik-Man/HTML-Practice/issues

1