Курсы HTML/CSS

Урок 13. Свойство display, практическое применение свойств CSS

Содержание курса

Строчные и блочные элементы: свойство display

Мы уже знаем, что <div> - это блочный элемент, а <span> - строчный. Давайте зададим этим элементам цвет фона и посмотрим, как отображаются эти элементы (прямоугольники) в браузере:

<!DOCTYPE html>
	<html>
		<head>
			<title>Строчные и блочные элементы</title>
			<style>
				.r {background: red;}
				.g {background: green;}
				.b {background: blue;}
				.y {background: yellow;}
			</style>
		</head>
		<body>
		<!-- Блочные элементы DIV -->
			<div class="r">Элемент DIV 1</div>
			<div class="g">Элемент DIV 2</div>
			<div class="b">Элемент DIV 3</div>
			<div class="y">Элемент DIV 4</div><hr />
		<!-- Строчные элементы SPAN -->
			<span class="r">Элемент SPAN 1</span>
			<span class="g">Элемент SPAN 2</span>
			<span class="b">Элемент SPAN 3</span>
			<span class="y">Элемент SPAN 4</span>
		</body>
	</html>

Вид в браузере:

Обратите внимание на выстраивание прямоугольников строчных и блочных элементов в браузере.

Свойство display позволяет изменить поведение строчных элементов на блочные и обратно. У него много возможных значений, но основные, которые нам сейчас пригодятся - это:
none - элемент не отображается вообще;
block - элемент становится блочным;
inline - элемент становится строчным;
inline-block - элемент становится строчно-блочным;
table-cell - элемент становится ячейкой таблицы;
list-item - преобразование в элемент списка.

К строчно-блочным (inline-block) элементам относятся картинки и элементы форм (поля ввода текста, кнопки).

Вывод таков: элементы ведут себя в браузере как строчные или как блочные только потому, что у них по умолчанию задан тот или иной тип (значение) display. В примере выше можно переопределить поведение строчных элементов на блочные, а блочных на строчные (см. пример ниже).

<!DOCTYPE html>
	<html>
		<head>
			<title>Переопределение свойства display</title>
			<style>
				.r {background: red;}
				.g {background: green;}
				.b {background: blue;}
				.y {background: yellow;}
				div {display: inline;}
				span {display: block;}
			</style>
		</head>
		<body>
		<!-- Блочные элементы DIV стали строчными -->
			<div class="r">Элемент DIV 1</div>
			<div class="g">Элемент DIV 2</div>
			<div class="b">Элемент DIV 3</div>
			<div class="y">Элемент DIV 4</div><hr />
		<!-- Строчные элементы SPAN стали блочными -->
			<span class="r">Элемент SPAN 1</span>
			<span class="g">Элемент SPAN 2</span>
			<span class="b">Элемент SPAN 3</span>
			<span class="y">Элемент SPAN 4</span>
		</body>
	</html>

Вид в браузере:

Таким образом, в CSS можно переназначить абсолютно все на свой вкус и цвет.

Итак, мы изучили оформление и макетирование в CSS. Теперь рассмотрим дополнительные возможности HTML и CSS.

Практическое применение HTML и свойств CSS

Предположим, у нас есть заказ сделать такую страницу:

Эту задачу можно решить множеством различных способов, но мы выберем такой, чтобы закрепить как можно больше изученных свойств CSS.

Для начала сверстаем чистый html-код:

<!DOCTYPE html>
	<html>
		<head>
			<title>Сайт о путешествиях</title>
			<link rel="stylesheet" href="style.css"/>
		</head>
		<body>
		<!-- "Шапка" сайта -->
			<div id="header">
				<span id="sait">Путешествия по странам</span>
				<span id="sait2">сайт о путешествиях</span>
			</div><hr />
		<!-- Левое меню -->
			<div id="left_menu">
		<!-- Пункты меню делаем в виде двух маркированных списков -->
				<ul>
					<li><a href="#">Обзор стран</a></li>
					<li><a href="#">Обзор городов</a></li>
					<li><a href="#">О сайте</a></li>
					<li><a href="#">Контакты</a></li>
				</ul>
				<p id="obzory">Последние обзоры</p>
				<ul>
					<li><a href="#">Чикаго</a></li>
					<li><a href="#">Китай</a></li>
					<li><a href="#">Манхеттен</a></li>
					<li><a href="#">Нью-Йорк</a></li>
				</ul>
			</div>
		<!-- Статья сайта -->
			<div id="content">
				<h1>Добро пожаловать на сайт о путешествиях</h1>
				<p>Сюда вставляем содержимое первого абзаца</p>
				<p>Сюда вставляем содержимое второго абзаца</p>
			</div>
		</body>
	</html>

Значение решетки (#) в href - это "заглушка" ссылка ссылается на свою же страницу. Значения href нам сейчас не нужны, мы делаем только одну страницу.

В результате мы получаем такую картину чистого html-кода.

Теперь перейдем к файлу CSS:

		Файл style.css
		=========================
		#header {
			width: 100%;
			height: 50px;
			}
			
		#sait {
			float: left;
			font-size: 2em;
			font-weight: bold;
			}
			
		#sait2 {
			float: right;
			margin-top: 30px;
			color: #777777;
			}
			
		#left_menu {
			float: left;
			width: 200px;
			}
			
		ul li {
			list-style-type: none;
			margin: 0 0 10px -20px;
			}
			
		a {
			text-decoration: none;
			}
			
		#obzory {
			font-size: 1.3em;
			font-weight: bold;
			}
			
		h1 {
			text-align: center;
			}
			
		hr {
			margin: 0 10px;
			}
			
		#content {
			margin: 0 0 0 210px;
			}

Свойство text-align выравнивает содержимое элемента по горизонтали родительского элемента (в нашем случае - по горизонтали элемента <div> c id="content"). Его часто используемые значения:
center - выравнивание по центру;
justify - выравнивание по ширине (в этом случае при необходимости добавляются пробелы);
left - выравнивание по левому краю;
right - выравнивание по правому краю;
inherit - наследует значение родителя.

Попробуйте выполнить это задание самостоятельно с подглядкой в пример и посмотрите, как меняется поведение элементов с применением каждого свойства CSS (код html можно копировать прямо из примера).

Для указания размеров шрифта чаще всего оперируют единицей измерения em или %. em - это ширина буквы "M" латинского алфавита. 1em - это текущий размер шрифта. Значения em можно указывать и десятичными дробными долями, например 1.5em, 0.8em. Обратите внимание, при указании дробных долей ставится точка, а не запятая. Проценты опять-таки указываются относительно текущего размера шрифта.

Правила указания селекторов для вложенных элементов в CSS

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

				Указание полного пути до элемента в CSS
			
			код html:
	=======================
...
	<div>
		<p class="x"</p>
			<span id="y"> Элемент кода с id="y"</span>
		</p>
	</div>
...
		в CSS через пробел указываем полный путь
		до элемента SPAN с id="y":
	================================================
	div .x #y {color: red;}

Это правило CSS можно прочитать так: элементу с id="y", родителем которого является элемент с классом x, вложенный в <div>, задать красный цвет текста.

Макетирование в CSS желательно начинать с общего правила обнуления всех отступов по умолчанию: * {margin: 0; padding: 0;} и после этого уже начинать что-то куда-то двигать через CSS.

Свойства border (рамка элемента) и background (цвет фона элемента) значительно облегчают макетирование, т.к. делают прямоугольники различных элементов html видимыми. Поэтому при макетировании советую временно использовать эти свойства CSS для того чтобы увидеть границы элементов.

Комментарии