Верстку следует делать так, чтобы страницы в разных браузерах по возможности выглядели одинаковыми. Разработчики браузеров пока ещё не договорились о типовом отображении тэгов, поэтому перед своими стилями необходимо выполнить т.н. сброс, который приводит тэги к единому начальному поведению в любом браузере.
Существует два принципиально разных подхода к решению задач. Первый — 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.