CSS. Стилевые свойства графики. Урок 14

Содержание

Слайд 2

Классы CSS

Тег.Имя класса 

свойство1: значение;
  свойство2: значение;
...
}

В файле style.css

Классы CSS Тег.Имя класса { свойство1: значение; свойство2: значение; ... } В

В файле style.css

<Тег class=Имя класса>


Слайд 3

Практическая работа

Урок 14

Практическая работа Урок 14

Слайд 4

Практическая работа

Дополняем наш стилевой файл!
Открываем файл с помощью SublimeText

Практическая работа Дополняем наш стилевой файл! Открываем файл с помощью SublimeText

Слайд 5

Практическая работа

Он уже подключен к web – странице:

Практическая работа Он уже подключен к web – странице:

Слайд 6

Фоновое изображение

В файле style.css

Фон веб-страницы можно менять не только цветом, но

Фоновое изображение В файле style.css Фон веб-страницы можно менять не только цветом,
и заливать его картинкой.  Для этого используйте правило «background-image»к тегу «BODY» или «HTML»

Попробовать разные изображения для фона

Слайд 7

Повторение фоновой картинки

В файле style.css

Свойство «BACKGROUND-REPEAT»

Попробовать все свойства

Повторение фоновой картинки В файле style.css Свойство «BACKGROUND-REPEAT» Попробовать все свойства

Слайд 8

Фиксирование фоновой картинки

В файле style.css

Свойство «BACKGROUND-ATTACHMENT»

Попробовать все свойства

Фиксирование фоновой картинки В файле style.css Свойство «BACKGROUND-ATTACHMENT» Попробовать все свойства

Слайд 9

Положение фоновой картинки

В файле style.css

Свойство «BACKGROUND-POSITION»

Положение фоновой картинки В файле style.css Свойство «BACKGROUND-POSITION»

Слайд 10

Фоновая картинка на весь экран

Свойство «BACKGROUND-SIZE»

Фоновая картинка на весь экран Свойство «BACKGROUND-SIZE»

Слайд 11

Две фоновые картинки на веб-странице

Свойство «BACKGROUND-POSITION»

Две фоновые картинки на веб-странице Свойство «BACKGROUND-POSITION»

Слайд 12

Работа с изображением в тексте

В файле style.css

В файле index.html

Отступы вокруг картинки

Свойство

Работа с изображением в тексте В файле style.css В файле index.html Отступы вокруг картинки Свойство «MARGIN»
«MARGIN»

Слайд 13

Обтекание картинки текстом

В файле style.css

В файле index.html

Свойство «FLOAT»

Обтекание картинки текстом В файле style.css В файле index.html Свойство «FLOAT»

Слайд 14

Прозрачность картинки CSS

В файле style.css

Свойство «OPACITY»

Прозрачность картинки CSS В файле style.css Свойство «OPACITY»

Слайд 15

Размеры картинки в CSS

В файле style.css

Свойства «WIDTH» и «HEIGHT»

Значение задается в

Размеры картинки в CSS В файле style.css Свойства «WIDTH» и «HEIGHT» Значение
px или %.

Слайд 16

Тень от картинки в CSS

В файле style.css

Свойство «BOX-SHADOW»

Тень от картинки в CSS В файле style.css Свойство «BOX-SHADOW»

Слайд 17

Разные картинки в CSS (классы)

В файле style.css

В файле index.html

Разные картинки в CSS (классы) В файле style.css В файле index.html
Имя файла: CSS.-Стилевые-свойства-графики.-Урок-14.pptx
Количество просмотров: 36
Количество скачиваний: 0