Презентация по УД Информатика. Тема CSS - Таблица стилей
методическая разработка

Слайд 1

Слайд 2

Таблица стилей Таблица стилей – это набор правил, который управляет форматированием тэгов HTML в web -документе. Любое правило каскадных таблиц стилей состоит из двух частей: селектора и свойства. Селектором может быть любой тэг HTML

Слайд 3

selector { property : value ;} selector – селектор, указывает к какому HTML-тегу будет применяться свойство; property – свойство, применяемое к селектору. Например, цвет шрифта (“ color ”). value – значение применяемого свойства. Например, для красного цвета шрифта (“ red ”).

Слайд 4

Подключить CSS к HTML

Слайд 5

CSS свойства фона background Позволяет установить все свойства фона за одно определение. background-attachment Позволяет определить должна ли фоновая картинка быть закреплена или должна прокручиваться с остальным содержимым страницы. background-color Позволяет установить цвет фона элемента.

Слайд 6

CSS свойства фона background-image Позволяет установить фоновую картинку для элемента. background-position Позволяет установить координаты местоположения фоновой картинки. background-repeat Позволяет установить как должна повторятся фоновая картинка для того, чтобы заполнить фон элемента.

Слайд 7

Создание макета сайта (2х колоночный шаблон)

Слайд 8

CSS #wrap { width:1000px; min-height:100%; margin:0 auto; }

Слайд 9

CSS # left-column{ min-height:500px; width:250px; background:red ; float:left ; }

Слайд 10

# content { width:750px; min-height: 500px; float: left; background-color: blue; } CSS

Слайд 11

CSS #footer { width: 1000px; height: 50px; background: green; clear: both; }

Слайд 12

HTML

Слайд 13

CSS свойства границ border Позволяет установить все свойства границ за одно определение border-color Позволяет определить цвет для всех границ элемента за одно определение . border-style Позволяет определить стиль для всех границ элемента за одно определение .

Слайд 14

CSS свойства границ border-width Позволяет установить ширину всех границ элемента за одно определение. border-radius Позволяет определить форму всех углов элемента за одно определение.

Слайд 15

CSS свойства границ

Слайд 16

CSS # radius:hover { background: green; } #radius { border: 1px solid #000000; width: 200px; height: 200px; background-color: red; border-radius: 0px;}

Слайд 17

CSS свойства границ

Слайд 18

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

Слайд 19

Подведение итогов занятия

Слайд 20

Задание на дом Заполнить поле # content текстовой информацией, этапы развития ЭВМ. Сделать закладки в HTML на каждый этап развития. В поле # left-column сделать ссылки на закладки. Сделать поэтапное закругление радиуса, от квадрата до круга.