Презентация, доклад на тему Открытый урок по информатике на тему: Каскадные таблицы стилей

Содержание

Введение Каскадные таблицы стилей открывают совершенно новые возможности в веб-дизайне. Сделать качественный дизайн без их использования очень проблематично. Но самое важное то, что используя CSS вы экономите себе уйму времени. Ведь с помощью одного маленького

Слайд 1Основы css

Основы css

Слайд 2Введение
Каскадные таблицы стилей открывают совершенно новые возможности в веб-дизайне. Сделать

качественный дизайн без их использования очень проблематично.
Но самое важное то, что используя CSS вы экономите себе уйму времени. Ведь с помощью одного маленького файла стилей, вы можете управлять дизайном сотни, тысячи  и даже миллиона страниц, и это очень увлекает…
Только учтите, что изучать CSS без знания HTML  практически невозможно!
Введение Каскадные таблицы стилей открывают совершенно новые возможности в веб-дизайне. Сделать качественный дизайн без их использования

Слайд 3Что такое CSS?
Стиль - это набор параметров, задающий внешнее представление

некоторого объекта в той или иной среде.
CSS – (англ. Cascading Style Sheets - Каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Значительно облегчает создание веб-сайтов.
Что такое CSS? Стиль - это набор параметров, задающий внешнее представление некоторого объекта в той или иной

Слайд 4Используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью

языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
CSS работает со шрифтами, полями, таблицами, отступами, картинками и др. и представляет значительно более широкие возможности, чем простой html

Применение Css  

Используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но

Слайд 5Основная цель разработки CSS - разделение описания логической структуры веб-страницы от

описания внешнего вида этой веб-страницы

Цель создания CSS  

Такое разделение увеличивает доступность документа, предоставляет большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.

Основная цель разработки CSS - разделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницыЦель создания

Слайд 6Отличия CSS от HTML
1. HTML является языком, на котором создается веб-страница.

CSS является технологией управления дизайном этой веб-страницы.
2. С точки зрения дизайна страницы, CSS более удобен, чем прописывание оформления в HTML, т.к. позволяет добиться существенного уменьшения размера кода и задавать оформление сразу для множества страниц.
3. При помощи CSS можно делать такие вещи, которые на html сделать невозможно


Отличия CSS от HTML 1. HTML является языком, на котором создается веб-страница. CSS является технологией управления дизайном

Слайд 7Основные преимущества CSS
управление дизайном любого количества документов с помощью одной таблицы

стилей;
более точный дизайн страниц, поддерживаемый всеми браузерами;
Основные преимущества CSSуправление дизайном любого количества документов с помощью одной таблицы стилей;более точный дизайн страниц, поддерживаемый всеми

Слайд 8Основные преимущества CSS
разделение документа на две составляющие: структура и дизайн, благодаря

чему исходный код становится чистым и легко читаемым
новые расширенные возможности по сравнению с обычным html
Основные преимущества CSSразделение документа на две составляющие: структура и дизайн, благодаря чему исходный код становится чистым и

Слайд 9 Как и любой другой язык программирования, CSS имеет строго

определенный синтаксис, т.е. правила по которым создаются таблицы стилей.

В CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.

Синтаксис и принцип работы CSS

Как и любой другой язык программирования, CSS имеет строго определенный синтаксис, т.е. правила по которым

Слайд 10Общие правила CSS
Правила каскадных таблиц состоят из
селектора и определения.
Селектор

задает элемент (например, таблица);
Определение - свойства этого определения (например, цвет фона таблицы).
Для эффективного использования CSS необходимо иметь в виду следующие правила:
Синтаксис.
Группирование.
Наследование.

Общие правила CSSПравила каскадных таблиц состоят из селектора и определения. Селектор задает элемент (например, таблица);Определение - свойства

Слайд 11Структура правила
 Селектор - показывает к какому html тегу(тегам) применяется то или

иное свойство.
Блок объявления стилей, который обязательно заключается в фигурные скобки.

Структура правила Селектор - показывает к какому html тегу(тегам) применяется то или иное

Слайд 12Структура правила
Каждое объявление состоит из свойства и его значения. После свойства ставится двоеточие.
Правило

может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой, причем после последнего объявления точку с запятой можно не ставить.
Структура правилаКаждое объявление состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений.

Слайд 13Структура правила
Данное правило указывает на то, что все заголовки первого уровня

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

Структура правилаДанное правило указывает на то, что все заголовки первого уровня в документе будут голубого цвета с

Слайд 14Группирование
Можно записывать селекторы через запятую, если им присваивается одинаковое определение; если

селектор имеет несколько определений, то они записываются через точку с запятой.


Пример 2

ГруппированиеМожно записывать селекторы через запятую, если им присваивается одинаковое определение; если селектор имеет несколько определений, то они

Слайд 15Наследование
При определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента.


Например, если в параграфе

задается красный цвет шрифта, то выделенный с помощью текст также будет красным.


НаследованиеПри определении стиля элемента, большинство вложенных элементов наследуют свойства головного элемента. Например, если в параграфе задается красный

Слайд 16Меняя стилевые правила во внешней таблицы стилей CSS, мы можем управлять

дизайном большого количества страниц.

Подключение CSS таблицы к HTML документу

Меняя стилевые правила во внешней таблицы стилей CSS, мы можем управлять дизайном большого количества страниц.Подключение CSS таблицы

Слайд 17Подключение CSS таблицы к HTML документу
Для этого нужно подключить внешнюю таблицу

стилей ко всем страницам html, дизайном которых мы хотим управлять.
Подключение CSS таблицы к HTML документуДля этого нужно подключить внешнюю таблицу стилей ко всем страницам html, дизайном

Слайд 18Подключение CSS таблицы к HTML документу
Существует четыре способа подключения CSS к

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

Слайд 19Подключение внешней таблицы стилей ко всем страницам html
Внешняя таблица стилей это

просто текстовый файл с расширением  .css Например Style.css
Подключение внешней таблицы стилей ко всем страницам htmlВнешняя таблица стилей это просто текстовый файл с расширением  .css

Слайд 20
Если предполагается использовать один стиль для нескольких станиц, то можно описать

стиль в отдельном файле. Для подключения стилевого файла используется команда , расположенная внутри тега .

Первые два свойства(REL, TYPE) указывают браузеру, что на страничке используется CSS.
Значение последнего свойства (HREF) - имя файла (с путем, абсолютным или относительным), в котором прописан стиль страницы.

Связывание

Если предполагается использовать один стиль для нескольких станиц, то можно описать стиль в отдельном файле. Для подключения

Слайд 21
Например в каждом документе, в голове документа(между тегами и )

необходимо прописать:

…


Эта строка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.

Связывание

Например в каждом документе, в голове документа(между тегами и ) необходимо прописать: …Эта строка указывает

Слайд 22Пример 3
Откроем Блокнот(или другой редактор) и создаем с помощью него два

файла находящихся в одной папке:
CSS файл - style.css и HTML файл - index.htm
Пример 3 Откроем Блокнот(или другой редактор) и создаем с помощью него два файла находящихся в одной папке:

Слайд 23Пример
Файлы примерно следующего содержания: index.htm

Пример Файлы примерно следующего содержания: index.htm

Слайд 24Пример
Файлы примерно следующего содержания: Style.css

Пример Файлы примерно следующего содержания: Style.css

Слайд 25Пример
Запустив в браузере файл index.htm увидим

Пример 3

Пример Запустив в браузере файл index.htm увидим Пример 3

Слайд 26
Если нужно задать стиль только для одной страницы, то описание стиля

можно внедрить в тело документа, в заголовке HEAD, между тегами .

.....



Внедрение

Пример 4

Если нужно задать стиль только для одной страницы, то описание стиля можно внедрить в тело документа, в

Слайд 27Пример
Пример 5

ПримерПример 5

Слайд 28Можно задать стиль отдельно выбранного элемента в свойстве STYLE тега этого

элемента, например:

Красный текст на желтом фоне, маленькими заглавными буквами.< /SPAN>


Стоит отметить, что данный способ нарушает идеологию использования стилей (их универсальность), поэтому использование его не желательно.

Встраивание в теги документа

Пример 6

Можно задать стиль отдельно выбранного элемента в свойстве STYLE тега этого элемента, например: Красный текст на желтом

Слайд 29Пример CSS, встраиваемого в HTML страницу

Для совместимости со старыми браузерами, не

понимающими CSS содержимое элемента