Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Динамика и детерминанты показателей газоанализа юных спортсменов в восстановительном периоде после лабораторных нагрузок до отказа...

Оснащения врачебно-сестринской бригады.

Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...

Интересное:

Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...

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

Как мы говорим и как мы слушаем: общение можно сравнить с огромным зонтиком, под которым скрыто все...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Одно из нескольких значений атрибута

2020-12-27

102

0.00 из 5.00 0 оценок

Заказать работу

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

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

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

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

Пример 5.20. Стиль в зависимости от имени класса

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Блок</title> <style> [class~="block"] h3 { color: green; } </style> </head> <body> <div class="block tag"> <h3>Заголовок</h3> </div> </body> </html>

В данном примере зелёный цвет текста применяется к селектору H3, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

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

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

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

Пример 5.21. Дефисы в значениях

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Блок</title><style>DIV[class|="block"] { background: #306589; /* Цвет фона */ color: #acdb4c; /* Цвет текста */ padding: 5px; /* Поля */}DIV[class|="block"] A { color: #fff; /* Цвет ссылок */}</style></head><body><div class="block-menu-therm"><h2>Термины</h2><div class="content"><ul class="menu"><li><a href="t1.html">Буквица</a></li><li><a href="t2.html">Выворотка</a></li><li><a href="t3.html">Выключка</a></li><li><a href="t4.html">Интерлиньяж</a></li><li><a href="t5.html">Капитель</a></li><li><a href="t6.html">Начертание</a></li><li><a href="t7.html">Отбивка</a></li></ul></div></div></body></html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

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

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

Универсальный селектор

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

Для обозначения универсального селектора применяется символ звёздочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

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

В примере 5.21 показано одно из возможных приложений универсального селектора – выбор шрифта и размера текста для всех элементов документа.

Пример 5.22. Использование универсального селектора

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Универсальный селектор</title> <style> * { font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ font-size: 96%; /* Размер текста */ } </style> </head> <body> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> </body> </html>

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.

Псевдоклассы

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

Синтаксис применения псевдоклассов следующий.

Селектор:Псевдокласс { Описание правил стиля }

Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}), а также к контекстным селекторам (.menu A:hover {background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.

Условно все псевдоклассы делятся на три группы:

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

- имеющие отношение к дереву элементов;

- указывающие язык текста.

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

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

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

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

Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...