CSS Cascading Style Sheets Каскадные таблицы стилей

CSS n n n Каскадные таблицы стилей позволяют задавать различные визуальные свойства HTML-элементам Таблицы стилей позволяют разделить смысловое содержимое и его визуальное представление. Появление CSS - 1997 год (css 1) Сегодня – CSS 2 Разработка CSS 3

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

CSS Способы внедрения таблиц стилей n внешнее (в отдельном файле) n внутренне (в секции заголовка документа) n встроенное (внедряется в тег)

CSS Синтаксис n n n свойство 1: значение 1; свойство 2: значение 1; свойство 1: значение 1 значение 2; Примеры n color: red; text-align: center; n border: solid 0. 2 cm blue;

CSS n встроенное-описание Стиль описывается внутри тега. Применяется только к этому тегу. n Примеры <p style=“font-size: 10 pt; color: green”>…</p> <p style=“border: solid 4 pt red; color: green”> …</p>

CSS n n Внутренне-описание В секции HEAD <HTML> <HEAD>. . . <STYLE type=text/css> <!-H 1 {text-align: center; color: green; } /* Это комментарий в CSS */ --> </STYLE> </HEAD> <BODY> <H 1>Это заголовок будет зеленого цвета и центрирован</H 1> </BODY> </HTML>

CSS n Внешнее-описание Задается в отдельном файле. Может применятся к нескольким документам. n Файл my_style. css BODY {margin-left: 40 px} H 1 {text-align: center; color: green; } n В HTML-документе q q <HEAD><LINK rel=stylesheet type=“text/css” href=my_style. css></HEAD> В секции style @import url(my_style. css)

CSS Комбинирование стилей n n n Если заданы стили оформления различными способами (внутренние, внешние), то применяются в совокупности (если нет конфликта стилей). При конфликте стилей больший приоритет у описания, которое относится к наиболее точно определенному тегу CSS-стили имеют приоритет над «HTML-стилями»

CSS n Наследование свойств q Вложенные теги наследуют свойства родительских *(не все свойства могут быть унаследованы) q Пример: <P style="color: blue"> Это текст параграфа <em>это выделенный текст</em> </P> (текст в теге <em> будет синего цвета)

CSS Свойства CSS n Шрифт (цвет, размер, тип, …) n Текст (выравнивание, …) n Фон (цвет, положение, рисунок, …) n Блоки (тип, поля, …) n Рамки (тип, толщина, цвет, …) n Списки (тип, рисунок, …) n Позиционирование n Дополнительные (вид курсора, фильтры …)

CSS n Селекторы n Тег, к которому относятся свойства P {color: red} H 1, H 2, H 3 {align: center}

CSS n Контекстные селекторы n UL LI {color: blue} свойство применяется к LI, если LI вложен в тег UL q q n UL LI {color: red} OL LI {color: green} OL > LI {color: blue} дочерние свойство применяется к LI, если LI непосредственно вложено в тег OL

CSS n Классы стилей Объявление свойства: q . title 1 {text-align: left; color: blue} Т. е. при объявлении может не указывается конкретный тег, к которому будет применяться свойство. q H 1. title 2 {text-align: center; color: green} Применение <p class=title 1>текст</p> <p class=title 2>текст</p> <h 1 class=title 1>текст</h 1> <h 1 class=title 2>текст</h 1>

CSS n Идентификаторы – уникальные имена элементов, т. е. в документе не должен встречаться более одного раза. Объявление <head><style> #test{color: #00 FF 00} </style></head> n Применение <p id=test>пример</p> n

CSS n Псевдоклассы – определяют разные типы одного элемента(тега) q q a: link a: visited a: hover a: active (обычное) (посещенное) (наведенное) (активное, в момент щелчка) *-прописывают состояния в этом порядке, обычно указывая вначале стиль и для самого тега “а”. n Псевдоэлементы – выделяют разные части одного элемента (тега) p: first-line p: first-letter

CSS n Определение псевдоклассов и псевдоэлементов для классов q q p. new_style: first-letter a. my_class: hover

CSS Единицы измерения Абсолютные n q q q In (2. 54 см) (72 pt) cm mm pt (0. 375 mm) pc (1 pc=12 pt) Относительные n q q em ex px % (совпадает с размером текущего шрифта) (высота буквы x текущего шрифта) (пикселы) Примечание: для ненулевых значений размерность должна быть указана – за редким исключением.

URL (CSS 2. 1 URI) n url(протокол: //сервер/путь) q (можно использовать относительный путь)

CSS Цвет n Задание цвета q q q названием (red, green …) номером (#FA 56 AC, …) сокращенный номер (#F 0 F, …) аналог #FF 00 FF (т. е. для безопасной палитры цветов) q q n RGB-номером rgb(255, 0, 255) RGB-в процентах rgb(100%, 0, 100%) Пример color: rgb(50%, 0, 100%)

CSS (Шрифт) font-family n serif n sans-serif n monospace n cursive n fantasy font-family: “Arial Cyr”, Helvetica, sans-serif; или font-family: times, “Times new roman”, serif;

CSS (Шрифт) font-style n normal n italic n oblique (наклонный) n p {font-style: italic; }

CSS (Шрифт) font-variant n normal n small-caps (капители, т. е. прописными буквами пишут и маленькие и большие) font-weight n 100, …, 900 n lighter(100), normal (400), bold (700), bolder (900) p {font-variant: small-caps; font-weight: bold} * реально работают только значения: 400 и 700 (normal и bold)

CSS-Шрифт n font-stretch (ширина) (свойство убрано из CSS 2. 1, добавлено в CSS 3) q q q normal обычная ширина (по умолчанию) widerувеличение текущей ширины. narrower уменьшает текущую ширину на единицу. ultra-condensed - наименьшее значение ширины. extra-condensed - значение большее, чем предыдущее condensed значение большее, чем предыдущее. semi-condensed - значение большее, чем предыдущее. semi-expanded - значение большее, чем при обычной толщине. expanded значение большее, чем предыдущее. extra-expanded - значение большее, чем предыдущее. ultra-expanded - максимальное значение ширины.

CSS-Шрифт font-size n xx-small n x-small Коэф. ~1. 5 (CSS 1) n small 5 px – 54 px или ~1 -1. 2 (CSS 2) n medium 9 px – 28 px n large n x-large n xx-large n larger (больше), smaller (меньше) – относительный n в единицах измерения (px, pt, % …)

CSS-Шрифт n Сокращенная запись q p {font: oblique 12 pt "Helvetica Nue", serif; } * если в краткой записи задается шрифт, то обязательно должен быть задан и размер шрифта.

CSS-Свойства текста n text-indent q n text-align q q n p {text-indent: 20 px; } /* “красная строка” */ left center right justify Пример q p {text-align: center; }

CSS-Свойства текста n line-height q q p {line-height: 150%} В некоторых случаях: q p {line-height: 1. 5} (используют задание относительных величин)

CSS-визуальное форматирование n расстояние между базовыми линиями двух соседних строк (line-height) q q n p {line-height: 2. 2} * - не ставится размерность. p {font: 14 px/2. 2 bold red} vertical-align q q q middle - выравнивание средней линии элемента по базовой линии его родительского элемента top - выравнивание верхней части элемента по верхнему краю его текста. bottom - выравнивание нижней части элемента по базовой линии его родительского элемента. …… td {vertical-align: top}

CSS-Свойства текста n vertical-align q q q q q baseline (по умолчанию) sub (подстрочный) super (надстрочный) bottom text-bottom аналогично выравниванию текста рядом с middle графическими элементами top text-top численное (процентное) значение. n n n положительное значение – верхний индекс меняет высоту строки Появилось в CSS 2

CSS-Свойства текста n text-decoration q none - отсутствие элементов оформления (по умолчанию для текста). q underline – подчеркивание (по умолчанию для ссылок). q overline - линия над текстом. q line-through - перечеркивание. q blink – мерцание (не все поддерживают и не явл. обяз. ) Пример: q p {text-decoration: underline} Можно комбинировать q p {text-decoration: underline overline}

CSS-Свойства текста n letter-spacing q n word-spacing q n p { letter-spacing: 5 px } p {word-spacing: 2 px} white-space q q normal - пробелы сворачиваются, если это необходимо для размещения элемента. (по умолчанию) pre - пробелы обрабатываются так, как указано в коде (предварительно отформатированный текст) nowrap - сворачиваются все пробелы, т. е. строка не будет переводиться без элемента p { white-space: pre}

CSS-Свойства текста n text-transform q q q none - отсутствие изменения регистра (по умолчанию). capitalize - переводит первую букву каждого слова в верхний регистр. uppercase - переводит все буквы в верхний регистр. lowercase -переводит все буквы в нижний регистр. p {text-transform: uppercase}

CSS-Свойства текста (cвойство исключено в CSS 2. 1, добавлено в CSS 3) n text-shadow q q q h 1{text-shadow: blue 5 px 3 px} none - отсутствие значения (по умолчанию). color - цвет затенения текста. первое числовое значение, расстояние по горизонтали вправо от текста. второе числовое значение, расстояние по вертикали вниз от текста. третье числовое значение, соответствует стандарту - радиус нерезкости тени текста.