Разделы презентаций


CSS_селекторы.ppt

Содержание

Селекторы атрибутовПо значению атрибута[атрибут=“значение”] { … }Пример[href=“1.html”] {…}…

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

Слайд 1Селекторы атрибутов
По наличию атрибута
[атрибут] { … }

Пример
[href] {…}




Селекторы атрибутовПо наличию атрибута[атрибут] { … }Пример[href] {…}…

Слайд 2Селекторы атрибутов
По значению атрибута
[атрибут=“значение”] { … }

Пример
[href=“1.html”] {…}




Селекторы атрибутовПо значению атрибута[атрибут=“значение”] { … }Пример[href=“1.html”] {…}…

Слайд 3Селекторы атрибутов
Начинается с определенного значения
[атрибут^=“значение”] { … }

Пример
[href^=“1”] {…}


href=“12.html”>


Селекторы атрибутовНачинается с определенного значения[атрибут^=“значение”] { … }Пример[href^=“1”] {…}…

Слайд 4Селекторы атрибутов
Заканчивается на определенное значение
[атрибут$=“значение”] { … }

Пример
[href$=“.html”] {…}


href=“1.xhtml”>


Селекторы атрибутовЗаканчивается на определенное значение[атрибут$=“значение”] { … }Пример[href$=“.html”] {…}…

Слайд 5Селекторы атрибутов
Содержит текст
[атрибут*=“значение”] { … }

Пример
[href*=“html”] {…}




href=“dhtml.php”>…


Селекторы атрибутовСодержит текст[атрибут*=“значение”] { … }Пример[href*=“html”] {…}………………

Слайд 6Селекторы атрибутов
Содержит значение (одно из разделенных пробелами)
[атрибут~=“значение”] { … }

Пример
[class~=“redText”]

{…}








Селекторы атрибутовСодержит значение (одно из разделенных пробелами)[атрибут~=“значение”] { … }Пример[class~=“redText”] {…}……………

Слайд 7Селекторы атрибутов
Начинается со значения, после которого идёт дефис
[атрибут|=“значение”] { …

}

Пример
[lang|=“en”] { }





Селекторы атрибутовНачинается со значения, после которого идёт дефис[атрибут|=“значение”] { … }Пример[lang|=“en”] { } …

Слайд 8Селекторы атрибутов
Комбинация селекторов атрибутов
[атрибут1=“X"][атрибут2=“Y"] {…}
Пример
[href=“1.html”][title=“First”] { }

title=“First”>…




Селекторы атрибутовКомбинация селекторов атрибутов[атрибут1=“X

Слайд 9Селекторы псевдоклассов
:active – активированный элемент (например, ссылка, по которой щелкнули

мышью)

Пример
a:active {…}
.bigLink:active {…}



Селекторы псевдоклассов:active – активированный элемент (например, ссылка, по которой щелкнули мышью)Примерa:active {…}.bigLink:active {…}

Слайд 10Селекторы псевдоклассов
:focus – еще не посещенная ссылка

Пример
a:link {…}
#bestLink:link {…}

Примечание
Записи

a и a:link равносильны, т.е. :link можно опускать


Селекторы псевдоклассов:focus – еще не посещенная ссылкаПримерa:link {…}#bestLink:link {…} ПримечаниеЗаписи a и a:link равносильны, т.е. :link можно

Слайд 11Селекторы псевдоклассов
:link – элемент, получивший фокус (активное в данный момент

текстовое поле, кнопка и т.д.)

Пример
input:focus {…}
.nameTextField:focus {…}


Селекторы псевдоклассов:link – элемент, получивший фокус (активное в данный момент текстовое поле, кнопка и т.д.)Примерinput:focus {…}.nameTextField:focus {…}

Слайд 12Селекторы псевдоклассов
:hover – элемент, на который наведен указатель мыши

Пример
a:hover {…}
table

.activeCell:hover {…}


Селекторы псевдоклассов:hover – элемент, на который наведен указатель мышиПримерa:hover {…}table .activeCell:hover {…}

Слайд 13Селекторы псевдоклассов
:visited – посещенные ссылки

Пример
a:visited {…}
a.menuLink:visited {…}


Селекторы псевдоклассов:visited – посещенные ссылкиПримерa:visited {…}a.menuLink:visited {…}

Слайд 14Селекторы псевдоклассов
:first-child – первый дочерний элемент элемента-родителя

Пример
div:first-child { }







Селекторы псевдоклассов:first-child – первый дочерний элемент элемента-родителяПримерdiv:first-child { } …

Слайд 15Селекторы псевдоклассов
:first-letter – первый символ текста внутри элемента

Пример
div:first-letter { }



абвгдеёжз
ийклмнопр



Селекторы псевдоклассов:first-letter – первый символ текста внутри элементаПримерdiv:first-letter { } …абвгдеёжз ийклмнопр

Слайд 16Селекторы псевдоклассов
:first-line – первая строка текста внутри элемента

Пример
div:first-line { }



text text text text text text text text text text

text



Селекторы псевдоклассов:first-line – первая строка текста внутри элементаПримерdiv:first-line { } …text text text text text text text

Слайд 17Селекторы псевдоклассов
:first-of-type – первый дочерний элемент такого же типа

Пример
tr:first-of-type {…}



1


1




Селекторы псевдоклассов:first-of-type – первый дочерний элемент такого же типаПримерtr:first-of-type {…}…			1				 1

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика