🗊 Презентация CSS. (Лекція 3)

Нажмите для полного просмотра!
CSS. (Лекція 3), слайд №1 CSS. (Лекція 3), слайд №2 CSS. (Лекція 3), слайд №3 CSS. (Лекція 3), слайд №4 CSS. (Лекція 3), слайд №5 CSS. (Лекція 3), слайд №6 CSS. (Лекція 3), слайд №7 CSS. (Лекція 3), слайд №8 CSS. (Лекція 3), слайд №9 CSS. (Лекція 3), слайд №10 CSS. (Лекція 3), слайд №11 CSS. (Лекція 3), слайд №12 CSS. (Лекція 3), слайд №13 CSS. (Лекція 3), слайд №14 CSS. (Лекція 3), слайд №15 CSS. (Лекція 3), слайд №16 CSS. (Лекція 3), слайд №17 CSS. (Лекція 3), слайд №18 CSS. (Лекція 3), слайд №19 CSS. (Лекція 3), слайд №20 CSS. (Лекція 3), слайд №21 CSS. (Лекція 3), слайд №22 CSS. (Лекція 3), слайд №23 CSS. (Лекція 3), слайд №24 CSS. (Лекція 3), слайд №25 CSS. (Лекція 3), слайд №26 CSS. (Лекція 3), слайд №27 CSS. (Лекція 3), слайд №28 CSS. (Лекція 3), слайд №29 CSS. (Лекція 3), слайд №30 CSS. (Лекція 3), слайд №31 CSS. (Лекція 3), слайд №32 CSS. (Лекція 3), слайд №33 CSS. (Лекція 3), слайд №34 CSS. (Лекція 3), слайд №35 CSS. (Лекція 3), слайд №36 CSS. (Лекція 3), слайд №37 CSS. (Лекція 3), слайд №38 CSS. (Лекція 3), слайд №39 CSS. (Лекція 3), слайд №40 CSS. (Лекція 3), слайд №41 CSS. (Лекція 3), слайд №42 CSS. (Лекція 3), слайд №43 CSS. (Лекція 3), слайд №44 CSS. (Лекція 3), слайд №45 CSS. (Лекція 3), слайд №46 CSS. (Лекція 3), слайд №47 CSS. (Лекція 3), слайд №48 CSS. (Лекція 3), слайд №49 CSS. (Лекція 3), слайд №50 CSS. (Лекція 3), слайд №51 CSS. (Лекція 3), слайд №52 CSS. (Лекція 3), слайд №53 CSS. (Лекція 3), слайд №54 CSS. (Лекція 3), слайд №55 CSS. (Лекція 3), слайд №56 CSS. (Лекція 3), слайд №57 CSS. (Лекція 3), слайд №58 CSS. (Лекція 3), слайд №59

Содержание

Вы можете ознакомиться и скачать презентацию на тему CSS. (Лекція 3). Доклад-сообщение содержит 59 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1


CSS Лекція 3
Описание слайда:
CSS Лекція 3

Слайд 2


CSS Лекція 3 Введение Селекторы Специфичность Важность Наследование Каскад Значения и единицы измерения Добавление CSS на страницу Типы устройств
Описание слайда:
CSS Лекція 3 Введение Селекторы Специфичность Важность Наследование Каскад Значения и единицы измерения Добавление CSS на страницу Типы устройств

Слайд 3


Вступ CSS - мова стилів, що визначає відображення HTML-документів. CSS працює зі шрифтами, кольором, полями, рядками, висотою, шириною, фоновими...
Описание слайда:
Вступ CSS - мова стилів, що визначає відображення HTML-документів. CSS працює зі шрифтами, кольором, полями, рядками, висотою, шириною, фоновими зображеннями, позиціонуванням елементів і багатьма іншими речами. Основні етапи розвитку CSS рівень 1 (1996, 1999) - параметри шрифтів, кольору, ... CSS рівень 2 (12 травня 1998), CSS 2.1 (7 червня 2011) - блокова верстка, селектори, ... CSS рівень 2.1 (7 червня 2011) CSS рівнів 3 знаходиться в стадії розробки - трансформації, анімація, ... CSS рівнів 4 розробляється з 29 вересня 2011 року.

Слайд 4


Вступ HTML – це трафарет Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 1 Текст параграфа 3
Описание слайда:
Вступ HTML – це трафарет Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 1 Текст параграфа 3

Слайд 5


Вступ Розмітка, але вже з доданими тегами оформлення Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 2 Текст...
Описание слайда:
Вступ Розмітка, але вже з доданими тегами оформлення Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 2 Текст параграфа 3

Слайд 6


Вступ CSS: причини появи Надлишковість HTML Більше можливостей для оформлення Спрощення оформлення сторінки Поділ контенту і візуальної складової...
Описание слайда:
Вступ CSS: причини появи Надлишковість HTML Більше можливостей для оформлення Спрощення оформлення сторінки Поділ контенту і візуальної складової сторінки

Слайд 7


Селектори селектор, селектор, селектор { /* блок объявления стилей */ свойство: значение; свойство: значение; свойство: значение; свойство: значение;...
Описание слайда:
Селектори селектор, селектор, селектор { /* блок объявления стилей */ свойство: значение; свойство: значение; свойство: значение; свойство: значение; свойство: значение }

Слайд 8


Селектори p { font-saze: 12px; /* неизвестное значение (правильно font-size) */ color: ultraviolet; /* неизвестное значение (нет такого цвета) */ }...
Описание слайда:
Селектори p { font-saze: 12px; /* неизвестное значение (правильно font-size) */ color: ultraviolet; /* неизвестное значение (нет такого цвета) */ } h1 { font: italic 40px Tahoma; /* три значения для одного свойства */ }

Слайд 9


Селектори Групування селекторів h1, p { color: blue; } Універсальний селектор * { color: green; }
Описание слайда:
Селектори Групування селекторів h1, p { color: blue; } Універсальний селектор * { color: green; }

Слайд 10


Селектори Селектори класів .caution { color: red; } Важливий заголовок Параграф, в якому є важливий текст
Описание слайда:
Селектори Селектори класів .caution { color: red; } Важливий заголовок Параграф, в якому є важливий текст

Слайд 11


Селектори Множинні класи Червоний заголовок Червоний заголовок div.heading { font-size: 50px; } div.red { color: red; }
Описание слайда:
Селектори Множинні класи Червоний заголовок Червоний заголовок div.heading { font-size: 50px; } div.red { color: red; }

Слайд 12


Селектори Селектори ідентифікаторів Атрибут id – задає унікальний ідентифікатор елемента. Червоний заголовок div#heading { font-size: 50px; } div#red...
Описание слайда:
Селектори Селектори ідентифікаторів Атрибут id – задає унікальний ідентифікатор елемента. Червоний заголовок div#heading { font-size: 50px; } div#red { color: red; }

Слайд 13


Селектори Червоний заголовок div#heading { font-size: 50px; } div#red { color: red; }
Описание слайда:
Селектори Червоний заголовок div#heading { font-size: 50px; } div#red { color: red; }

Слайд 14


Селектори Універсальний селектор * { color: red; } Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 2 Текст...
Описание слайда:
Селектори Універсальний селектор * { color: red; } Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 2 Текст параграфа 3

Слайд 15


Селектори Комбінування селекторів div.myclass { color: red; } div.class1.class2 { color: red; } div#id1 { color: red; } div#id1.class1 { color: red;...
Описание слайда:
Селектори Комбінування селекторів div.myclass { color: red; } div.class1.class2 { color: red; } div#id1 { color: red; } div#id1.class1 { color: red; } div#id1#id2 { color: red; } *.class1 { color: red; } .class1 { color: red; }

Слайд 16


Селектори Селектори атрибутів .italic { font-style: italic; } [class="italic"] { color: red; } Цей параграф буде виділений курсивним...
Описание слайда:
Селектори Селектори атрибутів .italic { font-style: italic; } [class="italic"] { color: red; } Цей параграф буде виділений курсивним шрифтом. Цей параграф буде виділений курсивним шрифтом.

Слайд 17


Селектори Простий вибір атрибутів [title] { color: red; } Вибір на підставі конкретного значення атрибуту a[target="_blank"] { color: red;...
Описание слайда:
Селектори Простий вибір атрибутів [title] { color: red; } Вибір на підставі конкретного значення атрибуту a[target="_blank"] { color: red; } Вибір по частковому значенню атрибута * Будь-яка частина рядка $ кінець рядка ^ початок рядка [href*="google"] { color: red; } [href^=" { color: red; } [href$=“google.com"] { color: red; }

Слайд 18


Селектори псевдокласів Динамічні псевдокласи a:link { color: blue } a:active { color: red } a:hover { color: green } a:visited { color: purple }...
Описание слайда:
Селектори псевдокласів Динамічні псевдокласи a:link { color: blue } a:active { color: red } a:hover { color: green } a:visited { color: purple } a:focus { color: yellow }

Слайд 19


Псевдокласи стану
Описание слайда:
Псевдокласи стану

Слайд 20


Псевдокласи стану :enabled :disabled :checked :indeterminate :read-only :valid
Описание слайда:
Псевдокласи стану :enabled :disabled :checked :indeterminate :read-only :valid

Слайд 21


Струкрурные пседвоклассы li:first-child { color: green; } Способы подключения CSS на страницу Связанные стили Глобальные стили Внутренние стили
Описание слайда:
Струкрурные пседвоклассы li:first-child { color: green; } Способы подключения CSS на страницу Связанные стили Глобальные стили Внутренние стили

Слайд 22


Струкрурные пседвоклассы Структурные псевдоэлементы :root :first-child/last-child :nth-child()/nth-last-child() :first-of-type/:last-of-type...
Описание слайда:
Струкрурные пседвоклассы Структурные псевдоэлементы :root :first-child/last-child :nth-child()/nth-last-child() :first-of-type/:last-of-type :nth-of-type()/nth-last-of-type() :only-child/only-of-type :empty

Слайд 23


Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2
Описание слайда:
Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2

Слайд 24


Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2
Описание слайда:
Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2

Слайд 25


Струкрурные пседвоклассы :first-child { background-color :#FF00FF; color: yellow; }
Описание слайда:
Струкрурные пседвоклассы :first-child { background-color :#FF00FF; color: yellow; }

Слайд 26


Струкрурные пседвоклассы :last-child { background-color :#FF00FF; color: yellow; }
Описание слайда:
Струкрурные пседвоклассы :last-child { background-color :#FF00FF; color: yellow; }

Слайд 27


Струкрурные пседвоклассы :only-child { background-color :#FF00FF; color: yellow; }
Описание слайда:
Струкрурные пседвоклассы :only-child { background-color :#FF00FF; color: yellow; }

Слайд 28


Струкрурные пседвоклассы :nth-child(2n) { background-color :#FF00FF; color: yellow; }
Описание слайда:
Струкрурные пседвоклассы :nth-child(2n) { background-color :#FF00FF; color: yellow; }

Слайд 29


Струкрурные пседвоклассы li:nth-of-type(2n) { background-color :#FF00FF; color: yellow; }
Описание слайда:
Струкрурные пседвоклассы li:nth-of-type(2n) { background-color :#FF00FF; color: yellow; }

Слайд 30


Струкрурные псевдоклассы :nth-of-type(2n) { background-color :#FF00FF; color: yellow; }
Описание слайда:
Струкрурные псевдоклассы :nth-of-type(2n) { background-color :#FF00FF; color: yellow; }

Слайд 31


Селекторы псевдоэлементов ::first-letter { color: red } ::first-line { color: blue } Перший рядок Другий рядок Перший рядок Другий рядок
Описание слайда:
Селекторы псевдоэлементов ::first-letter { color: red } ::first-line { color: blue } Перший рядок Другий рядок Перший рядок Другий рядок

Слайд 32


Селекторы псевдоэлементов body:before { content: '=початок='; color: green; } body:after { content: '=кінець='; color: red; }
Описание слайда:
Селекторы псевдоэлементов body:before { content: '=початок='; color: green; } body:after { content: '=кінець='; color: red; }

Слайд 33


Отношения родитель-потомок
Описание слайда:
Отношения родитель-потомок

Слайд 34


Отношения родитель-потомок Селекторы потомков nav a { color: red; text-decoration: none; } Выбор дочерних элементов h1 > strong { color: red; } Выбор...
Описание слайда:
Отношения родитель-потомок Селекторы потомков nav a { color: red; text-decoration: none; } Выбор дочерних элементов h1 > strong { color: red; } Выбор соседних элементов h1 + p { margin-top: 0; } Выбор сестринских элементов li ~ li {color: blue; } Селектор отрицания td:empty { background: red; } td:not(:empty) { background: green; }

Слайд 35


Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2
Описание слайда:
Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2

Слайд 36


Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2
Описание слайда:
Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 ul 3.1 li 4.1 li 4.2 ul 3.2 li 4.3 p1.2

Слайд 37


Отношения родитель-потомок ul li { background-color :#FF00FF; color: yellow; }
Описание слайда:
Отношения родитель-потомок ul li { background-color :#FF00FF; color: yellow; }

Слайд 38


Отношения родитель-потомок li li{ background-color :#FF00FF; color: yellow; }
Описание слайда:
Отношения родитель-потомок li li{ background-color :#FF00FF; color: yellow; }

Слайд 39


Отношения родитель-потомок body > *{ background-color :#FF00FF; color: yellow; }
Описание слайда:
Отношения родитель-потомок body > *{ background-color :#FF00FF; color: yellow; }

Слайд 40


Отношения родитель-потомок li:first-child + li{ background-color :#FF00FF; color: yellow; }
Описание слайда:
Отношения родитель-потомок li:first-child + li{ background-color :#FF00FF; color: yellow; }

Слайд 41


Отношения родитель-потомок li:first-child ~ li{ background-color :#FF00FF; color: yellow; }
Описание слайда:
Отношения родитель-потомок li:first-child ~ li{ background-color :#FF00FF; color: yellow; }

Слайд 42


Отношения родитель-потомок li:not(:first-child){ background-color :#FF00FF; color: yellow; }
Описание слайда:
Отношения родитель-потомок li:not(:first-child){ background-color :#FF00FF; color: yellow; }

Слайд 43


Специфичность h1 { color: red; } body h1 { color: green; }
Описание слайда:
Специфичность h1 { color: red; } body h1 { color: green; }

Слайд 44


Специфичность Значение специфичности : 0, 0, 0, 0. Для каждого указанного в селекторе значения идентификатора к специфичности добавляется 0, 1, 0, 0....
Описание слайда:
Специфичность Значение специфичности : 0, 0, 0, 0. Для каждого указанного в селекторе значения идентификатора к специфичности добавляется 0, 1, 0, 0. Для каждого указанного в селекторе имени класса, псевдокласса или атрибута к специфичности добавляется 0, 0, 1, 0. Для каждого заданного в селекторе элемента и псевдоэлемента к специфичности добавляется 0, 0, 0, 1. Универсальный селектор не учитывается

Слайд 45


Специфичность Примеры: h1 { color: red; } /* 0, 0, 0, 1 */ p em { color: purple; } /* 0, 0, 0, 2 */ .grape { color: purple;} /* 0, 0, 1, 0 */...
Описание слайда:
Специфичность Примеры: h1 { color: red; } /* 0, 0, 0, 1 */ p em { color: purple; } /* 0, 0, 0, 2 */ .grape { color: purple;} /* 0, 0, 1, 0 */ *.bright { color: yellow;} /* 0, 0, 1, 0 */ p.bright em.dark{ color: maroon;} /* 0, 0, 2, 2 */ #id216 { color: blue; } /* 0, 1, 0, 0 */ div#sidebar [href] { color: silver; } /* = 0, 1, 1, 1 */ * { color: yellow; } /* 0, 0, 0, 0 */ h1 {color: red;} /* 0, 0, 0, 1 */ body h1 {color: green;} /* 0, 0, 0, 2 (победитель) */

Слайд 46


Специфичность Специфичность с группированными селекторами h1, h2.section { color: silver; background: black; } h1 { color: silver; background: black;...
Описание слайда:
Специфичность Специфичность с группированными селекторами h1, h2.section { color: silver; background: black; } h1 { color: silver; background: black; } /* 0, 0, 0, 1 */ h2.section { color: silver; background: black; } /* 0, 0, 1, 1 */ Специфичность селекторов идентификаторов и атрибутов #uniq { color: green; } /* 0, 1, 0, 0 */ [id='uniq'] { color: red; } /* 0, 0, 1, 0 */

Слайд 47


Специфичность Инлайн и !important /* 1, 0, 0, 0 */ div { color: green !important; } Инлайн стили по-умолчанию приоритетнее стилей в CSS () Стили в...
Описание слайда:
Специфичность Инлайн и !important /* 1, 0, 0, 0 */ div { color: green !important; } Инлайн стили по-умолчанию приоритетнее стилей в CSS () Стили в CSS с !important приоритетнее инлайн стилей Инлайн стили с !important приоритетнее всего

Слайд 48


Наследование Некоторые стили применяются не только к целевому элементу, но и к его потомкам Унаследованные стили не имеют специфичности, т.е их...
Описание слайда:
Наследование Некоторые стили применяются не только к целевому элементу, но и к его потомкам Унаследованные стили не имеют специфичности, т.е их всегда перебивает любой селектор Именно поэтому не рекомендуют пользоваться селектором * div { color: green; /* 0 0 1 */ } CSS - Каскадные таблицы стилей

Слайд 49


Наследование * { color: red; /* 0 0 0 */ } div { color: green; /* 0 0 1 */ } CSS - Каскадные таблицы стилей
Описание слайда:
Наследование * { color: red; /* 0 0 0 */ } div { color: green; /* 0 0 1 */ } CSS - Каскадные таблицы стилей

Слайд 50


Наследование Стили которые наследуются color cursor direction empty-cells font-family font-size font-weight font-style font-variant font...
Описание слайда:
Наследование Стили которые наследуются color cursor direction empty-cells font-family font-size font-weight font-style font-variant font letter-spacing list-style-type list-style-position list-style-image list-style line-height quotes text-align text-indent text-transform visibility white-space word-spacing

Слайд 51


Каскад h1 { color: red; } h1 { color: blue; }
Описание слайда:
Каскад h1 { color: red; } h1 { color: blue; }

Слайд 52


Каскад Сортировка по приоритетности и источнику Порядок применения: Стили браузера Стили пользователя и/или плагинов браузера Стили страницы Стили...
Описание слайда:
Каскад Сортировка по приоритетности и источнику Порядок применения: Стили браузера Стили пользователя и/или плагинов браузера Стили страницы Стили страницы с !important Стили пользователя и/или плагинов браузера с !important Сортировка по порядку расположения: h1 { color: red; } h1 { color: blue; } /* имеет более высокий приоритет*/

Слайд 53


Значения и единицы измерения Числовые значения: Целые числа (1, 2, 3...) Дробные числа (1.5) Процентные значения (50%)
Описание слайда:
Значения и единицы измерения Числовые значения: Целые числа (1, 2, 3...) Дробные числа (1.5) Процентные значения (50%)

Слайд 54


Значения и единицы измерения Абсолютные единицы измерения длины Миллиметры (mm) Сантиметры (cm) Дюймы (in) Пункты – используется в типографиях, 1...
Описание слайда:
Значения и единицы измерения Абсолютные единицы измерения длины Миллиметры (mm) Сантиметры (cm) Дюймы (in) Пункты – используется в типографиях, 1 дюйм = 72 пункта (pt) Пики – 12 пунктов (pc) Абсолютные единицы удобны при определении CSS для печати. В вебе же практически не используются Относительные единицы измерения длины пикселы (px) em – зависит от размера шрифта (em) rem – зависит от размера шрифта корневого элемента (rem) ex – зависит от высоты символа x в данном шрифте ch – зависит от ширины символа 0 в данном шрифте vh/vw – 1/100 высоты и ширины vieport'а соответственно vmax – 1/100 от максимума между высотой и шириной vieport'а vmin – 1/100 от минимума между высотой и шириной vieport'а

Слайд 55


Цвета Способы задания красного цвета Именованные цвета – red Функциональный – rgb(255, 0, 0) или rgba(255, 0, 0, 1) Шестнадцатиричный – #ff0000 или...
Описание слайда:
Цвета Способы задания красного цвета Именованные цвета – red Функциональный – rgb(255, 0, 0) или rgba(255, 0, 0, 1) Шестнадцатиричный – #ff0000 или #f00

Слайд 56


Цвета h1 { color: fuchsia; } p { background: yellow; } .red { color: #ff0000; } .orange { color: #eea837; } .red { color: #f00; } /* #f00 = #ff0000...
Описание слайда:
Цвета h1 { color: fuchsia; } p { background: yellow; } .red { color: #ff0000; } .orange { color: #eea837; } .red { color: #f00; } /* #f00 = #ff0000 */ .gray { color: #888; } /* #888 = #888888 */ p { color: rgb( 40%, 40%, 40% ); } p { color: rgb( 102, 102, 102 ); } p { color: rgba( 40%, 40%, 40%, 0.5 ); } p { color: rgba( 102, 102, 102, 0.8 ); }

Слайд 57


Добавление CSS на страницу @import () div { color: red }
Описание слайда:
Добавление CSS на страницу @import () div { color: red }

Слайд 58


Типы устройств
Описание слайда:
Типы устройств

Слайд 59


CSS. (Лекція 3), слайд №59
Описание слайда:



Теги Лекц
Похожие презентации
Mypresentation.ru
Загрузить презентацию