Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 330 / 27 | Длительность: 11:36:00
Специальности: Программист
Лекция 5:

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

Каскадность стилей

Каскадность заключается в том, что стили могут переопределяться. Приведенный выше список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный. Например, во внешнем стилевом файле было определено, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

Задание цвета в CSS

Цвет для тех свойств, где это нужно, может быть определен одним из трех способов:

  • при помощи названия цвета: yellow, red, green, grey,..
  • шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..
  • десятичным заданием составляющих цвета в формате rgb (red, green, blue): rgb(255,0,0), rgb(100,23,78),..

В CSS3 цвет может задаваться с помощью HSL (Hue-Saturation-Light) то есть оттенка, насыщенности и яркости.

Для того чтобы задать цвет этим способом, необходимо указать:

  • оттенок цвета указывается в градусах поворота цветового круга (0 градусов - красный, 120 градусов - зеленый, 240 градусов - голубой и т.д.);
  • насыщенность цвета указывается в процентах (по мере понижения процентов цвет будет блекнуть);
  • яркость цвета также указывается в процентах (0% - темный, 100% - светлый).

Далее приводится пример, где элемент <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.
Дмитрий Белов
Дмитрий Белов

Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле
for (i = 0; i < 3; i++) {
for (j = 0; j < 4; j++) {
sx = 300 * i; sy = 350 * j;
contextNow.drawImage(img, sx, sy);}
поставить точку останова, то при запуске отладки проекта точка становится пустой окружностью с сообщением: В настоящий момент попадание в точку останова не произойдет. Нет загруженных символов для этого документа. Как все-таки создать точку останова и пройти по шагам весь код?