Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы 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 для того чтобы увидеть границы элементов.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля