Презентация, доклад на тему Рамки высота и ширина

Цель урока: Сформировать навыки вставки рамки вокруг различных элементов

Слайд 1Тема: Рамки. Высота и ширина.

Тема: Рамки. Высота и ширина.

Слайд 2Цель урока: Сформировать навыки вставки
рамки вокруг различных
элементов

Цель урока: Сформировать навыки вставки рамки вокруг различных элементов

Слайд 3border-width
border-color
border-style
border
width
height

border-widthborder-colorborder-styleborderwidthheight

Слайд 4Рамки
Рамки имеют многообразное применение, например, как декоративный элемент или для отделения

двух объектов. CSS предоставляет бесчисленное множество вариантов использования рамок.
РамкиРамки имеют многообразное применение, например, как декоративный элемент или для отделения двух объектов. CSS предоставляет бесчисленное множество

Слайд 5Толщина рамки [border-width]
Толщина рамки определяется свойством border-width, которое может иметь значения thin,

medium и thick, или числовое значение в пикселях.
Толщина рамки [border-width]Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение

Слайд 6Цвет рамки [border-color]
Свойство border-color определяет цвет рамки. Значения - нормальные значения

цвета, например: "#123456", "rgb(123,123,123)" или "yellow" .
Цвет рамки [border-color]Свойство border-color определяет цвет рамки. Значения - нормальные значения цвета, например:

Слайд 7Типы рамок [border-style]
Существуют различные типы рамок. Все примеры показаны цветом "gold"

и толщиной "thick", но могут, естественно, выводиться другим цветом и толщиной.
Типы рамок [border-style]Существуют различные типы рамок. Все примеры показаны цветом

Слайд 8Примеры определения рамок
Пример
Можно также установить специальные свойства для верхнего, нижнего, правого

и левого края рамки. 

Пример

CSS-файл

CSS-файл

Примеры определения рамокПримерМожно также установить специальные свойства для верхнего, нижнего, правого и левого края рамки. ПримерCSS-файлCSS-файл

Слайд 9height/высота и width/ширина
Определение высоты и ширины элемента
Установка ширины [width]
Свойством width вы можете определять

ширину элемента.

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

Пример:

height/высота и width/ширинаОпределение высоты и ширины элементаУстановка ширины [width]Свойством width вы можете определять ширину элемента. div.box { width: 200px;

Слайд 10Установка высоты [height]
div.box { height: 500px;
width: 200px;
border: 1px solid

black;
background: orange; }
Установка высоты [height]div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }

Слайд 11Вопросы
За что отвечает border?

Перечислите все типы рамок [border-style]?

ВопросыЗа что отвечает border?Перечислите все типы рамок [border-style]?

Слайд 12Дом. Задание
http://www.denwer.ru

Дом. Задание http://www.denwer.ru

Что такое shareslide.ru?

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


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть