что значит звездочка в css

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

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

В CSS3 универсальный селектор применяется также в комбинации с пространством имён.

Синтаксис

Обозначения

Пример

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

Источник

CSS-селекторы: Способы задавать CSS-стили для HTML-элементов

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

Это один из уроков курса HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровене, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.

Только на сайте FructCode вы можете найти актуальных версии моих курсов!

Что такое CSS-селекторы (CSS Selectors)

На первый взгляд вам может показаться, что определение CSS-селекторов сложное и непонятное. Но не волнуйтесь, на самом деле на практике все намного проще, чем кажется. И давайте сейчас на простых примерах рассмотрим что такое CSS-селекторы.

Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов

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

Универсальный CSS-селектор * (звездочка)

С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.

Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.

See the Pen BaWqwVm by Sergey Nikonov (@sergey-nikonov) on CodePen.

В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.

Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.

И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.

При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.

CSS-селекторы по классу (Class selectors)

С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.

Простой пример CSS-селектора по классу:

Запись CSS-стилей через точку «.» и без пробелов

А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к

Запись CSS-стилей через запятую «,»

Запись CSS-стилей через пробел (space)

А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.

Еще один пример для лучшего понимания как задать CSS-стили с помощью CSS-селекторов, когда вы пишите стили через пробел. Мы можем задать внутри

всем тегам , независимо на каком уровне вложенности находится , фоновый цвет «gray»:

Запись CSS-стилей через знак больше «>»

При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу.

Лучше понять как работает комбинатор “>” вам поможет пример.

Этот стиль применится только для первого потомка (child), но не будет работать для последующих:

Запись CSS-стилей через знак “

» можно выбирать все HTML-элементы, которые являются потомками указанного элемента.

Пример как с помощью записи CSS-стилей со знаком “

Запись CSS-стилей через знак плюс «+»

Если c помощью записи CSS-стилей со знаком “

» можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс “+” можно выбрать только один HTML-элемент.

И вот простой пример:

Запись CSS-стилей для HTML-элемента по атрибуту

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

Например у нас есть какая-то html-форма и мы хотим задать разные CSS-стили для с разными type: text и password. Когда мы будем печатать текст в с типом text мы хотим задать цвет текста «green», а для с типом password мы хотим задать цвет текста «magenta». И с помощью CSS-селекторов по атрибуту мы можем это сделать:

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

Вывод

Также рекомендуем подписаться на наш YouTube канал FructCode, где переодически появляются полезные материалы для обучения верстке сайтов и программированию.

С вами был Сергей Никонов, успехов в обучении!

Источник

Селекторы типа, класса и ID

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

Селекторы типа

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

Попробуйте добавить CSS-правило, чтобы выбрать элемент

и изменить его цвет на синий.

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

Универсальный селектор обозначается звёздочкой ( * ). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

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

Использование универсального селектора для облегчения чтения ваших селекторов

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

Селекторы класса

Нацеливание классов на отдельные элементы

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

Нацеливание на элемент, к которому применено более одного класса

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

В примере ниже у нас есть

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

Селекторы ID

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

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

В следующей статье

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

Источник

Что означает свойство со звездочкой в ​​CSS?

Сегодня я просматривал файл css и нашел следующий набор правил:

Что означает звездочка в * отступах и * высоте строки?

Это «хакерство со звездочкой» в том же духе, что и «хакерство с подчеркиванием». Он включает мусор перед свойством, которое IE игнорирует (* работает до IE 7, _ до IE 6).

В CSS? Ничего; это ошибка.

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

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

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

Вышеупомянутое свойство будет применяться ко всем элементам DOM, тем самым преодолевая естественное каскадирование в CSS. Его можно переопределить только путем специальной маркировки элементов DOM, где этот таргетинг начинается с уникальной ссылки на идентификатор. Пример:

Вышеупомянутое свойство переопределит подстановочный знак и сделает текст всех сильных элементов, которые встречаются в div внутри элемента, со значением атрибута id «uniqueValue».

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

В приведенном выше примере текст всех сильных элементов будет окрашен в красный цвет независимо от других свойств CSS, не указанных с уникальным идентификатором. Это считается гораздо более безопасным, чем использование объявления «! Important», поскольку известно, что это объявление мешает естественной функциональности предполагаемого поведения и является кошмаром для обслуживания.

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

Источник

Что делает Звездочка ( * ) в селекторе CSS?

Я нашел этот код CSS, и я запустил его, чтобы увидеть, что он делает, и он изложил каждый элемент на странице,

может кто-нибудь объяснить, что Звездочка * делает в CSS?

5 ответов

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

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

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

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

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

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

* является подстановочным. Это означает, что он будет применять стиль к любому элементу HTML. Дополнительные * ‘ s применить стиль к соответствующему уровню вложенности.

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

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

затем все HTML-элементы будут иметь эти стили.

в вашей таблице стилей обычно вам нужно определить основное правило для всех элементов, таких как атрибут размера шрифта и поля. / overide browser по умолчанию для элементов, весь размер шрифта текста будет отображаться как размер 14 пикселей с нулевым полем и заполнением, включая h1. пред. */

Источник