|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 5:
Использование CSS в мобильных разработках
Аннотация: Цель создания каскадных таблиц стилей для мобильных приложений. Версии CSS. Особенности спецификаций CSS3. Способы подключения CSS к документу. Анатомия таблиц стилей: селектор, свойство, значение. Форматирование элементов посредством классов. Идентификаторы и множественные селекторы. Каскадность стилей. Задание цвета в CSS и CSS3. Примеры форматирования страниц и их тестирования в эмуляторе мобильного устройства.
Ключевые слова: css, style, HTML, CSS2, Internet, Windows, phone, элемент разметки, атрибут, форматирование, таблица, текстовый файл, файл, заголовки, color, цвет текста, class, имя класса, класс, ID, идентификатор, список
Цель создания CSS для мобильных приложений
CSS (Cascading Style Sheets - каскадные таблицы стилей) используется создателями html-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих страниц (стиля). Основной целью создания CSS является разделение описания логической структуры html-страницы (которое производится с помощью HTML или других языков разметки) от описания ее внешнего вида (которое производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
В мобильных приложениях роль CSS особенно велика в связи с обычно малым размером экранов мобильных устройств и особенностями взаимодействия и ожидания. При работе с мобильными устройствами используются разные средства ввода: пальцы, стилусы, кнопки. Необходимость присматриваться к мелкому размеру текста может вызвать у пользователя раздражение. Таблицы CSS являются также основой адаптивного дизайна мобильных приложений, включающего набор методик использования CSS для экранов разных размеров. Учитывая особенности мобильных устройств - размер окна, ориентацию (портретную или ландшафтную), соотношение сторон, поддержку устройством тех или иных стилей CSS и т.д. - может возникнуть необходимость определить какой-то особенный стиль для мобильных устройств определенного класса.
Чтобы извлечь наибольшую пользу для мобильного приложения из стандарта HTML5, нужно знать CSS. Правила создания CSS для мобильных устройств мало отличаются от соответствующих правил для обычных веб-сайтов, где на эту тему существует много книг и интернет-пособий, например [1,2].
Версии CSS. Особенности спецификации CSS3
Существует несколько версий спецификаций CSS. Каждая следующая версия сложнее предыдущей и с более широким диапазоном охвата. Например, описание версии CSS 2.1 было в пять раз больше предыдущей. К счастью, создатели стандарта CSS распределили усовершенствованные функции каждого следующего поколения таблицы стилей по наборам индивидуальных стандартов, называемых модулями. Всем этим новым модулям было присвоено коллективное название CSS3. Спецификация CSS3 содержит около 50 модулей разной степени завершенности. Возможности этих модулей широки: от предоставления декоративного оформления до специализированного функционала для мобильных устройств (например, чтение текста или изменение стилей в зависимости от размеров мобильного устройства). К числу наиболее важных модулей CSS3 относятся следующие [3]:
- Selectors;
- Box Model;
- Backgrounds & Borders;
- Text Effects;
- 2D/3D Transformations;
- Animations;
- Multiple Column Layout;
- User Interface.
Таким образом, CSS3 - это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1. Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как Adobe Photoshop), скриптов (таких как JavaScript) или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления. В CSS3 можно:
- создавать элементы со сглаженными углами;
- создавать линейные и сферические градиенты;
- более гибко оформлять фоновую картинку элементов;
- добавлять к элементам и тексту элементов тени;
- создавать анимацию и различные эффекты переходов;
- задавать цвета несколькими новыми способами и многое другое.
Далее приводится код html-страницы, содержащей стиль CSS3 для сглаженных углов элементов (border-radius:50px;):
<html>
<head>
<style>
#wrap {
position:relative;
border:1px #000 solid;
border-radius:50px;
float:left;
width:1000px;
height:700px;
margin-right:30px;
background-color:#E567B1;
}
#inner {
position:absolute;
top:200px;
left:0px;
padding:10px 0px;
background-color:#dfc51e;
width:1000px;
height:200px;
border-radius:50px;
color:green;
font-family:Arial;
text-align:center;
font-size:6em;
text-shadow:2px 2px 0px #000000;
}
</style>
<title>Анализ возможностей браузера</title>
</head>
<body>
<div id="wrap">
<div id="inner">ПРИМЕР CSS3</div>
</div>
</body>
</html>Результат тестирования страницы в настольном Internet Explorer 9, который поддерживает CCS3 и в эмуляторе для Windows Phone 8, который эту спецификацию не поддерживает.
Дмитрий Белов