Содержание
-
Добавление стилей на страницу HTML.
Выполнила: Шалагина Екатерина Алексеевна Внеурочные занятия для 8 класса ГБОУ гимназия №293 Санкт-Петербург, 2020
-
Способы добавления стилей на страницу
В целом, HTML используется для описания содержимого документа, а не его стиля. CSS (Cascade Style Sheets) – каскадные таблицы стилей же используется, чтобы указать стиль документа (оформление), но не содержание. Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрим их подробнее. 1. Внутренние стили Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут style, а его значением выступает набор стилевых правил Пример. В данном примере стиль тега
задаётся с помощью атрибута style, в котором через точку с запятой перечисляются стилевые свойства ЗАДАНИЕ: Задать заголовку
на своей главной странице цвет текста с помощью внутреннего стиля. -
2. Глобальные стили При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера , как показано в следующем примере: В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице ЗАДАНИЕ: Изменить стиль заголовка <h1> на своей главной странице, прописав цвет текста, размер и шрифт, как в приведенном примере.</p>
-
3. Связанные стили При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер
, как показано в примере: Значение атрибута тега — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте. В данном примере подразумевается, что связанный css-файл находится в той же папке, что и html-файл страницы. Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него. -
Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ. Вопросы для проверки: 1. Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего? Связанные стили. Глобальные стили. Блочные стили. Внутренние стили. Экспорт стиля. 2. В данном примере, какой цвет будет у текста на веб-странице? Чёрный Красный Зелёный Синий Оливковый 3. Какой атрибут используется для определения внутреннего стиля? StyleClassStyles Font Link Задание: Изучить стили шрифта - http://htmlbook.ru/css/font Изучить стили для фона - http://htmlbook.ru/css/background Применить данные стили к своей странице с использованием 2 и 3 способа
Нет комментариев для данной презентации
Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.