|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 339 / 30 | Длительность: 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>Результат тестирования страницы в эмуляторе:
Дмитрий Белов