CSS Cascading Style Sheets

Типы стилей: 1. Стиль браузера 2. Стиль автора 3. Стиль пользователя

Стиль автора: 1. Подключаемые стили 2. Глобальные стили 3. Внутренние стили

@-правила url("style.css") [типы носителей];

Типы носителей: all все типы (по умолчанию) aural речевые синтезаторы и браузеры braille устройства на системе Брайля handheld наладонные компьютеры, КПК print печатающие устройства screen экран монитора tv телевизоры

@charset указание "utf-8";

@font-face настройка/загрузка { font-family: 'Myriad Pro'; src: url(fonts/myriad_pro.ttf); }

@page поля страниц при [ { :left | :right | :first } ] { значение :first { margin: 1cm; :left { margin: 1cm 3cm 1cm 1.5cm; }

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

p { background: white; } p { color: black; } p { border: 1px solid black; } p { background: white; color: black; border: 1px solid black; }

/*p { background: white; }*/ p { color: black; } p { border: 1px solid black; } p { /*background: white; color: black; border: 1px solid black;*/ }

Значения: относительные размеры в css em высота шрифта текущего элемента ex высота символа x px пиксель % процент

Значения: абсолютные размеры в css in дюйм cm сантиметр mm миллиметр pt пункт (1/72 дюйма) pc пика (12 пунктов)

Значения: цвета в css Red Green Blue 1. #rgb # по названию green, black, white 3. rgb rgb(255, 0, 0)

Значения: ссылки на файлы url('путь_к_файлу/название_файла'); url('images/logo.gif'); url('

Значения: ключевые слова border: none; height: inherit;

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

Селекторы div { } селектор по тегу.class { } селектор по классу #id { } селектор по id

HTML: CSS: div { }.content { } #main { }

HTML: CSS: div.content { } div#main { }

HTML Заголовок CSS (контекстные селекторы) div h1 { }.block.header { } div.block h1.header { }

HTML Заголовок Текст CSS (соседние селекторы) h1 + p { }.header + p { }

HTML Заголовок Наклонный текст CSS (дочерние селекторы) p > i { } выберет div > i { } не выберет

HTML CSS (селекторы атрибутов) [type] { } input[type] { } [name] { }

HTML CSS (селекторы атрибутов по значению) [type="text"] { } точное соответствие [type^="te"] { } начинается с te [type$="xt"] { } заканчивается на xt [type*="e"] { } содержит e

HTML CSS (универсальный селектор) * { } выберет все элементы

HTML example CSS (псевдоклассы) a:link { } непосещённые ссылки a:visited { } посещённые ссылки a:hover { } элементы при наведении курсора a:active { } активные элементы

HTML Элементы, не определённые в HTML CSS (псевдоэлементы) p:before { } новый элемент перед элементом p:after { } новый элемент после элемента p:first-letter { } первая буква текста p:first-line { } первая строка текста

Группирование Было: h1 { (1); (2); (3); } h2 { (1); (2); (4); } h3 { (1); (2); (5); } Стало: h1, h2, h3 { (1); (2); } h1 { (3); } h2 { (4); } h3 { (5); }

HTML Вступительный текст Текст абзаца CSS (пример наследования) div { font-size: 16px; } элемент унаследует размер шрифта

HTML Текст абзаца CSS (пример каскада).block p { (1); } #first { (2); } div p { (3); } div.block p#first { (4); }

Вес селекторов 0 0 !important; #id.class div div p.example { } вес селектора

HTML Текст абзаца CSS (веса селекторов).block p { (1); } вес #first { (2); } вес div p { (3); } вес div.block p#first { (4); } вес

CSS-фреймворки reset.css: Blueprint: framework.ru/ framework.ru/ Yaml: Twitter Bootstrap: