Шестой урок. Сброс стилей. Пути URL

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

Существует два принципиально разных подхода к решению задач. Первый — Reset.css, который сбрасывает стили всех тэгов до нуля. После такого сброса нужно заново настраивать их отображение. Раньше, когда браузеры сильно различались, распространен был именно такой подход, который гарантировал одинаковый результат.

К минусам такого сброса следует отнести то, что часть тэгов не требует полного сброса, например списки, формы или кнопки.

Со временем различия в браузерах сокращаются и появился новый подход в виде Normalize.css. Он уже не сбрасывает стили, а исправляет только те, которые имеют браузерные отличия. Учитываются браузеры: FireFox, Chrome, Edge, Safari и IE, включая особенности работы на Android и iOS. На текущий момент Normalize.css является наиболее распространённым способом сброса стилей.

Поэтому перед тем, как что-то верстать к странице следует подключить normalize.css (скачайте его) в секции HEAD страницы.

<link rel="stylesheet" href="http://ваш-сайт/normalize.css">

Существует ещё один сброс «border-box». Его задача — перевести блоковую модель поведения тэгов в привычный нам вариант. Подробней эти вещи мы расмотрим позже, пока же просто создайте файл border-box.css:

*,
*:before,
*:after {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

hr {
  box-sizing: content-box;
}

Подключать его следует после normalize.css:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>Титул в браузере</title>
	
	<link rel="stylesheet" href="http://ваш-сайт/normalize.css">
	<link rel="stylesheet" href="http://ваш-сайт/border-box.css">
...

Если мы захотим вынести свои стили в отдельный css-файл (style.css), то указываем его после сбросов:

...
	<link rel="stylesheet" href="http://ваш-сайт/normalize.css">
	<link rel="stylesheet" href="http://ваш-сайт/border-box.css">
	<link rel="stylesheet" href="http://ваш-сайт/style.css">
...

Адреса к css-файлам должны быть указаны либо полностью (абсолютный адрес), либо относительно текущего адреса. Абсолютный адрес — это адрес с указанием полного пути с http. Если нет каких-то особых задач, то старайтесь всегда указывать абсолютный адрес.

Относительный адрес указывается с учетом либо текущего адреса страницы, либо относительно корня сайта.

Начальный слэш указывает браузеру искать адрес относительно корня сайта:

<link rel="stylesheet" href="/style.css">

Если мы смотрим адрес http://localhost/site1/, то корень сайта — это http://localhost, следовательно путь к файлу станет http://localhost/style.css.

Путь относительно текущего адреса указывается без начального слэша:

<link rel="stylesheet" href="style.css">

Здесь браузер получит путь http://localhost/site1/style.css.

Очень часто css-стили, картинки, шрифты располагают в отдельном подкаталоге, например css. В этом случае он указывается в адресе:

<link rel="stylesheet" href="css/style.css">

Здесь браузер получит путь http://localhost/site1/css/style.css.

Эти же самые правила распространяются на ссылки, например:

<a href="moon.php">Луна</a>

На сайте http://localhost/site1/ получится адрес ссылки http://localhost/site1/moon.php.

Аналогично можно поступить и с изображениями:

<img src="images/pic.jpg">

Это будет адрес http://localhost/site1/images/pic.jpg

Относительные ссылки удобны, когда адрес сайта может поменяться. Но, когда на сайте несколько подкаталогов и сложная иерархия страниц/путей, то задать правильный путь будет уже сложней. Может возникнуть ситуация, когда итоговый адрес окажется неверным.

Задания

1. Создайте несколько новых файлов/страниц в site1 на разную астрономическую тематику.

2. Разместите в подкаталоге «css» этого сайта файлы normalize.css и файл для сброса «border-box».

3. Подключите их во всех страницах.

4. Организуйте между страницами навигацию с помощью тэгов A. Проверьте, чтобы все работало как нужно.

5. Разместите в каждом файле хотя бы по одной картинке (тэг IMG) из подкаталога images.