Перейти к предыдущему разделу:
Что такое CSS?Это вторая статья руководства по CSS для начинающих, объясняющая взаимосвязь между CSS и документами. В ней вы узнаете, как добавить CSS стили для документа, который вы создали в процессе изучения первой статьи.
Информация: Зачем нужен CSS?
CSS используется для определения стилей ваших документов, в том числе дизайна, верстки и вариаций макета для различных устройств и размеров экрана. Вы можете разместить стили CSS внутри тега <HEAD> документа с встроенной таблицей стилей, или приложить отдельный CSS-файл, который будет определять ваши стили извне. Чтобы привязать внешнюю таблицу стилей к документу, просто добавьте ссылку на таблицу стилей в заголовке <HEAD> документа.
У внешней таблицы стилей есть множество преимуществ. Сохранение стилей отдельно от содержания HTML:
- Помогает избежать дублирования
- Облегчает обслуживание
- Позволяет делать изменения для всего сайта в одном месте
Используя CSS, вы храните информацию о стилях в общих файлах, которые доступны всем страницам. Например, когда документы ссылаются на те таблицы стилей, которые определяют цвет заголовков h2, вы можете применить стиль для тегов заголовков h2 на глобальном уровне путем изменения одного атрибута CSS.
Когда пользователь открывает веб-страницу, браузер загружает информацию стиля вместе с содержанием страницы.
Когда пользователь открывает веб-страницу в режиме печати, вы можете предоставить различную информацию о стилях которая сделает страницу более лёгкой для чтения.
Как заставить HTML и CSS работать вместе? В целом, HTML используется для описания содержимого документа, а не его стиля. CSS же используется, чтобы указать стиль документа, но не содержание. Позже в руководстве вы увидите некоторые исключения из этого правила.
Язык разметки, типа HTML также обеспечивает некоторые способы задания стилей.
Например, в HTML вы можете использовать тег <B>, чтобы сделать текст жирным, либо указать цвет фона страницы в теге <BODY>.
При использовании CSS, задание стилей средствами языка разметки обычно не используется, поскольку вся информация о стилях легко доступна для чтения и изменения в CSS-файле.
Действие: Создание таблицы стилей
- Создайте новый текстовый файл в том же каталоге, что и
doc1.html, созданный в первой статье. - Сохраните его как
style1.css. Этот файл будет вашей таблицей стилей. - Скопируйте и вставьте в CSS-файл приведённую ниже строку, после чего сохраните файл:
strong {color: red;}
Привязка таблицы стилей к документу
- Для привязки вашего документа к таблице стилей, необходимо внести в HTML-файл некоторые исправления. Добавьте строки, приведённые ниже:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p> </body> </html> - Сохраните файл, и откройте его в браузере. Таблица стилей сделает заглавные буквы красными:
В дополнение к красному, в CSS имеются и другие названия цветов.
Не открывая подсказку, подберите ещё пять цветовых имён, которые будут работать в CSS.
CSS поддерживает общие названия цветов, например orange, yellow, blue, green, или black. Он также поддерживает некоторые более экзотические названия типа chartreuse, fuschia, или burlywood. Посмотрите значения цвета CSS, чтобы ознакомится с полным списком поддерживаемых цветов, а так же методов их задания.
Что дальше?
Перейти к следующему разделу:
Как работает CSS. Теперь, когда у вас есть образец документа, связанный с отдельной таблицей стилей, вы готовы узнать больше о том, как ваш браузер объединяет их при отображении документа.