В мобильных приложениях роль CSS особенно велика в связи с обычно малым размером экранов мобильных устройств и особенностями взаимодействия и ожидания. При работе с мобильными устройствами используются разные средства ввода: пальцы, стилусы, кнопки. Необходимость присматриваться к мелкому размеру текста может вызвать у пользователя раздражение. Таблицы CSS являются также основой адаптивного дизайна мобильных приложений, включающего набор методик использования CSS для экранов разных размеров. Учитывая особенности мобильных устройств - размер окна, ориентацию (портретную или ландшафтную), соотношение сторон, поддержку устройством тех или иных стилей CSS и т.д. - может возникнуть необходимость определить какой-то особенный стиль для мобильных устройств определенного класса.
Чтобы извлечь наибольшую пользу для мобильного приложения из стандарта HTML5, нужно знать CSS. Правила создания CSS для мобильных устройств мало отличаются от соответствующих правил для обычных веб-сайтов, где на эту тему существует много книг и интернет-пособий, например [1,2].
Существует несколько версий спецификаций CSS. Каждая следующая версия сложнее предыдущей и с более широким диапазоном охвата. Например, описание версии CSS 2.1 было в пять раз больше предыдущей. К счастью, создатели стандарта CSS распределили усовершенствованные функции каждого следующего поколения таблицы стилей по наборам индивидуальных стандартов, называемых модулями. Всем этим новым модулям было присвоено коллективное название CSS3. Спецификация CSS3 содержит около 50 модулей разной степени завершенности. Возможности этих модулей широки: от предоставления декоративного оформления до специализированного функционала для мобильных устройств (например, чтение текста или изменение стилей в зависимости от размеров мобильного устройства). К числу наиболее важных модулей CSS3 относятся следующие [3]:
Таким образом, 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, который эту спецификацию не поддерживает.
(рис 7.1)
Существуют три способа добавления стилей на страницу.
Первый - вставить информацию о стиле непосредственно в требующий форматирования элемент разметки, используя атрибут style. Вот пример такого типа форматирования, которое изменяет цвет заголовка:
<hl style="color: green">ЗЕЛЕНЫЙ ЗАГОЛОВОК</hl>
В то время как этот подход удобен, он сильно усложняет разметку.
Вторым подходом будет вставка всей таблицы стилей в элемент <style>, который помещается в блок <head> страницы:
<head> <title>Таблица стилей</title> <style> </style> </head>
Здесь форматирование страницы отделено от ее разметки, но оба эти компонента продолжают находиться в одном файле. Этот подход можно применять для одноразовых задач форматирования (когда не нужно использовать эти параметры для форматирования других страниц). Но страницы с применением этого метода получаются большого объема, вследствие чего он не очень подходит для больших, профессиональных разработок.
А третий способ - это разместить форматирование в отдельном файле и связать его с форматируемой страницей, вставив элемент <link> в блок <head> страницы. Вот пример кода, дающего указание применять стили из файла SampleStyles.css:
<head> <title>Внешняя таблица стилей</title> <link rel="stylesheet" href="SampleStyles.css"> </head>
Это наиболее часто применяемый метод форматирования и при этом наиболее действенный. Определенные таким образом стили можно использовать для форматирования других страниц. При желании стили можно распределить между несколькими файлами, а страницу HTML связать с любым количеством файлов таблиц стилей.
Таблица стилей - это текстовый файл, который размещается вместе со страницами HTML. Файл содержит одно или несколько правил, порядок следования которых в файле не имеет значения.
Каждое правило определяет один или несколько аспектов форматирования одного или нескольких элементов HTML. Далее приводится структура простого правила стиля:
селектор {
свойство: значение;
свойство: значение; }
Значения элементов правила следующие.
<h1>.
color, его значение может быть lightblue (светло-синий) или green (зеленый).Вот пример правила для форматирования заголовка первого уровня:
h1 {
text-align: center;
color: green; }
Скопируйте это правило в текстовый файл и сохраните его с расширением css (например, SampleStyles.css). Потом создайте простую страницу, содержащую, по крайней мере, один заголовок первого уровня, и вставьте в нее элемент <link> со ссылкой на этот файл таблицы стилей. Наконец, откройте эту страницу в настольном браузере. Вы увидите, что все заголовки первого уровня будут зеленого цвета и выровнены по центру.
В предыдущем примере правило таблицы стилей содержит два свойства: text-align (горизонтальное выравнивание текста) и color (цвет текста).
Кроме этих двух, существует множество других свойств форматирования, наиболее употребляемые из которых приведены в Табл. 5.1. Кстати, эта таблица содержит почти все свойства стилей, за исключением новых свойств CSS3.
| Свойство | Название |
|---|---|
| Цвет | color, background-color |
| Интервал | margin, padding, margin-left, margin-right, margin-top, margin-bottom |
| Границы | border-width, border-style, border-color, border (для установки ширины, стиля и цвета границ за один прием) |
| Выравнивание текста | text-align, text-indent, word-spacing, letter-spacing, line-height, white-space |
| Шрифты | font-family, font-size, font-weight, font-style, font-variant, text-decoration |
| Размер | width, height |
| Позиция | position, left, right, float, center |
| Графика | background-image, background-repeat, background-position |
Приведенное ранее в качестве примера правило таблицы стилей форматирует в документе все заголовки первого уровня. Но в более сложных документах может потребоваться отформатировать только один элемент или разные группы элементов одного типа по-разному.
Для решения этой задачи элементу присваивается название посредством атрибута class. Далее приведен пример форматирования с использованием класса элемента:
<h1 class="ArticleTitle">HTML5 для мобильных устройств</h1>
Теперь можно создать правило таблицы стилей, которое форматирует только этот заголовок. В данном случае название селектора начинается с точки, после которой следует имя класса:
.ArticleTitle {
font-family: Garamond, serif; font-size: 40px;}
Теперь все элементы, которым посредством атрибута class присвоено имя ArticleTitle, будут отформатированы стилем, указанным в определении данного класса в таблице стилей.
Атрибут class можно использовать с любым количеством элементов. В действительности, это и есть основа использования классов. Типичная таблица стилей наполнена правилами классов, опрятно разбивающих разметку страницы на блоки, к которым можно применять стили.
Наконец, следует отметить, что можно создать селектор, использующий тип элемента и имя класса, как показано в следующем примере:
hl.ArticleTitle {
font-size: 40px;}
Данный селектор создает класс ArticleTitle, который применим только для элементов <h1>. Иногда этот тип правила стилей служит просто для ясности. Например, разработчик хочет четко указать, что класс ArticleTitle применяется только для форматирования заголовков первого уровня, и не должен применяться для форматирования других элементов. Но в большинстве случаев дизайнеры создают простые классы, без привязки к определенным элементам.
Идентификаторы и множественные селекторы
Селекторы классов имеют близких родственников - идентификаторы (или ID - селекторы). Подобно селектору класса, идентификатор позволяет применить форматирование только к выбранным элементам. Эти элементы должны иметь в разметке атрибут id. Название селектора - идентификатора должно начинаться с символа #:
#Menu {
border-width: 2px;
border-style: solid;
}
Следующий код применит правило
#Menu к элементу <section>: <section> id = "Menu"</section>
Любое правило таблицы стилей можно определить для нескольких элементов. Для этого селекторы разделяются запятыми:
ul,ol {
color: #dc1010 ;
background-color:#ede3b5;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:70px;
font-weight:bold;
}
В этом правиле одинаково форматируются два списка - неупорядоченный (ul) и упорядоченный (ol).
Каскадность заключается в том, что стили могут переопределяться. Приведенный выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный. Например, во внешнем стилевом файле было определено, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.
Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:
yellow, red, green, grey,..
#ff0000, #883490, #ffffff,..
rgb(255,0,0), rgb(100,23,78),..В CSS3 цвет может задаваться с помощью HSL (Hue-Saturation-Light) то есть оттенка, насыщенности и яркости.
Для того чтобы задать цвет этим способом, необходимо указать:
Далее приводится пример, где элемент <style> помещен в блок <head> страницы и содержит селектор элемента <body> и селекторы классов redBase, redDarker, redLighter для заголовков страницы. Пример демонстрирует простоту изменения значения яркости для получения нужного оттенка красного:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style>
body {
/* Зеленый фон */
background-color: hsl(120,100%,80%);
}
.redBase {
color:hsl(0, 100%, 50%);
font-size:100px;
}
.redDarker {
color:hsl(0, 100%, 25%);
font-size:100px;
}
.redLighter {
color:hsl(0, 100%, 75%);
font-size:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Настройка цвета в системе HSL</title>
</head>
<body>
<h1 class="redBase">Основной красный</h1>
<h1 class="redDarker">Темно-красный</h1>
<h1 class="redLighter">Светло-красный</h1>
</body>
</html>
Результат тестирования страницы в эмуляторе:
(рис 7.2)
Далее приводится пример страницы, форматирование которой выполняется в отдельном файле css/textformat.css, связанным с форматируемой страницей тегом <link>.
<!DOCTYPE HTML> <html lang="ru"> <head> <link rel="stylesheet" href="css/textformat.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Тестовая страница программных разработок компании Mighty Smite</title> </head> <body> <h1>Пример форматирования текстов</h1> <h2>Это заголовок h2</h2> <h3>Это заголовок h3</h3> В мобильных приложениях роль CSS особенно велика в связи с тем, что экраны мобильных устройств меньше; взаимодействия и ожидания здесь другие. При работе с мобильными устройствами используются разные средства ввода: пальцы, стилусы, маленькие кнопки. Необходимость прищуриваться, чтобы разглядеть текст, может вызвать у пользователя раздражение. Таблицы CSS являются также основой адаптивного дизайна мобильных приложений, включающего набор методик использования CSS для экранов разных размеров. </body> </html>
Содержимое таблицы стилей (файл css/textformat.css):
body
{
background-color:#F2CC6E;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:black; /*#8C5F26;*/
font-size:14px;
max-width:900px;
}
h1
{
color:#BCA55F;
background-color:#3C371E;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;
}
h2
{
color:#F26205;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif
}
h3
{
color:#3C371E;
font-family:Tahoma, Geneva, sans-serif;
}
Результат тестирования страницы в эмуляторе:
(рис 7.3)
Еще один пример форматирования страницы, содержащей семантические теги HTML5 (<article>, <header>, <section>, <figure>). Форматирование выполняется таблицей стилей с помощью селекторов главных тегов страницы: body, h1, h2.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
background-color:#F2F2F2;
color:#0D0D0D;
font-family:Verdana, Geneva, sans-serif;
font-size:35px
}
h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Простое размещение изображения</title>
</head>
<body>
<article>
<header>
<h1>Спортзал для разработчиков мобильных приложений</h1>
</header>
<section>
<header>
<h2>Тренировка разработчиков</h2>
</header>
<figure> <img src="images/webDeveloper.jpg" width="450" height="450"> </figure>
Конечно же, Вы думали об этом. Не пора ли поработать над тегами lt;figuregt; и lt;articlegt;?
Работайте с элементами и атрибутами HTML5 в нашем Спортзале для разработчиков.
Взявшись за работу, можно немного потрудиться над тегом lt;sectiongt;
и углубиться в создание серьезных элементов дизайна с помощью таблиц стилей CSS3.
Для вашего удобства спортзал работает круглосуточно 7 дней в неделю,
а доступ к нему вы можете получить из любой точки мира!
Все ваши друзья уже с нами, и только посмотрите на них!
Они уже вставляют видео на свои мобильные страницы! Вы это тоже можете.
Не проводите еще один день в мечтах о том, что когда-нибудь вы станете
разработчиком мобильных приложений - начните сегодня! </section>
</article>
</body>
</html>
Результат тестирования данной страницы в эмуляторе:
(рис 7.4)
В мобильных приложениях роль CSS особенно велика в связи с обычно малым размером экранов мобильных устройств и особенностями взаимодействия и ожидания. При работе с мобильными устройствами используются разные средства ввода: пальцы, стилусы, кнопки. Необходимость присматриваться к мелкому размеру текста может вызвать у пользователя раздражение. Таблицы CSS являются также основой адаптивного дизайна мобильных приложений, включающего набор методик использования CSS для экранов разных размеров. Учитывая особенности мобильных устройств - размер окна, ориентацию (портретную или ландшафтную), соотношение сторон, поддержку устройством тех или иных стилей CSS и т.д. - может возникнуть необходимость определить какой-то особенный стиль для мобильных устройств определенного класса.
Чтобы извлечь наибольшую пользу для мобильного приложения из стандарта HTML5, нужно знать CSS. Правила создания CSS для мобильных устройств мало отличаются от соответствующих правил для обычных веб-сайтов, где на эту тему существует много книг и интернет-пособий, например [1,2].
Существует несколько версий спецификаций CSS. Каждая следующая версия сложнее предыдущей и с более широким диапазоном охвата. Например, описание версии CSS 2.1 было в пять раз больше предыдущей. К счастью, создатели стандарта CSS распределили усовершенствованные функции каждого следующего поколения таблицы стилей по наборам индивидуальных стандартов, называемых модулями. Всем этим новым модулям было присвоено коллективное название CSS3. Спецификация CSS3 содержит около 50 модулей разной степени завершенности. Возможности этих модулей широки: от предоставления декоративного оформления до специализированного функционала для мобильных устройств (например, чтение текста или изменение стилей в зависимости от размеров мобильного устройства). К числу наиболее важных модулей CSS3 относятся следующие [3]:
Таким образом, 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, который эту спецификацию не поддерживает.
(рис 7.1)
Существуют три способа добавления стилей на страницу.
Первый - вставить информацию о стиле непосредственно в требующий форматирования элемент разметки, используя атрибут style. Вот пример такого типа форматирования, которое изменяет цвет заголовка:
<hl style="color: green">ЗЕЛЕНЫЙ ЗАГОЛОВОК</hl>
В то время как этот подход удобен, он сильно усложняет разметку.
Вторым подходом будет вставка всей таблицы стилей в элемент <style>, который помещается в блок <head> страницы:
<head> <title>Таблица стилей</title> <style> </style> </head>
Здесь форматирование страницы отделено от ее разметки, но оба эти компонента продолжают находиться в одном файле. Этот подход можно применять для одноразовых задач форматирования (когда не нужно использовать эти параметры для форматирования других страниц). Но страницы с применением этого метода получаются большого объема, вследствие чего он не очень подходит для больших, профессиональных разработок.
А третий способ - это разместить форматирование в отдельном файле и связать его с форматируемой страницей, вставив элемент <link> в блок <head> страницы. Вот пример кода, дающего указание применять стили из файла SampleStyles.css:
<head> <title>Внешняя таблица стилей</title> <link rel="stylesheet" href="SampleStyles.css"> </head>
Это наиболее часто применяемый метод форматирования и при этом наиболее действенный. Определенные таким образом стили можно использовать для форматирования других страниц. При желании стили можно распределить между несколькими файлами, а страницу HTML связать с любым количеством файлов таблиц стилей.
Таблица стилей - это текстовый файл, который размещается вместе со страницами HTML. Файл содержит одно или несколько правил, порядок следования которых в файле не имеет значения.
Каждое правило определяет один или несколько аспектов форматирования одного или нескольких элементов HTML. Далее приводится структура простого правила стиля:
селектор {
свойство: значение;
свойство: значение; }
Значения элементов правила следующие.
<h1>.
color, его значение может быть lightblue (светло-синий) или green (зеленый).Вот пример правила для форматирования заголовка первого уровня:
h1 {
text-align: center;
color: green; }
Скопируйте это правило в текстовый файл и сохраните его с расширением css (например, SampleStyles.css). Потом создайте простую страницу, содержащую, по крайней мере, один заголовок первого уровня, и вставьте в нее элемент <link> со ссылкой на этот файл таблицы стилей. Наконец, откройте эту страницу в настольном браузере. Вы увидите, что все заголовки первого уровня будут зеленого цвета и выровнены по центру.
В предыдущем примере правило таблицы стилей содержит два свойства: text-align (горизонтальное выравнивание текста) и color (цвет текста).
Кроме этих двух, существует множество других свойств форматирования, наиболее употребляемые из которых приведены в Табл. 5.1. Кстати, эта таблица содержит почти все свойства стилей, за исключением новых свойств CSS3.
| Свойство | Название |
|---|---|
| Цвет | color, background-color |
| Интервал | margin, padding, margin-left, margin-right, margin-top, margin-bottom |
| Границы | border-width, border-style, border-color, border (для установки ширины, стиля и цвета границ за один прием) |
| Выравнивание текста | text-align, text-indent, word-spacing, letter-spacing, line-height, white-space |
| Шрифты | font-family, font-size, font-weight, font-style, font-variant, text-decoration |
| Размер | width, height |
| Позиция | position, left, right, float, center |
| Графика | background-image, background-repeat, background-position |
Приведенное ранее в качестве примера правило таблицы стилей форматирует в документе все заголовки первого уровня. Но в более сложных документах может потребоваться отформатировать только один элемент или разные группы элементов одного типа по-разному.
Для решения этой задачи элементу присваивается название посредством атрибута class. Далее приведен пример форматирования с использованием класса элемента:
<h1 class="ArticleTitle">HTML5 для мобильных устройств</h1>
Теперь можно создать правило таблицы стилей, которое форматирует только этот заголовок. В данном случае название селектора начинается с точки, после которой следует имя класса:
.ArticleTitle {
font-family: Garamond, serif; font-size: 40px;}
Теперь все элементы, которым посредством атрибута class присвоено имя ArticleTitle, будут отформатированы стилем, указанным в определении данного класса в таблице стилей.
Атрибут class можно использовать с любым количеством элементов. В действительности, это и есть основа использования классов. Типичная таблица стилей наполнена правилами классов, опрятно разбивающих разметку страницы на блоки, к которым можно применять стили.
Наконец, следует отметить, что можно создать селектор, использующий тип элемента и имя класса, как показано в следующем примере:
hl.ArticleTitle {
font-size: 40px;}
Данный селектор создает класс ArticleTitle, который применим только для элементов <h1>. Иногда этот тип правила стилей служит просто для ясности. Например, разработчик хочет четко указать, что класс ArticleTitle применяется только для форматирования заголовков первого уровня, и не должен применяться для форматирования других элементов. Но в большинстве случаев дизайнеры создают простые классы, без привязки к определенным элементам.
Идентификаторы и множественные селекторы
Селекторы классов имеют близких родственников - идентификаторы (или ID - селекторы). Подобно селектору класса, идентификатор позволяет применить форматирование только к выбранным элементам. Эти элементы должны иметь в разметке атрибут id. Название селектора - идентификатора должно начинаться с символа #:
#Menu {
border-width: 2px;
border-style: solid;
}
Следующий код применит правило
#Menu к элементу <section>: <section> id = "Menu"</section>
Любое правило таблицы стилей можно определить для нескольких элементов. Для этого селекторы разделяются запятыми:
ul,ol {
color: #dc1010 ;
background-color:#ede3b5;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:70px;
font-weight:bold;
}
В этом правиле одинаково форматируются два списка - неупорядоченный (ul) и упорядоченный (ol).
Каскадность заключается в том, что стили могут переопределяться. Приведенный выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный. Например, во внешнем стилевом файле было определено, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.
Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:
yellow, red, green, grey,..
#ff0000, #883490, #ffffff,..
rgb(255,0,0), rgb(100,23,78),..В CSS3 цвет может задаваться с помощью HSL (Hue-Saturation-Light) то есть оттенка, насыщенности и яркости.
Для того чтобы задать цвет этим способом, необходимо указать:
Далее приводится пример, где элемент <style> помещен в блок <head> страницы и содержит селектор элемента <body> и селекторы классов redBase, redDarker, redLighter для заголовков страницы. Пример демонстрирует простоту изменения значения яркости для получения нужного оттенка красного:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style>
body {
/* Зеленый фон */
background-color: hsl(120,100%,80%);
}
.redBase {
color:hsl(0, 100%, 50%);
font-size:100px;
}
.redDarker {
color:hsl(0, 100%, 25%);
font-size:100px;
}
.redLighter {
color:hsl(0, 100%, 75%);
font-size:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Настройка цвета в системе HSL</title>
</head>
<body>
<h1 class="redBase">Основной красный</h1>
<h1 class="redDarker">Темно-красный</h1>
<h1 class="redLighter">Светло-красный</h1>
</body>
</html>
Результат тестирования страницы в эмуляторе:
(рис 7.2)
Далее приводится пример страницы, форматирование которой выполняется в отдельном файле css/textformat.css, связанным с форматируемой страницей тегом <link>.
<!DOCTYPE HTML> <html lang="ru"> <head> <link rel="stylesheet" href="css/textformat.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Тестовая страница программных разработок компании Mighty Smite</title> </head> <body> <h1>Пример форматирования текстов</h1> <h2>Это заголовок h2</h2> <h3>Это заголовок h3</h3> В мобильных приложениях роль CSS особенно велика в связи с тем, что экраны мобильных устройств меньше; взаимодействия и ожидания здесь другие. При работе с мобильными устройствами используются разные средства ввода: пальцы, стилусы, маленькие кнопки. Необходимость прищуриваться, чтобы разглядеть текст, может вызвать у пользователя раздражение. Таблицы CSS являются также основой адаптивного дизайна мобильных приложений, включающего набор методик использования CSS для экранов разных размеров. </body> </html>
Содержимое таблицы стилей (файл css/textformat.css):
body
{
background-color:#F2CC6E;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:black; /*#8C5F26;*/
font-size:14px;
max-width:900px;
}
h1
{
color:#BCA55F;
background-color:#3C371E;
font-family:"Arial Black", Gadget, sans-serif;
text-align:center;
}
h2
{
color:#F26205;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif
}
h3
{
color:#3C371E;
font-family:Tahoma, Geneva, sans-serif;
}
Результат тестирования страницы в эмуляторе:
(рис 7.3)
Еще один пример форматирования страницы, содержащей семантические теги HTML5 (<article>, <header>, <section>, <figure>). Форматирование выполняется таблицей стилей с помощью селекторов главных тегов страницы: body, h1, h2.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<style>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
background-color:#F2F2F2;
color:#0D0D0D;
font-family:Verdana, Geneva, sans-serif;
font-size:35px
}
h1 {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Простое размещение изображения</title>
</head>
<body>
<article>
<header>
<h1>Спортзал для разработчиков мобильных приложений</h1>
</header>
<section>
<header>
<h2>Тренировка разработчиков</h2>
</header>
<figure> <img src="images/webDeveloper.jpg" width="450" height="450"> </figure>
Конечно же, Вы думали об этом. Не пора ли поработать над тегами lt;figuregt; и lt;articlegt;?
Работайте с элементами и атрибутами HTML5 в нашем Спортзале для разработчиков.
Взявшись за работу, можно немного потрудиться над тегом lt;sectiongt;
и углубиться в создание серьезных элементов дизайна с помощью таблиц стилей CSS3.
Для вашего удобства спортзал работает круглосуточно 7 дней в неделю,
а доступ к нему вы можете получить из любой точки мира!
Все ваши друзья уже с нами, и только посмотрите на них!
Они уже вставляют видео на свои мобильные страницы! Вы это тоже можете.
Не проводите еще один день в мечтах о том, что когда-нибудь вы станете
разработчиком мобильных приложений - начните сегодня! </section>
</article>
</body>
</html>
Результат тестирования данной страницы в эмуляторе:
(рис 7.4)
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.