🗊Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн

Категория: Информатика
Нажмите для полного просмотра!
Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №1Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №2Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №3Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №4Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №5Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №6Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №7Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №8Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №9Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №10Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №11Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №12Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №13Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №14Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №15Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №16Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №17Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №18Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №19Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №20
Скачать
Вы можете ознакомиться и скачать Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн. Презентация содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленным изучением английского языка Петродворцового района Санкт-Петербурга Окулова Виктория Викторовна
Описание слайда:
Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленным изучением английского языка Петродворцового района Санкт-Петербурга Окулова Виктория Викторовна

Слайд 2


Оглавление   Занятие № 1. Основа CSS – селекторы Занятие № 2. Оформление текста - работа со шрифтами Занятие № 3. Оформление текста - работа с параметрами абзаца Занятие № 4. Понятие блок, оформление блоков Занятие № 5. Создание каркаса сайта с помощью плавающих элементов Список использованных источников
Описание слайда:
Оглавление   Занятие № 1. Основа CSS – селекторы Занятие № 2. Оформление текста - работа со шрифтами Занятие № 3. Оформление текста - работа с параметрами абзаца Занятие № 4. Понятие блок, оформление блоков Занятие № 5. Создание каркаса сайта с помощью плавающих элементов Список использованных источников

Слайд 3


Занятие № 1. Основа CSS - селекторы HTML – основа WEB-страницы, ее каркас, т.е. ЧТО должно быть на странице. Стиль – это указание браузеру как отображать тот или иной элемент, т.е. КАК страница должна выглядеть. Всё, что находится внутри тега <body>, браузер будет отображать в соответствии с описанными стилями. Способы
Описание слайда:
Занятие № 1. Основа CSS - селекторы HTML – основа WEB-страницы, ее каркас, т.е. ЧТО должно быть на странице. Стиль – это указание браузеру как отображать тот или иной элемент, т.е. КАК страница должна выглядеть. Всё, что находится внутри тега <body>, браузер будет отображать в соответствии с описанными стилями. Способы

Слайд 4


Занятие № 1. Основа CSS - селекторы Основа – селектор и правило (записывается в {}) Правило состоит из свойств и их значений, разделенных «;», свойство и значение разделяются «:». Селектор { свойство1:значение; свойство2:значение; ………….. свойствоN:значение; }
Описание слайда:
Занятие № 1. Основа CSS - селекторы Основа – селектор и правило (записывается в {}) Правило состоит из свойств и их значений, разделенных «;», свойство и значение разделяются «:». Селектор { свойство1:значение; свойство2:значение; ………….. свойствоN:значение; }

Слайд 5


позволяет изменять свойства выбранной группы элементов. Элементам надо в html-документе дать имя класса. name – имя класса позволяет изменять свойства выбранной группы элементов. Элементам надо в html-документе дать имя класса. name – имя класса
Описание слайда:
позволяет изменять свойства выбранной группы элементов. Элементам надо в html-документе дать имя класса. name – имя класса позволяет изменять свойства выбранной группы элементов. Элементам надо в html-документе дать имя класса. name – имя класса

Слайд 6


Правила Правила Цвет элемента color:#1250FF; Рамки (с 4 сторон) border-width:2px; - ширина рамки border-style:solid|dashed|dotted| и др.; - стиль рамки, solid – одинарная, dashed – пунктирная, dotted – в точечку, double – двойная, groove – с тенью наружу, ridge – с тенью внутрь, inset – левая+верхняя, outset – правая+нижняя. Border-color:#235687; - цвет рамки Сторона рамки top|bottom|left|right – приставки (например: border-top-width:2px;) top – верхняя, bottom – нижняя, left – левая, right – правая Сокращенная запись – толщина стиль цвет. Пример: border: 2px solid #235687;
Описание слайда:
Правила Правила Цвет элемента color:#1250FF; Рамки (с 4 сторон) border-width:2px; - ширина рамки border-style:solid|dashed|dotted| и др.; - стиль рамки, solid – одинарная, dashed – пунктирная, dotted – в точечку, double – двойная, groove – с тенью наружу, ridge – с тенью внутрь, inset – левая+верхняя, outset – правая+нижняя. Border-color:#235687; - цвет рамки Сторона рамки top|bottom|left|right – приставки (например: border-top-width:2px;) top – верхняя, bottom – нижняя, left – левая, right – правая Сокращенная запись – толщина стиль цвет. Пример: border: 2px solid #235687;

Слайд 7


Занятие № 1. Основа CSS - селекторы Задание Дан файл index.html с текстом, имеющим заголовок и разбитым на абзацы. Написать файл style.css, в котором использовать селекторы тегов (name { }) для всех абзацев и заголовка – установка цвета текста, селекторы идентификаторов (#name { }) для нечетных абзацев – установка пунктирной рамки толщиной в 3 пикселя выбранного цвета, селекторы классов (.name { }) для изменения свойств второго абзаца – установка рамки с сокращенной записью. Использовать правила для цвета текста и рамок. Связать файл index.html с файлом style.css.
Описание слайда:
Занятие № 1. Основа CSS - селекторы Задание Дан файл index.html с текстом, имеющим заголовок и разбитым на абзацы. Написать файл style.css, в котором использовать селекторы тегов (name { }) для всех абзацев и заголовка – установка цвета текста, селекторы идентификаторов (#name { }) для нечетных абзацев – установка пунктирной рамки толщиной в 3 пикселя выбранного цвета, селекторы классов (.name { }) для изменения свойств второго абзаца – установка рамки с сокращенной записью. Использовать правила для цвета текста и рамок. Связать файл index.html с файлом style.css.

Слайд 8


Правила Правила Гарнитура Шрифта font-family:font1, font2, type_font; По умолчанию гарнитура шрифта – Times New Roman, font1 – название основного шрифта, font2 – название второго шрифта, type_font – тип шрифта, serif – с засечками, sans-serif – без засечек, monospace - моноширный  
Описание слайда:
Правила Правила Гарнитура Шрифта font-family:font1, font2, type_font; По умолчанию гарнитура шрифта – Times New Roman, font1 – название основного шрифта, font2 – название второго шрифта, type_font – тип шрифта, serif – с засечками, sans-serif – без засечек, monospace - моноширный  

Слайд 9


Размер шрифта font-size:14px; Размер шрифта font-size:14px; % - проценты (100%), em – единицы (1), px – пикселы (16), pt - пункты (1/72 дюйма) (12), В скобках указаны базовые размеры Абсолютный размер - xx-small, x-small, small, medium, large, x-large, xx-large, относительный размер – larger, smaller, Курсив font-style:italic; Перед отдельными фрагментами прописывается тег логического уровня <span>, которому назначают класс Насыщенность font-weight:normal | bold | 100-900 Normal – нормальная (значение 400), или bold - полужирный шрифт, или числами от 100 до 900 через 100 Декор text-decoration:underline|overline|line-through|none Underline – подчеркнутый, overline – надчеркнутый, line-through – перечеркнутый, none – снятие подчеркивания Интервал между словами word-spacing:12px; (пиксели) (игнорируется, если установлено выравнивание по ширине) Расстояние между буквами letter-spacing:2px; Изменение регистра text-transform:uppercase| uppercase |capitalize|capitel; uppercase – заглавные буквы (верхний регистр), uppercase - строчные буквы (нижний регистр), capitalize - каждая первая буква заглавная, capitel – строчные буквы как малые заглавные.
Описание слайда:
Размер шрифта font-size:14px; Размер шрифта font-size:14px; % - проценты (100%), em – единицы (1), px – пикселы (16), pt - пункты (1/72 дюйма) (12), В скобках указаны базовые размеры Абсолютный размер - xx-small, x-small, small, medium, large, x-large, xx-large, относительный размер – larger, smaller, Курсив font-style:italic; Перед отдельными фрагментами прописывается тег логического уровня <span>, которому назначают класс Насыщенность font-weight:normal | bold | 100-900 Normal – нормальная (значение 400), или bold - полужирный шрифт, или числами от 100 до 900 через 100 Декор text-decoration:underline|overline|line-through|none Underline – подчеркнутый, overline – надчеркнутый, line-through – перечеркнутый, none – снятие подчеркивания Интервал между словами word-spacing:12px; (пиксели) (игнорируется, если установлено выравнивание по ширине) Расстояние между буквами letter-spacing:2px; Изменение регистра text-transform:uppercase| uppercase |capitalize|capitel; uppercase – заглавные буквы (верхний регистр), uppercase - строчные буквы (нижний регистр), capitalize - каждая первая буква заглавная, capitel – строчные буквы как малые заглавные.

Слайд 10


Задание Задание Дополнить файл style.css правилами для заголовка, устанавливающими гарнитуру шрифта из семейства sans-serif, размер шрифта 18 пикселей, полужирного начертания, с увеличенным расстоянием между буквами, каждая первая буква заглавная. Дополнить файл style.css правилами для всех абзацев, устанавливающими гарнитуру шрифта из семейства serif, размер шрифта 14 пикселей, курсивного начертания, с увеличенным расстоянием между словами. Дополнить файл style.css правилами для четных абзацев, устанавливающими декор – подчеркивание, изменение регистра на заглавные буквы
Описание слайда:
Задание Задание Дополнить файл style.css правилами для заголовка, устанавливающими гарнитуру шрифта из семейства sans-serif, размер шрифта 18 пикселей, полужирного начертания, с увеличенным расстоянием между буквами, каждая первая буква заглавная. Дополнить файл style.css правилами для всех абзацев, устанавливающими гарнитуру шрифта из семейства serif, размер шрифта 14 пикселей, курсивного начертания, с увеличенным расстоянием между словами. Дополнить файл style.css правилами для четных абзацев, устанавливающими декор – подчеркивание, изменение регистра на заглавные буквы

Слайд 11


Занятие № 3. Оформление текста - работа с параметрами абзаца Правила Выравнивание text-align:left|center|right|justify; Красная строка text-indent:20px; (можно в %, пикселях, единицах)   Межстрочный интервал line-height:12px |normal; Или в px, или множитель от текущего размера шрифта Фоновые цвета и изображения Все блоки изначально прозрачные. Фоновый цвет Background-color:#5621FF; Фоновый цвет распространяется на содержимое и отступы. Рамка и внешние поля сами по себе, рамку раскрасить можно, поля – нет. Контур для удобства верстки outline:1px solid #456879; Фон-изображение background-image:url(); url - путь относительный (относительно файла style.css или папки css) записывается в скобках Повторение фона background-repeat:no-repeat|repeat-x|repeat-y|repeat;
Описание слайда:
Занятие № 3. Оформление текста - работа с параметрами абзаца Правила Выравнивание text-align:left|center|right|justify; Красная строка text-indent:20px; (можно в %, пикселях, единицах)   Межстрочный интервал line-height:12px |normal; Или в px, или множитель от текущего размера шрифта Фоновые цвета и изображения Все блоки изначально прозрачные. Фоновый цвет Background-color:#5621FF; Фоновый цвет распространяется на содержимое и отступы. Рамка и внешние поля сами по себе, рамку раскрасить можно, поля – нет. Контур для удобства верстки outline:1px solid #456879; Фон-изображение background-image:url(); url - путь относительный (относительно файла style.css или папки css) записывается в скобках Повторение фона background-repeat:no-repeat|repeat-x|repeat-y|repeat;

Слайд 12


Занятие № 3. Оформление текста - работа с параметрами абзаца Задание  Дополнить файл style.css правилами для заголовка, устанавливающими выравнивание по центру, установить фоновый цвет. Дополнить файл style.css правилами для всех абзацев, устанавливающими выравнивание по ширине, красную строку, межстрочный интервал с множителем 1.5. Фоновое изображение скопировать в папку image. Дополнить файл style.css правилом для тега <body>, устанавливающим фоновое изображение.
Описание слайда:
Занятие № 3. Оформление текста - работа с параметрами абзаца Задание  Дополнить файл style.css правилами для заголовка, устанавливающими выравнивание по центру, установить фоновый цвет. Дополнить файл style.css правилами для всех абзацев, устанавливающими выравнивание по ширине, красную строку, межстрочный интервал с множителем 1.5. Фоновое изображение скопировать в папку image. Дополнить файл style.css правилом для тега <body>, устанавливающим фоновое изображение.

Слайд 13


Занятие № 4. Понятие блок, оформление блоков Блочные модели Каждый тег для браузера (body – такой же блок, как и другие ) – это блок. Блочная схема: margin (поле), border (рамка), padding (отступ), content (содержимое). Установка полей: margin-top:20px; - верхнее поле, аналогично для остальных полей. В сокращенной записи от top по часовой стрелке. margin: 20px 10px 15px 5px; Для выравнивания по центру – margin: 20px auto 15px auto; Для одинаковых противоположных полей – margin: 20px 10px; Отступы (padding) устанавливаются аналогично.   width:400px; – ширина только для содержимого! height:200px; – высота содержимого. Если содержимое не помещается в устанавливаемых размерах, то: overflow:hidden (спрятать)|auto (полосы прокрутки, если не помещается)|scroll (полосы прокрутки в любом случае)|visible;
Описание слайда:
Занятие № 4. Понятие блок, оформление блоков Блочные модели Каждый тег для браузера (body – такой же блок, как и другие ) – это блок. Блочная схема: margin (поле), border (рамка), padding (отступ), content (содержимое). Установка полей: margin-top:20px; - верхнее поле, аналогично для остальных полей. В сокращенной записи от top по часовой стрелке. margin: 20px 10px 15px 5px; Для выравнивания по центру – margin: 20px auto 15px auto; Для одинаковых противоположных полей – margin: 20px 10px; Отступы (padding) устанавливаются аналогично.   width:400px; – ширина только для содержимого! height:200px; – высота содержимого. Если содержимое не помещается в устанавливаемых размерах, то: overflow:hidden (спрятать)|auto (полосы прокрутки, если не помещается)|scroll (полосы прокрутки в любом случае)|visible;

Слайд 14


Занятие № 4. Понятие блок, оформление блоков Задание Создать 5 блоков <div> </div> в html-файле: размер каждого блока по высоте 100px (пока нет заполнения, затем это свойство снимается и блок имеет высоту, занимаемую заполняющей его информацией), по ширине они займут отведенное им место отступы (padding) до рамки 10px, поле (margin) снизу 20px, рамка 4px одинарная черного цвета, цвет заливки каждого блока подобрать самостоятельно. Созданные блоки «обернуть» в блок <div> </div>, для которого задать ширину 800px, выравнивание по центру (auto). Все свойства задать в присоединенном css-файле.
Описание слайда:
Занятие № 4. Понятие блок, оформление блоков Задание Создать 5 блоков <div> </div> в html-файле: размер каждого блока по высоте 100px (пока нет заполнения, затем это свойство снимается и блок имеет высоту, занимаемую заполняющей его информацией), по ширине они займут отведенное им место отступы (padding) до рамки 10px, поле (margin) снизу 20px, рамка 4px одинарная черного цвета, цвет заливки каждого блока подобрать самостоятельно. Созданные блоки «обернуть» в блок <div> </div>, для которого задать ширину 800px, выравнивание по центру (auto). Все свойства задать в присоединенном css-файле.

Слайд 15


Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №15
Описание слайда:

Слайд 16


Занятие № 5. Создание каркаса сайта с помощью плавающих элементов Каркас с «шапкой», левом меню, содержимым и нижней частью страницы Свойство плавающего элемента – float:left; - выравнивание по левому краю float:right; - выравнивание по правому краю clear:both; - очистка обтекания по двум сторонам (слева и справа). Для плавающего элемента обязательно надо указывать ширину (width) для корректного отображения разными браузерами    Для элемента (левое меню) указывается нужная ширина (например: 150px) и выравнивание по левому краю. Для элемента (содержимое) указывается ширина, равная разности общей ширины с шириной левого меню и небольшого отступа между ними (например: 800 – 150 – 10 = 640px), а также левое поле, равное ширине левого меню + небольшой отступ (160px).Перед блоком нижней части страницы надо вставить дополнительный блок, которому задать класс (в html-файле). В css-файле этому классу надо задать свойство очистки обтекания по двум сторонам.
Описание слайда:
Занятие № 5. Создание каркаса сайта с помощью плавающих элементов Каркас с «шапкой», левом меню, содержимым и нижней частью страницы Свойство плавающего элемента – float:left; - выравнивание по левому краю float:right; - выравнивание по правому краю clear:both; - очистка обтекания по двум сторонам (слева и справа). Для плавающего элемента обязательно надо указывать ширину (width) для корректного отображения разными браузерами    Для элемента (левое меню) указывается нужная ширина (например: 150px) и выравнивание по левому краю. Для элемента (содержимое) указывается ширина, равная разности общей ширины с шириной левого меню и небольшого отступа между ними (например: 800 – 150 – 10 = 640px), а также левое поле, равное ширине левого меню + небольшой отступ (160px).Перед блоком нижней части страницы надо вставить дополнительный блок, которому задать класс (в html-файле). В css-файле этому классу надо задать свойство очистки обтекания по двум сторонам.

Слайд 17


Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №17
Описание слайда:

Слайд 18


Занятие № 5. Создание каркаса сайта с помощью плавающих элементов Каркас с «шапкой», левом меню, правом меню, содержимым и нижней частью страницы Для элемента (левое меню) указывается нужная ширина (например: 150px) и выравнивание по левому краю. Для элемента (правое меню) указывается нужная ширина (например: 150px) и выравнивание по правому краю. Для элемента (содержимое) указывается ширина, равная разности общей ширины с шириной левого и правого меню и небольшого отступа между ними (например: 800 – (150+150) – (10+10) = 480px), а также выравнивание по центру. Перед блоком нижней части страницы надо вставить дополнительный блок, которому задать класс (в html-файле). В css-файле этому классу надо задать свойство очистки обтекания по двум сторонам.
Описание слайда:
Занятие № 5. Создание каркаса сайта с помощью плавающих элементов Каркас с «шапкой», левом меню, правом меню, содержимым и нижней частью страницы Для элемента (левое меню) указывается нужная ширина (например: 150px) и выравнивание по левому краю. Для элемента (правое меню) указывается нужная ширина (например: 150px) и выравнивание по правому краю. Для элемента (содержимое) указывается ширина, равная разности общей ширины с шириной левого и правого меню и небольшого отступа между ними (например: 800 – (150+150) – (10+10) = 480px), а также выравнивание по центру. Перед блоком нижней части страницы надо вставить дополнительный блок, которому задать класс (в html-файле). В css-файле этому классу надо задать свойство очистки обтекания по двум сторонам.

Слайд 19


Знакомство с каскадными таблицами стилей. Опорный конспект с заданиями Учитель информатики ГБОУ СОШ № 411 «Гармония» с углубленн, слайд №19
Описание слайда:

Слайд 20


Список использованных источников http://ab-w.net/ - самоучитель по сайтостроению http://evgeniypopov.com/ - видеоуроки по HTML и CSS
Описание слайда:
Список использованных источников http://ab-w.net/ - самоучитель по сайтостроению http://evgeniypopov.com/ - видеоуроки по HTML и CSS

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию