CSS3 (каскадные таблицы стилей)

Июль 23, 2022

Главная
Информатика
CSS3 (каскадные таблицы стилей)

Содержание

2. CSS3 CSS3 (каскадные таблицы стилей) – расширение CSS 2.1, добавляет новую функциональность к существующим возможностям спецификация
3. CSS3. Нововведения Визуальные эффекты, не зависящие от изображений Трансформации полей Уникальные шрифты Мощный механизм селекторов Переходы
4. Поддержка броузерами
5. Поддержка броузерами
6. Броузерные префиксы
7. Проблемы префиксами div { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } Помогут препроцессоры:
8. Новые селекторы E[foo^="bar"] E[foo$="bar"] E[foo*="bar"] E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:target E:enabled
9. Медиазапросы Медиазапросы позволяют настраивать стили страницы в зависимости от характеристик пользовательского устройства или дисплея, таких как
10. Адаптивный(отзывчивый) дизайн Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное восприятие на различных
11. Основые принципы применение гибкого макета на основе сетки (flexible, grid-based layout) использование гибких изображений (flexible images)
12. Стратегии Постепенное улучшение (progressive enhancement) Mobile first - проектирование для мобильных устройств с самых ранних этапов
13. Медиазапросы @media screen and (max-width: 600px) { body { font-size: 88%; } #content-main { float: none;
14. Типы медианосителей braille embossed handheld print projection screen speech tty tv all
15. Характеристики медианосителей width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid
16. Характеристики медианосителей
17. Переходы CSS переходы позволяют плавно изменять значения CSS свойства в течение заданного времени представлены Safari 2007
18. Свойства перехода transition-property - название CSS свойства, к которому следует применить переход transition-duration - определяет, сколько
19. Функции сихронизации ease linear ease-in ease-out ease-in-out cubic-bezier(x, x ,x ,x)
20. Переходы. Пример div { width: 100px; height: 100px; -webkit-transition: width 3s; -moz-transition: width 3s; -o-transition: width
21. Особенности одна итерация нет полного контроля не все свойства подходят для переходов http://www.w3.org/TR/css3-transitions/#properties-from-css-
22. Трансформация transform: [ ] translate - сдвиг scale - масштабирование rotate - поворот skew - наклон
23. Трансформация. Пример div { height: 100px; width: 100px; transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg); }
24. Анимация http://www.w3.org/TR/css3-animations/
25. Свойства анимации animation-name - имя анимации animation-duration - время проигрывания animation-timing-function - функция расчета промежуточных значений
26. Ключевые кадры @keyframes movement { 0% { top: 0; left: 0; } 25% { top: 0;
27. Демо CSS3 man - http://www.optimum7.com/css3-man/ http://www.cssplay.co.uk/menu/css3-animation.html https://developer.mozilla.org/ru/demos/detail/battlefield-css3/launch http://playdulla.com/
29. Скачать презентацию

Слайд 2

CSS3
CSS3 (каскадные таблицы стилей) – расширение CSS 2.1, добавляет новую функциональность

к существующим возможностям
спецификация разделена на модули http://www.w3.org/Style/CSS/current-work
обратная совместимость с предыдущими версиями
стандарт в разработке с 1999 года

Слайд 3

CSS3. Нововведения
Визуальные эффекты, не зависящие от изображений
Трансформации полей
Уникальные шрифты
Мощный механизм селекторов
Переходы

и анимация
Медиазапросы
Многостолбцовые макеты

Слайд 4

Поддержка броузерами

Слайд 5

Поддержка броузерами

Слайд 6

Броузерные префиксы

Слайд 7

Проблемы префиксами
div {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform:

rotate(45deg);
transform: rotate(45deg);
}
Помогут препроцессоры:

Слайд 8

Новые селекторы
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled
E:disabled
E:checked
E:not(s)
E ~

F
E::selection

http://www.w3.org/TR/selectors/

Слайд 9

Медиазапросы
Медиазапросы позволяют настраивать стили страницы в зависимости от характеристик пользовательского устройства

или дисплея, таких как ширина области просмотра, ориентация (портретная или альбомная) и возможность отображения цветов
http://www.w3.org/TR/css3-mediaqueries/

Слайд 10

Адаптивный(отзывчивый) дизайн
Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное

восприятие на различных устройствах
не нужно создавать отдельные версии сайта для отдельных видов устройств

Слайд 11

Основые принципы
применение гибкого макета на основе сетки (flexible, grid-based layout)
использование гибких

изображений (flexible images)
работа с медиазапросами (media queries)

Слайд 12

Стратегии
Постепенное улучшение (progressive enhancement)
Mobile first - проектирование для мобильных устройств с

самых ранних этапов
Умеренная деградация (graceful degradation)

Слайд 13

Медиазапросы
@media screen and (max-width: 600px) {
body {
font-size:

88%;
}
#content-main {
float: none;
width: 100%;
}
}
@import url(narrow.css) only screen and (max-width:600px);
media="only screen and (max-width:600px)"
href="narrow.css">

Слайд 14

Типы медианосителей
braille
embossed
handheld
print
projection
screen
speech
tty
tv
all

Слайд 15

Характеристики медианосителей
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome

resolution
scan
grid

Слайд 16

Характеристики медианосителей

Слайд 17

Переходы
CSS переходы позволяют плавно изменять значения CSS свойства в течение заданного

времени
представлены Safari 2007 года, первоначально были отнесены с CSS анимации
http://www.w3.org/TR/css3-transitions/

Слайд 18

Свойства перехода
transition-property - название CSS свойства, к которому следует применить переход
transition-duration

- определяет, сколько времени займет переход
transition-timing-function - описывает, как будет изменяться скорость выполнения перехода
transition-delay - определяет, когда начнется переход

Слайд 19

Функции сихронизации
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(x, x ,x ,x)

Слайд 20

Переходы. Пример

Слайд 21

Особенности
одна итерация
нет полного контроля
не все свойства подходят для переходов http://www.w3.org/TR/css3-transitions/#properties-from-css-

Слайд 22

Трансформация
transform: <функция> [<функция>]
translate - сдвиг
scale - масштабирование
rotate - поворот
skew - наклон
matrix

– задает матрицу
2D и 3D контекст
http://dev.w3.org/csswg/css3-transforms/

Слайд 23

Трансформация. Пример

Слайд 24

Анимация
http://www.w3.org/TR/css3-animations/

Слайд 25

Свойства анимации
animation-name - имя анимации
animation-duration - время проигрывания
animation-timing-function - функция расчета

промежуточных значений
animation-delay - задержку анимации
animation-iteration-count - количество циклов анимации
animation-direction - задает направление анимации
animation-play-state - определяет, проигрывается ли анимация или стоит на паузе

Слайд 26

Ключевые кадры

Слайд 27

Демо
CSS3 man - http://www.optimum7.com/css3-man/
http://www.cssplay.co.uk/menu/css3-animation.html
https://developer.mozilla.org/ru/demos/detail/battlefield-css3/launch
http://playdulla.com/

CSS3 (каскадные таблицы стилей)

Содержание

CSS3CSS3 (каскадные таблицы стилей) – расширение CSS 2.1, добавляет новую функциональность

CSS3. НововведенияВизуальные эффекты, не зависящие от изображенийТрансформации полейУникальные шрифтыМощный механизм селекторовПереходы

Поддержка броузерами

Поддержка броузерами

Броузерные префиксы

Проблемы префиксамиdiv { -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform:

Новые селекторыE[foo^="bar"] E[foo$="bar"]E[foo*="bar"]E:nth-child(n)E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-of-type E:last-of-typeE:only-childE:only-of-type E:empty E:target E:enabledE:disabledE:checkedE:not(s)E ~

МедиазапросыМедиазапросы позволяют настраивать стили страницы в зависимости от характеристик пользовательского устройства

Адаптивный(отзывчивый) дизайнАдаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное

Основые принципыприменение гибкого макета на основе сетки (flexible, grid-based layout)использование гибких

СтратегииПостепенное улучшение (progressive enhancement)Mobile first - проектирование для мобильных устройств с

Медиазапросы@media screen and (max-width: 600px) { body { font-size:

Типы медианосителейbrailleembossedhandheldprintprojectionscreenspeechttytvall

Характеристики медианосителейwidth height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome

Характеристики медианосителей

ПереходыCSS переходы позволяют плавно изменять значения CSS свойства в течение заданного

Свойства переходаtransition-property - название CSS свойства, к которому следует применить переходtransition-duration

Функции сихронизацииease linear ease-in ease-outease-in-outcubic-bezier(x, x ,x ,x)

Особенностиодна итерациянет полного контроляне все свойства подходят для переходов http://www.w3.org/TR/css3-transitions/#properties-from-css-

Трансформацияtransform: <функция> [<функция>]translate - сдвигscale - масштабированиеrotate - поворотskew - наклонmatrix

Трансформация. Пример <br>div { <br> height: 100px; <br> width: 100px;</div></h2><div class="slides-content"><br> transform: <br> translate(80px, 80px) <br> scale(1.5, 1.5) <br> rotate(45deg);<br>} <br>

Анимацияhttp://www.w3.org/TR/css3-animations/

Свойства анимацииanimation-name - имя анимацииanimation-duration - время проигрыванияanimation-timing-function - функция расчета

Ключевые кадры <br>@keyframes movement { 0% { top: 0; left:</div></h2><div class="slides-content">0; } 25% { top: 0; left: 100px; } 50% { top: 100px; left: 100px; } 100% { top: 100px; left: 0; } }<br>div { <br> animation: movement 1s 500ms;<br>}<br>

ДемоCSS3 man - http://www.optimum7.com/css3-man/http://www.cssplay.co.uk/menu/css3-animation.htmlhttps://developer.mozilla.org/ru/demos/detail/battlefield-css3/launchhttp://playdulla.com/

Похожие презентации

CSS3
CSS3 (каскадные таблицы стилей) – расширение CSS 2.1, добавляет новую функциональность

CSS3. Нововведения
Визуальные эффекты, не зависящие от изображений
Трансформации полей
Уникальные шрифты
Мощный механизм селекторов
Переходы

Проблемы префиксами
div {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform:

Новые селекторы
E[foo^="bar"]
E[foo$="bar"]
E[foo*="bar"]
E:nth-child(n)
E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E:target
E:enabled
E:disabled
E:checked
E:not(s)
E ~

Медиазапросы
Медиазапросы позволяют настраивать стили страницы в зависимости от характеристик пользовательского устройства

Адаптивный(отзывчивый) дизайн
Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное

Основые принципы
применение гибкого макета на основе сетки (flexible, grid-based layout)
использование гибких

Стратегии
Постепенное улучшение (progressive enhancement)
Mobile first - проектирование для мобильных устройств с

Медиазапросы
@media screen and (max-width: 600px) {
body {
font-size:

Типы медианосителей
braille
embossed
handheld
print
projection
screen
speech
tty
tv
all

Характеристики медианосителей
width
height
device-width
device-height
orientation
aspect-ratio
device-aspect-ratio
color
color-index
monochrome

Переходы
CSS переходы позволяют плавно изменять значения CSS свойства в течение заданного

Свойства перехода
transition-property - название CSS свойства, к которому следует применить переход
transition-duration

Функции сихронизации
ease
linear
ease-in
ease-out
ease-in-out
cubic-bezier(x, x ,x ,x)

Особенности
одна итерация
нет полного контроля
не все свойства подходят для переходов http://www.w3.org/TR/css3-transitions/#properties-from-css-

Трансформация
transform: <функция> [<функция>]
translate - сдвиг
scale - масштабирование
rotate - поворот
skew - наклон
matrix

Трансформация. Пример

Анимация
http://www.w3.org/TR/css3-animations/

Свойства анимации
animation-name - имя анимации
animation-duration - время проигрывания
animation-timing-function - функция расчета

Ключевые кадры

Демо
CSS3 man - http://www.optimum7.com/css3-man/
http://www.cssplay.co.uk/menu/css3-animation.html
https://developer.mozilla.org/ru/demos/detail/battlefield-css3/launch
http://playdulla.com/