belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

2.1. Понятия блочного и строчного элементов

Прежде, чем двигаться дальше, хотелось бы отдельно обратить внимание на еще два признака, по которым мы будем делить большинство элементов html-разметки. Дело в том, что при отображении элементов браузеры по умолчанию применяют к ним свойства CSS, имеющие заранее определенные значения. Одним из таких важных свойств является display, которое отвечает за то, как элемент будет отображаться при показе в документе. Значений у данного свойства достаточно много, но пока что нас будут интересовать только два из них: "inline" и "block". Остальные значения мы рассмотрим в процессе изучения CSS.

Блочным (от англ. block) мы будем называть элемент, у которого свойство display по умолчанию устанавливается браузером как "block". Такой элемент отображается браузером на веб-странице в виде прямоугольника, ширина которого равна максимально доступному в данной ситуации размеру, а высота определяется объемом его содержимого. Кроме того, блочные элементы отделяются от остального содержимого разрывами строк до и после элемента.

Одним из таких элементов является известный нам 'Абзац'. На его примере мы и посмотрим, как же отображаются блочные элементы браузерами. Для этого создадим страницу с двумя абзацами, имеющими разный фон. Оформление фона и шрифта зададим при помощи атрибута style и значений атрибута, соответственно, в виде свойств CSS: "color" и "background-color", которым присвоим разные цвета для наглядности. Исходный код показан в примере 2.1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Блочные элементы</title>
</head>
<body>
	<p style="background-color: green; color: black">
		Я &ndash; первый абзац.
	</p>
	
	<p style="background-color: orange; color: blue">
		Я &ndash; второй абзац.<br>
		А я &ndash; продолжение второго абзаца.
	</p>
</body>
</html>	
	

Пример 2.1. Код страницы, содержащей два блочных элемента 'Абзац'

Как видим, наши блочные элементы заняли всю доступную им ширину, хотя их строки значительно короче по длине. Во втором абзаце мы применили принудительный разрыв строки при помощи одиночного тега <br>. В результате высота второго блока автоматически увеличилась, чтобы вместить все содержимое. А поскольку по умолчанию браузер делает вертикальные отступы сверху и снизу блочных элементов, а текст выравнивает по левому краю, между абзацами виден пробел, а текст прижат влево.

Строчным (от англ. inline) мы будем называть элемент, у которого свойство display по умолчанию устанавливается браузером как "inline". Такой элемент отображается браузером на веб-странице как часть строки, а его ширина определяется объемом содержимого.

Чтобы было понятней, рассмотрим код с применением строчных элементов (см. пример 2.2).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Строчные элементы</title>
</head>
<body>
	<span style="background-color: green; color: black">
		Я &ndash; первое предложение.
	</span>
	
	<span style="background-color: orange; color: blue">
		Я &ndash; второе предложение.
	</span>
</body>
</html>	

Пример 2.2. Код страницы, содержащей два строчных элемента 'span'

Здесь поведение элементов в корне изменилось. В отличие от блочных элементов, ширина строчных элементов определилась браузером автоматически в зависимости от объема содержимого, а не стала равной максимально допустимой для данной ситуации. Кроме того, по умолчанию браузер не добавляет разрывов строк до и после строчных элементов, поэтому они располагаются один за другим и переносятся на новую строку по мере необходимости.

Значения практически всех элементов разметки, установленные по умолчанию, легко изменяются при помощи стилей CSS, которые как раз и отвечают за внешний вид документа. Главной же задачей элементов разметки является в большей степени логическое форматирование информации. Поэтому деление нами элементов на блочные и строчные весьма условно. Мы делаем это лишь для того, чтобы наглядно представлять себе их внешний вид и поведение при отображении браузерами по умолчанию без наложения собственных стилей CSS.

Контрольные вопросы и задания

  1. Какие элементы называются блочными? Строчными?

Словарь новых английских слов

word [wə:d] – слово.
break [breɪk] – разрыв, прекратить.
opportunity [,ɔpə'tju:niti] – возможность,
удобный случай.
division [di'viʒən] – раздел, разделение.
bold [bəuld] – жирный.
italic [i'tælik] – курсив, наклонный.
underline [ˌʌndəˈlaɪn] – подчеркнуть.
strike out [strʌɪk ˈaut] – вычеркивать.
subscript [ˈsʌbskrɪpt] – нижний индекс.
superscript [ˈsuːpəskrɪpt] – верхний индекс.
emphasis [ˈɛmfəsɪs] – акцент, выделение.
strong [strɔɳ] – сильный, прочный.
variable ['vɛəriəbl] – переменная.
sample ['sa:mpl] – образец.
definition [defi'ni∫ən] – определение.
quote [kwəut] – цитата.
insert [ɪnˈsɜːt] – вставлять.
reversed [rɪˈvɜːst] – перевернутый, обратный.
ordered [ˈɔːdəd] – упорядоченный, нумерованный (список).
unordered [ʌnˈɔːdəd] – маркированный (список).
description [dis'krip∫ən] – описание.
row [rou] – строка, ряд.
column ['kɔləm] – столбец, колонка.
cell [cel] – ячейка, элемент, клетка.
table ['teibl] – таблица, стол.
row span – диапазон строк.
column span – диапазон столбцов.
self [self] – сам.
parent ['pɛərənt] – родитель.
blank [blæɳk] – чистый, пустой, бланк.
anchor ['æɳkə] – якорь, привязка.
link [link] – связь, ссылка.
foot [fut] – нижнее поле, ступня.
header ['hedə] – заголовок, верхний колонтитул.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх