• Глава 4.0. Шаблон HTML и динамические страницы
  • 4.1 Шаблон HTML5
  • 4.2 Шаблон PHP и динамические страницы
  • 4.3. Файл sample.html
  • 4.4. Файл header.php
    • 4.4.1. Файл style.css
  • 4.5. Файл footer.php
    • 4.5.1 Файл scripts.js
  • 4.6. Файл index.php
  • 4.7. page.php
    • 4.7.1 Файл home.php
    • 4.7.2 Файл about.php
    • 4.7.3 Файл contact.php

Создадим корневую директорию стилей шаблона css и в ней создадим в блокноте файл style.css и вынесем из файла sample.html код блока стилей, заключенный между тегами <style> и </style>.

style.css

html {
    width: 100%; /* Ширина 90% */
    margin: 0;
    padding: 0;
}
 
body {
  width: 90%; /* Задает ширину 90% от вьюпорта */
  margin: 0 auto; /* Центрирует контент */
  box-sizing: border-box; /* Учитывает padding внутри ширины */
}
 
h, p {
	margin: 10px;
	padding: 0px 10px;              /* Убирает внутренние отступы */
}
 
.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #04aa6d;
	color: white;
	border: 1px solid black;
	border-radius: 5px; /* Скругляет все углы на 5px */
}
 
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #04aa6d;
	display: flex;
}
 
ul li {
	float: left;
	border-right:1px solid #025f3d;
}
 
ul li:last-child {
	border-right: none;
}
 
ul li a {
	display: block;
	color: white;
	text-align: center;
    /* top, right, bottom, left */
	padding: 10px 16px;
	text-decoration: none;
}
 
ul li a:hover:not(.active) {
	background-color: #03915d;
}
 
ul li a.active {
	background-color: #04aa6d;
}
 
.search-form {
	display: flex;
}
 
.search-form input {
	background-color: #D3D3D3
	border: 1px solid #025f3d;
	border-radius: 5px; /* Скругляет все углы на 5px */
    /* top, right, bottom, left */
    margin: 3px 10px 3px 0; /* 10px отступ справа */
	padding: 10px 10px;              /* Убирает внутренние отступы */
	border: none;
}
 
.search-form-button {
    /* top, right, bottom, left */
    margin: 0 1px 0 0; /* 10px отступ справа */
	padding: 10px 10px;              /* Убирает внутренние отступы */
	border: none;             /* Убирает рамку (если есть) */
	background: none;         /* Убирает фоновый цвет */
    color: white;
	font: inherit;            /* Наследует шрифт родителя */
	cursor: pointer;          /* Возвращает курсор-ручку */
}
 
ul li .search-form-button:hover:not(.active) {
	background-color: #03915d;
}
 
ul li .search-form-button.active {
	background-color: #04aa6d;
}

На этом с шапкой шаблона закончим и перейдем к файлу footer.php в следующей главе

см. также:

• Консорциум Всемирной паутины (W3C)
• Объявление языка в HTML

4.4. Файл header.php 4.5. Файл footer.php

Файл уже не такой громоздкий, и разобраться в нем намного проще. Вынисем из него стили в отдельный файл style.css и директорию CSS, о чем речь пойдет на следующей странице руководства