Лекция посвящена каскадным таблицам стилей (CSS), их истории, синтаксису и различным типам селекторов, включая классы и идентификаторы. Рассматриваются основные свойства CSS, методы подключения стилей к HTML-документам и особенности приоритета стилей. Также освещаются преимущества и ограничения CSS, а также использование CSS-фреймворков для упрощения разработки веб-страниц.

1. WEB-ПРОГРАММИРОВАНИЕ
Лекция #4. Каскадные таблицы стилей
Яковенко К. С
Омский государственный университет им. Ф. М. Достоевского
Факультет компьютерных наук

2. 2
Cascading Style Sheets
формальный язык описания внешнего вида
документа.
Преимущественно используется как средство
описания, оформления внешнего вида веб-страниц,
написанных с помощью языков разметки HTML и
XHTML, но может также применяться к любым
XML-документам, например, SVG.

3. 3
История развития CSS
CSS, level 1 (декабрь 1996 г.)
CSS 2, level 2 (май 1998 г.)
CSS 2.1 (июнь 2011 г.)
CSS 3 (находится в разработке) –
экспериментально, служебые стили

4. 4
Базовый синтаксис CSS
каждое правило CSS из таблицы стилей имеет две
основные части:
Селектор определяет на какие части документа
распространяется правило
Группа объявлений, где каждое объявление
представляет собой сочетание изменяемого
свойства стиля со списком значений, разделённых
знаком ":".

5. 5
Базовый синтаксис CSS
Весь CSS-код состоит из повторяющихся блоков (CSS
правил):
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
CSS не чувствителен к регистру букв, переносу строк,
пробелам и символам табуляции, поэтому форма записи
зависит от разработчика.
Объявление
Группа объявлений

6. 6
Виды CSS селекторов
Универсальный селектор
* { свойство: значение; ... }
Селекторы HTML элементов
Тег { свойство: значение; ... }
Селекторы атрибутов
[атрибут] { свойство: значение; ... }
Селектор[атрибут] { свойство: значение; ... }

7. 7
Виды CSS селекторов
Селекторы классов
Класс задаётся с помощью атрибута class, который содержит имя
или имена классов через пробел.
.ИмяКласса { свойство: значение; ... }
Тег.ИмяКласса { свойство: значение; ... }
Селекторы идентификаторов
Идентификатор (ID элемента) задаётся с помощью атрибута id и
определяет уникальное имя элемента.
#ИмяИдентификатора { свойство: значение; ... }
Тег#Имя идентификатора { свойство: значение; ... }

8. 8
Виды CSS селекторов
Контекстные селекторы
Элементы находятся внутри другого элемента.
Селектор1 Селектор2 { свойство: значение; ... }
Соседние селекторы
Селектор1 + Селектор2 { свойство: значение; ... }
Дочерние селекторы
Селектор1 > Селектор2 { свойство: значение; ... }

9. 9
Виды CSS селекторов
(Псевдоклассы)
определяют динамическое состояние элементов, которое
изменяется с помощью действий пользователя, а также
положения в дереве документа.
Селектор:Псевдокласс { свойство: значение; ... }
Условно все псевдоклассы делятся на три группы:
определяющие состояние элементов
(:active, :link, :focus, ...);
имеющие отношение к дереву элементов
(:first-child, :last-child, ...);
указывающие язык текста (:lang).

10. 10
Виды CSS селекторов
(Псевдоэлементы)
позволяют задать стиль логических элементов не
определённых в явном виде в дереве элементов
документа, а также генерировать содержимое, которого
нет в исходном коде текста.
Селектор:Псевдоэлемент { свойство: значение; ... }
.foo:first-letter { color: red }
.foo:first-line { font-style: italic}

11. 11
Свойства стиля
задают стиль выделенного элемента, позволяя оформить его
желаемым образом.
Стандартные свойства
предопределены стандартом CSS
Например рекомендация CSS 2.1 определяет около сотни таких
свойств.
Браузерные свойства
работают только в определённых браузерах.
Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit-
для Chrome и Safari, -o- для Opera.

12. 12
Группы свойств по функциям
Шрифты (font)
Цвет и заливка (background и color)
Отступы и поля (margin и padding)
Позиционирование (position)
Размеры (width и height)
Свойства рамок (border)
Оформление текста
и другие.

13. 13
Значения свойств CSS
каждое свойство стиля в CSS должно задавать
определенный список значений.
Список значений может представлять собой одно
значение, либо список значений, разделенных
пробелами.
Свойства позволяющие одновременно задать
несколько свойств называются стенографическими
свойствами.
{ font: bold 12pt/14pt Helvetica; … }
font-weight font-size/line-height font-family

14. 14
Типы значений свойств
Всё многообразие значений стилевых свойств может
быть сведено к одному из типов:
cтрока (“String”)
число (±256, ±0.56, ±.56)
проценты (56%, 56.6%)
относительные размеры (em, ex, px)
абсолютные размеры (in, cm, mm, pt, pc)
цвет red, #ff0000, #f00, rgb(255,0,0)
адрес или ключевое слово.

15. 15
Директивы CSS
определенная конструкция, которая начинается знаком @
и является какой-то командой или установкой.
@charset (задает кодировку символов в CSS)
@import (позволяет включать одни таблицы стилей
в другие)
@media (задает имена устройств отображения)
@font-face (указывает настройки шрифтов и позволяет
загрузить спец шрифт)
и другие.

16. 16
Способы подключения стилей
(Таблица связанных стилей)
описание CSS правил располагается в отдельном файле, как
правило, с расширением css.
связывания документа с этим файлом происходит с помощью
тега <LINK>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Стили</title>
<link rel="stylesheet" type="text/css" href="mysite.css">
<link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">
</head>
<body>
<h1>Заголовок</h1>
<p>Текст</p>
</body>
</html>

17. 17
Способы подключения стилей
(Таблицы глобальных стилей)
cтиль определяется в самом документе и обычно располагается в
заголовке HTML документа
Определение стиля задается тегом <style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Стили</title>
<style type="text/css">
H1 {
font-size: 120%; /* Размер шрифта */
font-family: Verdana, Arial, Helvetica, sans-serif; /* Семейство шрифта */
color: #336; /* Цвет текста */
}
</style>
</head>
<body>
<H1>Hello, world!</H1>
</body>
</html>

18. 18
Способы подключения стилей
(Внутренние стили)
являются расширением для одиночного тега используемого на
веб-странице
Для определения стиля используется атрибут style
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Стили</title>
</head>
<body>
<H1 style="font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #336">
Hello, world!</H1>
</body>
</html>

19. 19
Наследование правил в CSS
автоматическое применения некоторых стилевых
свойств родительского элемента ко вложенным в него
дочерним элементам, если они не переопределены явно.
Некоторые CSS свойства не наследуются
(проверяйте в справочнике).
Для наследования не наследуемых свойств
используется ключевое слово inherit
{ css-свойство: inherit; … }

20. 20
Типы стилей CSS
Различают несколько типов стилей, которые могут
совместно применяться к одному документу:
Стиль браузера (стиль по умолчанию)
Стиль разработчика (правила CSS)
Пользовательский стиль (задается в настройках
браузера)

21. 21
Применение стилей: каскадирование
При наличии нескольких правил для одного
элемента, применяться будет правило с
наибольшим приоритетом.
При вычислении приоритета учитываются:
важность;
специфичность;
порядок исходного кода.

22. 22
Правила приоритета
1. свойства объявленные с помощью сопроводительного слова
!important
2. внутренние стили
3. стиль, заданный CSS правилами
стили заданные непосредственно селекторами (конфликты
между ними решаются с помощью расчета специфичности)
наследуемые стили
стили, заданные во внешних таблицах стилей
4. пользовательские стили
5. стиль браузера

23. 23
Правила специфичности
Специфичность селекторов определяет их приоритетность в таблице
стилей. Чем специфичнее селектор, тем выше его приоритет.
Самый высокий приоритет имеет атрибут style. Это правило
перекрывает все селекторы описанные в стилях.
Второе место занимает присутствие ID в селекторе(#some-id).
Далее идут все атрибуты(в том числе и атрибут class) и
псевдоклассы(pseudo-classes) в селекторе.
Самый низкий приоритет у селекторов с именами элементов и
псевдоэлементами(pseudo-elements).
Если однозначно определить стиль элемента не удалось, то применяться
будет тот стиль, что указан в коде ниже.

24. 24
Преимущества CSS
Разделение содержания от представления
Разное оформление для разных устройств
Дополнительные возможности форматирования
Ускорение загрузки сайта
Единое стилевое оформление множества документов
Доступность за счет централизованного хранения

25. 25
Ограничения CSS
Браузеры не всегда корректно интерпретируют те или
иные инструкции CSS, и внешний вид страницы
искажается
Невозможно обратиться с помощью селекторов к
родительским элементам.
CSS не поддерживает выражения и функции.
Неуправляемое поведение псевдоклассов.
и другие им подобные ограничения, связанные с
природой CSS.

26. 26
CSS Framework
это заранее подготовленная css-библиотека,
предназначенная для того, что бы уменьшить время
разработки и обеспечить совместимость с различными
браузерами при работе с каскадными таблицами стилей
(CSS).
Фактически — это набор готовых инструментов,
библиотек и лучших практик, которые используется для
вёрстки веб-страниц.

27. 27
Преимущества CSS-framework'ов
Увеличивает производительность и помогает избежать
типичных ошибок.
Увеличивает консистентность кода
Помогает наладить оптимальный рабочий процесс
Позволяет получить оптимальную кроссбраузерную
совместимость.
Как правило содержит «чистый» и хорошо
структурированный код.

28. 28
Недостатки CSS-framework'ов
Нужно время и усилия на изучение CSS-framework'а
Можно унаследовать чужие ошибки
В итоге вы получаете «раздутый» код вашего
приложения
Теряется индивидуальность проектов и их дизайн
начинает зависеть от CSS-framework'а
Всегда надо обращать внимание на тип лицензии

29. 29
CSS-framework'и.
Существующие решения.
Bootstrap
Foundation
Skeleton
HTML Kick Start
И многие многие другие
Если вам не понравился ни один из CSS-framwork'ов, вы
всегда можете создать свой собственный.

30. 30
Яковенко Кирилл Сергеевич
kirill.yakovenko@gmail.com
Омский государственный университет им. Ф. М. Достоевского
Факультет компьютерных наук