базовый курс

ГРУППА КУРСА

Изменение типа элемента

Ранее говорилось о том, что есть блоковые и строчные элементы. Из этой темы вы узнаете, что существуют и другие типы элементов. В CSS есть возможность изменить тип элемента. Также, можно скрыть элемент, чтобы он не отображался на странице. Вообще, есть разные способы в CSS скрыть элемент. Один из способов - установка специального типа.

Изменение типа элемента осуществляется с помощью свойства display. Значением этого свойства является название типа, который присваивается элементу. Значений достаточно много, но некоторые из них поддерживаются не всеми браузерами. Я назову только те, которые сейчас можно смело использовать.

display: block - блок

display: inline - строчный элемент

display: inline-block - строчный элемент с некоторыми свойствами блока

display: list-item - элемент списка

display: table - таблица

display: none - отсутствие элемента. Элемент не отображается на странице, под него на странице не выделяется место.

Значение none используется для временного скрытия элемента. В дальнейшем, с помощью CSS или скриптов тип элемента изменяется. Он исчезает, когда ему присваивается значение none и появляется, когда получает другое значение.

Чтобы рассмотреть использование свойства display, создадим две ссылки и превратим их в блоки. Сначала создадим страницу и добавим на неё две ссылки:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
9
<a href="www.yandex.ru">Ссылка 1</a>
<a href="www.yandex.ru">Ссылка 2</a>

Наверное вы помните, что ссылка - это строчный элемент. Созданные ссылки располагаются в одну строку. Если не уверены, то можете запустить страницу и убедиться.

Теперь изменим тип элементов и установим ссылкам тип элемента block. После этого им можно указывать свойства блока.

7
8
9
10
11
12
a
  {
  display: block;
  border: 1px solid Red;
  padding: 10px;
  }