Слайд 1

Добавление стилей на страницу HTML . Выполнила: Шалагина Екатерина Алексеевна Внеурочные занятия для 8 класса ГБОУ гимназия №293 Санкт-Петербург, 2020

Слайд 2

Способы добавления стилей на страницу В целом, HTML используется для описания содержимого документа, а не его стиля . CSS (Cascade Style Sheets) – каскадные таблицы стилей же используется, чтобы указать стиль документа (оформление), но не содержание. Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением . Далее рассмотрим их подробнее. 1. Внутренние стили Внутренний или встроенный стиль является по существу расширением для одиночного тега используемого на текущей веб-странице. Для определения стиля используется атрибут st y le , а его значением выступает набор стилевых правил Пример. В данном примере стиль тега

задаётся с помощью атрибута st y le , в котором через точку с запятой перечисляются стилевые свойства ЗАДАНИЕ: Задать заголовку

на своей главной странице цвет текста с помощью внутреннего стиля.

Слайд 3

Способы добавления стилей на страницу 2. Глобальные стили При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера < style > , как показано в следующем примере: В данном примере задан стиль тега

, который затем можно повсеместно использовать на данной веб-странице ЗАДАНИЕ: Изменить стиль заголовка

на своей главной странице, прописав цвет текста, размер и шрифт, как в приведенном примере.

Слайд 4

Способы добавления стилей на страницу 3. Связанные стили При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css , а для связывания документа с этим файлом применяется тег < link >. Данный тег помещается в контейнер < head > , как показано в примере : Значение атрибута тега < link > — rel остаётся неизменным независимо от кода, как приведено в данном примере. Значение href задаёт путь к CSS-файлу, он может быть задан как относительно, так и абсолютно. Заметьте, что таким образом можно подключать таблицу стилей, которая находится на другом сайте . В данном примере подразумевается, что связанный css - файл находится в той же папке, что и html- файл страницы. Как видно из данного примера, файл со стилем не хранит никаких данных, кроме синтаксиса CSS. В свою очередь и HTML-документ содержит только ссылку на файл со стилем, т. е. таким способом в полной мере реализуется принцип разделения кода и оформления сайта. Поэтому использование связанных стилей является наиболее универсальным и удобным методом добавления стиля на сайт. Ведь стили хранятся в одном файле, а в HTML-документах указывается только ссылка на него.

Слайд 5

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым имеет приоритет внутренний стиль, затем глобальный стиль и в последнюю очередь связанный стиль. В примере 3.5 применяется сразу два метода добавления стиля в документ. Вопросы для проверки: 1 . Сайт имеет более ста HTML-документов, имеющих одинаковое стилевое оформление. Какой способ подключения CSS подходит лучше всего? Связанные стили. Глобальные стили. Блочные стили. Внутренние стили. Экспорт стиля . 2. В данном примере, какой цвет будет у текста на веб-странице ? Чёрный Красный Зелёный Синий Оливковый 3. Какой атрибут используется для определения внутреннего стиля? S tyle C lass S tyles F ont L ink Задание: И зучить стили шрифта - http :// htmlbook.ru/css/font Изучить стили для фона - http:// htmlbook.ru/css/background Применить данные стили к своей странице с использованием 2 и 3 способа