WEB-ПРОГРАММИРОВАНИЕЛекция #4. Каскадные таблицы стилей

Яковенко К. С

Омский государственный университет им. Ф. М. ДостоевскогоФакультет компьютерных наук

2

Cascading Style Sheets

 формальный язык описания внешнего вида документа.

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

3

История развития CSS

CSS, level 1 (декабрь 1996 г.)

CSS 2, level 2 (май 1998 г.)

CSS 2.1 (июнь 2011 г.)

CSS 3 (находится в разработке) – экспериментально, служебые стили

4

Базовый синтаксис CSS

каждое правило CSS из таблицы стилей имеет две основные части:

Селектор определяет на какие части документа распространяется правило

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

5

Базовый синтаксис CSS

Весь CSS-код состоит из повторяющихся блоков (CSS правил):

селектор, селектор { свойство: значение; свойство: значение; свойство: значение;}

CSS не чувствителен к регистру букв, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от разработчика.

Объявление

Группа объявлений

6

Виды CSS селекторов

Универсальный селектор

* { свойство: значение; ... }

Селекторы HTML элементов

Тег { свойство: значение; ... }

Селекторы атрибутов

[атрибут] { свойство: значение; ... }

Селектор[атрибут] { свойство: значение; ... }

7

Виды CSS селекторов

Селекторы классов

Класс задаётся с помощью атрибута class, который содержит имя или имена классов через пробел.

.ИмяКласса { свойство: значение; ... }

Тег.ИмяКласса { свойство: значение; ... }

Селекторы идентификаторов

Идентификатор (ID элемента) задаётся с помощью атрибута id и определяет уникальное имя элемента.

#ИмяИдентификатора { свойство: значение; ... }

Тег#Имя идентификатора { свойство: значение; ... }

8

Виды CSS селекторов

Контекстные селекторы

Элементы находятся внутри другого элемента.

Селектор1 Селектор2 { свойство: значение; ... }

Соседние селекторы

Селектор1 + Селектор2 { свойство: значение; ... }

Дочерние селекторы

Селектор1 > Селектор2 { свойство: значение; ... }

9

Виды CSS селекторов (Псевдоклассы)

определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положения в дереве документа.

Селектор:Псевдокласс { свойство: значение; ... }

Условно все псевдоклассы делятся на три группы:

определяющие состояние элементов (:active, :link, :focus, ...);

имеющие отношение к дереву элементов (:first-child, :last-child, ...);

указывающие язык текста (:lang).

10

Виды CSS селекторов (Псевдоэлементы)

позволяют задать стиль логических элементов не определённых в явном виде в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.

Селектор:Псевдоэлемент { свойство: значение; ... }

.foo:first-letter { color: red }

.foo:first-line { font-style: italic}

11

Свойства стиля

задают стиль выделенного элемента, позволяя оформить его желаемым образом.

Стандартные свойства

предопределены стандартом CSS

Например рекомендация CSS 2.1 определяет около сотни таких свойств.

Браузерные свойства

работают только в определённых браузерах. Префикс -moz- для Firefox, -ms- для Internet Explorer, -webkit- для Chrome и Safari, -o- для Opera.

12

Группы свойств по функциям

Шрифты (font)

Цвет и заливка (background и color)

Отступы и поля (margin и padding)

Позиционирование (position)

Размеры (width и height)

Свойства рамок (border)

Оформление текста

и другие.

13

Значения свойств CSS

каждое свойство стиля в CSS должно задавать определенный список значений.

Список значений может представлять собой одно значение, либо список значений, разделенных пробелами.

Свойства позволяющие одновременно задать несколько свойств называются стенографическими свойствами.

{ font: bold 12pt/14pt Helvetica; … }font-weight font-size/line-height font-family

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

Директивы CSS

определенная конструкция, которая начинается знаком @ и является какой-то командой или установкой.

@charset (задает кодировку символов в CSS)

@import (позволяет включать одни таблицы стилей в другие)

@media (задает имена устройств отображения)

@font-face (указывает настройки шрифтов и позволяет загрузить спец шрифт)

и другие.

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

Способы подключения стилей(Таблицы глобальных стилей)

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

Способы подключения стилей(Внутренние стили)

являются расширением для одиночного тега используемого на веб-странице

Для определения стиля используется атрибут 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

Наследование правил в CSS

автоматическое применения некоторых стилевых свойств родительского элемента ко вложенным в него дочерним элементам, если они не переопределены явно.

Некоторые CSS свойства не наследуются (проверяйте в справочнике).

Для наследования не наследуемых свойств используется ключевое слово inherit

{ css-свойство: inherit; … }

20

Типы стилей CSS

Различают несколько типов стилей, которые могут совместно применяться к одному документу:

Стиль браузера (стиль по умолчанию)

Стиль разработчика (правила CSS)

Пользовательский стиль (задается в настройках браузера)

21

Применение стилей: каскадирование

При наличии нескольких правил для одного элемента, применяться будет правило с наибольшим приоритетом.

При вычислении приоритета учитываются:

важность;

специфичность;

порядок исходного кода.

22

Правила приоритета

1. свойства объявленные с помощью сопроводительного слова !important

2. внутренние стили

3. стиль, заданный CSS правилами

стили заданные непосредственно селекторами (конфликты между ними решаются с помощью расчета специфичности)

наследуемые стили

стили, заданные во внешних таблицах стилей

4. пользовательские стили

5. стиль браузера

23

Правила специфичности

Специфичность селекторов определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.

Второе место занимает присутствие ID в селекторе(#some-id).

Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.

Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Если однозначно определить стиль элемента не удалось, то применяться будет тот стиль, что указан в коде ниже.

24

Преимущества CSS

Разделение содержания от представления

Разное оформление для разных устройств

Дополнительные возможности форматирования

Ускорение загрузки сайта

Единое стилевое оформление множества документов

Доступность за счет централизованного хранения

25

Ограничения CSS

Браузеры не всегда корректно интерпретируют те или иные инструкции CSS, и внешний вид страницы искажается

Невозможно обратиться с помощью селекторов к родительским элементам.

CSS не поддерживает выражения и функции.

Неуправляемое поведение псевдоклассов.

и другие им подобные ограничения, связанные с природой CSS.

26

CSS Framework

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

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

27

Преимущества CSS-framework'ов

Увеличивает производительность и помогает избежать типичных ошибок.

Увеличивает консистентность кода

Помогает наладить оптимальный рабочий процесс

Позволяет получить оптимальную кроссбраузерную совместимость.

Как правило содержит «чистый» и хорошо структурированный код.

28

Недостатки CSS-framework'ов

Нужно время и усилия на изучение CSS-framework'а

Можно унаследовать чужие ошибки

В итоге вы получаете «раздутый» код вашего приложения

Теряется индивидуальность проектов и их дизайн начинает зависеть от CSS-framework'а

Всегда надо обращать внимание на тип лицензии

29

CSS-framework'и. Существующие решения.

Bootstrap

Foundation

Skeleton

HTML Kick Start

И многие многие другие

Если вам не понравился ни один из CSS-framwork'ов, вы всегда можете создать свой собственный.

30

Яковенко Кирилл Сергеевичkirill.yakovenko@gmail.com

Омский государственный университет им. Ф. М. ДостоевскогоФакультет компьютерных наук