|
Каким образом можно создать точку останова? Например, если в Лекции 8 в примере, который демонстрирует возможность <canvas> для работы с готовыми изображениями (последний в лекции) в цикле |
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 19.03.2014 | Доступ: свободный | Студентов: 329 / 26 | Длительность: 11:36:00
Специальности: Программист
Лекция 5:
Использование CSS в мобильных разработках
Способы подключения CSS к документу
Существуют три способа добавления стилей на страницу.
Первый - вставить информацию о стиле непосредственно в требующий форматирования элемент разметки, используя атрибут 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> со ссылкой на этот файл таблицы стилей. Наконец, откройте эту страницу в настольном браузере. Вы увидите, что все заголовки первого уровня будут зеленого цвета и выровнены по центру.
Свойства CSS
В предыдущем примере правило таблицы стилей содержит два свойства: 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).
Дмитрий Белов