CSS. (Лекція 3) - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

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

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

Слайд 1

Описание слайда:

CSS Лекція 3

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

Вступ 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 – це трафарет <body> <h1>Основний заголовок</h1> <p>Текст параграфа 1</p> <h2>Підзаголовок 1</h2> <p>Текст параграфа 2</p> <h2>Підзаголовок 1</h2> <p>Текст параграфа 3</p> </body>

Слайд 5

Описание слайда:

Вступ Розмітка, але вже з доданими тегами оформлення <body bgcolor="silver"> <h1 align="center"><font size="16px" color="red" face="Tahoma">Основний заголовок</font></h1> <p><font size="8px" color="gray" face="Arial">Текст параграфа 1</font></p> <h2><font size="10px" face="Tahoma">Підзаголовок 1</font></h2> <p><font size="8px" color="gray" face="Arial">Текст параграфа 2</font></p> <h2><font size="10px" face="Tahoma">Підзаголовок 2</font></h2> <p><font size="8px" color="gray" face="Arial">Текст параграфа 3</font></p> </body>

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

Селектори Селектори класів .caution { color: red; } <h2 class = "caution">Важливий заголовок</h2> <p>Параграф, в якому є <span class = "caution"> важливий текст </span> </p>

Слайд 11

Описание слайда:

Селектори Множинні класи <div class="heading red">Червоний заголовок</div> <div class="red">Червоний заголовок</div> div.heading { font-size: 50px; } div.red { color: red; }

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

Селектори <div id="heading red"> Червоний заголовок </div> div#heading { font-size: 50px; } div#red { color: red; }

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

Селектори Комбінування селекторів 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; } <p class="italic">Цей параграф буде виділений курсивним шрифтом.</p> <p class="italic">Цей параграф буде виділений курсивним шрифтом.</p>

Слайд 17

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

Описание слайда:

Селектори Простий вибір атрибутів [title] { color: red; } Вибір на підставі конкретного значення атрибуту a[target="_blank"] { color: red; } Вибір по частковому значенню атрибута * Будь-яка частина рядка $ кінець рядка ^ початок рядка [href*="google"] { color: red; } [href^="https://"] { 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:focus { color: yellow }

Слайд 19

Описание слайда:

Псевдокласи стану <input type="text" placeholder="У фокусі зміниться колір" <button>Якщо клікнути зміниться колір</button> <a href="/">Під час наведення зміниться колір</a> input: focus { background: blue; } button: active { background: green; } a: hover { color: red; }

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

Струкрурные пседвоклассы Структурные псевдоэлементы :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> ul 1.1 <li> li 2.1 </li> <li> li 2.2 </li> <li> li 3.2 <ul> ul 3.1 <li> li 4.1 </li> <li> li 4.2 </li> </ul> <ul> ul 3.2 <li> li 4.3 </li> </ul> </li> </ul> <p>p1.2</p>

Слайд 24

Описание слайда:

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

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

Слайд 30

Описание слайда:

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

Слайд 31

Описание слайда:

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

Слайд 32

Описание слайда:

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

Слайд 33

Описание слайда:

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

Слайд 34

Описание слайда:

Отношения родитель-потомок Селекторы потомков 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> ul 1.1 <li> li 2.1 </li> <li> li 2.2 </li> <li> li 2.3 <ul> ul 3.1 <li> li 4.1 </li> <li> li 4.2 </li> </ul> <ul> ul 3.2 <li> li 4.3 </li> </ul> </li> </ul> <p>p1.2</p>

Слайд 36

Описание слайда:

Слайд 37

Описание слайда:

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

Слайд 38

Описание слайда:

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

Слайд 39

Описание слайда:

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

Слайд 40

Описание слайда:

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

Слайд 41

Описание слайда:

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

Слайд 42

Описание слайда:

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

Слайд 43

Описание слайда:

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

Слайд 44

Описание слайда:

Специфичность Значение специфичности : 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 */ *.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; } /* 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 <div style="color: blue"></div> /* 1, 0, 0, 0 */ div { color: green !important; } Инлайн стили по-умолчанию приоритетнее стилей в CSS () Стили в CSS с !important приоритетнее инлайн стилей Инлайн стили с !important приоритетнее всего

Слайд 48

Описание слайда:

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

Слайд 49

Описание слайда:

Наследование * { color: red; /* 0 0 0 */ } div { color: green; /* 0 0 1 */ } <div> <abbr title="Cascading Style Sheets"> CSS </abbr> - Каскадные таблицы стилей </div>

Слайд 50

Описание слайда:

Наследование Стили которые наследуются 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; }

Слайд 52

Описание слайда:

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

Слайд 53

Описание слайда:

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

Слайд 54

Описание слайда:

Значения и единицы измерения Абсолютные единицы измерения длины Миллиметры (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 или #f00

Слайд 56

Описание слайда:

Цвета 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 на страницу <div style="color: red"></div> <style>@import (<url to css>)</style> <style>div { color: red }</style> <link rel="stylesheet" href="<url to css>">