Задание для самостоятельного выполнения

Составьте HTML страницу на которой:

1. Ссылки по умолчанию имеют цвет текста черный.

2. При наведении на ссылку цвет текста ссылки должен соответствовать её названию (red, green или blue).

3. При выделении текста ссылки цвет заднего фона должен соответствовать её названию.

4. Цвет первой буквы каждого абзаца должен соответствовать определенному цвету.

5. При выделении текста абзаца цвет заднего фона должен соответствовать цвету первой буквы.

6. Пока на абзаце удерживается кнопка мыши цвет текста должен соответствовать тематике абзаца (red, green или blue).

7. Продвинутое задание: пока на абзаце удерживается кнопка мыши цвет первой буквы должен быть черный.

8. Продвинутое задание: оптимизируйте (сократите) css код, образуя групповые селекторы, отвечающие за один и тот же цвет при том, или ином состоянии элемента, где это возможно.

Селекторы атрибутов

Исходя из названия заголовка, вы можете догадаться, что благодаря использованию селекторов атрибутов вы можете выбрать те элементы страницы, которые имеют определённые HTML атрибуты.

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

img[title] { /* выбирает все элементы <img> с атрибутом title */ блок объявлений;}

img в данной случае аналогичен селектору типа, т.е выбирает все элементы <img>, а в квадратных скобках мы задаем имя атрибута этого элемента. То есть происходит выборка всех элементов данного типа с определённым атрибутом, в нашем примере это глобальный атрибут title, определяющий текстовую подсказку о содержимом элемента.

Вы можете использовать селекторы атрибутов не только напрямую к элементам, но и использовать их с прочими селекторами, например с селекторами класса или id селекторами:

.main[title] { /* выбирает все элементы с классом main и атрибутом title */ блок объявлений;} #main[title] { /* выбирает элемент с идентификатором main и атрибутом title */ блок объявлений;}

В данном случае первый селектор выбирает все элементы, которые имеют значение глобального атрибута class равным main и глобальным атрибутом title. Второй селектор выбирает элемент, который имеют значение глобального атрибута id равным main и глобальным атрибутом title.

Пример в котором, мы выберем все элементы <img>, у которых присутствует атрибут alt, который задает альтернативный текст для изображения. …

…

С помощью селектора атрибутов можно выбрать элементы не только с определённым атрибутом, но и указать с каким значением должен быть этот атрибут.

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

…

В некоторых случаях нам необходимо выбрать элементы, значение атрибута которых, начинается с определённых символов. В CSS 3 для этих целей введен специальный селектор атрибута, который выбирает элементы у которых определённый атрибут имеет значение, начинающееся с определённых символов. Этот селектор атрибута имеет следующий синтаксис:

[attribute ^ = value] {

блок объявлений;

}

Значение атрибута в этом случае мы указываем в кавычках, чтобы браузер не интерпретировал это как начало гиперссылки.

Пример в котором выберем на странице все абсолютные адреса внешних гиперссылок, которые начинаются с http://, либо https:// …

… Код тела документа допишите самостоятельно …

пример в котором мы выберем гиперссылки, которые заканчиваются определённым разрешением файла …

… Код тела документа допишите самостоятельно …

Следующий селектор позволит нам, к примеру, выбрать изображения, которые содержат в названии IMG_ (как правило такое наименование файлов использует компания Canon):

img [src*="IMG_"] { /* выбирает все элементы img, атрибут src, которых содержит символы "IMG_" */

блок объявлений;

}

/* селектор выбирает элементы с такими значениями как "xxxIMG_", "IMG_xxxx" и "xxxIMG_xxxx" */

Браузер интерпретирует это как необходимость выбора всех изображений, атрибут src которых содержит IMG_ (в любом месте). Зачастую такой способ позволяет быстрее отформатировать необходимые элементы, по сравнению с созданием и присвоением стилевого класса для каждого элемента.

Следующий селектор позволяет выбрать элемент, значение атрибута которого содержит определённое слово (не зависимо от позиции):

p[title ~="home"] { /* выбирает элементы , которые содержат определенное слово */

блок объявлений;

}

Абзац title="go home"

Абзац title="home home"

Абзац title="home1"

Абзац title="homes"

Абзац title="shome"

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

[title | = home] { /* выбирает все элементы с атрибутом, значение которого начинается с определённого слова (после него не должно быть никаких символов, либо допускается продолжать значение через дефис, иначе выборка не будет произведена) */

блок объявлений;

}

Абзац title="home"

Абзац title="home-1"

Абзац title="home home"

Абзац title="not home"

Абзац title="homes"

Абзац title="shome"

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

Псевдокласс отрицания :not()

Селектор :not() или псевдокласс отрицания, позволяет выбрать элементы, или селекторы отличные от указанных.

Что нельзя использовать с псевдоклассом :not():

· Использовать в одном селекторе несколько псевдоклассов :not().

· Использовать с псевдоэлементами (::first-letter, ::first-line и так далее).

· Нельзя использовать с селекторами потомков (например, div ul a).

· Использовать в групповых селекторах (комбинации из селекторов).

Давайте рассмотрим пример в котором по разному стилизуем изображения. Допустим у нас есть изображения фиксированного размера со следующими значениями:

img { /* выбираем все изображения */width: 100px; /* ширина элемента в пикселях */height: 100px; /* высота элемента в пикселях */}

Создадим селектор класса .photo и применим его к необходимым изображениям, чтобы они получили оранжевую границу.

.photo { /* выбираем все элементы с классом photo */border: 2px solid orange; /* сплошная граница размером 2 пикселя оранжевого цвета */ }

Перед Вами стоит задача изменить стиль для всех изображений (предположим, что их сотни), но при этом у Вас ограниченное количество времени и необходимо сделать так, чтобы эти изменения затронули изображения с классом .photo. Для этого Вам необходимо создать селектор совместно с псевдоклассом отрицания:

img:not(.photo) { /* выбираем все изображения, которые не имеют класса photo */border: 2px dashed green; /* пунктирная граница размером 2 пикселя зеленого цвета */}

…

Селекторы дочерних элементов

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

Элемент, подчиненный другому элементу более высокого уровня, является дочерним. На изображении ниже оба элемента <h2> и являются дочерними по отношению к <body>, но элемент при этом не является дочерним для элемента <body>, так как он расположен внутри тега , и является дочерним именно для него.

Перед нами стоит задача стилизовать гиперссылку (элемент <a>), который выделен оранжевым цветом на изображении:

При использовании селектора потомков body a приведет к выбору всех элементов <a>, так как они являются вложенными по отношению к элементу <body>, если мы используем селектор потомков p a, то это приведет к выбору двух элементов <a>, которые вложены внутри элементов , так как они оба являются его потомками.

В нашем случае, как никогда лучше подойдет селектор дочерних элементов, благодаря которому мы можем добраться до необходимого нам элемента <a> самым простым способом.

p > a { /* выбирает любой элемент <a> дочерний по отношению к */блок объявлений;}

В этом примере с использованием селектора дочерних элементов мы выбрали все дочерние <a>, вложенные в (один элемент), а с помощью селектора потомков стилизовали все потомки <a>, вложенные в (убрали декорирование текста у двух элементов).

…

Дата добавления: 2020-04-25; просмотров: 241; Мы поможем в написании вашей работы!

Поделиться с друзьями:

⇐ Предыдущая 1 2 3 456 7 8 Следующая ⇒

Мы поможем в написании ваших работ!