Что такое 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
    • Количество просмотров: 132
    • Количество скачиваний: 0
    - Предыдущая Программное обеспечение SCADAсистем и его основные подсистемы в электроэнергетике
    Следующая - Послеродовая депрессия, трагедии и утраты

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

    Презентация по теме самообразования Системно-деятельностный подход в обучении информатики Презентация по теме самообразования Системно-деятельностный подход в обучении информатики 123
    Вирусы и антивирусные программы Вирусы и антивирусные программы 126
    Wechat. So what do people do with WeChat Wechat. So what do people do with WeChat 129
    Информашка Информашка 147
    Компьютерные вирусы и антивирусные программы Компьютерные вирусы и антивирусные программы 120
    Проектор Проектор 135
    Easy Quizzy бағдарламасы арқылы автотест құру Easy Quizzy бағдарламасы арқылы автотест құру 236
    Безопасность в Интернете Безопасность в Интернете 160
    Системное представление сложных проектов и программ. Отличие проекта от операционной деятельности. (Лекция 2) Системное представление сложных проектов и программ. Отличие проекта от операционной деятельности. (Лекция 2) 118
    Методика создания сайта школьной библиотеки. Методика создания сайта школьной библиотеки. 142
    Презентация по учебной дисциплине Элементы математической логики по теме Применение булевых функций к релейно-контактным схемам Презентация по учебной дисциплине Элементы математической логики по теме Применение булевых функций к релейно-контактным схемам 215
    Информационные процессы Информационные процессы 120
    Проблема несанкционированного доступа Проблема несанкционированного доступа 168
    Розробка автоматизованої системи керування об’єктом Світлофор Розробка автоматизованої системи керування об’єктом Світлофор 145
    Устройства персонального компьютера Устройства персонального компьютера 117
    Динамические структуры данных. Указатели Динамические структуры данных. Указатели 143
    Информационная компетенция Информационная компетенция 180
    Презентация по информатике на тему Векторная графика. Создание изображений в векторном графическом редакторе. Презентация по информатике на тему Векторная графика. Создание изображений в векторном графическом редакторе. 210
    Алгоритм и его свойства Алгоритм и его свойства 130
    Архитектура ПК Архитектура ПК 110
    Действия с информацией Действия с информацией 115
    Основы языка разметки гипертекста HTML Основы языка разметки гипертекста HTML 133
    Этапы компьютерного моделирования Этапы компьютерного моделирования 111
    В мире кодов В мире кодов 101
    Деректер қорын басқаратын жүйелердің басты функциялары Деректер қорын басқаратын жүйелердің басты функциялары 132
    Кодирование информации Кодирование информации 147
    Устройства отображения информации Устройства отображения информации 114
    Информационные процессы. Свойства информации Информационные процессы. Свойства информации 113
    Программное управление компьютером Программное управление компьютером 118
    Удаленный доступ Удаленный доступ 143