CSS. Основные понятия

Август 3, 2022

Главная
Информатика
CSS. Основные понятия

Содержание

2. Структура HTML-документа Пример Текст
3. Определение CSS ( англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего
4. Подключение CSS (1 вариант) Пример Текст
5. Подключение CSS (2 вариант) Пример @import url(style.css); Текст
6. Подключение CSS (3 вариант) Пример body { color: red; } Текст
7. Синтаксис CSS селектор, селектор { свойство: значение; свойство: значение; свойство: значение; }
8. Синтаксис CSS p, .warning { font-size: 10px; font-weight: bold; color: red; }
9. Селектор тэгов HTML: Жирный текст CSS: p{ font-weight: bold; }
10. Селектор классов HTML: Внимание CSS: .warning{ font-weight: bold; }
11. Тэг с несколькими классами HTML: Внимание CSS: .warning{ font-weight: bold; } .text{ font-size: 14px; }
12. Селектор идентификаторов HTML: Внимание CSS: #warning{ font-weight: bold; }
13. Селектор атрибутов HTML: Ссылка CSS: a[href=“google.by”]{ font-weight: bold; }
14. Контекстный селектор HTML: Внимание на экран CSS: p b{ font-weight: bold; }
15. Контекстный селектор HTML: Внимание на экран CSS: p .warning{ font-weight: bold; }
16. Селектор дочерних элементов HTML: Это дочерний элемент Это не дочерний элемент CSS: p > i {
17. Селектор сестринских элементов HTML: Сестра Сестра Не сестра CSS: b + i { font-color: yellow; }
18. Селектор псевдоклассов HTML: Текст CSS: p:hover{ color: red; }
19. Селектор псевдоэлементов HTML: Текст текст CSS: p::first-letter{ color: red; font-size: 60px; }
20. Универсальный селектор HTML: Красный текст Красный текст CSS: *{ color: red; }
21. Наследование HTML: текст полужирный текст полужирный CSS: p{ color: red; }
22. Каскадирование HTML: текст полужирный текст полужирный CSS: p{ color: yellow; } #p b{ color: green; }
23. Приоритеты Стили браузера Пользовательские стили в браузере Стили разработчиков количество идентификаторов (#id) в селекторе – (1,0,0)
24. Стили разработчиков HTML: текст жирный и курсивный CSS: p.text.s-text .important .italic{ color: yellow; } .text #warning
25. Задание цвета По имени цвета Функции rgb() и rgba() Функция hsl() и hsla() Шестнадцатеричная запись (краткая
26. Имена цветов p{ color: yellow; } .colored{ color: red; } .not-red{ color: green; }
27. Функции rgb() и rgba() Красный от 0 до 255 Зеленый от 0 до 255 Синий от
28. Функции rgb() и rgba() p{ color: rgb(255,255,0); } .colored{ color: rgb(255,255,0,0.5); } .not-red{ color: rgb(255,255,255); background:
29. Функция hsl() и hsla() оттенок — значение в диапазоне от 0 до 360; определяет, какой цвет
30. Функция hsl() и hsla() p{ color: hsl(45,100%,100%); } .colored{ color: hsla(45,100%,100%,0.5); }
31. Шестнадцатеричная запись Красный от 00 до FF Зеленый от 0 до FF Синий от 0 до
32. Шестнадцатеричная запись p{ color: #FFFF00; } .colored{ color: #FF0; // равно #FFFF00 } .not-red{ color: #FFF;
34. Скачать презентацию

Слайд 2

Структура HTML-документа

Пример

Текст

Слайд 3

Определение
CSS ( англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с

использованием языка разметки.

Слайд 4

Подключение CSS (1 вариант)

Пример

Текст

Слайд 5

Подключение CSS (2 вариант)

Пример

Текст

Слайд 6

Подключение CSS (3 вариант)

Пример

Текст

Слайд 7

Синтаксис CSS
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

Слайд 8

Синтаксис CSS
p, .warning {
font-size: 10px;
font-weight: bold;
color: red;
}

Слайд 9

Селектор тэгов
HTML:

Жирный текст

CSS:
p{
font-weight: bold;
}

Слайд 10

Селектор классов
HTML:

Внимание

CSS:
.warning{
font-weight: bold;
}

Слайд 11

Тэг с несколькими классами
HTML:

Внимание

CSS:
.warning{
font-weight: bold;
}
.text{
font-size: 14px;

}

Слайд 12

Селектор идентификаторов
HTML:

Внимание

CSS:
#warning{
font-weight: bold;
}

Слайд 13

Селектор атрибутов
HTML:
Ссылка
CSS:
a[href=“google.by”]{
font-weight: bold;
}

Слайд 14

Контекстный селектор
HTML:

Внимание на экран

CSS:
p b{
font-weight: bold;
}

Слайд 15

Контекстный селектор
HTML:

Внимание
на экран

CSS:
p .warning{
font-weight: bold;
}

Слайд 16

Селектор дочерних элементов
HTML:
Это дочерний элемент

Это не дочерний элемент

CSS:
p > i

{
font-color: yellow;
}

Слайд 17

Селектор сестринских элементов
HTML:
Сестра
Сестра

Не сестра

CSS:
b + i {
font-color: yellow;
}

Слайд 18

Селектор псевдоклассов
HTML:

Текст

CSS:
p:hover{
color: red;
}

Слайд 19

Селектор псевдоэлементов
HTML:

Текст
текст
CSS:
p::first-letter{
color: red;
font-size: 60px;
}

Слайд 20

Универсальный селектор
HTML:

Красный текст

Красный текст
CSS:
*{
color: red;
}

Слайд 21

Наследование
HTML:

текстполужирный

текст полужирный
CSS:
p{
color: red;
}

Слайд 22

Каскадирование
HTML:
текстполужирный
текст полужирный
CSS:
p{
color: yellow;
}
#p b{
color: green;
}
b{
color:

red;
}

Слайд 23

Приоритеты
Стили браузера
Пользовательские стили в браузере
Стили разработчиков
количество идентификаторов (#id) в селекторе –

(1,0,0)
количество классов (.class), атрибутов ([attr], [attr="value"]) и псевдоклассов (:pseudo-class) - (0,1,0)
количество элементов (h1, input) и псевдоэлементов (::pseudo-element) - (0,0,1)
Атрибут style
Свойства с !important

Слайд 24

Стили разработчиков
HTML:
текст
жирный
и курсивный

CSS:
p.text.s-text .important .italic{

color: yellow;
}
.text #warning i{
color: red;
}
#warning .italic{
color: green;
}

Слайд 25

Задание цвета
По имени цвета
Функции rgb() и rgba()
Функция hsl() и hsla()
Шестнадцатеричная

запись (краткая и полная)

Слайд 26

Имена цветов
p{
color: yellow;
}
.colored{
color: red;
}
.not-red{
color: green;
}

Слайд 27

Функции rgb() и rgba()
Красный от 0 до 255
Зеленый от 0 до

255
Синий от 0 до 255
Прозрачность от 0 до 1

Слайд 28

Функции rgb() и rgba()
p{
color: rgb(255,255,0);
}
.colored{
color: rgb(255,255,0,0.5);
}
.not-red{
color: rgb(255,255,255);
background:

rgb(0,0,0);
}

Слайд 29

Функция hsl() и hsla()
оттенок — значение в диапазоне от 0 до 360;

определяет, какой цвет вы хотите;
насыщенность — в диапазоне от 0% до 100%;
определяет, сколько этого цвета вы хотите;
яркость — в диапазоне от 0% до 100%;
определяет, насколько ярким вы желаете цвет.
прозрачность — значение в диапазоне от 0 до 1.

Слайд 30

Функция hsl() и hsla()
p{
color: hsl(45,100%,100%);
}
.colored{
color: hsla(45,100%,100%,0.5);
}

Слайд 31

Шестнадцатеричная запись
Красный от 00 до FF
Зеленый от 0 до FF
Синий от

0 до FF

Слайд 32

Шестнадцатеричная запись
p{
color: #FFFF00;
}
.colored{
color: #FF0; // равно #FFFF00
}
.not-red{
color:

#FFF;
background: #000;
}