Внешняя таблица стилей определяет, как выглядит веб-страница. Вы можете использовать таблицу стилей, чтобы указать такие вещи, как размер, цвет и шрифт текста, цвет кнопок или положение меню и боковых панелей.
Код, используемый во внешней таблице стилей
Для создания базовой веб-страницы используются два типа кода:
- Язык гипертекстовой разметки (HTML): Определяет содержимое веб-страницы. Он содержит фактический текст с разметкой, определяющей, являются ли разделы текста абзацами, заголовками или списками. Он также содержит ссылки на изображения, которые появляются на странице, и гиперссылки на внешние страницы.
- Каскадные таблицы стилей (CSS): Язык кодирования, используемый для указания способа отображения содержимого. Он определяет, как отображается каждый тип текстового элемента, и может отображать один и тот же тип элемента по-разному, если они принадлежат разным классам или имеют другой идентификатор. Это позволяет таким вещам, как меню и списки, вести себя по-разному в основном тексте веб-страницы.
В целом, отделение стиля от контента - хорошая идея, поскольку это позволяет вам сосредоточиться на чем-то одном за раз. Это становится еще более важным в команде, позволяя специалистам по содержанию и презентации работать независимо от остальных. Возможно, что еще более важно, это также позволяет применять единый набор инструкций по стилю единообразно для всего веб-сайта.
Затем визуальное представление веб-сайта можно изменить с помощью одной таблицы стилей без редактирования каждой веб-страницы по отдельности. Для более крупных сложных веб-сайтов можно использовать несколько таблиц стилей для управления текстом, меню и разделами на страницах. Этот набор таблиц стилей можно назвать «темой».
Использование внешнего CSS для связывания HTML с CSS
Можно включить стиль CSS непосредственно в HTML веб-страницы, используя CSS для индивидуального оформления каждого абзаца и заголовка по-разному. Этот тип встроенный стиль как правило, это не лучшая идея, поскольку вы теряете все преимущества отделения стиля от содержания. В частности, вы теряете возможность постоянно обновлять весь свой веб-сайт из одного файла.
Правильный способ применить стиль к веб-сайту - создать отдельный файл внешней таблицы стилей для каждого типа стиля, который вы хотите применить, а затем ссылаться на эти файлы из каждого файла HTML. Например, у вас могут быть следующие внешние таблицы стилей:
- text.css
- menus.css
- layout.css
Вы можете вносить изменения в код CSS в этих внешних таблицах стилей, не меняя их имена файлов, то есть ссылки на эти файлы в HTML всех ваших веб-страниц не будут измененный.
Примеры HTML и CSS
Очень простая HTML-страница может содержать следующий код:
Все обо мне!
Эта страница обо мне и о том, почему я такой классный.
Если вы хотите увидеть, как это выглядит в веб-браузере, скопируйте текст в текстовый редактор, например Блокнот. Сохраните файл как что-то вроде index.html и перетащите его в браузер, чтобы увидеть старый стиль.
Простую внешнюю таблицу стилей можно связать с этой страницей, добавив следующий код под.
type = "текст / css"
href = "myStyle.css" />
Создайте еще один текстовый файл с именем myStyle.css, расположенный в той же папке, что и index.html, который содержит следующий код:
h1 {
цвет: # FF7643;
font-face: Arial '
}
п {
красный цвет;
размер шрифта: 1.5em;
}
С CSS можно сделать гораздо больше. Если хочешь узнать больше, W3 школы это отличное место для начала.