Стильове оформлення
Продовжуючи розбиратися, як створити сайт в “Блокноті”, виходимо на новий рівень – підключення аркуші стилів.
Щоб браузер розумів, звідки брати оформлення, необхідно вказати адресу css-файлу. Це службова інформація, її слід розміщувати в секції head.
The Best Site in the World
Тепер все, що буде описано у файлі style.css, браузер застосує до сторінки. Для прикладу змінимо колір фону:
body {
background: #89745d;
}
Повністю вміст файлу стилів буде виглядати так:
body {
padding: 0;
font-family: sans-serif;
font-size: 16px;
background: #89745d;
}
.wrapper {
padding: 20px;
margin-left: auto;
margin-right: auto;
width: 960px;
}
header a {
text-decoration: none;
}
header img {
vertical-align: middle;
margin-right: 20px;
}
header h1 {
display: inline-block;
vertical-align: middle;
color: #f8d9b7;
}
nav {
padding-top: 20px;
padding-bottom: 20px;
}
nav ul {
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
list-style: none;
padding: 0px 15px;
}
nav ul li a {
color: #f8d9b7;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
article {
padding: 20px;
margin: 0 20px;
background: #f8d9b7;
box-shadow: 0 0 15px #f8d9b7;
}
article h2 {
margin-top: 0px;
margin-bottom: 15px;
color: #d57106;
}
article a {
font-size: 14px;
font-style: italic;
color: #d57106;
}
footer {
padding: 20px;
text-align: right;
color: #f8d9b7;
font-size: 14px;
font-weight: bold;
}
Пояснення до стилів:
- Для елемента body встановлюють базові параметри шрифту: сімейство без зарубок і розмір 16 пікселів.
- Головний контейнер має постійну ширину 960 пікселів і вирівняний по центру.
- Пункти списку меню оголошені терміново-блочними елементами, це дозволяє розмістити їх в один ряд. Для посилань прибрано підкреслення, тепер воно з’являється тільки при наведенні курсору.
- Блок статті має контрастний фон та невелику тінь.
Якщо оновити документ у браузері, можна побачити його кінцеве представлення. Перша веб-сторінка успішно створена!
Однак блог не може складатися тільки з головної сторінки зі списком статей. Необхідно якось відображати окремий пост з повним текстом, крім того, вже заплановані сторінки, зазначені в навігаційному меню.
Найважливішою концепцією інтернету є зв’язування окремих документів за допомогою посилань. Як же в “Блокноті” створити сайт з гіперпосиланнями?
