Верстка web-страниц. Селекторы

Сентябрь 7, 2022

Главная
Алгебра
Верстка web-страниц. Селекторы

Содержание

2. Содержание Селекторы Селекторы типов Селекторы классов ID-селекторы Групповые селекторы Универсальный селектор Вложенные теги Дерево html Селекторы
3. Селекторы Для задания определенных свойств необходимо для начала обратиться к нужному элементу. Данное обращение к тому
4. Селекторы тегов Селекторы типов (или селекторы тегов) позволяют определить стиль всех экземпляров конкретного html-элемента Для задания
5. Селекторы тегов Пример h2 { font-family: “Gill Sans”; color:#554321; } Все фрагменты текста на веб-странице, оформленные
6. Селекторы тегов Пример P - указываем, к какому элементу обращаемся { font-size:24px; - абзацы будут отображены
7. Пример Зададим цвет текста для всех абзацев #0ca445 – просто в описании стилей обратимся сразу к
8. Селекторы классов Селекторы классов Позволяют указать на конкретный элемент /группу из элементов/, не зависимо от тегов,
9. Селекторы классов Правила для организации классов все названия селекторов классов должны начинаться с точки (.lives); при
10. Селекторы классов Обращение к HTML элементам: Текст Пример CSS . contacts - обращаемся к заданному классу
11. Селекторы классов Создав класс, можно применить его практически к любому тегу, что дает огромную свободу действий
12. Пример Зададим цвет текста для нескольких абзацев #0ca445 (этим абзацам мы присвоим class); а остальной текст
13. ID-селекторы ID-селекторы Предназначен для идентификации уникальных частей веб-страниц Вначале id-селектора вместо точки ставится знак #; во
14. ID-селекторы Обращение к HTML элементам: Текст Пример CSS #text - обращаемся к заданному id (#имя id)
15. Пример Зададим цвет текста для одного абзаца #0ca445 (этому абзацу мы присвоим id); а остальной текст
16. ID-селекторы Для ID есть случаи специального применения: при использовании JavaScript позволяют определить место и манипулировать частями
17. Групповые селекторы Групповые селекторы Иногда нужно применить одинаковое форматирование к абсолютно разным элементам, причем создание отдельного
18. Групповые селекторы Групповые селекторы Создаем список, в котором один селектор отделен от другого запятыми, а дальше
19. Универсальный селектор Универсальный селектор - * Предоставляет возможность выбора всех тегов веб-страницы. Пример * {color: #f1cd33;}
20. Универсальный селектор Универсальный селектор - * Можно использовать для выбора всех тегов внутри некоего определенного селектора
21. Вложенные теги Стилизация вложенных тегов – селекторы потомков Их применяют для того, чтобы единообразно отформатировать целый
22. Дерево HTML Дерево HTML Код HTML, на котором написана любая веб-страница, напоминает генеалогическое дерево Схемы страницы
23. Дерево HTML Дерево HTML. Пример
24. Дерево HTML Предок – html-элемент, который заключает в себе другие элементы Пример body – предок для
25. Дерево HTML Потомок – элемент, который расположен внутри одного или более тегов Пример body – потомок
26. Дерево HTML Родительский элемент – элемент, который связан с другими элементами более низкого уровня и находится
27. Дерево HTML Дочерний элемент – элемент, непосредственно подчиненный другому элементу более высокого уровня (сам дочерний элемент
28. Дерево HTML Сестринский элемент – элементы, являющимися дочерними для одного и того же родительского тега (расположены
29. Селекторы потомков Для создания селектора потомков указываем структуру вложенности – объединяем селекторы вместе согласно ветви дерева,
30. Создание модулей Если на странице есть блок html-элементов, выполняющих одну функцию, то для форматирования данного модуля
31. Создание модулей .news h2 {color: red;} .news p {color: blue;} Создание селекторов потомков позволит для элементов
32. Создание модулей Можно усложнить цепочку селекторов Пример, есть фрагмент кода, содержащий контактную информацию .contact .name {font-weight:
33. Создание модулей ВАЖНО: правильно строить/читать селекторы во избежание неверных результатов в работе p.intro - не является
34. Псевдо Если есть необходимость выбрать фрагмент веб-страницы, в котором нет тегов, но который достаточно просто идентифицировать
35. Стилизация ссылок a:link – обозначает любую ссылку; a: visited – посещенные ссылки; a: hover – ссылка
36. Стилизация фрагментов Два псевдоэлемента :first-letter и :first-line позволяют обратиться к фрагментам абзаца – первой букве или
37. Стилизация фрагментов ВАЖНО: В CSS3, чтобы отличить псевдоклассы от псевдоэлементов, было добавлено еще одно двоеточие ::first-letter
38. Дополнительно :focus Функционирует подобно :hover с той лишь разницей, что применяется при нажатии клавиши табуляции или
39. Дополнительно :focus Задает стилевой эффект только на время, пока элемент находится в фокусе
40. Дополнительно :before Позволяет добавлять сообщение, предшествующее определенному элементу веб-страницы Для работы с данным псевдоэлементом можно создать
41. Дополнительно :before текст, который добавляется данным псевдоэлементом-селектором, еще называют сгенерированным содержимым, поскольку браузер создает его. !
42. Дополнительно :after Позволяет добавлять сообщение, следующее за определенным элементом веб-страницы
43. Дополнительно :after и :before - также в CSS3 рассматриваются с двойным двоеточием как псевдоэлементы, но для
44. Дополнительно ::Selection Ссылается на элементы, которые посетитель выбрал на странице. Пример, выделение текста для последующего копирования
45. Дополнительно ::Selection Работает только версия с двумя двоеточиями Не поддерживается IE 8 или Firefox Для Firefox
46. Селекторы атрибутов Есть возможность форматирования тегов на основе выборки любых содержащихся в них атрибутов Причем вместо
47. Селекторы атрибутов Символ ^= означает «начинаться с» позволит усложнить процесс выбора по атрибутам Пример img[title^=“Content”] .photo[title^=”Autumn”]
48. Селекторы атрибутов Символ $= означает «заканчивается на» позволит усложнить процесс выбора по атрибутам Пример a[href$=“.pdf”] Символ
49. Дочерние элементы Селектор дочерних элементов позволяет определить конкретные дочерний и родительский элементы body > h1 p
50. Дочерние элементы :first-child – позволяет выбрать и форматировать первый дочерний элемент, вне зависимости от того, сколько
51. Дочерние элементы :last-child – позволяет выбрать и форматировать последний дочерний элемент :nth-child – групповой псевдоэлемент; например,
52. Дочерние элементы Селекторы типов дочерних элементов :first-of-type :last-of-type :nth-of-type ЗАДАНИЕ: изучите особенности данных селекторов самостоятельно
53. Смежные элементы Иногда есть необходимость выбрать тег, относящийся к группе смежных элементов одного уровня и имеющих
54. :not() Селектор :not() или псевдокласс отрицания Пример p:not(.class) {color: blue;} – задаст тексту синий цвет во
55. :not() Правила использования можно использовать только с простыми селекторами – селекторы элементов, универсальный селектор, классы, ID,
56. :not() Пример .footnote:not(div) img:not(.portrait) div:not(#banner)
58. Скачать презентацию

Слайд 2

Содержание
Селекторы
Селекторы типов
Селекторы классов
ID-селекторы
Групповые селекторы
Универсальный селектор
Вложенные теги
Дерево html
Селекторы потомков
Создание модулей
Псевдоклассы и псевдоэлементы:

ссылки, фрагменты абзаца, дополнительно
Селекторы атрибутов
Селекторы дочерних элементов, типов дочерних элементов, смежных элементов одного уровня
Селектор :not()

Слайд 3

Селекторы
Для задания определенных свойств необходимо для начала обратиться к нужному элементу.
Данное

обращение к тому или иному элементу в HTML-документе можно реализовать несколькими способами.
Селектор – контролирует дизайн веб-страницы, определяя элемент, который необходимо изменить
Именно селектор используется для форматирования множества элементов одновременно

Слайд 4

Селекторы тегов
Селекторы типов (или селекторы тегов)
позволяют определить стиль всех экземпляров конкретного

html-элемента
Для задания такого селектора необходимо просто указать название тега – p, h1, img, a,…

Слайд 5

Селекторы тегов
Пример
h2 {
font-family: “Gill Sans”;
color:#554321;
}
Все фрагменты текста на веб-странице, оформленные в

виде заголовка второго уровня, будут отображаться заданным шрифтом и цветом // если к ним не будет применено другое стилевое решение.

Слайд 6

Селекторы тегов
Пример
P - указываем, к какому элементу обращаемся
{
font-size:24px; - абзацы будут отображены шрифтом

в 24px
}

Слайд 7

Пример
Зададим цвет текста для всех абзацев #0ca445 – просто в описании

стилей обратимся сразу к тегу абзаца.

Слайд 8

Селекторы классов
Селекторы классов
Позволяют указать на конкретный элемент /группу из элементов/, не

зависимо от тегов, с помощью которых эти элементы организованы в html-коде
Пример
Из пяти абзацев (тег

) нужно два выделить синим цветом;
Один абзац (теги

) и два заголовка первого уровня нужно отобразить шрифтом Verdana

Слайд 9

Селекторы классов
Правила для организации классов
все названия селекторов классов должны начинаться с

точки (.lives);
при именовании стилевых классов разрешается использование только букв алфавита, чисел, дефиса, знака подчеркивания (.lives_98);
название после точки всегда должно начинаться с символа – буквы алфавита (неверно: .9got, .-next; верно: .got9, .next);
Имена стилевых классов чувствительны к регистру (.SIDEBAR и .sidebar рассматриваются как разные классы)

Слайд 10

Селекторы классов
Обращение к HTML элементам:
Текст

Пример CSS
. contacts - обращаемся к заданному

классу (.имя класса)
{
font-size:24px; - элементы указанного класса будут
} отображены шрифтом в 24px

Слайд 11

Селекторы классов
Создав класс, можно применить его практически к любому тегу, что

дает огромную свободу действий при создании стилевого оформления страницы.

Слайд 12

Пример
Зададим цвет текста для нескольких абзацев #0ca445 (этим абзацам мы присвоим

class); а остальной текст оставим по умолчанию черным.

Слайд 13

ID-селекторы
ID-селекторы
Предназначен для идентификации уникальных частей веб-страниц
Вначале id-селектора вместо точки ставится знак

#; во всем остальном правила сохраняются те же, что и для классов.
! Более точно указывает на объект, чем селектор класса и чем селектор тега

Слайд 14

ID-селекторы
Обращение к HTML элементам:
Текст

Пример CSS
#text - обращаемся к заданному id (#имя

id)
{
font-size:24px; - для данного элемента шрифт будет
} указанного размера в 24px

Слайд 15

Пример
Зададим цвет текста для одного абзаца #0ca445 (этому абзацу мы присвоим

id); а остальной текст оставим по умолчанию черным.

Слайд 16

ID-селекторы
Для ID есть случаи специального применения:
при использовании JavaScript позволяют определить место

и манипулировать частями страницы (например, id для элементов форм на странице);
позволяют создавать маркеры на странице и быстро по ней перемещаться (по аналогии с якорным тегом).

Слайд 17

Групповые селекторы
Групповые селекторы
Иногда нужно применить одинаковое форматирование к абсолютно разным элементам,

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

Слайд 18

Групповые селекторы
Групповые селекторы
Создаем список, в котором один селектор отделен от другого

запятыми, а дальше по установленному ранее правилу указываем свойства
Пример
h1, p, .copyright, #banner {color: #f1cd33;}

Слайд 19

Универсальный селектор
Универсальный селектор - *
Предоставляет возможность выбора всех тегов веб-страницы.
Пример
* {color:

#f1cd33;}

Слайд 20

Универсальный селектор
Универсальный селектор - *
Можно использовать для выбора всех тегов внутри

некоего определенного селектора
Пример
.banner * {color: #f1cd33;}
– для всех тегов внутри тега с классом banner

Слайд 21

Вложенные теги
Стилизация вложенных тегов – селекторы потомков
Их применяют для того, чтобы

единообразно отформатировать целый набор тегов в том случае, когда они находятся в определенной структурной области страницы.
Пример
Все теги а (ссылки) из панели навигации
Все изображения из правого вертикального блока

Слайд 22

Дерево HTML
Дерево HTML
Код HTML, на котором написана любая веб-страница, напоминает генеалогическое

дерево
Схемы страницы в форме дерева позволяют выяснить и проследить, как CSS видит взаимодействие элементов страницы

Слайд 23

Дерево HTML
Дерево HTML. Пример

Слайд 24

Дерево HTML
Предок – html-элемент, который заключает в себе другие элементы
Пример
body –

предок для h1, p, span – всех, содержащихся в нем элементов

Слайд 25

Дерево HTML
Потомок – элемент, который расположен внутри одного или более тегов
Пример
body

– потомок для html, p – потомок для body и для html одновременно

Слайд 26

Дерево HTML
Родительский элемент – элемент, который связан с другими элементами более

низкого уровня и находится выше на дереве на один уровень
Пример
html – родительский только для head и body
p – родительский по отношению к span

Слайд 27

Дерево HTML
Дочерний элемент – элемент, непосредственно подчиненный другому элементу более высокого

уровня (сам дочерний элемент находится на уровень ниже родительского)
Пример
h1, p – дочерние по отношению к body
span – не является дочерним для body

Слайд 28

Дерево HTML
Сестринский элемент – элементы, являющимися дочерними для одного и того

же родительского тега (расположены на одном уровне, называются еще соседскими)
Пример
h1, p – сестринские элементы
head, body – сестринские элементы
title, h1, p - не являются
сестринскими, т.к. в роли
родительского выступают
разные теги

Слайд 29

Селекторы потомков
Для создания селектора потомков указываем структуру вложенности – объединяем селекторы

вместе согласно ветви дерева, которую форматируем, помещая самого старшего предка слева, а форматируемый тег справа
h1 strong {color: red;}
изменит цвет только в тех тегах strong, которые находятся внутри тега h1
Вместо тегов при построении селекторов потомков можно использовать другие селекторы:
.intro a {color: yellow;}
только для ссылок из объектов класса intro

Слайд 30

Создание модулей
Если на странице есть блок html-элементов, выполняющих одну функцию, то

для форматирования данного модуля можно использовать селекторы потомков
Пример, есть фрагмент кода, создающий новости

Слайд 31

Создание модулей
.news h2 {color: red;}
.news p {color: blue;}
Создание селекторов потомков позволит

для элементов одного модуля новостей задать разное форматирование

Слайд 32

Создание модулей
Можно усложнить цепочку селекторов
Пример, есть фрагмент кода, содержащий контактную информацию
.contact

.name {font-weight: bold;}
.contact .phone {color: blue;}
.contact .address {color: red;}

Слайд 33

Создание модулей
ВАЖНО: правильно строить/читать селекторы во избежание неверных результатов в работе

p.intro - не является селектором потомков! Между тегом p и классом .intro НЕТ пробела
т.е. стили будут применены к тем тегам p, для которых прописан класс .intro (

)

Слайд 34

Псевдо
Если есть необходимость выбрать фрагмент веб-страницы, в котором нет тегов, но

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

Слайд 35

Стилизация ссылок
a:link – обозначает любую ссылку;
a: visited – посещенные ссылки;
a:

hover – ссылка при наведении;
! Псевдокласс :hover может быть применен к другим объектам веб-страницы, стиль которых должен меняться при наведении указателя – другие теги, классы
a: active – ссылка при ее выборе;

Слайд 36

Стилизация фрагментов
Два псевдоэлемента :first-letter и :first-line позволяют обратиться к фрагментам абзаца

– первой букве или первой строке.
:first-letter – позволяет создать буквицу, начальный символ абзаца, который выделяется из остального контекста, как в начале книжной главы
:first-line – позволяет задать стилизацию первой строки

Слайд 37

Стилизация фрагментов
ВАЖНО:
В CSS3, чтобы отличить псевдоклассы от псевдоэлементов, было добавлено еще

одно двоеточие
::first-letter
::first-line
Однако, для выполнения условия кроссбраузерности, оставляем одно двоеточие

Слайд 38

Дополнительно
:focus
Функционирует подобно :hover с той лишь разницей, что применяется при нажатии

клавиши табуляции или выполнении щелчка мыши на текстовом поле – т.е. пользователь выполняет фокусировку на объекте формы
Преимущественно предназначен для обеспечения обратной связи с посетителями сайта – например, смена цвета заполняемого поля:
.FormaS:focus {background-color: #ffffcc;}

Слайд 39

Дополнительно
:focus
Задает стилевой эффект только на время, пока элемент находится в фокусе

Слайд 40

Дополнительно
:before
Позволяет добавлять сообщение, предшествующее определенному элементу веб-страницы
Для работы с данным

псевдоэлементом можно создать класс (например, .tip) и применить его к тем элементам, которым должно предшествовать сообщение
Пример,

…
p.tip:before {content: “Это важно знать!”;}

Слайд 41

Дополнительно
:before
текст, который добавляется данным псевдоэлементом-селектором, еще называют сгенерированным содержимым, поскольку браузер

создает его.
! Поддерживается IE 8 и выше

Слайд 42

Дополнительно
:after
Позволяет добавлять сообщение, следующее за определенным элементом веб-страницы

Слайд 43

Дополнительно
:after и :before
- также в CSS3 рассматриваются с двойным двоеточием как

псевдоэлементы, но для соблюдения условия кроссбраузерности допустимо наличие одного двоеточия

Слайд 44

Дополнительно
::Selection
Ссылается на элементы, которые посетитель выбрал на странице.
Пример, выделение текста для

последующего копирования
Единственные свойства, доступные для изменения с помощью данного селектора – это color и background-color – чтобы исключить безумства с форматами выделенного фрагмента

Слайд 45

Дополнительно
::Selection
Работает только версия с двумя двоеточиями
Не поддерживается IE 8 или Firefox
Для

Firefox можно добавить через префикс
::-moz-selection {
color: #ffffff;
background-color: #993366;
}

Слайд 46

Селекторы атрибутов
Есть возможность форматирования тегов на основе выборки любых содержащихся в

них атрибутов
Причем вместо имен тегов можно использовать классы или не просто атрибут, а атрибут с конкретным значением
Пример
a[href=“http://www.cosmofarmer.com”] {
color: red;
font-weight: bold;
}

Слайд 47

Селекторы атрибутов
Символ ^= означает «начинаться с» позволит усложнить процесс выбора по

атрибутам
Пример
img[title^=“Content”]
.photo[title^=”Autumn”]
a[href^=“http://”] – внешние ссылки
a[href^=“https://”] – внешние ссылки для защищенного SSL-соединения

Слайд 48

Селекторы атрибутов
Символ $= означает «заканчивается на» позволит усложнить процесс выбора по

атрибутам
Пример
a[href$=“.pdf”]
Символ *= - позволит выбрать все возможные включения в значение атрибута
Пример
img[src*=“headshot”] – выберет все графические файлы, имеющие в названии сочетание headshot

Слайд 49

Дочерние элементы
Селектор дочерних элементов позволяет определить конкретные дочерний и родительский элементы

body > h1
p > strong
Для дочерних элементов есть несколько псевдоклассов

Слайд 50

Дочерние элементы
:first-child – позволяет выбрать и форматировать первый дочерний элемент, вне

зависимости от того, сколько дочерних элементов есть на самом деле
Пример,
h1:first-child - выберет первый тег h1 на всех уровнях вложенности

Слайд 51

Дочерние элементы
:last-child – позволяет выбрать и форматировать последний дочерний элемент
:nth-child –

групповой псевдоэлемент; например, с его помощью можно выбрать каждую вторую строку в таблице или каждый второй элемент списка: odd – нечетные, even – четные
tr:nth-child(odd) {background-color: #d9f0ff;}
tr:nth-child(3n) {background-color: #d9f0ff;} – каждый 3-й
tr:nth-child(3n+2) {background-color: #d9f0ff;} – каждый 3-й, начиная со второго

Слайд 52

Дочерние элементы
Селекторы типов дочерних элементов
:first-of-type
:last-of-type
:nth-of-type
ЗАДАНИЕ: изучите особенности данных селекторов самостоятельно

Слайд 53

Смежные элементы
Иногда есть необходимость выбрать тег, относящийся к группе смежных элементов

одного уровня и имеющих общего родителя – смежный элемент того же уровня
Селектор смежных элементов использует знак + для соединения одного элемента с другим
h2 + p – выберет все первые абзацы, следующие за любым h2
ЗАДАНИЕ: особенности применения изучите самостоятельно

Слайд 54

:not()
Селектор :not() или псевдокласс отрицания
Пример
p:not(.class) {color: blue;} – задаст тексту

синий цвет во всех абзацах, к которым не применялся класс .class
a[href^=“http://”]:not([href*=“mysite.com”]) – позволит выбрать все ссылки, начинающиеся http://, исключив те, что связаны с mysite.com

Слайд 55

:not()
Правила использования
можно использовать только с простыми селекторами – селекторы элементов, универсальный

селектор, классы, ID, псевдоклассы
нельзя использовать селекторы-потомки (div p a), псевдоэлементы (::first-line), групповые селекторы или комбинации
нельзя в одной строке применять несколько :not()-селекторов

Слайд 56

Верстка web-страниц. Селекторы

Содержание

СелекторыДля задания определенных свойств необходимо для начала обратиться к нужному элементу.Данное

Селекторы теговСелекторы типов (или селекторы тегов)позволяют определить стиль всех экземпляров конкретного

Селекторы теговПримерh2 {font-family: “Gill Sans”;color:#554321;}Все фрагменты текста на веб-странице, оформленные в

Селекторы теговПримерP - указываем, к какому элементу обращаемся{font-size:24px; - абзацы будут отображены шрифтом

ПримерЗададим цвет текста для всех абзацев #0ca445 – просто в описании

Селекторы классовСелекторы классовПозволяют указать на конкретный элемент /группу из элементов/, не

) и два заголовка первого уровня нужно отобразить шрифтом Verdana

Селекторы классовПравила для организации классоввсе названия селекторов классов должны начинаться с

Селекторы классовОбращение к HTML элементам:ТекстПример CSS. contacts - обращаемся к заданному

Селекторы классовСоздав класс, можно применить его практически к любому тегу, что

ПримерЗададим цвет текста для нескольких абзацев #0ca445 (этим абзацам мы присвоим

ID-селекторыID-селекторыПредназначен для идентификации уникальных частей веб-страницВначале id-селектора вместо точки ставится знак

ID-селекторыОбращение к HTML элементам:ТекстПример CSS#text - обращаемся к заданному id (#имя

ПримерЗададим цвет текста для одного абзаца #0ca445 (этому абзацу мы присвоим

ID-селекторыДля ID есть случаи специального применения:при использовании JavaScript позволяют определить место

Групповые селекторыГрупповые селекторыИногда нужно применить одинаковое форматирование к абсолютно разным элементам,

Групповые селекторыГрупповые селекторыСоздаем список, в котором один селектор отделен от другого

Универсальный селекторУниверсальный селектор - *Предоставляет возможность выбора всех тегов веб-страницы.Пример* {color:

Универсальный селекторУниверсальный селектор - *Можно использовать для выбора всех тегов внутри

Вложенные тегиСтилизация вложенных тегов – селекторы потомковИх применяют для того, чтобы

Дерево HTMLДерево HTMLКод HTML, на котором написана любая веб-страница, напоминает генеалогическое

Дерево HTMLДерево HTML. Пример

Дерево HTMLПредок – html-элемент, который заключает в себе другие элементыПримерbody –

Дерево HTMLПотомок – элемент, который расположен внутри одного или более теговПримерbody

Дерево HTMLРодительский элемент – элемент, который связан с другими элементами более

Дерево HTMLДочерний элемент – элемент, непосредственно подчиненный другому элементу более высокого

Дерево HTMLСестринский элемент – элементы, являющимися дочерними для одного и того

Селекторы потомковДля создания селектора потомков указываем структуру вложенности – объединяем селекторы

Создание модулейЕсли на странице есть блок html-элементов, выполняющих одну функцию, то

Создание модулей.news h2 {color: red;}.news p {color: blue;}Создание селекторов потомков позволит

Создание модулейМожно усложнить цепочку селекторовПример, есть фрагмент кода, содержащий контактную информацию.contact

Создание модулейВАЖНО: правильно строить/читать селекторы во избежание неверных результатов в работе

ПсевдоЕсли есть необходимость выбрать фрагмент веб-страницы, в котором нет тегов, но

Стилизация ссылокa:link – обозначает любую ссылку; a: visited – посещенные ссылки;a:

Стилизация фрагментовДва псевдоэлемента :first-letter и :first-line позволяют обратиться к фрагментам абзаца

Стилизация фрагментовВАЖНО:В CSS3, чтобы отличить псевдоклассы от псевдоэлементов, было добавлено еще

Дополнительно:focusФункционирует подобно :hover с той лишь разницей, что применяется при нажатии

Дополнительно:focusЗадает стилевой эффект только на время, пока элемент находится в фокусе

Дополнительно:beforeПозволяет добавлять сообщение, предшествующее определенному элементу веб-страницы Для работы с данным

Дополнительно:beforeтекст, который добавляется данным псевдоэлементом-селектором, еще называют сгенерированным содержимым, поскольку браузер

Дополнительно:afterПозволяет добавлять сообщение, следующее за определенным элементом веб-страницы

Дополнительно:after и :before- также в CSS3 рассматриваются с двойным двоеточием как

Дополнительно::SelectionСсылается на элементы, которые посетитель выбрал на странице.Пример, выделение текста для

Дополнительно::SelectionРаботает только версия с двумя двоеточиямиНе поддерживается IE 8 или FirefoxДля

Селекторы атрибутовЕсть возможность форматирования тегов на основе выборки любых содержащихся в

Селекторы атрибутовСимвол ^= означает «начинаться с» позволит усложнить процесс выбора по

Селекторы атрибутовСимвол $= означает «заканчивается на» позволит усложнить процесс выбора по

Дочерние элементыСелектор дочерних элементов позволяет определить конкретные дочерний и родительский элементы

Дочерние элементы:first-child – позволяет выбрать и форматировать первый дочерний элемент, вне

Дочерние элементы:last-child – позволяет выбрать и форматировать последний дочерний элемент:nth-child –

Дочерние элементыСелекторы типов дочерних элементов:first-of-type:last-of-type:nth-of-typeЗАДАНИЕ: изучите особенности данных селекторов самостоятельно

Смежные элементыИногда есть необходимость выбрать тег, относящийся к группе смежных элементов

:not()Селектор :not() или псевдокласс отрицания Примерp:not(.class) {color: blue;} – задаст тексту

:not()Правила использованияможно использовать только с простыми селекторами – селекторы элементов, универсальный

:not()Пример.footnote:not(div)img:not(.portrait)div:not(#banner)

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