Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

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

Содержание

CSS Лекція 3ВведениеСелекторыСпецифичностьВажностьНаследованиеКаскадЗначения и единицы измеренияДобавление CSS на страницуТипы устройств
CSS Лекція 3 CSS Лекція 3ВведениеСелекторыСпецифичностьВажностьНаследованиеКаскадЗначения и единицы измеренияДобавление CSS на страницуТипы устройств ВступCSS - мова стилів, що визначає відображення HTML-документів.CSS працює зі шрифтами, кольором, ВступHTML – це трафарет Основний заголовок Текст параграфа 1 Підзаголовок 1 Текст параграфа 2 Підзаголовок 1 Текст параграфа 3 ВступРозмітка, але вже з доданими тегами оформлення Основний заголовок Текст ВступCSS: причини появиНадлишковість HTMLБільше можливостей для оформленняСпрощення оформлення сторінкиПоділ контенту і візуальної Селекториселектор,селектор,селектор { /* блок объявления стилей */ свойство: значение; свойство: Селекториp { font-saze: 12px; /* неизвестное значение (правильно font-size) */ СелекториГрупування селекторівh1, p { color: blue;}Універсальний селектор* { color: green;} СелекториСелектори класів.caution { color: red;}Важливий заголовок Параграф, в якому є важливий текст СелекториМножинні класиЧервоний заголовокЧервоний заголовокdiv.heading { font-size: 50px;}div.red { color: red;} СелекториСелектори ідентифікаторівАтрибут id – задає унікальний ідентифікатор елемента. Червоний заголовок div#heading { Селектори Червоний заголовок div#heading { font-size: 50px;}div#red { color: red;} СелекториУніверсальний селектор* { color: red;}Основний заголовокТекст параграфа 1Підзаголовок 1Текст параграфа 2Підзаголовок 2Текст параграфа 3 СелекториКомбінування селекторівdiv.myclass { color: red; }div.class1.class2 { color: red; }div#id1 { color: СелекториСелектори атрибутів.italic { font-style: italic;}[class= СелекториПростий вибір атрибутів[title] { color: red; }Вибір на підставі конкретного значення атрибутуa[target= Селектори псевдокласівДинамічні псевдокласиa:link { color: blue }a:active { color: red }a:hover { Псевдокласи стану Псевдокласи стану:enabled:disabled:checked:indeterminate:read-only:valid Струкрурные пседвоклассыli:first-child{ color: green;}Способы подключения CSS на страницу Связанные стили Струкрурные пседвоклассыСтруктурные псевдоэлементы: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 Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 li 3.2 Струкрурные пседвоклассы:first-child { background-color :#FF00FF; color: yellow; } Струкрурные пседвоклассы:last-child { background-color :#FF00FF; color: yellow; } Струкрурные пседвоклассы:only-child { background-color :#FF00FF; color: yellow; } Струкрурные пседвоклассы:nth-child(2n) { background-color :#FF00FF; color: yellow; } Струкрурные пседвоклассыli:nth-of-type(2n) { background-color :#FF00FF; color: yellow; } Струкрурные псевдоклассы:nth-of-type(2n) { background-color :#FF00FF; color: yellow; } Селекторы псевдоэлементов::first-letter { color: red }::first-line { color: blue }Перший рядокДругий рядок Селекторы псевдоэлементовbody:before { content: '=початок='; color: green; }body:after { Отношения родитель-потомок Отношения родитель-потомокСелекторы потомковnav a { color: red; text-decoration: none; }Выбор дочерних элементовh1 Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 li 2.3 Отношения родитель-потомокul li { background-color :#FF00FF; color: yellow; } Отношения родитель-потомокli li{ background-color :#FF00FF; color: yellow; } Отношения родитель-потомокbody > *{ background-color :#FF00FF; color: yellow; } Отношения родитель-потомокli:first-child + li{ background-color :#FF00FF; color: yellow; } Отношения родитель-потомокli:first-child ~ li{ background-color :#FF00FF; color: yellow; } Отношения родитель-потомок li:not(:first-child){ background-color :#FF00FF; color: yellow; } Специфичностьh1 { color: red; }body h1 { color: green; } СпецифичностьЗначение специфичности : 0, 0, 0, 0. Для каждого указанного в селекторе СпецифичностьПримеры:h1 { color: red; } /* 0, 0, 0, 1 */p em СпецифичностьСпецифичность с группированными селекторамиh1, h2.section { color: silver; background: black; }h1 { СпецифичностьИнлайн и !important /* 1, 0, 0, 0 */ НаследованиеНекоторые стили применяются не только к целевому элементу, но и к его Наследование* { color: red; /* 0 0 0 */}div { НаследованиеСтили которые наследуютсяcolorcursordirectionempty-cellsfont-familyfont-sizefont-weightfont-stylefont-variantfontletter-spacinglist-style-typelist-style-positionlist-style-imagelist-styleline-heightquotestext-aligntext-indenttext-transformvisibilitywhite-spaceword-spacing Каскадh1 { color: red; }h1 { color: blue; }Найти все правила, содержащие КаскадСортировка по приоритетности и источникуПорядок применения:Стили браузераСтили пользователя и/или плагинов браузераСтили страницыСтили Значения и единицы измеренияЧисловые значения:Целые числа (1, 2, 3...)Дробные числа (1.5)Процентные значения (50%) Значения и единицы измеренияАбсолютные единицы измерения длиныМиллиметры (mm)Сантиметры (cm)Дюймы (in)Пункты – используется ЦветаСпособы задания красного цветаИменованные цвета – redФункциональный – rgb(255, 0, 0) или Цветаh1 { color: fuchsia; }p { background: yellow; }.red { color: #ff0000; Добавление CSS на страницу @import () Типы устройств
Слайды презентации

Слайд 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
Текст

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

параграфа 2
Підзаголовок 1
Текст параграфа 3

Слайд 5 Вступ
Розмітка, але вже з доданими тегами оформлення

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

Основний заголовок

size="8px" color="gray" face="Arial">Текст параграфа 1


Підзаголовок 1


Текст параграфа 2


Підзаголовок 2


Текст параграфа 3



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

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

сторінки
Поділ контенту і візуальної складової сторінки


Основний заголовок
Текст параграфа 1
Підзаголовок

1

Текст параграфа 2


Підзаголовок 1


Текст параграфа 3




Слайд 7 Селектори





селектор,
селектор,
селектор { /* блок объявления стилей */

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

свойство: значение;
свойство: значение;
свойство: значение;

свойство: значение;
свойство: значение
}

Слайд 8 Селектори
p {
font-saze: 12px; /* неизвестное

Селекториp { font-saze: 12px; /* неизвестное значение (правильно font-size) */

значение (правильно font-size) */
color: ultraviolet; /* неизвестное значение

(нет такого цвета) */
}

h1 {
font: italic 40px Tahoma; /* три значения для одного свойства */
}

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

Універсальний селектор
* {

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

color: green;
}

Слайд 10 Селектори
Селектори класів
.caution {
color: red;
}

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

"caution">Важливий заголовок
Параграф, в якому є

"caution"> важливий текст


Слайд 11 Селектори
Множинні класи
Червоний заголовок
Червоний заголовок

div.heading {

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

font-size: 50px;
}
div.red {
color: red;
}

Слайд 12 Селектори
Селектори ідентифікаторів
Атрибут id – задає унікальний ідентифікатор елемента.

СелекториСелектори ідентифікаторівАтрибут id – задає унікальний ідентифікатор елемента. Червоний заголовок div#heading

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

color: red;
}

Слайд 13
Селектори
Червоний заголовок

div#heading {

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

font-size: 50px;
}
div#red {
color: red;
}


Слайд 14 Селектори
Універсальний селектор

* {
color: red;
}

Основний заголовок
Текст параграфа

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

1
Підзаголовок 1
Текст параграфа 2
Підзаголовок 2
Текст параграфа 3

Слайд 15 Селектори
Комбінування селекторів

div.myclass { color: red; }
div.class1.class2 { color:

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

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=

class="italic">Цей параграф буде виділений курсивним шрифтом.
Цей параграф

буде виділений курсивним шрифтом.



Слайд 17 Селектори
Простий вибір атрибутів
[title] { 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 {

Селектори псевдокласівДинамічні псевдокласиa:link { color: blue }a:active { color: red }a:hover

color: red }
a:hover { color: green }
a:visited { color:

purple }
a:focus { color: yellow }



Червоний заголовок

Червоний заголовок

Червоний заголовок

Червоний заголовок

Слайд 19 Псевдокласи стану

Псевдокласи стану

клікнути зміниться колір
Під час наведення зміниться колір

input:

focus {
background: blue;
}
button: active {
background: green;
}
a: hover {
color: red;
}

Слайд 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
:nth-of-type()/nth-last-of-type()
:only-child/only-of-type
:empty

Струкрурные пседвоклассыСтруктурные псевдоэлементы: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

Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 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

    Струкрурные пседвоклассы ul 1.1 li 2.1 li 2.2 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:

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

    blue }

    Перший рядок
    Другий рядок



    Перший рядок
    Другий рядок

    Слайд 32 Селекторы псевдоэлементов
    body:before {
    content: '=початок=';
    color:

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

    green;
    }

    body:after {
    content: '=кінець=';
    color: red;


    }

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

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

    Слайд 34 Отношения родитель-потомок
    Селекторы потомков
    nav a { color: red; text-decoration:

    Отношения родитель-потомокСелекторы потомковnav a { color: red; text-decoration: none; }Выбор дочерних

    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

    Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 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

    Отношения родитель-потомок ul 1.1 li 2.1 li 2.2 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 {

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


    color: green;
    }


    Слайд 44 Специфичность
    Значение специфичности : 0, 0, 0, 0.
    Для

    СпецифичностьЗначение специфичности : 0, 0, 0, 0. Для каждого указанного в

    каждого указанного в селекторе значения идентификатора к специфичности добавляется

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

    Слайд 45 Специфичность
    Примеры:
    h1 { color: red; } /* 0, 0,

    СпецифичностьПримеры:h1 { color: red; } /* 0, 0, 0, 1 */p

    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;

    СпецифичностьСпецифичность с группированными селекторамиh1, h2.section { color: silver; background: black; }h1

    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,

    СпецифичностьИнлайн и !important /* 1, 0, 0, 0 */

    0, 0 */


    div {
    color: green !important;
    }

    Инлайн стили по-умолчанию приоритетнее стилей в CSS ()
    Стили в CSS с !important приоритетнее инлайн стилей
    Инлайн стили с !important приоритетнее всего

    Слайд 48 Наследование
    Некоторые стили применяются не только к целевому элементу,

    НаследованиеНекоторые стили применяются не только к целевому элементу, но и к

    но и к его потомкам
    Унаследованные стили не имеют специфичности,

    т.е их всегда перебивает любой селектор
    Именно поэтому не рекомендуют пользоваться селектором *

    div {
    color: green; /* 0 0 1 */
    }


    CSS

    - Каскадные таблицы стилей

    Слайд 49 Наследование
    * {
    color: red; /* 0 0

    Наследование* { color: red; /* 0 0 0 */}div { color:

    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
    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

    НаследованиеСтили которые наследуютсяcolorcursordirectionempty-cellsfont-familyfont-sizefont-weightfont-stylefont-variantfontletter-spacinglist-style-typelist-style-positionlist-style-imagelist-styleline-heightquotestext-aligntext-indenttext-transformvisibilitywhite-spaceword-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,

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

    3...)
    Дробные числа (1.5)
    Процентные значения (50%)


    Слайд 54 Значения и единицы измерения
    Абсолютные единицы измерения длины
    Миллиметры (mm)
    Сантиметры

    Значения и единицы измеренияАбсолютные единицы измерения длиныМиллиметры (mm)Сантиметры (cm)Дюймы (in)Пункты –

    (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
    Функциональный –

    ЦветаСпособы задания красного цветаИменованные цвета – redФункциональный – rgb(255, 0, 0)

    rgb(255, 0, 0) или rgba(255, 0, 0, 1)
    Шестнадцатиричный –

    #ff0000 или #f00

    Слайд 56 Цвета
    h1 { color: fuchsia; }
    p { background: yellow;

    Цветаh1 { color: fuchsia; }p { background: yellow; }.red { color:

    }

    .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 на страницу

    Добавление CSS на страницу @import () div



    @import ()







    Слайд 58 Типы устройств

    Типы устройств
    • Имя файла: css-lektsіya-3.pptx
    • Количество просмотров: 108
    • Количество скачиваний: 0
    - Предыдущая Программное обеспечение SCADAсистем и его основные подсистемы в электроэнергетике
    Следующая - Послеродовая депрессия, трагедии и утраты

    Похожие презентации

    Краткая иллюстрированная история Отечественной войны 1812 Краткая иллюстрированная история Отечественной войны 1812 42
    BI Розничной сети BI Розничной сети 131
    Методическая разработка. Алгоритмизация. Решение задач Методическая разработка. Алгоритмизация. Решение задач 112
    Классификация моделей Классификация моделей 92
    Створення розкладу Створення розкладу 111
    Безопасность в интернете Безопасность в интернете 112
    Форматирование текста в MS Word Форматирование текста в MS Word 127
    Познавательные задачи в системах счисления Познавательные задачи в системах счисления 110
    Циклические алгоритмы Циклические алгоритмы 98
    Игра-викторина по информатике Игра-викторина по информатике 130
    Реляционное исчисление Реляционное исчисление 116
    Передача Информации Передача Информации 161
    Защищенный документооборот Защищенный документооборот 119
    Пульт Управления HAAS. Клавиши дисплея Пульт Управления HAAS. Клавиши дисплея 109
    Табличный процессор EXCEL Табличный процессор EXCEL 102
    Типы связей и системы управления Типы связей и системы управления 94
    Средства связи Средства связи 134
    Базы данных Access 2003 Базы данных Access 2003 108
    Алфавитный подход к измерению информации Алфавитный подход к измерению информации 109
    Основные правила безопасной работы в сети Интернет Основные правила безопасной работы в сети Интернет 96
    Технология создания презентаций Технология создания презентаций 136
    Динамическое выделение IP-адресов Динамическое выделение IP-адресов 135
    Информационные ресурсы Информационные ресурсы 96
    Презентация Схема рассуждений, 4 класс Презентация Схема рассуждений, 4 класс 138
    Оператор break Оператор break 227
    Базы данных Базы данных 116
    Компютер и комплектующие Компютер и комплектующие 96
    Порядок выдачи сертификатов ключей проверки электронных подписей Порядок выдачи сертификатов ключей проверки электронных подписей 102
    Презентация к открытому уроку Отцы и дети - урок безопасного Интернета Презентация к открытому уроку Отцы и дети - урок безопасного Интернета 123
    Содержание и объем понятия Содержание и объем понятия 114