Презентация на тему "7 Внеурочные занятия 8 класс. Добавление стилей на страницу html"

Презентация: 7 Внеурочные занятия 8 класс. Добавление стилей на страницу html
Включить эффекты
1 из 5
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
0.0
0 оценок

Комментарии

Нет комментариев для данной презентации

Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.


Добавить свой комментарий

Аннотация к презентации

Посмотреть презентацию на тему "7 Внеурочные занятия 8 класс. Добавление стилей на страницу html" для 8 класса в режиме онлайн с анимацией. Содержит 5 слайдов. Самый большой каталог качественных презентаций по педагогике в рунете. Если не понравится материал, просто поставьте плохую оценку.

  • Формат
    pptx (powerpoint)
  • Количество слайдов
    5
  • Аудитория
    8 класс
  • Слова
    педагогика
  • Конспект
    Отсутствует

Содержание

  • Презентация: 7 Внеурочные занятия 8 класс. Добавление стилей на страницу html
    Слайд 1

    Добавление стилей на страницу HTML.

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

  • Слайд 2

    Способы добавления стилей на страницу

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

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

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

    2. Глобальные стили При использовании глобальных стилей свойства CSS описываются в самом документе и располагаются в заголовке веб-страницы. По своей гибкости и возможностям этот способ добавления стиля уступает предыдущему, но также позволяет хранить стили в одном месте, в данном случае прямо на той же странице с помощью контейнера , как показано в следующем примере: В данном примере задан стиль тега <h1>, который затем можно повсеместно использовать на данной веб-странице ЗАДАНИЕ: Изменить стиль заголовка <h1> на своей главной странице, прописав цвет текста, размер и шрифт, как в приведенном примере.</p>

  • Слайд 4

    3. Связанные стили При использовании связанных стилей описание селекторов и их значений располагается в отдельном файле, как правило, с расширением css, а для связывания документа с этим файлом применяется тег . Данный тег помещается в контейнер 

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

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

Посмотреть все слайды

Сообщить об ошибке