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

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

    Реализация двумерных массивов на языке Turbo Pascal Реализация двумерных массивов на языке Turbo Pascal 115
    Безопасная работа в социальных сетях: общение, публикация материалов Безопасная работа в социальных сетях: общение, публикация материалов 147
    Современные процессоры Intel и AMD Современные процессоры Intel и AMD 165
    Вирусы и антивирусы Вирусы и антивирусы 126
    Компьютерные вирусы и антивирусные программы Компьютерные вирусы и антивирусные программы 107
    Создание схем в Word 2007 Создание схем в Word 2007 157
    Дети и компьютер Дети и компьютер 174
    Вычисления в доэлектронную эпоху Вычисления в доэлектронную эпоху 126
    Понятие информация Понятие информация 113
    Алгоритм и алгоритмические структуры, структурное программирование Алгоритм и алгоритмические структуры, структурное программирование 123
    Множество и его элементы Множество и его элементы 120
    Презентация Знакомство с клавиатурой Презентация Знакомство с клавиатурой 122
    Подложка под текст на пёстром фоне Подложка под текст на пёстром фоне 121
    Множества. Изучение алгоритмизации и основ программирования на языке Python в курсе Информатика и ИКТ Множества. Изучение алгоритмизации и основ программирования на языке Python в курсе Информатика и ИКТ 139
    Производственная практика. ADO.NET и COM при работе с MS ACCESS и MS EXCEL в десктопном приложении Производственная практика. ADO.NET и COM при работе с MS ACCESS и MS EXCEL в десктопном приложении 114
    КВН по информатике и математике КВН по информатике и математике 136
    Презентация Составной оператор 8 класс Презентация Составной оператор 8 класс 231
    Игра Игра 117
    Информация и информационные технологии Информация и информационные технологии 158
    Основы HTML Основы HTML 159
    Подготовка к ГИА по информатике Подготовка к ГИА по информатике 156
    Алгоритм и его формальное исполнение 9 класс Алгоритм и его формальное исполнение 9 класс 139
    презентация презентация к уроку по информатике презентация презентация к уроку по информатике 150
    Игра Интернет Игра Интернет 123
    Циклический алгоритм Циклический алгоритм 126
    Компьютер в среде ЛогоМиры Компьютер в среде ЛогоМиры 143
    Знакомство с html Знакомство с html 121
    Инт_тренажер_Лебедевой Инт_тренажер_Лебедевой 150
    Компьютерная графика Компьютерная графика 142
    Создание автономных персонажей. Компьютерная анимация Создание автономных персонажей. Компьютерная анимация 125