2. Cascading Style Sheets (каскадные таблицы стилей) —
язык разметки, специально разработанный для описания
внешнего вида, порядка, цвета и расположения элементов
на сайте.

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

4. Преимущества:

Разграничение кода и оформления

Разное оформление для разных устройств
Расширенные по сравнению с HTML способы оформления
элементов


Ускорение загрузки сайта

Единое стилевое оформление множества документов

5. Недостатки:
 Не поддерживается старыми версиями браузеров ( а так
же не полная кроссбраузерность)
 Необходимость иметь определенные начальные знания

6. Инструменты:

Блокнот

Adobe Dreamweaver

Microsoft FrontPage

Веб-ресурсы (http://colorzilla.com/gradient-editor/)

Rapid CSS Editor

Visual Studio

10. Параметры









Вид шрифта
Форматирование абзаца
Свойства блока
Фон, границы, указатель мыши и тд..
Способ обрезки фонового изображения
Свойство повтора фона
Возможность создавать круглые рамки
Отбрасывание тени
Создание многоколоночного текста

11. Селекторы
Для описания каждого класса используется следующая
конструкция:
selector{
attribute1: value;
attribute2: value;
...
attributei: value;
}

12. Если один и тот же стиль необходимо применить к
нескольким тегам, то записывается это через запятую
следующим образом:
Selector1, selector2, selector3{
attribute1: value;
attribute2: value;
...
attributei: value;
}
Например:
h1, h2, h3{ color: red;}

13. Подключение
Различают три типа подключения таблиц стилей на
странице:
1. Подставляемые стили (in-line)
2. Описание в секции заголовка
3. Внешний файл

14. Первый тип
Самый простой in-line, который встраивается непосредственно
в тег. При этом подходе оформление действует в пределах
одного тега.

15. Второй тип
Определение в секции заголовка. Определение стилей
происходит про помощи классов, которые представляют
собой списки с определением всех необходимых параметров
оформления. Его действие распространяется на всю
страничку.

16. Третий тип
И наконец, третий способ —
вынести описания стилей во
внешний файл. Диапазон его
воздействия простирается
на все файлы, в которые
включено описание.

17. Why so serious
Следует отметить, что стили могут переопределяться.
Порядок переопределения следующий:
1. Отдельный файл
2. Секция заголовка
3. In-line
Пример. Мы определили во внешнем файле, что текст в теге
<p> должен быть красным. Но если в заголовке странички
мы дополнительно укажем, что тот же текст в теге <p>
должен быть написан синим цветом, то текст будет выведен
как раз таки синим.

18. Правило !important
Правило !important — это способ сделать правила, которые должны
реагировать одинаково независимо о того, в какой части документа оно
применяется. Например, нужно задать чтобы цвет ссылок в любой части
документа был красным. Для этого в начале CSS-файла достаточно
прописать:
a { color: red !important;}
Далее везде, где бы мы не хотели переопределить цвет ссылок, он все
равно останется красным, даже если попытаться переопределить его в
самом теге.
<a href="" style="color: blue;">ссылка</a>

19. Эт-правила (@)
Импортирование:
@import присоединяет другую таблицу стилей.
Медиа-типы:
@media применит содержимое к определенному типу медиа, например, к печати.
Кодировка:
@charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в
верхней части таблицы CSS и выглядит примерно так:
@charset "windows-1251";
Шрифты:
@font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт
на компьютер пользователя.
Страницы:
@page определяет блок страницы. Благодаря этому правилу вы определяете размер и
представление единой страницы.

20. Типы носителя
Тип
all
Описание
Все типы. Это значение используется по умолчанию.
aural
Речевые синтезаторы, а также программы для
воспроизведения текста вслух. Сюда, например, можно
отнести речевые браузеры.
braille
Устройства, основанные на системе Брайля, которые
предназначены для слепых людей.
handheld
print
Наладонные компьютеры и аналогичные им аппараты.
Печатающие устройства вроде принтера.
projection Проектор.
screen
tv
Экран монитора.
Телевизор.

21. Валидация CSS
Валидацией называется проверка CSS-кода на соответствие
спецификации CSS2.1 или CSS3.
http://jigsaw.w3.org/css-validator/

22. CSS-хаки
CSS хаки они же - Вендорные префиксы,
вендорные суффиксы и вендорные окончания это приставки, используемые производителями
(вендорами) браузеров для экспериментальных,
еще не принятых в стандарт, CSS-свойств.
border-radius: 15px 0 15px 0; /* Валидное свойство CSS 3
скругление углов, значение(цифра) задаёт радиус скругления*/
-moz-border-radius:15px 0 15px 0; /* Firefox */
-webkit-border-radius:15px 0 15px 0; /* Safari, Chrome */
-khtml-border-radius:15px 0 15px 0; /* Konqueror */

23. Примеры хаков
Вендорный
префикс
Производитель
Браузер
Браузерный
движок
-o-, -op-, -xv-
Opera Software
Opera
Presto
-moz-
проект Mozilla
Firefox, SeaMonkey,
Camino и др.
Gecko
-ms-
Microsoft
Internet Explorer 8
Trident
-webkit-
Apple
Safari 3+, Google
Chrome и др.
WebKit
-icab-
Apple
iCab
WebKit

24. Единицы измерения
Относительные
Абсолютные
Единица
Описание
Единица
Описание
em
высота текущего
элемента
in
дюйм (= 2,54 cm)
cm
сантиметр
ex
высота символа х
mm
миллиметр
px
пиксель
%
процент
pt
пункт (=1/72 in)
pc
пика (=12 pt)

25. The end