Понятие о каскадных таблицах стилей css 11 класс конспект урока
Обновлено: 05.07.2024
-80%
Учитель, преподаватель математики и информатики
Получите комплекты видеоуроков + онлайн версии
План-конспект урока информатики для 11 класса "Понятие о каскадных таблицах стилей (CSS)" (333.38 KB)
развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.
воспитание самостоятельности, усидчивости и аккуратности.
Тип учебного занятия [2]: учебное занятие усвоения новых знаний и умений.
Учащиеся должны уметь[2]: использовать таблицы для размещения информации на веб-страницах.
Ход учебного занятия:
Объяснение нового материала;
CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания оформления веб-страниц, написанных с помощью языка разметки HTML. С помощью HTML описывается структура вебстраницы, а с помощью CSS – ее внешний вид [3].
Способы подключения CSS к документу [3]
Таблицы стилей могут располагаться как в самом веб-документе, внешний вид которого они описывают, так и в отдельных текстовых файлах, имеющих формат CSS. Правила таблицы стилей применяются ко всем страницам сайта.
Встроенная таблица стилей описывается в самом веб-документе. Она располагается между тегами и , которые, в свою очередь, располагаются в этом документе между тегами и . Тег должен иметь обязательный атрибут type = "text / css".
- Для учеников 1-11 классов и дошкольников
- Бесплатные сертификаты учителям и участникам
Выберите документ из архива для просмотра:
Выбранный для просмотра документ CSS.ppt
Описание презентации по отдельным слайдам:
Введение Каскадные таблицы стилей открывают совершенно новые возможности в веб-дизайне. Сделать качественный дизайн без их использования очень проблематично. Но самое важное то, что используя CSS вы экономите себе уйму времени. Ведь с помощью одного маленького файла стилей, вы можете управлять дизайном сотни, тысячи и даже миллиона страниц, и это очень увлекает… Только учтите, что изучать CSS без знания HTML практически невозможно!
Что такое CSS? Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной среде. CSS – (англ. Cascading Style Sheets - Каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Значительно облегчает создание веб-сайтов.
Используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL. CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html Применение Css
Основная цель разработки CSS - разделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы Цель создания CSS Такое разделение увеличивает доступность документа, предоставляет большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
Отличия CSS от HTML 1. HTML является языком, на котором создается веб-страница. CSS является технологией управления дизайном этой веб-страницы. 2. С точки зрения дизайна страницы, CSS более удобен, чем прописывание оформления в HTML, т.к. позволяет добиться существенного уменьшения размера кода и задавать оформление сразу для множества страниц. 3. При помощи CSS можно делать такие вещи, которые на html сделать невозможно
Основные преимущества CSS управление дизайном любого количества документов с помощью одной таблицы стилей; более точный дизайн страниц, поддерживаемый всеми браузерами;
Основные преимущества CSS разделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и легко читаемым новые расширенные возможности по сравнению с обычным html
Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым создаются таблицы стилей. В CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе. Синтаксис и принцип работы CSS
Общие правила CSS Правила каскадных таблиц состоят из селектора и определения. Селектор задает элемент (например, таблица); Определение - свойства этого определения (например, цвет фона таблицы). Для эффективного использования CSS необходимо иметь в виду следующие правила: Синтаксис. Группирование. Наследование.
Структура правила Селектор - показывает к какому html тегу(тегам) применяется то или иное свойство. Блок объявления стилей, который обязательно заключается в фигурные скобки.
Структура правила Каждое объявление состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой, причем после последнего объявления точку с запятой можно не ставить.
Структура правила Данное правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с размером шрифта 14 пикселей.
Группирование Можно записывать селекторы через запятую, если им присваивается одинаковое определение; если селектор имеет несколько определений, то они записываются через точку с запятой. Пример 2
Наследование При определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента. Например, если в параграфе
задается красный цвет шрифта, то выделенный с помощью текст также будет красным.
Меняя стилевые правила во внешней таблицы стилей CSS, мы можем управлять дизайном большого количества страниц. Подключение CSS таблицы к HTML документу
Подключение CSS таблицы к HTML документу Для этого нужно подключить внешнюю таблицу стилей ко всем страницам html, дизайном которых мы хотим управлять.
Подключение CSS таблицы к HTML документу Существует четыре способа подключения CSS к документу: Связывание - таблица стилей располагается в отдельном файле, который можно подключить к любому количеству HTML страниц. Внедрение - таблица стилей располагается непосредственно внутри HTML документа. Встраивание в теги документа - позволяет определить оформление отдельных элементов страницы. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.
Подключение внешней таблицы стилей ко всем страницам html Внешняя таблица стилей это просто текстовый файл с расширением .css Например Style.css
Пример 3 Откроем Блокнот(или другой редактор) и создаем с помощью него два файла находящихся в одной папке: CSS файл - style.css и HTML файл - index.htm
Пример Файлы примерно следующего содержания: index.htm
Пример Файлы примерно следующего содержания: Style.css
Пример Запустив в браузере файл index.htm увидим Пример 3
Если нужно задать стиль только для одной страницы, то описание стиля можно внедрить в тело документа, в заголовке HEAD, между тегами . . Внедрение Пример 4
Пример Пример 5
Можно задать стиль отдельно выбранного элемента в свойстве STYLE тега этого элемента, например: Красный текст на желтом фоне, маленькими заглавными буквами. Стоит отметить, что данный способ нарушает идеологию использования стилей (их универсальность), поэтому использование его не желательно. Встраивание в теги документа Пример 6
- подготовка к ЕГЭ/ОГЭ и ВПР
- по всем предметам 1-11 классов
Курс повышения квалификации
Дистанционное обучение как современный формат преподавания
Курс повышения квалификации
Инструменты онлайн-обучения на примере программ Zoom, Skype, Microsoft Teams, Bandicam
- Курс добавлен 31.01.2022
- Сейчас обучается 24 человека из 17 регионов
Курс повышения квалификации
Педагогическая деятельность в контексте профессионального стандарта педагога и ФГОС
- ЗП до 91 000 руб.
- Гибкий график
- Удаленная работа
Дистанционные курсы для педагогов
Свидетельство и скидка на обучение каждому участнику
Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:
5 606 375 материалов в базе
Самые массовые международные дистанционные
Школьные Инфоконкурсы 2022
Свидетельство и скидка на обучение каждому участнику
Другие материалы
Вам будут интересны эти курсы:
Оставьте свой комментарий
- 26.03.2014 3859
- ZIP 4.1 мбайт
- 218 скачиваний
- Рейтинг: 5 из 5
- Оцените материал:
Настоящий материал опубликован пользователем Муромцева Светлана Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Автор материала
40%
- Подготовка к ЕГЭ/ОГЭ и ВПР
- Для учеников 1-11 классов
Московский институт профессиональной
переподготовки и повышения
квалификации педагогов
Дистанционные курсы
для педагогов
663 курса от 690 рублей
Выбрать курс со скидкой
Выдаём документы
установленного образца!
Учителя о ЕГЭ: секреты успешной подготовки
Время чтения: 11 минут
Каждый второй ребенок в школе подвергался психической агрессии
Время чтения: 3 минуты
Новые курсы: функциональная грамотность, ФГОС НОО, инклюзивное обучение и другие
Время чтения: 15 минут
Отчисленные за рубежом студенты смогут бесплатно учиться в России
Время чтения: 1 минута
В Россию приехали 10 тысяч детей из Луганской и Донецкой Народных республик
Время чтения: 2 минуты
Минтруд предложил упростить направление маткапитала на образование
Время чтения: 1 минута
Минобрнауки и Минпросвещения запустили горячие линии по оказанию психологической помощи
Время чтения: 1 минута
Подарочные сертификаты
Ответственность за разрешение любых спорных моментов, касающихся самих материалов и их содержания, берут на себя пользователи, разместившие материал на сайте. Однако администрация сайта готова оказать всяческую поддержку в решении любых вопросов, связанных с работой и содержанием сайта. Если Вы заметили, что на данном сайте незаконно используются материалы, сообщите об этом администрации сайта через форму обратной связи.
Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение администрации может не совпадать с точкой зрения авторов.
Отправляя материал на сайт, автор безвозмездно, без требования авторского вознаграждения, передает редакции права на использование материалов в коммерческих или некоммерческих целях, в частности, право на воспроизведение, публичный показ, перевод и переработку произведения, доведение до всеобщего сведения — в соотв. с ГК РФ. (ст. 1270 и др.). См. также Правила публикации конкретного типа материала. Мнение редакции может не совпадать с точкой зрения авторов.
Для подтверждения подлинности выданных сайтом документов сделайте запрос в редакцию.
О работе с сайтом
Мы используем cookie.
Публикуя материалы на сайте (комментарии, статьи, разработки и др.), пользователи берут на себя всю ответственность за содержание материалов и разрешение любых спорных вопросов с третьми лицами.
При этом редакция сайта готова оказывать всяческую поддержку как в публикации, так и других вопросах.
Если вы обнаружили, что на нашем сайте незаконно используются материалы, сообщите администратору — материалы будут удалены.
Читайте также: