НОУ ИНТУИТ | Разработка гибридных приложений для мобильных устройств под Windows Phone. Лекция 3: Использование CSS в мобильных разработках для представления текстов и таблиц

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 337 / 28 | Длительность: 11:36:00

Темы: Программирование, Мобильные технологии

Специальности: Программист

|

Вам нравится? Нравится 13 студентам

| Поделиться |

Поддержать курс

| Скачать электронную книгу

Аннотация: На этом занятии разрабатывается Cordova - проект, использующий таблицы стилей для текстов и таблиц.

Ключевые слова: файл

Ход выполнения работы:

Создайте проект Cordova с произвольным именем, например, labCSS.

Откройте в папке проекта www/css файл index.css, содержащий таблицу стилей шаблона проекта:

увеличить изображение

Замените содержимое таблицы стилей файла index.css (полностью удалите старое содержимое) новыми правилами, содержащими селекторы body, h1, h2 и h3:

body {
background-color:#fbf7e4; -Цвет фона
font-family:Verdana, Geneva, sans-serif; - Стиль текста 
margin-left:20px; ;-Отступ слева
color:#8e001c;-Цвет текста
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;- Положение текста(center-центр,right-право, left - лево)
}
h2 {
background-color:#424242;
color:#d3ceaa;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin-left:5px;-Отступ слева 
}
h3
 {
background-color:black;
color:white;
font-family:"Trebuchet MS", Calibri, Helvetica, sans-serif;
margin-left:8px;
}

Замените содержимое главного файла проекта - index.html (полностью удалите старое содержимое) новым кодом разметки, содержащим элемент <style> для связи с созданной таблицей стилей index.css и теги <body>, <h1>, <h2> и <h3>, соответствующие правилам таблицы стилей. Новый код разметки страницы index.html:

<!DOCTYPE HTML>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="css/index.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Тестовая страница</title>
      </meta>
    </head>
  <body>
    <h1>Пример форматирования текстов</h1>
    <h2>Это заголовок h2</h2>
    <h3>Это заголовок h3</h3>
    В мобильных приложениях роль CSS особенно велика в связи с тем,
    что экраны мобильных устройств меньше; взаимодействия и ожидания здесь другие.
    При работе с мобильными устройствами используются разные средства ввода:
    пальцы, стилусы, маленькие кнопки. Необходимость прищуриваться, чтобы
    разглядеть текст, может вызвать у пользователя раздражение.
    Таблицы CSS являются также основой адаптивного дизайна мобильных приложений,
    включающего набор методик использования CSS для экранов разных размеров.
    <h1><a href="SecondPage.html">Перейдём на вторую страницу</a>
    </h1> 
  </body>
</html>

Результат запуска Cordova - проекта:

увеличить изображение

Создадим вторую html-страницу проекта - SecondPage.html, на которой представим таблицу "Содержание домашних питомцев". Для будущей страницы создайте в папке проекта www/css второй файл стилей Secondstyle.css:

body {
      background-color:#fbf7e4;
      font-family:Verdana, Geneva, sans-serif;
      margin-left:20px;
      color:#8e001c;
      }
	  table {
      width:400px;
      border-style:groove;
      border-width:thick;
      border-color:#FF5C19;
      color:#C00;
      font-family:Verdana, Geneva, sans-serif;
      font-size:10px;
      }
      caption {
      font-family:Tahoma, Geneva, sans-serif;
      font-size:24px;
      color:hsl(17, 60%, 40%);
      padding:12px;
      }
      td, th {
      height:50px;
      border-style:solid;
      border-width:thin;
      border-color:#000;
      padding:20px;
      }

Создайте в папке www новую страницу SecondPage.html, включающую ссылку на файл стилей "css/Secondstyle.css":

<!DOCTYPE HTML>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="css/Secondstyle.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Тестовая страница</title>
    </meta>
    </head>
  <body>
    <table>
      <caption>
        Содержание домашних питомцев
      </caption>
<tr>
<td>
&#167;
<th>
Кошки
<th>
Собаки
<th>
Рыбки
<tr>
<th>
Корм
<td>
Хорошая еда для кошек
<td>
Корм для собак
<td>
Противный корм для рыб
<tr>
<th>
Уход
<td>
Когти
<td>
Резиновый мяч
<td>
 Очистка аквариума и пористые камни для аквариума
</table>
  </body>
</html>

Запустите проект и перейдите на его вторую страницу. Результат выполнения должен быть примерно вот таким:

Дальше >>

Авторизоваться

Разработка гибридных приложений для мобильных устройств под Windows Phone

Использование CSS в мобильных разработках для представления текстов и таблиц

Ход выполнения работы:

Вопросы и ответы