ИП. CSS. @-правила. @media |
МИЭТ, 2017 |
Применяется для адаптивного дизайна. Позволяет задавать стили оформления В зависимости от текущего размера окна и разрешения экрана
Пример для окон браузеров для которых допустим ресайзинг
@media all and (max-width:1024px) { /* стили для окна шириной 1024 и меньше */
...
}
@media all and (max-width:540px) { /* стили для окна шириной 640 и меньше */
...
}
Пример для мобильных устройств
@media all and (max-device-width:1024px) { /* стили для разрешения 1024 и меньше */
...
}
@media all and (max-device-width:540px) { /* стили для разрешения 640 и меньше */
...
}
Подключение на странице
<link rel="stylesheet" media="screen" href="/css/desktop.css" />
<link rel="stylesheet" media="screen and (max-device-width:1024px)" href="/css/mobile.css" />
ИП. CSS. @-правила. @media и meta тег viewport |
МИЭТ, 2017 |
Атрибут |
Возможные значения |
Пример |
width |
device-width |
на весь доступный экран |
|
200-10000 |
на указанную из диапазона ширину |
height |
device-height |
на вcю доступную высоту |
|
233-10000 |
на указанную из диапазона высоту |
initial-scale |
0.1-1.0 |
Начальный масштаб страницы. 1.0 = 100%; |
user-scalable |
no | yes |
Может ли пользователь изменять масштаб |
Пример
<meta name='viewport' content='width=device-width,initial-scale=1'/>
ИП. CSS. Свойства |
МИЭТ, 2017 |
Группа
Блоки
Позициониров
ание
Текст
Элементы
Назначение
Управление внешним видом блоков: div, span, article и т. д.
Управление размещением элементов относительно друг-друга: div, span, img
Установка шрифтов, отступов, межстрочных интервалов, выравнивание и т.д
Оформление ссылок, таблиц, списков
Свойства
padding, border, width, overflow, scroll и т.д.
flow, display, position, margin и т.д.
font-face, font-family, line-height text-align и т.д.
list-style-type, table-layout и т.д.
ИП. CSS. Свойства. Позиционирование |
МИЭТ, 2017. |
display:
block | inline | inline-block | list-item | none |
inline-table | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
position:
absolute | fixed | relative | static | inherit
absolute |
— абсолютное позиционирование на странице (зависит от прокрутки) |
fixed |
— подобно absolute, но не зависит отпрокрутки |
relative |
— положение устанавливается относительно текущего места |
statuc |
— обычное отображение. Применяется по умолчанию |
inherit |
— наследует значение родителя |
ИП. CSS. CSS3 |
МИЭТ, 2017. |
Новинки CSS3 |
|
Статическая графика: |
Градиенты, Тени, Скругления углов |
Динамическая графика: |
Переходы, анимация, 2D-3D-трансформации |
Группировка элементов: |
Контейнеры для группировки элементов (flexbox) |
Группировка текста: |
Многоколоночный текст (columns) |
ИП. CSS3. Свойства. Создание скругленных углов |
МИЭТ, 2017. |
CSS 2.*
<table cellspacing="0" cellpadding="0" border="0" class="panel" style="width:100%; height:135px;"> <tbody>
<tr><td><img src="/upload/img/panel_top_left.gif"></td><td width="100%"></td><td><img src="/upload/img/panel_top_right.gif"></td></tr>
<tr>
<td></td>
<td style="padding-bottom: 10px; padding-left: 16px;">
<div style="padding-top:10px; padding-left:10px; line- height:15px; padding-right:10px; color:#888888;">
<p> Содержимое </p>
</div>
</td>
<td></td>
</tr>
<tr><td><img src="/upload/img/panel_bottom_left.gif"></td><td><img src="/upload/img/panel_bottom.gif" width="100%" height="12px"></td><td><img src="/upload/img/panel_bottom_right.gif"></td></tr> </tbody>
</table>
CSS 3
<style>
.Right
border-radius: 12px; background-color: #F6F6F6;
box-shadow: rgba(0,0,0,0.3) 1px 0px 1px; padding: 20px 25px 20px 25px; line-height: 15px;
color: #888888; </style>
<div class="Right">
<p> Содержимое </p>
</div>
ИП. CSS3. Свойства. Переходы |
МИЭТ, 2017. |
Переходы позволяют задавать плавное изменение свойств элементов (размеры, цвет, тень и т. д.) в зависимости от событий (hover, active и т. д.)
При переходах можно задать время задержки (transition-delay) срабатывания и скорость (transition-timing-function) изменений и т.д.
При наведении на блок три кружка увеличиваются вдвое с разной задержкой
Подробнее свойства см. на https://webref.ru или http://html5book.ru
ИП. CSS3. Свойства. Трансформации |
МИЭТ, 2017. |
Трансформации позволяют задавать изменение геометрии элементов.
transform:
Суть трансформации
matrix(a, c, b, d, e, f) — X-масштаб, Y-сдвиг, X-сдвиг, Y-масштаб, X-смещение, Y-cмещение
translate(n), translateX(n), translateYn() — n=единицы длины (+ и -), %
scale(n), scaleX(n), scaleY(n) — n=любое число
rotate(a) — a=угол (deg, grad, rad или turn)
skew(a), skewX(a), skewY(a) — a=угол (deg, grad, rad)
transform-origin:
центр трансформации
transform-origin: x y; — x (left, center, right, px, %) и y (top, center, bottom, px, %)
Пример записи
div { |
|
|
-webkit-transform: rotate(45deg); |
/* для Safary */ |
|
-ms-transform: rotate(45deg); |
/* |
для IE */ |
transform: rotate(45deg); |
/* |
для остальных */ |
-webkit-transform-origin: 20% 40%; -ms-transform-origin: 20% 40%; transform-origin: 20% 40%;
}
ИП. CSS3. Colums |
МИЭТ, 2017. |
Позволяет размещать текст в колонки без использования контейнеров
column-count: n — n=число колонок
column-width: w — w=ширина колонок в любых единицах (например px), кроме % column-gap: g — g=промежуток между колонками в любых единицах (например px), кроме % column-span: n — n=число колонок которые пересечет элемент
сolumns n w: — групповое задание колонок
column-rule-style: v — v=код стиля разделительной линии (solid, dotted и т. д.) column-rule-style: w — w=ширина разд. линии: код или ед. длины (например px), кроме % column-rule-color: c — c=код цвета разделительной линии
column-rule: v w c — групповое задание стилей линии
ИП. CSS3. Фреймворки |
МИЭТ, 2017. |
Фреймворки предоставляют готовую сетку для размещения контента в 12-16 колонок, которые можно объединять при необходимости.
Сетка как правило уже оптимизированную для адаптивного показа + различные дополнительные удобства: оформление кнопок, закладки, меню, проверка форм и т.д.
Примеры:
Bootstrap - http://getbootstrap.com/
Semantic UI - http://semantic-ui.com/
Foundation - http://foundation.zurb.com/