From IT Skills
Jump to: navigation, search

порядок приоритета задания стилей[edit | edit source]

  • Наименее низким приоритетом обладают встроенные стили браузера
  • Пользовательский стиль в браузере
  • Наследуемые стили от родительских элементов
  • Следующие css-стили заданные во внешних файлах, тут правило важнее (при прочих равных условиях), если файл содержащий правило находится после файла содержащий предыдущее. Это же правило относится и к взаимному расположению правил внутри документа.
  • Далее по стоимости применения селекторов:
    • Теги имеют наименьший приоритет: h1, div, p
    • Классы и псевдоклассы. Селектор: .item { }, :hover { }
    • Аттрибуты [attr=”value”]. Пример: [type=”checkbox”] {}
    • Идентификатор ID – наивысший приоритет. Типа #main { }
  • Еще более высоким приоритетом является задание стиля прямо в style теге:

<div style=”width : 203px”></div>

  • И наиболее высоким приоритетом является стиль с сопроводительным словом !important.

Selectors[edit | edit source]

The 30 CSS Selectors You Must Memorize

browser reads selectors from right to left, long selectors may give it an extra workload... Use classes for styling, IDs and data-attributes to bind JavaScript

Attribute selector[edit | edit source]

X[attribute] will only select the anchor tags that have a attribute attribute.

a[data-info~="image"][edit | edit source]

The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values.

Pseudo-classes[edit | edit source]

:any
...
:active
:checked
:focus
:hover
:disabled
...
:first
...
:fullscreen
...
:in-range
:invalid
...
:lang()
...
:link
:not()
...
:nth-child()
:nth-last-child()
:nth-last-of-type()
...
:optional
...
:root
:scope

Modules[edit | edit source]

@import in vanila CSS

Webpack[edit | edit source]

@import and url() are interpreted like import and will be resolved by the css-loader

https://webpack.github.io/docs/stylesheets.html