Зовнішня таблиця стилів визначає вигляд веб-сторінки. Ви можете використовувати таблицю стилів, щоб вказати такі речі, як розмір, колір і шрифт тексту, колір кнопок або положення меню і бічних панелей.
Код, який використовується у зовнішній таблиці стилів
Існує два типи коду, що використовується для створення базової веб-сторінки:
- Мова розмітки гіпертексту (HTML): Визначає вміст веб-сторінки. Він містить фактичний текст з розміткою, що вказує, чи є розділи тексту абзацами, заголовками або списками. Він також містить посилання на зображення, які з'являються на сторінці та гіперпосилання на зовнішні сторінки.
- Каскадні таблиці стилів (CSS): мова кодування, яка використовується для визначення способу показу вмісту. Він визначає спосіб відображення кожного типу текстового елемента і може по-різному відображати один і той же тип елемента, якщо вони належать до різних класів або мають різні ідентифікатори. Це дозволяє таким речам, як меню та списки, поводитися по-різному в основному тексті веб-сторінки.
Загалом, хороша ідея відокремити стиль від контенту, оскільки він дозволяє вам зосередитися на одній речі за раз. Це стає ще більш важливим в команді, дозволяючи фахівцям за змістом і презентації працювати незалежно від інших. Можливо, ще важливіше те, що він також дозволяє застосовувати єдиний набір інструкцій за стилем на всьому сайті.
Потім можна змінити візуальне представлення веб-сайту з однієї таблиці стилів без індивідуального редагування кожної веб-сторінки. Для великих складних веб-сайтів можна використовувати декілька таблиць стилів для керування текстом, меню та розділами на сторінках. Цю збірку таблиць стилів можна назвати «темою».
Використання зовнішнього CSS для зв'язку HTML з CSS
Ви можете включити стиль CSS безпосередньо в HTML-веб-сторінки, використовуючи CSS для індивідуальної вигляду кожного абзацу та заголовків по-різному. Цей тип вбудованого стилю, як правило, не дуже хороша ідея, оскільки ви втрачаєте всі переваги відокремлення стилю від контенту. Зокрема, ви втрачаєте можливість послідовно оновлювати весь сайт з одного файла.
Правильний спосіб застосувати стиль до веб-сайту - створити окремий файл зовнішньої таблиці стилів для кожного типу стилю, який ви хочете застосувати, а потім посилатися на ці файли з кожного файлу HTML. Наприклад, ви можете мати такі зовнішні таблиці стилів:
- css
- css
- css
Ви можете вносити зміни в код CSS в цих зовнішніх таблицях стилів без зміни їх імен файлів, тобто посилання на ці файли в HTML всіх ваших веб-сторінок не будуть змінені.
Приклади HTML і CSS
Дуже проста сторінка HTML може містити такий код:
<! DOCTYPE html >
< html
> < he
ad > < title > Моя дивовижна сторінка </ti
tle > </h
ead > <
body > h1 > Все про мене
! </H1 > < p > Ця сторінка про мене і чому Я вражаючий
. </ p>
</ body> </ html>
Якщо ви бажаєте переглянути, як це виглядає у веб-переглядачі, скопіюйте текст до текстового редактора, наприклад, Блокнота. Збережіть файл як щось на зразок «index.html» і перетягніть його в браузер, щоб побачити стиль старої школи.
Просту зовнішню таблицю стилів можна пов'язати з цією сторінкою, додавши наступний код під рядком < title >:
<link rel = ""stylesheet""
type = ""text / css""
href = ""myStyle.css"" />
Створіть інший текстовий файл з назвою myStyle.css, розташований у тій самій теці, що й index.html, який містить наступний код:
h1 {
color: # FF7643;
font-face: Arial '
}
p {
color: red;
розмір шрифту: 1,5em;
}
За допомогою CSS ви можете зробити набагато більше. Якщо ви хочете дізнатися більше, W3 Schools - відмінне місце для старту.
