Выбор занятия

Выберите текущее занятие

Все материалы предоставлены в образовательных целях. Для пополнения базы материалов или цитат присылайте свои тексты на эл. почту (внизу страницы).

CSS

Встраивание в HTML

Один из самых простых способов это привязка стилей к элементу при помощи атрибута style. Атрибут style может использоваться для любого тега, расположенного в теле документа. Форма записи свойства следующая: < элемент style="свойство1: значение1; свойство2: значение2;" >:

<!doctype html>
<html>
	<head>
		<title>HTML структура документа</title>
	</head>
	<body>
		<h1 style="color: red;">Заголовок красного цвета.</h1>
	</body>
</html>

Следующий способ заключается в создании таблицы стилей прямо в документе. Для этого в HTML используется парный элемент style. Данный элемент имеет один обязательный атрибут type – MIME тип содержимого и один не обязательный media – устройства для вывода документа. Для таблицы стилей значение первого атрибута должно быть равным text/css.

<!doctype html>
<html>
	<head>
		<style type="text/css" media="all">
			body {
				background: silver;
				padding: 0;
			}
			h1 { color: red; }
		</style>
	</head>
	<body>
		<h1>Заголовок красного цвета.</h1>
	</body>
</html>

В HTML есть такой элемент, как link. Элемент link располагается в HEAD блоке HTML документа. Он предназначен для создания связи между документами. В CSS этот элемент используется для подключения внешних таблиц стилей. Внешними, называются таблицы, расположенные отдельно от HTML документа, но используемые им. Элемент link, как и style имеет два необходимых атрибута type и media. Значения этих атрибутов, такие же, как и для элемента style. Для этого элемента необходимо задать ещё два атрибута href и rel. Атрибут href определяет URL таблицы стилей. Атрибут rel принимает в качестве своего значения тип связи между документами и для таблиц стилей, он должен принимать значение stylesheet. Для одного HTML документа можно подключить несколько внешних таблиц стилей. Например:

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
	</head>
	<body>
		<h1>Заголовок красного цвета.</h1>
	</body>
</html>

Теперь остаётся создать файлы main.css и ptint.css, который будет содержать все необходимые инструкции CSS.

h1 { color: red; }

Данный способ, немного отличается от других, т.к. он не базируется на HTML элементах или их атрибутов. Речь пойдёт о директиве @import. Эта директива из CSS, и содержаться она может только в CSS документе, то есть либо в элементе style либо во внешней таблице. Эта директива должна стоять перед всеми инструкциями CSS.

<!doctype html>
<html>
	<head>
		<style type="text/css" media="all">
			@import url(style.css);
		</style>
	</head>
	<body>
		<h1>Заголовок красного цвета.</h1>
	</body>
</html>

Синтаксис CSS

Как уже было отмечено ранее, стилевые правила записываются в своем формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Заголовки</title>
		<style type="text/css">
			h1 { color: #a6780a; font-weight: normal; }
			h2 {
				color: olive;
				border-bottom: 2px solid black;
			}
		</style>
	</head>
	<body>
		<h1>Заголовок 1</h1>
		<h2>Заголовок 2</h2>
	</body>
</html>

Box-модель

Блочная модель (box model) — одно из фундаментальных понятий верстки.
Блочная модель CSS описывает прямоугольный блок, генерируемый для элемента в дереве документа и выводящийся согласно визуальной модели форматирования.

Для управления каждой из составных частей блока существуют соответствующие CSS свойства: внутренние отступы — padding, границы — border, внешние отступы — margin. При желании эти свойства можно задать для каждой стороны блока отдельно

Итак, для элемента можно задать границы (рамку) и два вида отступов. Чем же они отличаются?

Основное различие сразу бросается в глаза: padding — это отступ между контентом и границей, а margin — это отступ между границей и «внешним миром».

Отсюда вытекает второе отличие — если для элемента задать фон (background), то этим фоном зальется и контент и внутренний отступ (padding). Margin же, находясь снаружи, всегда остается прозрачным.

Padding, если провести аналогию, это поля на листе бумаги. Они имеют тот же цвет, что и сам лист, но текст на них не заходит. Margin — это расстояние от края листа до другого, лежащего рядом листа или, скажем, до края стола.

Третье отличие заключается в том, что padding и margin по разному участвуют в подсчете общей ширины блока. Это зависит от принятой блочной модели.

В настоящее время существуют две основные блочные модели: модель от W3C, которая поддерживается всеми основными браузерами и, так называемая, традиционная — ее поддерживает IE6 в режиме обратной совместимости.
Структура блока элемента абсолютно одинакова. Единственное, чем отличаются различные модели — это правилами определения размеров элемента.

В традиционной блочной модели, которую поддерживает IE6 в режиме совместимости, размеры элемента, задаваемые свойствами width и height, включают в себя контентную часть элемента, внутренние отступы и границы.

В блочной модели W3C размеры элемента, задаваемые свойствами width и height, включают в себя только контентную часть. То есть width и height не включают в себя ни размеры внутренних отступов, ни размеры границ

Давай разберемся подробно из чего состоят размеры элемента в блочной модели W3C. Рассмотрим высоту элемента:

Из рисунка понятно, что действительная высота элемента рассчитывается так: border-top+padding-top+height+padding-bottom+border-bottom.

Действительная ширина элемента соответственно будет равна: border-left+padding-left+width+padding-right+border-right.

Соответственно тот же пример «ширина элемента 100px и внутренний отступ по 10px с каждой стороны» уже даст блок с общей шириной 120px! Так как width:100px означает именно 100px под контентную зону. Все отступы и границы добавляются к этому фиксированному значению.

Логика тоже ясна: главное в блоке — его содержимое. И если я сказал сто пикселей, значит сто, и никакие паддинги и бордеры мне ничего не поменяют!

Как быть, например, в ситуации, когда width элемента равен 100%, а padding и/или border не равен 0? Тогда действительная ширина элемента будет больше 100%, а это далеко не всегда желательно.

Вот это и есть самая большая сложность блочной модели W3C: когда ширина указана в процентах, а padding и border в пикселях. Такую ситуацию нужно, если не избегать, то во всяком случае использовать пореже и с пониманием вопроса.

Как описано выше, блочная модель W3C в некоторых случаях может доставить немало хлопот, поэтому мудрые люди из того же W3C предусмотрели в CSS3 возможность переключаться между блочной моделью W3C и традиционной блочной моделью используя CSS3 свойство box-sizing

« Напишите мне текст в баннере белыми буквами зеленого цвета. »