CSS Cascading Style Sheets. Типы стилей: 1. Стиль браузера 2. Стиль автора 3. Стиль пользователя. - презентация

1 CSS Cascading Style Sheets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

17

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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