Содержание
- 2. Пусть у нас есть список ul и список ol: пункт пункт пункт пункт пункт пункт пункт
- 3. Дан html-код: пункт курсив пункт курсив пункт курсив пункт курсив текст абзаца курсив текст абзаца курсив
- 4. Дочерний селектор на CSS > Дан код: текст жирный курсив текст просто курсив Выбрать все теги
- 5. Задача 1 Изучив код, скажите какой цвет будет иметь текст в теге b: какой-то текст в
- 6. p {font-weight: bold;} h1 {font-weight: bold;} h2 {font-weight: bold;} h3 {font-weight: bold;} p, h1, h2, h3
- 7. Идентификаторы (селектор id) Определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к
- 8. Выбор элемента по уникальному id на CSS Сделаем два блока. Первому зададим id = "block1", а
- 9. Классы (селекторы классов) Селектор class используется, чтобы указать стиль для группы элементов. Применение идентификатора Заголовок выровненный
- 10. Например. Сделаем абзацы с двумя типами классов - eee и zzz: Классы (селекторы классов) Чтобы отнести
- 11. .error { background:red; color:white; } для всех элементов класса .error Ошибка! Что-то с памятью. Сделаем это
- 12. Применение идентификатора Этот заголовок не будет подвержен воздействию стиля Параграф выровненный по центру. p.center { text-align:center;
- 13. Тег с заданным классом заголовок абзац заголовок абзац Пусть у нас есть два типа тегов с
- 14. Ошибка!Что-то с памятью. p.error { background:red; } для абзацев класса error p { background:blue; color:white; }
- 15. Классы (селекторы классов)
- 16. Когда использовать? В чём отличия? текст текст #block { color: red; font-family: Arial; } .large {
- 17. Группировка классов Пусть у нас есть несколько классов, которые красят элементы в разные цвета, и дают
- 18. Селектор потомков и классы заголовок текст заголовок текст Пусть у нас есть следующий код: Выберем все
- 19. Пусть теперь у нас есть следующий код: заголовок h2 текст заголовок h3 текст текст заголовок h2
- 20. Задача 1 Что выбирает селектор в приведенном ниже коде. Затем напишите HTML код, подходящий под этот
- 21. Итак, еще раз: p.eee - такой селектор выбирает абзацы с классом .eee А если сделать так:
- 22. Элемент с несколькими классами .error { color: red; } .large { font-size: 30px; font-family: Arial; }
- 23. Использование id на CSS Пример 1. При использовании id доступны все манипуляции с селекторами, Пусть у
- 24. Использование id на CSS Задача 1 Напишите селектор, который выберет все h2, находящиеся в элементе с
- 25. Выбор элемента по нескольким классам на CSS Пример1. Можем выбрать элемент, имеющий одновременно два класса, не
- 26. Несколько селекторов слитно Задача 1 Что выбирает селектор в приведенном ниже коде. Напишите HTML код, подходящий
- 27. Итак, селектор .bbb.zzz - ищет элемент, имеющий одновременно два класса, селектор .bbb .zzz - ищет элемент
- 28. Группировка сложных селекторов Пусть у нас есть два следующих селектора: .block h2 { color: red; }
- 29. Группировка сложных селекторов Задача 3 Упростите код, используя группировку селекторов: .xxx .kkk { text-align: center; }
- 30. Приоритет селекторов CSS 1. Когда применимы два правила, имеющие одинаковый приоритет, используется то, которое идёт в
- 31. Правила специфичности Если есть два селектора с одинаковым приоритетом, то побеждает то свойство, которое написано ниже.
- 32. Правила специфичности 5. Селектор потомка побеждает селектор родителя – это и для class Может быть такое,
- 33. Что бы создать стиль абсолютно для всех элементов веб-страницы, применим универсальный селектор CSS - символ звездочки
- 34. Универсальный селектор Пример1 Выберем все элементы и покрасим их в красный цвет: * { color: red;
- 35. Соседний селектор в CSS + Соседний селектор + позволяет выбрать элемент по его соседу сверху. text
- 36. Задача 1. Напишите селектор, который выберет элемент, находящийся сразу после элемента #elem. 1 2 3 4
- 37. Родственный селектор в CSS ~ Родственный селектор ~ позволяет выбрать все элементы, находящиеся после заданного элемента
- 38. Пример правила наследованияCSS Когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS
- 39. #A, .a { border: none; background: #f0f0f0; color: green; padding: 5px; } .b { border: 1px
- 40. Примеры: ul li a { color: red; } 3 балла, т.е. только путем добавления класса в
- 41. Наследование CSS-свойств Большинство свойств не передают дочернему элементу свои значения от родителя https://www.w3.org/TR/CSS21/propidx.html - здесь можно
- 42. Псевдоклассы Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние.
- 43. :nth-child Псевдокласс находит один или более элементов, основываясь на их позиции среди группы соседних элементов. .new_list
- 44. Псевдоэлемент в CSS — это ключевое слово, собираемое к селектору, которое позволяет стилизовать определенную часть выбранного
- 45. Псевдоэлементы Псевдоэлемент ::before - применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется.
- 46. Псевдоэлементы Псевдоэлементы ::before и ::after подходят для оформления цитат, Например для увеличения кавычек. Чаще всего выход
- 47. Псевдоэлементы Псевдоэлементы ::before и ::after - можно стилизовать для списков маркеры .list li:before{ content: ''; width:
- 48. CSS filter
- 49. CSS filter Например. img:nth-child(1):hover{ filter:blur(2px);
- 51. Скачать презентацию