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

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

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

       Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

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

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

2. Что означает следующая запись в стилях?

Установить фоновый цвет для всех элементов веб-страницы.
Задать цвет для всех текстовых элементов документа.
Установить фоновый цвет для всех элементов внутри контейнера .
Установить фоновый цвет только для тегов , вложенных в другие контейнеры.
Зеленый цвет фона для всех тегов в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

Ответы

2. Установить фоновый цвет для всех элементов внутри контейнера .

Источник

Базовые селекторы

К базовым относятся селекторы элементов, классы, идентификаторы, универсальный селектор, а также селекторы атрибутов.

Селекторы элементов

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

, которые встречаются в коде HTML. В примере 1 показано изменение цвета фона и текста веб-страницы с помощью селектора body .

Пример 1. Использование селектора body

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

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона и текста веб-страницы

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

Классы

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

Здесь имя класса задано как .block , а в HTML-коде к желаемым элементам добавляется атрибут class и в качестве значения пишем имя класса, но уже без точки впереди.

К имени класса предъявляются особые требования:

класс не должен начинаться с цифры — .1block писать нельзя, но допустимо .block1;
класс не должен содержать русские буквы, только латинские — .кнопка использовать нельзя, .knopka можно;
в имени класса допустимо использовать дефис (-) и подчёркивание (_) — .view-design-block и .search_form_button для примера;
класс можно начинать с дефиса и подчёркивания — .__error__ для примера;
классы чувствительны к регистру — .Red, .RED и .red — это всё разные имена.

В примере 2 показано добавление класса cite к элементу

Пример 2. Использование класса

Результат данного примера показан на рис. 2.

Рис. 2. Вид абзаца, оформленного с помощью класса

Для первого абзаца используется тёмно-красный цвет текста, а следующий абзац, к которому применяется класс с именем cite , отображается тёмно-синим цветом и с линией слева.

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

Сперва пишется имя элемента, затем через точку без пробелов имя класса. Селектор p.cite будет задавать стиль только для элементов

с классом cite . В свою очередь стиль не будет применяться просто к элементам

без какого-либо класса, к элементам

с любым другим классом, ко всем остальным элементам, даже с классом cite . В примере 3 показано применение разных классов.

Пример 3. Использование классов

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

Результат данного примера показан на рис. 3. Обратите внимание, что селектор span.term меняет стиль элемента с классом term и не затрагивает элементы и .

Рис. 3. Вид элементов, оформленных с помощью классов

Комбинация элемента и класса как правило применяется для повышения приоритета стиля. Селектор p.cite имеет больший приоритет, чем .cite , а он в свою очередь больше, чем селектор элемента p . Таким образом, p.cite > .cite > p. Мы ещё вернёмся к этому вопросу в разделе про каскадирование.

К любому элементу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в CSS-коде ниже. В самом атрибуте class порядок перечисления классов роли не играет.

В примере 4 показано использование разных классов для создания разноцветных кнопок.

Результат данного примера показан на рис. 4. К элементу добавляется класс btn , который определяет общий стиль кнопок, а цвет фона и текста отдельных кнопок меняется через классы btn-success , btn-info и btn-warning .

Идентификаторы

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

В CSS при описании идентификатора вначале указывается символ решётки (#), затем идёт произвольное имя идентификатора.

Здесь имя идентификатора задано как #sidebar, в HTML-коде к желаемым элементам добавляется атрибут id и в качестве значения пишется имя идентификатора, но уже без решётки.

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

Для имён идентификаторов работают те же правила, что и для классов — имя не должно начинаться с цифры, содержать русские буквы и др.

В примере 5 показано изменение стиля идентификатора #help.

Пример 5. Использование идентификатора

Результат данного примера показан на рис. 5. Заметьте, что мы спокойно можем сочетать class и id в одном элементе, при этом стиль для идентификатора всегда имеет более высокий приоритет чем для класса.

Рис. 5. Результат применения идентификатора

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

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

В данном случае для всех элементов задаётся нормальное начертание текста. Таким образом, элементы с жирным начертанием по умолчанию (вроде ) теряют свою «жирность».

Универсальный селектор, как правило, применяется для сброса CSS. Цель сброса — приведение стилей разных браузеров к одному виду. Для каждого элемента браузер задаёт стиль по умолчанию, при этом возможны небольшие различия в отображении элемента в разных браузерах. Чтобы убрать эти различия и применяется сброс. На деле вопрос, использовать сброс CSS или нет, спорный, каждый решает его по своему.

В примере 6 показано обнуление свойства margin для всех элементов веб-страницы.

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

Амфифильный суглинок

Результат данного примера показан на рис. 6.

Источник

CSS селекторы, свойства, значения

Каскадная таблица стилей состоит из CSS правил. Каждое CSS правило состоит из селектора и блока декларации.

CSS селекторы очень похожи на HTML теги. Селектор указывает на HTML элемент, для которого вы определяете визуальный стиль.

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

Каждая декларация состоит из имени свойства и его значения, разделенных двоеточием.

Свойства – это ключевые слова, такие как color , font-weight или background-color , которым присвоены определенные значения:

В данном примере создается CSS селектор body , который соотносится с HTML тегом . В этом селекторе определяется два свойства – font-size и color , которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.

Категории CSS селекторов

CSS селекторы можно разделить на пять категорий:

Простые селекторы (элементы отбираются по имени, идентификатору или классу)
Комбинированные селекторы (элементы отбираются по специфическим отношениям между ними)
Селекторы псевдоклассов (элементы отбираются по определенному состоянию)
Селекторы псевдоэлементов (отбирается и стилизуется часть элемента)
Селекторы атрибутов (элементы отбираются по атрибутам или значениям атрибутов)

CSS селектор элемента

Селектор элемента или HTML селектор — это простой селектор, который отбирает HTML элементы по их имени.

В следующем примере отбираются все существующие на странице элементы

. Их текст будет красного цвета и выровнен по центру:

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

CSS селектор идентификатора

Селектор идентификатора для отбора заданного элемента использует атрибут id HTML элемента.

Идентификатор элемента уникален в пределах веб-страницы, таким образом селектор идентификатора используется для выбора одного уникального элемента!

Чтобы определить селектор идентификатора, нужно написать символ решетки (#) и имя идентификатора элемента.

В следующем примере определяются стили для HTML элемента с идентификатором :

Внимание! Имя идентификатора не может начинаться с цифры!

CSS селектор класса

Селектор класса для отбора заданного элемента использует атрибут class HTML элемента.

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

В следующем примере все HTML элементы с классом будут отображать текст красного цвета, который выровнен по центру:

Так как один и тот же класс может присваиваться нескольким элементам, вы можете указать на какой именно HTML элемент должен влиять селектор класса.

В следующем примере только элементы

с классом будут отображать текст красного цвета, который выровнен по центру:

Также, HTML элементы могут иметь больше одного класса.

В следующем примере элемент

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

  p.center < text-align: center; color: red; >p.large Этот параграф определен по двум классам.

Внимание! Имя класса не может начинаться с цифры!

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

Универсальный селектор (*) отбирает абсолютно все HTML элементы на странице.

Следующее CSS правило окажет воздействие на каждый HTML элемент на странице:

Группирование селекторов

Группирование селекторов позволяет объединить одно и то же определение стиля для нескольких HTML элементов в одну декларацию.

Посмотрите на следующий код CSS (для элементов h1, h2 и p заданы одинаковые стили):

Чтобы уменьшить количество кода, мы можем сгруппировать эти селекторы в одну декларацию.

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

В следующем примере мы группируем селекторы из предыдущего примера:

Источник

Читайте также: Php вывод нечетных чисел