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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Верстка web-страниц. Селекторы, слайд №1Верстка web-страниц. Селекторы, слайд №2Верстка web-страниц. Селекторы, слайд №3Верстка web-страниц. Селекторы, слайд №4Верстка web-страниц. Селекторы, слайд №5Верстка web-страниц. Селекторы, слайд №6Верстка web-страниц. Селекторы, слайд №7Верстка web-страниц. Селекторы, слайд №8Верстка web-страниц. Селекторы, слайд №9Верстка web-страниц. Селекторы, слайд №10Верстка web-страниц. Селекторы, слайд №11Верстка web-страниц. Селекторы, слайд №12Верстка web-страниц. Селекторы, слайд №13Верстка web-страниц. Селекторы, слайд №14Верстка web-страниц. Селекторы, слайд №15Верстка web-страниц. Селекторы, слайд №16Верстка web-страниц. Селекторы, слайд №17Верстка web-страниц. Селекторы, слайд №18Верстка web-страниц. Селекторы, слайд №19Верстка web-страниц. Селекторы, слайд №20Верстка web-страниц. Селекторы, слайд №21Верстка web-страниц. Селекторы, слайд №22Верстка web-страниц. Селекторы, слайд №23Верстка web-страниц. Селекторы, слайд №24Верстка web-страниц. Селекторы, слайд №25Верстка web-страниц. Селекторы, слайд №26Верстка web-страниц. Селекторы, слайд №27Верстка web-страниц. Селекторы, слайд №28Верстка web-страниц. Селекторы, слайд №29Верстка web-страниц. Селекторы, слайд №30Верстка web-страниц. Селекторы, слайд №31Верстка web-страниц. Селекторы, слайд №32Верстка web-страниц. Селекторы, слайд №33Верстка web-страниц. Селекторы, слайд №34Верстка web-страниц. Селекторы, слайд №35Верстка web-страниц. Селекторы, слайд №36Верстка web-страниц. Селекторы, слайд №37Верстка web-страниц. Селекторы, слайд №38Верстка web-страниц. Селекторы, слайд №39Верстка web-страниц. Селекторы, слайд №40Верстка web-страниц. Селекторы, слайд №41Верстка web-страниц. Селекторы, слайд №42Верстка web-страниц. Селекторы, слайд №43Верстка web-страниц. Селекторы, слайд №44Верстка web-страниц. Селекторы, слайд №45Верстка web-страниц. Селекторы, слайд №46Верстка web-страниц. Селекторы, слайд №47Верстка web-страниц. Селекторы, слайд №48Верстка web-страниц. Селекторы, слайд №49Верстка web-страниц. Селекторы, слайд №50Верстка web-страниц. Селекторы, слайд №51Верстка web-страниц. Селекторы, слайд №52Верстка web-страниц. Селекторы, слайд №53Верстка web-страниц. Селекторы, слайд №54Верстка web-страниц. Селекторы, слайд №55Верстка web-страниц. Селекторы, слайд №56Верстка web-страниц. Селекторы, слайд №57
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Верстка web-страниц. Селекторы. Доклад-сообщение содержит 57 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Верстка web-страниц
Описание слайда:
Верстка web-страниц

Слайд 2


Содержание Селекторы Селекторы типов Селекторы классов ID-селекторы Групповые селекторы Универсальный селектор Вложенные теги Дерево html Селекторы потомков Создание модулей Псевдоклассы и псевдоэлементы: ссылки, фрагменты абзаца, дополнительно Селекторы атрибутов Селекторы дочерних элементов, типов дочерних элементов, смежных элементов одного уровня Селектор :not()
Описание слайда:
Содержание Селекторы Селекторы типов Селекторы классов ID-селекторы Групповые селекторы Универсальный селектор Вложенные теги Дерево html Селекторы потомков Создание модулей Псевдоклассы и псевдоэлементы: ссылки, фрагменты абзаца, дополнительно Селекторы атрибутов Селекторы дочерних элементов, типов дочерних элементов, смежных элементов одного уровня Селектор :not()

Слайд 3


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

Слайд 4


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

Слайд 5


Селекторы тегов Пример h2 { font-family: “Gill Sans”; color:#554321; } Все фрагменты текста на веб-странице, оформленные в виде заголовка второго уровня, будут отображаться заданным шрифтом и цветом // если к ним не будет применено другое стилевое решение.
Описание слайда:
Селекторы тегов Пример h2 { font-family: “Gill Sans”; color:#554321; } Все фрагменты текста на веб-странице, оформленные в виде заголовка второго уровня, будут отображаться заданным шрифтом и цветом // если к ним не будет применено другое стилевое решение.

Слайд 6


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

Слайд 7


Пример
Описание слайда:
Пример

Слайд 8


Селекторы классов Селекторы классов Позволяют указать на конкретный элемент /группу из элементов/, не зависимо от тегов, с помощью которых эти элементы организованы в html-коде Пример Из пяти абзацев (тег <p>) нужно два выделить синим цветом; Один абзац (теги <p> и <h1>) и два заголовка первого уровня нужно отобразить шрифтом Verdana
Описание слайда:
Селекторы классов Селекторы классов Позволяют указать на конкретный элемент /группу из элементов/, не зависимо от тегов, с помощью которых эти элементы организованы в html-коде Пример Из пяти абзацев (тег <p>) нужно два выделить синим цветом; Один абзац (теги <p> и <h1>) и два заголовка первого уровня нужно отобразить шрифтом Verdana

Слайд 9


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

Слайд 10


Селекторы классов Обращение к HTML элементам: <p class=“contacts”>Текст</p> Пример CSS . contacts - обращаемся к заданному классу (.имя класса) { font-size:24px; - элементы указанного класса будут } отображены шрифтом в 24px
Описание слайда:
Селекторы классов Обращение к HTML элементам: <p class=“contacts”>Текст</p> Пример CSS . contacts - обращаемся к заданному классу (.имя класса) { font-size:24px; - элементы указанного класса будут } отображены шрифтом в 24px

Слайд 11


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

Слайд 12


Пример
Описание слайда:
Пример

Слайд 13


ID-селекторы ID-селекторы Предназначен для идентификации уникальных частей веб-страниц Вначале id-селектора вместо точки ставится знак #; во всем остальном правила сохраняются те же, что и для классов. ! Более точно указывает на объект, чем селектор класса и чем селектор тега
Описание слайда:
ID-селекторы ID-селекторы Предназначен для идентификации уникальных частей веб-страниц Вначале id-селектора вместо точки ставится знак #; во всем остальном правила сохраняются те же, что и для классов. ! Более точно указывает на объект, чем селектор класса и чем селектор тега

Слайд 14


ID-селекторы Обращение к HTML элементам: <p id=“text”>Текст</p> Пример CSS #text - обращаемся к заданному id (#имя id) { font-size:24px; - для данного элемента шрифт будет } указанного размера в 24px
Описание слайда:
ID-селекторы Обращение к HTML элементам: <p id=“text”>Текст</p> Пример CSS #text - обращаемся к заданному id (#имя id) { font-size:24px; - для данного элемента шрифт будет } указанного размера в 24px

Слайд 15


Пример
Описание слайда:
Пример

Слайд 16


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

Слайд 17


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

Слайд 18


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

Слайд 19


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

Слайд 20


Универсальный селектор Универсальный селектор - * Можно использовать для выбора всех тегов внутри некоего определенного селектора Пример .banner * {color: #f1cd33;} – для всех тегов внутри тега с классом banner
Описание слайда:
Универсальный селектор Универсальный селектор - * Можно использовать для выбора всех тегов внутри некоего определенного селектора Пример .banner * {color: #f1cd33;} – для всех тегов внутри тега с классом banner

Слайд 21


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

Слайд 22


Дерево HTML Дерево HTML Код HTML, на котором написана любая веб-страница, напоминает генеалогическое дерево Схемы страницы в форме дерева позволяют выяснить и проследить, как CSS видит взаимодействие элементов страницы
Описание слайда:
Дерево HTML Дерево HTML Код HTML, на котором написана любая веб-страница, напоминает генеалогическое дерево Схемы страницы в форме дерева позволяют выяснить и проследить, как CSS видит взаимодействие элементов страницы

Слайд 23


Дерево HTML Дерево HTML. Пример
Описание слайда:
Дерево HTML Дерево HTML. Пример

Слайд 24


Дерево HTML Предок – html-элемент, который заключает в себе другие элементы Пример body – предок для h1, p, span – всех, содержащихся в нем элементов
Описание слайда:
Дерево HTML Предок – html-элемент, который заключает в себе другие элементы Пример body – предок для h1, p, span – всех, содержащихся в нем элементов

Слайд 25


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

Слайд 26


Дерево HTML Родительский элемент – элемент, который связан с другими элементами более низкого уровня и находится выше на дереве на один уровень Пример html – родительский только для head и body p – родительский по отношению к span
Описание слайда:
Дерево HTML Родительский элемент – элемент, который связан с другими элементами более низкого уровня и находится выше на дереве на один уровень Пример html – родительский только для head и body p – родительский по отношению к span

Слайд 27


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

Слайд 28


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

Слайд 29


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

Слайд 30


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

Слайд 31


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

Слайд 32


Создание модулей Можно усложнить цепочку селекторов Пример, есть фрагмент кода, содержащий контактную информацию .contact .name {font-weight: bold;} .contact .phone {color: blue;} .contact .address {color: red;}
Описание слайда:
Создание модулей Можно усложнить цепочку селекторов Пример, есть фрагмент кода, содержащий контактную информацию .contact .name {font-weight: bold;} .contact .phone {color: blue;} .contact .address {color: red;}

Слайд 33


Создание модулей ВАЖНО: правильно строить/читать селекторы во избежание неверных результатов в работе p.intro - не является селектором потомков! Между тегом p и классом .intro НЕТ пробела т.е. стили будут применены к тем тегам p, для которых прописан класс .intro (<p class=“intro”>)
Описание слайда:
Создание модулей ВАЖНО: правильно строить/читать селекторы во избежание неверных результатов в работе p.intro - не является селектором потомков! Между тегом p и классом .intro НЕТ пробела т.е. стили будут применены к тем тегам p, для которых прописан класс .intro (<p class=“intro”>)

Слайд 34


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

Слайд 35


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

Слайд 36


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

Слайд 37


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

Слайд 38


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

Слайд 39


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

Слайд 40


Дополнительно :before Позволяет добавлять сообщение, предшествующее определенному элементу веб-страницы Для работы с данным псевдоэлементом можно создать класс (например, .tip) и применить его к тем элементам, которым должно предшествовать сообщение Пример, <p class=“tip”>… p.tip:before {content: “Это важно знать!”;}
Описание слайда:
Дополнительно :before Позволяет добавлять сообщение, предшествующее определенному элементу веб-страницы Для работы с данным псевдоэлементом можно создать класс (например, .tip) и применить его к тем элементам, которым должно предшествовать сообщение Пример, <p class=“tip”>… p.tip:before {content: “Это важно знать!”;}

Слайд 41


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

Слайд 42


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

Слайд 43


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

Слайд 44


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

Слайд 45


Дополнительно ::Selection Работает только версия с двумя двоеточиями Не поддерживается IE 8 или Firefox Для Firefox можно добавить через префикс ::-moz-selection { color: #ffffff; background-color: #993366; }
Описание слайда:
Дополнительно ::Selection Работает только версия с двумя двоеточиями Не поддерживается IE 8 или Firefox Для Firefox можно добавить через префикс ::-moz-selection { color: #ffffff; background-color: #993366; }

Слайд 46


Селекторы атрибутов Есть возможность форматирования тегов на основе выборки любых содержащихся в них атрибутов Причем вместо имен тегов можно использовать классы или не просто атрибут, а атрибут с конкретным значением Пример a[href=“http://www.cosmofarmer.com”] { color: red; font-weight: bold; }
Описание слайда:
Селекторы атрибутов Есть возможность форматирования тегов на основе выборки любых содержащихся в них атрибутов Причем вместо имен тегов можно использовать классы или не просто атрибут, а атрибут с конкретным значением Пример 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-соединения
Описание слайда:
Селекторы атрибутов Символ ^= означает «начинаться с» позволит усложнить процесс выбора по атрибутам Пример img[title^=“Content”] .photo[title^=”Autumn”] a[href^=“http://”] – внешние ссылки a[href^=“https://”] – внешние ссылки для защищенного SSL-соединения

Слайд 48


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

Слайд 49


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

Слайд 50


Дочерние элементы :first-child – позволяет выбрать и форматировать первый дочерний элемент, вне зависимости от того, сколько дочерних элементов есть на самом деле Пример, h1:first-child - выберет первый тег h1 на всех уровнях вложенности
Описание слайда:
Дочерние элементы :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-й, начиная со второго
Описание слайда:
Дочерние элементы :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 ЗАДАНИЕ: изучите особенности данных селекторов самостоятельно
Описание слайда:
Дочерние элементы Селекторы типов дочерних элементов :first-of-type :last-of-type :nth-of-type ЗАДАНИЕ: изучите особенности данных селекторов самостоятельно

Слайд 53


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

Слайд 54


:not() Селектор :not() или псевдокласс отрицания Пример p:not(.class) {color: blue;} – задаст тексту синий цвет во всех абзацах, к которым не применялся класс .class a[href^=“http://”]:not([href*=“mysite.com”]) – позволит выбрать все ссылки, начинающиеся http://, исключив те, что связаны с mysite.com
Описание слайда:
: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()-селекторов
Описание слайда:
:not() Правила использования можно использовать только с простыми селекторами – селекторы элементов, универсальный селектор, классы, ID, псевдоклассы нельзя использовать селекторы-потомки (div p a), псевдоэлементы (::first-line), групповые селекторы или комбинации нельзя в одной строке применять несколько :not()-селекторов

Слайд 56


:not() Пример .footnote:not(div) img:not(.portrait) div:not(#banner)
Описание слайда:
:not() Пример .footnote:not(div) img:not(.portrait) div:not(#banner)

Слайд 57


Спасибо за внимание
Описание слайда:
Спасибо за внимание

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию