Интернет технологии / 2014_inet_lec_8

Как и при использовании классов, идентификаторы можно применять к конкретному тегу:

Тег#Имя_идентификатора { свойство1: значение [; свойство2: значение; …] }

сss

html

11

Курс «Интернет-технологии». Лекция 8. Использование CSS

Контекстный селектор состоит из простых селекторов разделенных пробелом:

Тег1 Тег2 { свойство1: значение [; свойство2: значение; …] }

В этом случае стиль будет применяться к Тегу2 если он – потомок Тега1.

сss

html

12

Курс «Интернет-технологии». Лекция 8. Использование CSS

Дочерний селектор – селектор, который непосредственно находится внутри родительского элемента:

Тег1 > Тег2 { свойство1: значение [; свойство2: значение; …] }

В этом случае стиль будет применяться к Тегу2 если Тег1 – его родитель.

сss

html

13

Курс «Интернет-технологии». Лекция 8. Использование CSS

Соседние селекторы – селекторы, которые в дереве элементов являются смежными (соседними) элементами.

Тег1 + Тег2 { свойство1: значение [; свойство2: значение; …] }

В этом случае стиль будет применяться к Тегу2 только в том случае, если

он является смежным для Тега1 и следует сразу после него.

сss

html

14

Курс «Интернет-технологии». Лекция 8. Использование CSS

Значение атрибута оканчивается определенным текстом. Устанавливает стиль

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

[атрибут $= "значение"] { Описание правил стиля }

Селектор[атрибут $= "значение"] { Описание правил стиля }

Значение атрибута содержит указанный текст:

[атрибут *= "значение"] { Описание правил стиля }

Селектор[атрибут *= "значение"] { Описание правил стиля }

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

атрибута имеется указанное значение или оно входит в список значений, разделяемых пробелом.

[атрибут ~= "значение"] { Описание правил стиля }

Селектор[атрибут ~= "значение"] { Описание правил стиля }

16

Курс «Интернет-технологии». Лекция 8. Использование CSS

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

[атрибут |= "значение"] { Описание правил стиля }

Селектор[атрибут |= "значение"] { Описание правил стиля }

Комбинирование атрибутов. Все перечисленные методы можно комбинировать между собой, определяя стиль для элементов, которые содержат два и более атрибута. В подобных случаях квадратные скобки идут подряд:

[атрибут1="значение1"][атрибут2="значение2"] { … } Селектор[атрибут1="значение1"][атрибут2="значение2"] { … }

17

Курс «Интернет-технологии». Лекция 8. Использование CSS

1.Применение стиля к ссылкам, в атрибуте href которых встречается слово «mysite».

2.Применение стиля (текст зеленого цвета) к заголовку h3, если одно из имен класса у элемента-предка задано как «block».

3.Применение стиля к внешним ссылкам (ссылки с абсолютной адресацией):

18

Курс «Интернет-технологии». Лекция 8. Использование CSS

действий пользователя.

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

Селектор:Псевдокласс { свойство1: значение [; свойство2: значение; …] }

Условно все псевдоклассы можно разделить на три группы:

1. Определяющие состояние элементов;

2.Имеющие отношение к дереву элементов (:first-child – применяется к первому дочернему элементу селектора);

3.Указывающие язык текста (:lang – определяет язык, который используется в документе или его фрагменте).

19

Курс «Интернет-технологии». Лекция 8. Использование CSS

Псевдоклассы, определяющие состояния элементов, наиболее часто используются для установки разных стилей ссылок:

:link – ссылки на непосещенные страницы.

a:link { color: blue; }

:visited – ссылки на уже посещенные страницы

a:visited { color: #660099;}

:active – используется для активных ссылок.

a:active { background-color: #FFFF00; }

20

Курс «Интернет-технологии». Лекция 8. Использование CSS