Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Селекторы атрибутов
Содержание
- 1. Селекторы атрибутов
- 2. Селекторы атрибутовПо значению атрибута[атрибут=“значение”] { … }Пример[href=“1.html”] {…}…
- 3. Селекторы атрибутовНачинается с определенного значения[атрибут^=“значение”] { … }Пример[href^=“1”] {…}…
- 4. Селекторы атрибутовЗаканчивается на определенное значение[атрибут$=“значение”] { … }Пример[href$=“.html”] {…}…
- 5. Селекторы атрибутовСодержит текст[атрибут*=“значение”] { … }Пример[href*=“html”] {…}………………
- 6. Селекторы атрибутовСодержит значение (одно из разделенных пробелами)[атрибут~=“значение”] { … }Пример[class~=“redText”] {…}……………
- 7. Селекторы атрибутовНачинается со значения, после которого идёт дефис[атрибут|=“значение”] { … }Пример[lang|=“en”] { } …
- 8. Селекторы атрибутовКомбинация селекторов атрибутов[атрибут1=“X"][атрибут2=“Y"] {…} Пример[href=“1.html”][title=“First”] { } …………
- 9. Селекторы псевдоклассов:active – активированный элемент (например, ссылка, по которой щелкнули мышью)Примерa:active {…}.bigLink:active {…}
- 10. Селекторы псевдоклассов:focus – еще не посещенная ссылкаПримерa:link
- 11. Селекторы псевдоклассов:link – элемент, получивший фокус (активное
- 12. Селекторы псевдоклассов:hover – элемент, на который наведен указатель мышиПримерa:hover {…}table .activeCell:hover {…}
- 13. Селекторы псевдоклассов:visited – посещенные ссылкиПримерa:visited {…}a.menuLink:visited {…}
- 14. Селекторы псевдоклассов:first-child – первый дочерний элемент элемента-родителяПримерdiv:first-child { } …
- 15. Селекторы псевдоклассов:first-letter – первый символ текста внутри элементаПримерdiv:first-letter { } …абвгдеёжз ийклмнопр
- 16. Селекторы псевдоклассов:first-line – первая строка текста внутри
- 17. Селекторы псевдоклассов:first-of-type – первый дочерний элемент такого же типаПримерtr:first-of-type {…}… 1 1
- 18. Скачать презентанцию
Селекторы атрибутовПо значению атрибута[атрибут=“значение”] { … }Пример[href=“1.html”] {…}…
Слайды и текст этой презентации
![Селекторы атрибутовПо наличию атрибута[атрибут] { … }Пример[href] {…}…](/img/thumbs/d975746616a0e14bb94b013201ff7a65-800x.jpg "Презентация на тему Селекторы атрибутовПо наличию атрибута[атрибут] { … }Пример[href] {…}…")
![Селекторы атрибутовПо значению атрибута[атрибут=“значение”] { … }Пример[href=“1.html”] {…}…](/img/thumbs/7808d37a81e8dcf38b8bca8f22d238be-800x.jpg "Селекторы атрибутов Селекторы атрибутовПо значению атрибута[атрибут=“значение”] { … }Пример[href=“1.html”] {…}…")
Слайд 3Селекторы атрибутов
Начинается с определенного значения
[атрибут^=“значение”] { … }
Пример
[href^=“1”] {…}
…
href=“12.html”>
![Селекторы атрибутовНачинается с определенного значения[атрибут^=“значение”] { … }Пример[href^=“1”] {…}…](/img/thumbs/ce1e462d2ca364724c1b731cf320b149-800x.jpg "Селекторы атрибутов Селекторы атрибутовНачинается с определенного значения[атрибут^=“значение”] { … }Пример[href^=“1”] {…}…")
Слайд 4Селекторы атрибутов
Заканчивается на определенное значение
[атрибут$=“значение”] { … }
Пример
[href$=“.html”] {…}
…
href=“1.xhtml”>
![Селекторы атрибутовЗаканчивается на определенное значение[атрибут$=“значение”] { … }Пример[href$=“.html”] {…}…](/img/thumbs/33c844614f3df7f6d5027dd80ec316c2-800x.jpg "Селекторы атрибутов Селекторы атрибутовЗаканчивается на определенное значение[атрибут$=“значение”] { … }Пример[href$=“.html”] {…}…")
Слайд 5Селекторы атрибутов
Содержит текст
[атрибут*=“значение”] { … }
Пример
[href*=“html”] {…}
…
…
…
…
href=“dhtml.php”>…
…
![Селекторы атрибутовСодержит текст[атрибут*=“значение”] { … }Пример[href*=“html”] {…}………………](/img/thumbs/c97b6661b93ec3e23f42b1288beb07cc-800x.jpg "Селекторы атрибутов Селекторы атрибутовСодержит текст[атрибут*=“значение”] { … }Пример[href*=“html”] {…}………………")
Слайд 6Селекторы атрибутов
Содержит значение (одно из разделенных пробелами)
[атрибут~=“значение”] { … }
Пример
[class~=“redText”]
{…}
…
…
…
…
…
![Селекторы атрибутовСодержит значение (одно из разделенных пробелами)[атрибут~=“значение”] { … }Пример[class~=“redText”] {…}……………](/img/thumbs/3122df6f240c9add2ade46dbe374e376-800x.jpg "Селекторы атрибутов Селекторы атрибутовСодержит значение (одно из разделенных пробелами)[атрибут~=“значение”] { … }Пример[class~=“redText”] {…}……………")
Слайд 7Селекторы атрибутов
Начинается со значения, после которого идёт дефис
[атрибут|=“значение”] { …
}
Пример
[lang|=“en”] { }
…
![Селекторы атрибутовНачинается со значения, после которого идёт дефис[атрибут|=“значение”] { … }Пример[lang|=“en”] { } …](/img/thumbs/1080ac169428efb8ad56fb2164ff83f0-800x.jpg "Селекторы атрибутов Селекторы атрибутовНачинается со значения, после которого идёт дефис[атрибут|=“значение”] { … }Пример[lang|=“en”] { } …")
Слайд 8Селекторы атрибутов
Комбинация селекторов атрибутов
[атрибут1=“X"][атрибут2=“Y"] {…}
Пример
[href=“1.html”][title=“First”] { }
…
title=“First”>…
…
…
Слайд 9Селекторы псевдоклассов
:active – активированный элемент (например, ссылка, по которой щелкнули
мышью)
Пример
a:active {…}
.bigLink:active {…}
Слайд 10Селекторы псевдоклассов
:focus – еще не посещенная ссылка
Пример
a:link {…}
#bestLink:link {…}
Примечание
Записи
a и a:link равносильны, т.е. :link можно опускать
Слайд 11Селекторы псевдоклассов
:link – элемент, получивший фокус (активное в данный момент
текстовое поле, кнопка и т.д.)
Пример
input:focus {…}
.nameTextField:focus {…}
Слайд 12Селекторы псевдоклассов
:hover – элемент, на который наведен указатель мыши
Пример
a:hover {…}
table
.activeCell:hover {…}
Слайд 13Селекторы псевдоклассов
:visited – посещенные ссылки
Пример
a:visited {…}
a.menuLink:visited {…}
Слайд 14Селекторы псевдоклассов
:first-child – первый дочерний элемент элемента-родителя
Пример
div:first-child { }
…
Слайд 15Селекторы псевдоклассов
:first-letter – первый символ текста внутри элемента
Пример
div:first-letter { }
…
абвгдеёжз
ийклмнопр
Слайд 16Селекторы псевдоклассов
:first-line – первая строка текста внутри элемента
Пример
div:first-line { }
…
text text text text text text text text text text
text
Слайд 17Селекторы псевдоклассов
:first-of-type – первый дочерний элемент такого же типа
Пример
tr:first-of-type {…}
…
1
1
