Лекция #4. Каскадные таблицы стилей
DESCRIPTION
Web-программирование Лекция #4. Каскадные таблицы стилей Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук. Лектор: Яковенко Кирилл Сергеевич.TRANSCRIPT
![Page 1: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/1.jpg)
WEB-ПРОГРАММИРОВАНИЕЛекция #4. Каскадные таблицы стилей
Яковенко К. С
Омский государственный университет им. Ф. М. ДостоевскогоФакультет компьютерных наук
![Page 2: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/2.jpg)
2
Cascading Style Sheets
формальный язык описания внешнего вида документа.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, SVG.
![Page 3: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/3.jpg)
3
История развития CSS
CSS, level 1 (декабрь 1996 г.)
CSS 2, level 2 (май 1998 г.)
CSS 2.1 (июнь 2011 г.)
CSS 3 (находится в разработке) – экспериментально, служебые стили
![Page 4: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/4.jpg)
4
Базовый синтаксис CSS
каждое правило CSS из таблицы стилей имеет две основные части:
Селектор определяет на какие части документа распространяется правило
Группа объявлений, где каждое объявление представляет собой сочетание изменяемого свойства стиля со списком значений, разделённых знаком ":".
![Page 5: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/5.jpg)
5
Базовый синтаксис CSS
Весь CSS-код состоит из повторяющихся блоков (CSS правил):
селектор, селектор { свойство: значение; свойство: значение; свойство: значение;}
CSS не чувствителен к регистру букв, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от разработчика.
Объявление
Группа объявлений
![Page 6: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/6.jpg)
6
Виды CSS селекторов
Универсальный селектор
* { свойство: значение; ... }
Селекторы HTML элементов
Тег { свойство: значение; ... }
Селекторы атрибутов
[атрибут] { свойство: значение; ... }
Селектор[атрибут] { свойство: значение; ... }
![Page 7: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/7.jpg)
7
Виды CSS селекторов
Селекторы классов
Класс задаётся с помощью атрибута class, который содержит имя или имена классов через пробел.
.ИмяКласса { свойство: значение; ... }
Тег.ИмяКласса { свойство: значение; ... }
Селекторы идентификаторов
Идентификатор (ID элемента) задаётся с помощью атрибута id и определяет уникальное имя элемента.
#ИмяИдентификатора { свойство: значение; ... }
Тег#Имя идентификатора { свойство: значение; ... }
![Page 8: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/8.jpg)
8
Виды CSS селекторов
Контекстные селекторы
Элементы находятся внутри другого элемента.
Селектор1 Селектор2 { свойство: значение; ... }
Соседние селекторы
Селектор1 + Селектор2 { свойство: значение; ... }
Дочерние селекторы
Селектор1 > Селектор2 { свойство: значение; ... }
![Page 9: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/9.jpg)
9
Виды CSS селекторов (Псевдоклассы)
определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положения в дереве документа.
Селектор:Псевдокласс { свойство: значение; ... }
Условно все псевдоклассы делятся на три группы:
определяющие состояние элементов (:active, :link, :focus, ...);
имеющие отношение к дереву элементов (:first-child, :last-child, ...);
указывающие язык текста (:lang).
![Page 10: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/10.jpg)
10
Виды CSS селекторов (Псевдоэлементы)
позволяют задать стиль логических элементов не определённых в явном виде в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.
Селектор:Псевдоэлемент { свойство: значение; ... }
.foo:first-letter { color: red }
.foo:first-line { font-style: italic}
![Page 11: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/11.jpg)
11
Свойства стиля
задают стиль выделенного элемента, позволяя оформить его желаемым образом.
Стандартные свойства
предопределены стандартом CSS
Например рекомендация CSS 2.1 определяет около сотни таких свойств.
Браузерные свойства
работают только в определённых браузерах. Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit- для Chrome и Safari, -o- для Opera.
![Page 12: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/12.jpg)
12
Группы свойств по функциям
Шрифты (font)
Цвет и заливка (background и color)
Отступы и поля (margin и padding)
Позиционирование (position)
Размеры (width и height)
Свойства рамок (border)
Оформление текста
и другие.
![Page 13: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/13.jpg)
13
Значения свойств CSS
каждое свойство стиля в CSS должно задавать определенный список значений.
Список значений может представлять собой одно значение, либо список значений, разделенных пробелами.
Свойства позволяющие одновременно задать несколько свойств называются стенографическими свойствами.
{ font: bold 12pt/14pt Helvetica; … }font-weight font-size/line-height font-family
![Page 14: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/14.jpg)
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)
адрес или ключевое слово.
![Page 15: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/15.jpg)
15
Директивы CSS
определенная конструкция, которая начинается знаком @ и является какой-то командой или установкой.
@charset (задает кодировку символов в CSS)
@import (позволяет включать одни таблицы стилей в другие)
@media (задает имена устройств отображения)
@font-face (указывает настройки шрифтов и позволяет загрузить спец шрифт)
и другие.
![Page 16: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/16.jpg)
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>
![Page 17: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/17.jpg)
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>
![Page 18: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/18.jpg)
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>
![Page 19: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/19.jpg)
19
Наследование правил в CSS
автоматическое применения некоторых стилевых свойств родительского элемента ко вложенным в него дочерним элементам, если они не переопределены явно.
Некоторые CSS свойства не наследуются (проверяйте в справочнике).
Для наследования не наследуемых свойств используется ключевое слово inherit
{ css-свойство: inherit; … }
![Page 20: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/20.jpg)
20
Типы стилей CSS
Различают несколько типов стилей, которые могут совместно применяться к одному документу:
Стиль браузера (стиль по умолчанию)
Стиль разработчика (правила CSS)
Пользовательский стиль (задается в настройках браузера)
![Page 21: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/21.jpg)
21
Применение стилей: каскадирование
При наличии нескольких правил для одного элемента, применяться будет правило с наибольшим приоритетом.
При вычислении приоритета учитываются:
важность;
специфичность;
порядок исходного кода.
![Page 22: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/22.jpg)
22
Правила приоритета
1. свойства объявленные с помощью сопроводительного слова !important
2. внутренние стили
3. стиль, заданный CSS правилами
стили заданные непосредственно селекторами (конфликты между ними решаются с помощью расчета специфичности)
наследуемые стили
стили, заданные во внешних таблицах стилей
4. пользовательские стили
5. стиль браузера
![Page 23: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/23.jpg)
23
Правила специфичности
Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.
Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
Второе место занимает присутствие ID в селекторе(#some-id).
Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).
Если однозначно определить стиль элемента не удалось, то применяться будет тот стиль, что указан в коде ниже.
![Page 24: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/24.jpg)
24
Преимущества CSS
Разделение содержания от представления
Разное оформление для разных устройств
Дополнительные возможности форматирования
Ускорение загрузки сайта
Единое стилевое оформление множества документов
Доступность за счет централизованного хранения
![Page 25: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/25.jpg)
25
Ограничения CSS
Браузеры не всегда корректно интерпретируют те или иные инструкции CSS, и внешний вид страницы искажается
Невозможно обратиться с помощью селекторов к родительским элементам.
CSS не поддерживает выражения и функции.
Неуправляемое поведение псевдоклассов.
и другие им подобные ограничения, связанные с природой CSS.
![Page 26: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/26.jpg)
26
CSS Framework
это заранее подготовленная css-библиотека, предназначенная для того, что бы уменьшить время разработки и обеспечить совместимость с различными браузерами при работе с каскадными таблицами стилей (CSS).
Фактически — это набор готовых инструментов, библиотек и лучших практик, которые используется для вёрстки веб-страниц.
![Page 27: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/27.jpg)
27
Преимущества CSS-framework'ов
Увеличивает производительность и помогает избежать типичных ошибок.
Увеличивает консистентность кода
Помогает наладить оптимальный рабочий процесс
Позволяет получить оптимальную кроссбраузерную совместимость.
Как правило содержит «чистый» и хорошо структурированный код.
![Page 28: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/28.jpg)
28
Недостатки CSS-framework'ов
Нужно время и усилия на изучение CSS-framework'а
Можно унаследовать чужие ошибки
В итоге вы получаете «раздутый» код вашего приложения
Теряется индивидуальность проектов и их дизайн начинает зависеть от CSS-framework'а
Всегда надо обращать внимание на тип лицензии
![Page 29: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/29.jpg)
29
CSS-framework'и. Существующие решения.
Bootstrap
Foundation
Skeleton
HTML Kick Start
И многие многие другие
Если вам не понравился ни один из CSS-framwork'ов, вы всегда можете создать свой собственный.
![Page 30: Лекция #4. Каскадные таблицы стилей](https://reader037.vdocuments.mx/reader037/viewer/2022102815/557ee6e9d8b42a331d8b513e/html5/thumbnails/30.jpg)
30
Яковенко Кирилл Сергеевич[email protected]
Омский государственный университет им. Ф. М. ДостоевскогоФакультет компьютерных наук