Каскадные таблицы стилей (CSS)

Содержание

Слайд 2

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство,

CSS — Cascading Style Sheets (каскадные таблицы стилей) — это средство, позволяющее задавать

различные визуальные свойства HTML-элементам.
http://www.w3.org/TR/CSS21/cover.html
Слайд 3

red; color: CSS - правило Блок определений значение свойство font-size: 25px; CSS - правило

red;

color:

CSS - правило

Блок определений

значение

свойство

font-size:

25px;

CSS - правило

Слайд 4

3 способа 1. Встраивание(inline)- Атрибут элемента style=“стиль…” 2. Вложение(embeding) - Информация

3 способа
1. Встраивание(inline)- Атрибут элемента style=“стиль…”
2. Вложение(embeding) - Информация о стиле

в заголовке:
элемент

selector

index.html

Стили задаются в элементе

Заголовок H1


Параграф 1


Элемент DIV

Параграф 3


Отобрать все блоки на странице и отобразить их фон цветом #e0e0e0

Отобрать все параграфы на странице и отобразить их размером шрифта 20px, красным цветом

Слайд 14

Селектор id 02_selector_id.html #main-head { color:red; font-size:20px; } #content { background:

Селектор id

02_selector_id.html




Заголовок H1


Параграф 1


Отобрать на странице элементы с
id=content и отобразить их фон
цветом #e0e0e0

Отобрать на странице элементы с
id=main-head и отобразить их размером шрифта 20px, красным цветом

Слайд 15

Селектор класса 03_selector_class.html .first { color:red; } h2.first { font-family: arial;}

Селектор класса

03_selector_class.html




Заголовок красного цвета


text text text text text


text text text text text text text text


text text text text text


Отобрать на странице элементы с классом second и отобразить их размером шрифта 20px

Отобрать на странице элементы с классом first и отобразить их красным цветом

Отобрать на странице элементы h2 с классом first и отобразить их шрифтом arial

Слайд 16

Особености классов Элемент может иметь от одного и более классов ...

Особености классов

Элемент может иметь от одного и более классов

class="first second third"> ...


2. Селектор класса(впрочем как и любой другой селектор) может
дополняться типом элемента, например
p.first {...} -> отобрать только параграфы у которых есть
класс first
h2.first {...} -> отобрать только заголовки 2-го уровня у
которых есть класс first
3. Селектор класса может состоять из нескольких имет классов,
например
.first.second {...} -> отобрать элементы у которых есть оба
классы first и second
Слайд 17

Группировка селекторов 04_selector_group.html h1,p { color:red;} #main-head, .content { font-size: 18px;}

Группировка селекторов

04_selector_group.html




Заголовок H1


Параграф 1


Параграф 1


Отобрать на странице элементы с
id=content и классом content и отобразить их размером шрифта 18px

Отобрать на странице элементы h1 и p
и отобразить их красным цветом

Слайд 18

05_seletor_attributes.html

05_seletor_attributes.html

Слайд 19

selectors/index.html Псевдоклассы

selectors/index.html

Псевдоклассы

Слайд 20

07_pseudo_elements.html Псевдоэлементы

07_pseudo_elements.html

Псевдоэлементы

Слайд 21

Заголовок H2 Текст параграфа Текст параграфа Иерархия html страницы







Заголовок H2


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


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






Иерархия html страницы

Слайд 22

Заголовок H2 Текст параграфа Текст параграфа #f1 #f2 h2{ … }




Заголовок H2


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


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





#f1 #f2 h2{ … }

#f1 #f2 p { … }

#f1 #f2 .f3 { … }
или
#f1 #f2 p.f3 { … }

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

Селекторы перечисляются через пробел по иерархии элементов

Слайд 23

08_selector_context.html Семейные селекторы

08_selector_context.html

Семейные селекторы

Слайд 24

elem1 elem2 div class="d1" body span span a span Вернет все

elem1 elem2

div class="d1"

body

span

span

a

span

Вернет все элементы c именем тега elem2 которые являются

потомками элементов с именем elem1

.d1 span


Слайд 25

parent > child Вернет все элементы с именем тега child которые

parent > child

Вернет все элементы с именем тега child которые являются

прямыми потомками элементов с именем тега parent

div class="d1"

body

span

span

a

span

.d1 > span


Слайд 26

element + next Вернет все элементы с именем тега next которым

element + next

Вернет все элементы с именем тега next которым

непосредственно предшествует элемент element на том же уровне вложенности

div class="d1"

body

span

a

span

a + span







span

Слайд 27

element ~ sibling Вернет все элементы с именем тега sibling которым

element ~ sibling

Вернет все элементы с именем тега sibling которым

предшествует элемент element на том же уровне вложенности

div class="d1"

body

span

a

span

a ~ span







span

Слайд 28

Приоритеты стилей

Приоритеты стилей

Слайд 29

Каскадирование при конфликтах При конфликтах идет подсчет количества id, классов, элементов,

Каскадирование при конфликтах

При конфликтах идет подсчет количества id, классов, элементов,

псевдо-классов, псевдо-элементов, селекторов атрибутов на пути к элементу в контекстном селекторе

09_cascading.html

Слайд 30

Примеры каскадирования стилей text p { color: red; } .inner {

Примеры каскадирования стилей


text



p { color:

red; }
.inner { color: green; }

Оба селектора отбирают один и тот же элемент (параграф) но назначают ему разный цвет.
То есть получается неоднозначность (ambiguity [ æmbɪˈ ɡjuːɪtɪ])
Браузер должен принять решение, какой цвет применить к элементу
Алгоритм такой:
- первое правило содержит селектор типа
- второе правило содержит селектор класса
- селектор класса имеет более высокий приоритет над селектором
типа, поэтому "выигрывает" второе правило, и к элементу
параграф будет применен зеленый цвет

Слайд 31

text #d1 p { color: red; } div .inner { color:


text



#d1 p { color: red; }
div

.inner { color: green; }

Алгоритм:
- первое правило содержит селектор id + селектор типа
- второе правило содержит селектор типа + селектор класса
по селекторам типа приоритеты правил равны
Но у первого правила приоритет по селектору id, поэтому
"выигрывает" это правило, и к элементу параграф будет
применен красный цвет

Слайд 32

text div p.inner { color: red; } div p { color:


text



div p.inner { color: red; }
div

p { color: green; }

Алгоритм:
- первое правило содержит 2 селектора типа + селектор класса
второе правило содержит 2 селектора типа
по селекторам типа приоритеты правил равны
Но у второго правила есть селектор класса, поэтому
"выигрывает" это правило, и к элементу параграф будет
применен зеленый цвет

Слайд 33

text div p.inner { color: red; } div.outer p { color:


text



div p.inner { color: red; }
div.outer

p { color: green; }

Алгоритм:
- первое правило содержит 2 селектора типа + селектор класса
второе правило содержит 2 селектора типа + селектор класса
по селекторам приоритеты правил равны, поэтому
"выигрывает" правило которое расположено по коду ниже, то
есть к элементу параграф будет применен зеленый цвет

Слайд 34

selectors/index.html Псевдоклассы (прордолжение) Focus получать могут только элементы форм и ссылки.

selectors/index.html

Псевдоклассы (прордолжение)

Focus получать могут только элементы форм и ссылки.
Элемент получил focus

– означает, что элемент выбран с помощью мыши(или клавиатуры), курсор находится в пределах этого элемента, и если это элемент формы – то мы можем вводить в него текст.

Элемент включен, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключенное состояние, когда его нельзя активировать или сфокусировать.

Слайд 35

selectors/index.html Псевдоклассы (прордолжение)

selectors/index.html

Псевдоклассы (прордолжение)

Слайд 36

selectors/index.html Псевдоклассы (прордолжение)

selectors/index.html

Псевдоклассы (прордолжение)

Слайд 37

selectors/index.html Псевдоклассы (прордолжение)

selectors/index.html

Псевдоклассы (прордолжение)

Слайд 38

Как работает nth-child (expression) еxpression – может задаваться например как 3n+3

Как работает nth-child (expression)

еxpression – может задаваться например как 3n+3

или 4n+2
где n – это номер текущего элемента (начинается с 0)

nth-child(5) – будет выбран 5-й элемент из списка

Слайд 39

Слайд 40

selectors/type.html

selectors/type.html

Слайд 41

Первый параграф Второй параграф p:nth-child(2) { color: red; } Элемент отберется,


Первый параграф


Второй параграф



p:nth-child(2) {

color: red; }
Элемент отберется, если это:
Параграф
Второй потомок родителя
Работает правильно

p:nth-of-type(2){color: red; }
Элемент отберется, если это:
Второй дочерний параграф
родителя
Работает правильно

selectors/type.html

Слайд 42

p:nth-child(2) { color: red; } Элемент отберется, если это: Параграф Второй

p:nth-child(2) { color: red; }
Элемент отберется, если это:
Параграф
Второй потомок родителя
Работает неправильно

p:nth-of-type(2){color:

red; }
Элемент отберется, если это:
Второй дочерний параграф
родителя
Работает правильно


Заголовок H1


Первый параграф


Второй параграф



Слайд 43

li:only-of-type { color: red; } Элемент отберется, если это: li Больше

li:only-of-type {
color: red;
}
Элемент отберется, если это:
li
Больше нет sibling элементов данного

типа


  • I'm all alone!



    I am a paragraph 1


    I am a paragraph 2


  • We are together.

  • We are together.

  • We are together.


ВОПРОС – будут ли отобраны параграфы ?
p:only-of-type {
color: orange;
}

Слайд 44

Наследование свойств элементами

Наследование свойств элементами