CSS Каскадные таблицы стилей. Назначение, история Задают способы визуализации содержимого HTML-документа CSS уровень 1 (1996, 1999) CSS уровень 2 – можно. - презентация

1 CSS Каскадные таблицы стилей

2 Назначение, история Задают способы визуализации содержимого HTML-документа CSS уровень 1 (1996, 1999) CSS уровень 2 – можно использовать CSS уровня 3 находится в стадии разработки

3 Синтаксис CSS Таблицы стилей состоят из правил Правило: { } селектор – определяет к каким элементам применяется правило Описание: пары : ; /* … */ – комментарий Примеры: H1 {color: red; font-size: 12pt} H1 {color: red} H1 {font-size: 12pt}.note {font-style: italic; text-align:right}

4 Группы свойств Свойства шрифтов Цвет, фон Свойства блочных элементов Свойства классификации Позиционирование Свойства пользовательского интерфейса Генерируемое содержимое

5 Свойства шрифтов Группа font font-family – гарнитура font-style (normal, italic, inherit) – курсив или нет font-variant (normal, small-caps) – капитель font-weight (normal, bold) font-size (xx-small, x-small, small, medium, large, x- large, xx-large, абсолютная длина, проценты) line-height – высота строки P { font: bold 12pt/14pt Arial }

6 Цвет, фон color – цвет шрифта background-color background-image background-repeat (repeat, repeat-x, repeat-y, no-repeat) background-attachment (scroll, fixed) background-position (%, длина, top, center, bottom, left, right)

7 Свойства текста text-indent (длина, %) – отступ первой строки text-align (left, right, center, justify, строка) text-decoration (none, underline, overline, line-through, blink) text-shadow letter-spacing word-spacing text-transform (capitalize, uppercase, lowercase, none) white-space (normal, pre, nowrap)

8 Свойства блоков margin-top, margin-right, margin-bottom, margin-left (%, длина) – поля border-top, border-right, border-bottom, border-left border: border-style, border-width, цвет padding-top, padding-right, padding-bottom, padding-left width, height float (left, right, none) clear (none, left, right, both)

9 Генерируемое содержимое Псевдоэлементы :before и :after content (строка, URI, счётчик) P.note:before { content: "Примечание: " } quotes list-style-type (disc, circle, square, decimal, decimal-leading- zero, lower-roman, upper-roman, lower-greek, …) list-style-image (URI) list-style-position (inside, outside) – маркер внутри или вне

10 Пользовательский интерфейс cursor (auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help) outline-width outline-style – акцентирующий контур outline-color

11 Классификация и позиционирование display (inline, block, list-item, run-in, compact, marker, table, inline-table, table-row- group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none) position (static, relative, absolute, fixed) top, right, bottom, left – координаты (смещения) direction (ltr, rtl) – направление вывода

12 Значения длин Относительные: em – свойство font-size ex – свойство x-height px – пиксели Абсолютные: in – дюймы cm – сантиметры mm – миллиметры pt – пункт, 1/72 дюйма pc – пика = 12pt

13 Значения цветов Имена: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow В шестнадцатеричном виде: #FFFFFF, #FFF, #EEE В десятичном виде: rgb(255,255,0), rgb(100%,50%,50%)

14 Селекторы Шаблоны: * – универсальный селектор (все элементы) E – элемент типа E E F – элемент F, являющийся потомком E E > F – элемент F, являющийся дочерним эл-ом E E + F – элемент F, идущий сразу за эл-ом E E.C – элемент E класса C #I – элемент с идом I E[attr] – элемент с атрибутом attr E[attr=value] – элемент с атрибутом attr=value :P – псевдокласс элемента

15 Дерево документа Пример Это абзац. Первый элемент списка Второй элемент списка HTML HEAD TITLE текст BODY текстP UL LI текст LI текст

16 Псевдоклассы first-child – первый потомок link, visited, active, hover, focus – псевдоклассы ссылок lang(c) – язык Примеры: A:link { color: red } LI A.external:visited { color: blue }

17 Способы указания таблицы стилей В теге (атрибут style) В заголовке документа (элемент … ) p {color:red} Во внешнем "subs.css";