Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Для обозначения универсального селектора применяется символ звездочки (*) и в общем случае синтаксис будет следующий.
* { Описание правил стиля }
В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.
В примере 1.50 показано одно из возможных приложений универсального селектора - выбор шрифта и размера текста для всех элементов документа.
Пример 1.50. Использование универсального селектора |
|||||||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY .
Вопросы для проверки
1. Какой стиль установит красный цвет текста в абзаце?
- * HTML P { color: red; }
- HTML * P { color: red; }
- P * { color: red; }
- BODY * P { color: red; }
- BODY P * { color: red; }
2. Что означает следующая запись в стилях?
* DIV * { background: green; }
- Установить фоновый цвет для всех элементов веб-страницы.
- Задать цвет для всех текстовых элементов документа.
- Установить фоновый цвет для всех элементов внутри контейнера .
- Установить фоновый цвет только для тегов
, вложенных в другие контейнеры.- Зеленый цвет фона для всех тегов
в коде.3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut wisis enim ad
- Quis nostrud exerci
- Tution ullamcorper suscipit
- Lorem
- consectetuer
- nostrud
Ответы
1. HTML * P { color: red; }
2. Установить фоновый цвет для всех элементов внутри контейнера
.Здравствуйте, уважаемые читатели блога сайт. Сегодня мы продолжим наполнять материалами наш и начнем говорить о такой фундаментальной вещи, как селекторы в языке CSS.
Их существует семь видов — тега, класса (class), Id, универсальный, атрибутов, а так же псевдоклассов и псевдоэлементов. Многовато, не правда ли? Ну, ничего, потихоньку разберем их все и при том на подробных примерах.
В предыдущих публикациях мы уже успели рассмотреть , а так же познакомились с единицами размеров, такими как и узнали о принципах наследования в CSS. Ну, а сегодня мы, как я и говорил, открываем очень серьезную главу в изучении языка стилевой разметки.
Селекторы тегов и классов (class) в языке CSS
Прежде, чем изучать стилевые правила, необходимо будет узнать, как и по каким принципам задавать те метки, по которым браузер поймет, к каким же именно элементам Html кода нужно их применять. Селекторы бывают разные. Самые простые, с точки зрения понимания, используют названия тегов, к которым должны будут применяться написанные после них правила языка CSS.
В данном примере для всех тегов абзаца P будет использоваться красный цвет шрифта и серый цвет для заливки фона. У любого CSS правила может быть прописано сразу несколько селекторов. Как нужно их будет читать при этом? Всегда справа налево , т.е. начинать с самого ближнего к открывающей фигурной скобке.
В приведенном примере в первой строчке показан селектор тега (элемента), который предписывает использовать красный цвет шрифта для всех контейнеров Div.
Содержимое обычного контейнера Div
Во второй строчке мы видим пример сложного селектора, в котором у нас появляется такой новый элемент, как класс (class) . Он прописывается в качестве . В качестве значения для class мы можем использовать произвольное имя, используя символы ,,,[_],[-].
Но кроме class в языке стилевой разметки используется еще и Id. Чем отличается класс от Id? Значение последнего должно быть уникальным, т.к. Id является уникальным идентификатором для Html тега и его название (значение) может использоваться в коде только один раз.
А значение для class не является уникальным и может использоваться для сколь угодно большого количества элементов в коде. Т.е. разные теги (Div, P, H1 и т.д) могут иметь одинаковое значение своего атрибута class:
А как он используется в селекторах CSS? Оказывается, что его имя пишется с поставленной впереди точкой .
Поэтому, когда мы видим в CSS коде что-то начинающееся с точки, то сразу понимаем, что речь идет про класс. Если рассматривать пример приведенный на скриншоте, то теперь во всех элементах Html кода, где будет прописан «class» со значение «Blue», текст будет покрашен в синий цвет.
Но это произойдет вовсе не из-за того, что название класса мы выбрали «Blue». Можно было назвать его как угодно (хоть «xyz»), а цвет в нашем примере задается именно приписанным для селектора с этим классом. Надеюсь, это понятно? Давайте поменяем название (значение) class в примере:
Абзац с текстом
Абзац с текстом
Т.е. теперь у нас класс XYZ и прописанное для него правило:
Xyz {color:blue}
покрасило текст абзаца в синий цвет. Этот пример еще раз подчеркивает, что название для атрибута class можно использовать любое. Однако, продолжим.
Давайте еще раз посмотрим на примере, как используются селекторы тегов и классов в CSS. Представим, что у нас прописаны следующие стилевые правила:
Div {color:red} div.a123 {color:green} .xyz {color:blue}
А так же представим, что в Html коде у нас присутствуют следующие элементы:
В соответствии с прописанными правилами для указанных селекторов содержимое приведенных элементов Html кода должно будет выглядеть так:
А теперь давайте посмотрим, почему именно так браузер интерпретировал стилевое оформления данных элементов Html кода. Для первого контейнера Div, в котором не прописано никакого class, будет действовать CSS правило применимое для всех контейнеров: div {color:red}. Следовательно, его содержимое будет окрашено в красный цвет. Что и требовалось показать.
В теге второго Div у нас прописан класс «a123». В этом случае будут применяться CSS правила соответствующие «div.a123» (ибо у нас как раз имеется в наличии тег Div с прописанным в нем атрибутом class="a123"). Поэтому содержимое второго контейнера будет окрашено в зеленый цвет.
Но вы, наверное, заметили, что ко второму Div можно ведь применить и первое CSS правило «div {color:red}», ибо оно предназначено для всех контейнеров без исключения. Получается противоречие, которое решается в CSS путем ввода понятия .
Мы с вами об этом поговорим подробно чуть позже, ну, а сейчас я просто скажу, что приоритет «div.a123» (для второго Div в рассматриваемом примере) будет выше.
Кстати, похожая ситуация возникает и с третьим Div из нашего примера. К нему подходят сразу два варианта: селектор тега «div» и класса «.xyz». Опять же в силу пока не объясненных мною причин (читайте об этом по приведено чуть выше ссылке), приоритет последнего будет выше, поэтому содержимое третьего контейнера будет окрашено в синий цвет.
Давайте двигаться дальше. В приведенном примере у нас дальше идет тег абзаца P, в котором прописан class="a123". Получается так, что данный элемент не попадает ни под один из трех прописанных нами селекторов (все три мимо него промахнулись).
У него есть только пересечение со вторым вариантом, однако этот селектор будет использоваться только для тегов «Div» с классом «a123», но никак не для тега абзаца P. В результате цвет текста в этом абзаце останется принятым по умолчанию, т.е. черным.
Дальше в примере у нас следует элемент параграфа с class="xyz". Для него будет применяться последнее CSS правило «.xyz {color:blue}». Следовательно, текст этого абзаца будет окрашен в синий цвет. Тут, думаю, все понятно.
Универсальный селектор и уникальный идентификатор ID
Теперь давайте перейдем к Id, о которых я уже успел упомянуть. Когда мы в CSS коде видим что то со стоящей впереди решеткой (хешем) , то это означает, что мы имеем дело с Id:
Обычно этот селектор пишут без упоминания тега , к которому он относится (первый вариант на приведенном чуть выше примере), хотя второй вариант написания тоже допустим, но употребляется редко. Связано это с тем, что значение атрибута Id в коде будет уникальным, а значит не может быть двух элементов с одинаковыми значениями Id. Т.е. нет смысла уточнять, хотя это не возбраняется.
Поэтому обычно просто пишут хеш (решетку), а сразу за ним значение (название) атрибута Id. Предположим, что у нас прописано следующее правило для Id:
#back {color:red}
а в коде имеется следующий фрагмент:
который в результате применения к нему правила, стоящего после «#back», будет интерпретирован браузером так:
Контейнер Div с уникальным идентификатором
Так же в CSS предусмотрен и универсальный селектор обозначаемый звездочкой , которая показывает, что данное правило будет применяться вообще к любому элементу в коде:
* {color:black}
В этом случае текст, заключенный в любой тег, будет черным (цвет по умолчанию). Понятно, что все остальные селекторы (тегов, классов и Id) будут иметь приоритет выше, чем у универсального.
Селекторы атрибутов и их будущее в современном CSS
Все описанные выше варианты (тега, класса, Id и универсальный) будут работать абсолютно во всех браузерах. Но существуют еще варианты, работающипе не везде.
К такому типу относятся селекторы атрибутов, которые очень удобны и позволяют существенно расширить и одновременно упростить возможности точечного воздействия на , но которые, к сожалению, не имеют стопроцентной поддержки всеми браузерами .
Как вы, наверное, помните, в языке Html внутри тегов мы можем использовать различные атрибуты, которые позволяют придать определенные свойства содержимому этих самих элементов. Поэтому было бы логично и в языке CSS использовать в качестве селекторов не только названия тегов, но и названия атрибутов.
Собственно, мы это уже делали, когда рассматривали class и Id, ибо они по сути являлись атрибутами каких-то тегов. Просто Айди и Класс имеют очень большое значение в верстке и их вынесли в отдельные группы, каждый со своим собственным синтаксисом.
А как использовать в селекторах остальные существующие в языке Html атрибуты (не Id и не class)? Довольно просто — заключать их в квадратные скобки :
{color:green}
Теперь любой тег в Html коде, у которого будет прописан «title», будет иметь цвет текста зеленый.
Очень удобно, на мой взгляд. Но вся проблема использования селекторов атрибутов заключается в том, что в браузере IE 6 и ниже они не работают вообще или же работают, но только частично. Покуда доля пользователей выходящих в интернет с помощью IE 6 не будет равна нулю, этот удобный способ, скорее всего, не получит широкого распространения при верстке. Но тем не менее, знать об их существовании и уметь их использовать нужно.
Как вы видите из примера, не важно, имеет ли атрибут указанный в селекторе какое-либо значение или же он пустой. Но это еще далеко не все, что можно с ним вытворять, ибо это просто песня.
Можно в них указывать не только название атрибута, но и его значение :
{color:green}
В результате CSS правила, прописанные для такого селектора, будут применяться только для того тега, у которого имеется «title» со значением «Первый параграф» (в нашем примере это будет вторая строчка):
Описанный пример представлял из себя строгое равенство, но можно написать этот селектор и так:
{color:green}
Т.о. данное CSS правило применится только к тем элементам Html кода, у которых в «title» содержится слово «параграф» (в нашем примере это будут вторая и третья строки):
Синтаксис селектора атрибута интерпретирует «~=» как «содержится слово целиком». Например, для элемента с title="Вторым параграфом" CSS правило «color:green» уже применяться не будет.
Но можно вместо этого поставить «*=» и тогда будут учитываться не только отдельные слова указанные в селекторе, но и части слов (любой кусок текста, содержащийся в любом месте атрибута):
{color:green}
В этом случае и для элемента с title="Вторым параграфом" сработает правило «color:green» и его текст подкрасится зеленым цветом. Надеюсь, что это понятно. Есть еще такой оператор как «^=» (все что начинается с указанного в скобках значения), который помогает создать подобный селектор атрибута:
{color:red}
Вы, наверное, помните, что атрибут для указания . Так вот, довольно часто внутренние ссылки на сайте делают относительными, а внешние по другому, как сделать абсолютными, никак не получится.
Следовательно, все внешние ссылки будут начинаться с «http», а внутренние могут задаваться в относительном виде без использования «http». Т.о. прописанный в нашем примере селектор позволит окрасить все внешние ссылки на сайте (все абсолютные) в красный цвет. Ну, а относительные, не содержащие «http», останутся того цвета, который был принят для них по умолчания. По моему супер!!!
Как вы можете видеть, селекторы атрибутов дают нам массу возможностей и то, что они еще широко не используются, является заслугой очень бедной и обиженной судьбой компании Мелкософт, а в частности их детища IE 6. Но потихоньку они начинают применяться в CSS и вскоре, конечно же, пробьют себе дорогу в жизнь.
Да, есть еще один оператор «$=» — все, что заканчивается на указанное в кавычках значение:
{color:green}
В результате в зеленый цвет будут покрашены вторая и третья строка из нашего первого примера, т.к. значения «title» у них заканчивается на «раф». Вот так вот замечательно работали бы селекторы атрибутов в современном языке CSS, если бы не существовал до сих пор определенный процент пользователей юзающих браузер IE 6.
Собственно, из всех типов нам осталось рассмотреть только два: . Но я хочу перенести это на следующую статью, где мы так же поговорим и про их различные комбинации.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Background в CSS (color, position, image, repeat, attachment) - все для задания цвета фона или фоновой картинки Html элементов
CSS - что это такое, как таблицы каскадных стилей подключаются к Html коду с помощью Style и Link
Единицы размеров (пиксели, Em и Ex) и наследование правил в CSS
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Padding, Margin и Border - задаем в CSS внутренние и внешние отступы, а так же рамкидля все сторон (top, bottom, left, right) Как настроить чередование фонового цвета строк таблиц, списков и прочих Html элементов на сайте с помощью псевдокласса nth-child
Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстраницеУниверсальный селектор CSS, пожалуй, самый простой в понимании, так как он указывает, что стили будут применены абсолютно ко всем элементам без исключения. Универсальный селектор состоит всего из одного знака - звездочка (*), общий синтаксис следующий:
* { свойство: значение; свойство: значение; ... }
Пример использования универсального селектора CSS
Универсальный селектор Параграф 1
Параграф 2
Параграф 3
Результат в браузере
Параграф 1
Параграф 2
Параграф 3
В этом примере были обнулены поля, отступы и убраны рамки элементов страницы. Для чего это может быть нужно? Как вы уже знаете из урока , некоторые HTML-элементы изначально имеют определенные значения некоторых свойств, например у параграфов это ненулевые верхние и нижние поля пустого пространства, у ссылок-изображений это рамки и т.д. Но не все так просто, дело в том, что в разных браузерах размер этих полей может несколько отличаться, а некоторые уже давно не устанавливают по умолчанию рамки у ссылок-изображений. И это далеко не все возможные отличия.
Так вот, многие верстальщики (а вы сейчас учитесь именно верстке) создают так называемый «Сброс стилей CSS», то есть в самом начале таблицы стилей они обнуляют все возможные ненулевые значения CSS, а потом, в процессе работы, добавляют стили элементам, но уже, естественно, со своими значениями. Таким образом можно быть уверенным, что во всех браузерах HTML-страница будет выглядеть одинаково.
Очень часто для сброса стилей как раз и применяется универсальный селектор, хотя некоторые предпочитают вместо него просто перечислять через запятую некоторые селекторы тегов, а другие вообще не используют сброс, полагаясь на свою внимательность. Как будете поступать вы - решать только вам, но в любом случае пока об этом думать рано. И будьте уверены, что со временем у вас сам собой выработается свой стиль написания стилей (извините за тавтологию) так что не заморачивайтесь на этом.
Домашнее задание.
Делать домашнее задание по универсальному селектору я не вижу смысла, так как тут все слишком очевидно, поэтому займемся немного другим.
- Измените стили тега таким образом, чтобы он стал похож на параграф. Какое свойство для этого нужно подумайте сами.
- Измените тег параграфа так, чтобы он наоборот стал похож на тег выделения длинных цитат.
- Превратите тег из элемента уровня строки (inline) в блочный элемент. Используйте для этого свойство
- Установить фоновый цвет только для тегов