Полупрозрачный фон
Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.
Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.
Допустим, это ваш сайт (html):
Полупрозрачный фон Ваш текст
Ваш текст. Ваш текст. Строчка «» подключает файл стилей CSS.
Вот он (он называется style.css):
body < background: "Ваша картинка для фона" ; * background-attachment: fixed ; background-position: top center; >.mid
В классе mid 3 строчка задаёт цвет полупрозрачного цвета в формате RGBA. Её 4 цифра, в данном случае 0.5 — значение прозрачности от 0 до 1.
Вот так всё просто. Пробуйте, у вас обязательно всё получится!
* — вставляете сюда url картинки
** — задаём ширину страницы (для этого в html — коде мы создали class mid)
*** — rgba — это цвет в формате rgb. Последняя буква (a) означает прозрачность фона. Её значение — цифра от 0 до 1. 0 — полностью прозрачный фон, соответственно, 1 — наоборот.
Полупрозрачный фон
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространении в разных операционных системах, потому что смотрится стильно и красиво. В веб-дизайне полупрозрачность также применяется и достигается за счёт свойства opacity или формата цвета RGBA, который задаётся для фона.
Свойство opacity
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя opacity: 1 , не получится. В табл. 1 показан вид текста и фона с разными значениями opacity .
| 0.1 | 0.4 | 0.8 | 1 |
|---|---|---|---|
 |
 |
 |
В примере 1 показано создание полупрозрачного блока с использованием opacity .
Пример 1. Фон на веб-странице
HTML5 CSS3 IE 9+ Cr Op Sa Fx
opacity Гоббс одним из первых осветил эту проблему с позиций психологии. RGBA
Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..
Рис. 1. Синтаксис применения rgba
В примере 2 показано применение формата RGBA для создания полупрозрачного фона.
Пример 2. Полупрозрачный фон
HTML5 CSS3 IE 9+ Cr Op Sa Fx
rgba Гоббс одним из первых осветил эту проблему с позиций психологии. Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.
Рис. 2. Полупрозрачный фон и непрозрачный текст
Затемнение изображения и фона с помощью CSS
Несколько примеров как затемнить изображение в свойстве background и теге .
Затемнение
Первый способ затемнить img
Сделать тёмный фон под изображением , а самому изображению добавить прозрачность с помощью opacity .
.image < background: #000; >.image img
Пример:
Второй способ затемнить img
CSS фильтр Фильтр brightness у .
.image img
Пример:
Третий способ затемнить img
Полупрозрачный элемент над .
Пример:
.image < position: relative; >.image-filter
Пример:
Затемнение фона background
Если картинка задана через свойство background , то есть два способа ее затемнить:
Первый способ затемнить background
Наложить полупрозрачный слой через псевдо-свойство :before с background-color: rgba(0,0,0,.5) или opacity: 0.6 .
.image < position: relative; height: 420px; width: 100%; background: url(/image.jpeg) 0px 0px no-repeat; background-size: cover; >.image:before
CSS-club – настройка внешнего вида сайта
Сделать это можно с помощью свойства background-color , значением которого выступает . Указав цвет с прозрачностью вы сделаете фон элемента прозрачным. Читайте вводную в CSS, чтобы найти ответ на вопрос «Как задавать в CSS?».
Свойство: background-color.
Значение: .
/* Светлая полупрозрачная центральная область */ .l-page
/* Тёмные полупрозрачные подзаголовки блоков */ .subheadline
/* Тёмно-фиолетовое верхнее меню без прозрачности */ .l-top_menu-v2 < background: rgba(46, 33, 84, 1); >/* Прозрачные кнопки сабменю */ .l-top_menu-v2 .menu-dropdown > span
Как установить фоновое изображение для элемента?
Фон устанавливается с помощью свойства background-image , значением которого выступает url(ссылка на изображение) . С помощью других свойств настраивается положение и закрепление изображения. Более того, допустимо указывать несколько фоновых изображений, перечисляя их через запятую.
Свойство: background-image.
Значение: url(ссылка на изображение).
/* Фон сайта (фиксированный, на полный экран) */ body < background: url(/system/images/original/83668.jpg) center top / cover fixed; >Подробное описание
background – универсальное свойство объединяющее в себе несколько свойств отвечающих за настройки фона элемента. Среди них: уже известное вам из первого вопроса свойство background-color (фоновый цвет), background-image (фоновое изображение), background-position (позиционирование фона), background-size (размер фона), background-repeat (повторение фона) и background-attachment (закрепление фона).
В универсальном свойстве background их принято указывать в следующем порядке:
background: -color -image -position / -size -repeat -attachment;Значения по умолчанию
Если в универсальном свойстве вы укажите не все доступные параметры, то они будут взяты из значений по умолчанию.
selector < background: transparent none left top / auto repeat scroll; >Что равняется такой записи:
selector < /* Прозрачный фоновый цвет */ background-color: transparent; /* Фонового изображения нет */ background-image: none; /* Изображение прикрепляется к левому верхнему углу элемента */ background-position: left top; /* Размер изображения не меняется */ background-size: auto; /* Изображение повторяется, чтобы замостить весь элемент */ background-repeat: repeat; /* Изображение не закреплено и прокручивается вместе с элементом */ background-attachment: scroll; >Позиционирование фона
background-position совмещает в себе два свойства: background-position-x – позиционирование фона по горизонтали и background-position-y, задающее положение фона по вертикали.
Значение может указываться в виде как ключевых слов:
selector < background-position: right center; /* по центру правого края */ >так и процентов:
selector < background-position: 100% 50%; /* по центру правого края */ >При этом 0% 0% – это левый верхний угол, а 100% 100% – правый нижний.
Кроме того, можно указать и значения в пикселях (px), чтобы настроить отступ от левого верхнего угла.
При указании значения «по центру» (как по горизонтали, так и по вертикали) можно не указывать повторяющиеся center center или 50% 50% , а указать значение только один раз.
Размер фона
- auto – размер фонового изображения не изменяется.
- cover – фоновое изображение заполняет собой элемент.
- contain – фоновое изображение вписывается в рамки элемента, чтобы оно было видно полностью.
Повторение фона
- no-repeat – изображение не повторяется.
- repeat – изображение повторяется, полностью заполняя элемент.
Закрепление фона
- scroll – изображение не закреплено, оно будет прокручиваться вместе с элементом.
- fixed – изображение закреплено, оно будет неподвижно при прокрутке.
Несколько фоновых изображений
У всех описанных свойств, кроме background-color, в том числе и у универсального свойства background , значения могут быть написаны через запятую, чтобы указать свойства для нескольких фоновых изображений:
body < background: url(/system/clubs/main/811.png) left 50px no-repeat, #0a306f url(/system/images/original/83668.jpg) center / cover fixed; >При этом чем раньше указан набор свойств для изображений, тем «выше» будет изображение: то есть персонажа мы крепим в начале, а уже затем подкладываем под него фон.
Обратите внимание, что цвет указан только один раз – он может быть только у одного самого нижнего слоя. Чтобы при загрузке страницы у вас не мелькали цвета, подбирайте этот цвет под фоновое изображение.
Как установить градиент для фона элемента?
Градиент — вид заливки в компьютерной графике, которая по заданным параметрам цвета в ключевых точках рассчитывает промежуточные цвета остальных точек. При этом создаются плавные переходы из одного цвета в другой. [wiki]
/* Градиент Alice Blue */ body
/* Мягкое свечение на тёмном фоне */ body
/* Горизонтальный градиент на подзаголовках блоков */ .subheadline
/* Градиент синего в верхнем меню */ .l-top_menu-v2
※ Как сделать прозрачными кнопки сабменю написано в вопросе «Как изменить цвет и прозрачность элемента?».
- Линейный – за него отвечает функция linear-gradient() .
- Круговой – за него отвечает функция radial-gradient() .
- cssgradient.io
- www.colorzilla.com
Рекомендуется всегда указывать фоновый цвет, так как поддержка свойства даже у последних версий браузеров не полная: caniuse.com
Подробное описание
Разберём синтаксис линейного градиента:
/* Шаблон использования */ selector < background-image: linear-gradient(, ); >- – угол, который указан в градусах (deg), но может быть указан и в градах (grad), радианах (rad) и оборотах (turn). К примеру, направление «Слева направо» или 90deg можно указать как 100grad или 0.25turn или примерно 1.57rad . Значения 0deg или направление «Сверху вниз» можно опустить.
Если этот вариант сложен для понимания, то можно использовать «направления»:
to bottom 0deg Сверху вниз (значение по умолчанию) to right 90deg Слева направо to top 180deg Снизу вверх. to left 270deg Справа налево./* Плавный переход фонового цвета */ body
Теперь о круговом градиенте:
/* Шаблон использования */ selector < background-image: radial-gradient(at , ); >- – форма и размер (радиус) градиента, если используется круговая форма circle . Есть еще ellipse , но используется он редко и рассматривать его смысла нет, можете поэкспериментировать сами. Если опустить радиус градиента, то он будет равняться большей стороне элемента. Если опустить at , то градиент приобретёт ту самую форму эллипса ( ellipse ), а его ширина и высота будут равняться ширине и высоте элемента.
- – положение центра кругового градиента, схожее с используемым для позиционирования изображений: два значения отвечающие за положение по оси X и оси Y соответственно.
- – список цветов перечисленных через запятую.
/* Градиент в виде эллипса */ body
Но красивее получиться, если указывать форму, размер и позицию градиента:
/* Голубое свечение на розовом фоне */ body
Как изменить цвет текста?
Цвет текста задаётся с помощью свойства color , значением которого выступает . Читайте вводную в CSS, чтобы найти ответ на вопрос «Как задавать в CSS?».
Свойство: color.
Значение: .
/* Цвет текста на сайте */ body
/* Цвет ссылок в текстах */ .b-link
/* Цвет текста в подзаголовках */ .subheadline < color: rgba(238, 238, 238, 0.9); >/* Цвет ссылок в подзаголовках */ .subheadline > a
ВАЖНО
Цвета ссылок проще всего изменить с помощью встроенных переменных:
html[data-color-mode=light]
Как скрыть элемент?
Чтобы просто скрыть элемент можно использовать свойство display со значением none .
Свойство: display
Значение: none.
/* Скрываем кнопку "Сообщить об ошибке" в профиле */ .p-profiles-show .b-feedback
Однако в некоторых ситуациях вам потребуется не просто скрыть элемент, но и оставить его место пустым, например, чтобы не сломать вёрстку сайта. В таком случае вам нужно использовать свойство visibility со значением hidden . Самое крутое в этом свойстве то, что потомков этого элемента можно снова сделать видимыми тем же свойством, но указав в значении visible .
Свойство: visibility
Значение: hidden
/* Скрываем историю */ .p-profiles .profile-head .c-history < visibility: hidden; >/* Устанавливаем картинку на место истории */ .p-profiles .profile-head .c-history::after < content: ''; visibility: visible; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url(/system/clubs/main/811.png) center / contain no-repeat; >Как изменить шрифт и иконки?
Чтобы использовать стандартные (надёжные) шрифты можно использовать свойство font-family указав в значении свойства семейство шрифтов, либо один из девяти надёжных шрифтов.
Для удобства, можно заменить шрифт, используемый на сайте, с помощью css-переменных —font-main , использующийся для основного текста, и —font-alt , использующийся для заголовков, тегов и некоторых других элементов. Эти переменные принимают точно такие же значения, как и свойство font-family . О использовании css-переменных можно прочитать тут.
Свойство: font-family
Значение:
/* Устанавливаем шрифт Times New Roman для всех элементов на сайте */ :root
Обратите внимание, что —font-alt не обязательно должен повторять значение —font-main и может содержать другой шрифт. Если вы хотите оставить шрифт заголовков и тегов и некоторых других элементов без изменений, просто не копируйте это правило в свои настройки.
Кроме названия самого шрифта, стоит также подумать о тех, у кого по какой-либо причине может не оказаться этого шрифта и указать либо другой более распространённый шрифт, либо семейство шрифтов – serif (с засечками), либо sans-serif (без засечек), соответствующее выбранному вами шрифту.
Нестандартные шрифты
Чтобы использовать нестандартные шрифты вы должны сперва подключить их с помощью правила @font-face, указав в этом правиле свойства шрифта, а также расположение файлов в интернете, чтобы посетители страницы также могли видеть ваш шрифт. Используйте fonts.google.com, чтобы найти нестандартные шрифты.
Правило: @font-face
/* Подключение русской и английской версий шрифтов из fonts.google.com */ @font-face < font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qPK7lqDY.woff2) format('woff2'); >@font-face < font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2'); >/* Устанавливаем шрифт Source Sans Pro для всех элементов на сайте */ :root
Установка шрифта из Google Fonts
Инструкция
- Для начала нужно указать в CSS откуда следует грузить шрифт.
① Выберите шрифт
② Нажмите на черную полоску внизу экрана
③ Выделите ссылку и перейдите по ней
④ Скопируйте настройки для русского и английского языков
/* Устанавливаем шрифт Comfortaa */ :root
Обратите внимание, что это значения для переменной —font-main лучше всего скопировать из предложенных настроек выбранного вами шрифта:
Замена иконок на примере Font Awesome
Стили иконок и шрифт подключается с помощью @import -правила:
/* Подключение иконок Font Awesome 6.2.0 */ @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css);Сами иконки добавляются с помощью BBCode [span] :
[span=fa-solid fa-user][/span]Классы копируются со страницы иконки. Список доступных иконок: fontawesome.com.
Информация о дополнительной кастомизации (размер, анимация и т.д.) доступна на сайте шрифта: fontawesome.com.
Старые методы
- Статья: /comments/3340339
- /comments/3816739
- /comments/7503200
Как закруглить углы?
Закруглить углы элемента можно с помощью свойства border-radius , значением которого выступают пиксели (px), либо проценты (%), обозначающие радиус скругления. Для квадратных элементов радиус в половину стороны (50%) превратит их в круг.
Свойство: border-radius
/* Круглая аватарка в профиле */ .p-profiles .profile-head .c-brief .avatar img
/* Круглые аватарки везде! (почти) */ .avatar img
/* Небольшое скругление постеров аниме/манги/персонажей/людей */ .b-catalog_entry .image-cutter
Как сделать изменения при наведении/нажатии на элемент?
Для изменений свойств при наведении нужно добавить к селектору псевдокласс :hover , а для изменений при нажатии – псевдокласс :active .
/* Шаблон использования */ selector < color: white; /* обычное состояние */ >selector:hover < color: red; /* состояние при наведении */ >selector:active < color: black; /* состояние при нажатии */ >Кроме того, можно менять свойства потомков при наведении на родителя:
/* Шаблон использования */ parent children < opacity: 1; /* обычное состояние */ >parent:hover children < opacity: 0; /* состояние при наведении */ >Для плавного перехода между состояниями используйте свойство transition.
/* Аватарка в профиле */ .p-profiles .profile-head .c-brief .avatar > img < border-radius: 0%; /* обычное состояние */ transition: 0.5s ease-out; >.p-profiles .profile-head .c-brief .avatar > img:hover < border-radius: 50%; /* состояние при наведении */ >/* Аватарка в профиле */ .p-profiles .profile-head .c-brief .avatar > img < border-radius: 0%; /* обычное состояние */ transition: .2s ease; >.p-profiles .profile-head:hover .c-brief .avatar > img < border-radius: 50%; /* состояние при наведении */ >Обратите внимание, что во втором примере изменения происходят не при наведении на саму аватарку, а при наведении на верхнюю часть профиля.
Как сделать так, чтобы изменения отображались и на телефоне?
По умолчанию сайт отключает ваш стиль на экранах меньше 1024px. Если быть точным, то ваш стиль оборачивается в такой медиа-запрос:
@media (min-width: 1024px) < /* Ваш стиль */ >Этот медиа-запрос означает, что все правила внутри него будут работать только при выполнении условий в скобках. В нашем случае этим условием является минимальная ширина: 1024px.
Так будет до тех пор, пока в стиле не будет хотя бы одного медиа-запроса. Достаточно добавить пустой медиа-запрос в начало стиля:
@media < /* Отключение защиты от дурака */ >Это названо защитой от дурака не просто так: чтобы ничего не сломать и делать осмысленные изменения для мобильной версии от вас потребуются хорошие базовые знания CSS и понимание основ адаптивной верстки.
- htmlacademy.ru/courses
- codecademy.com/learn/learn-css
Самый простой способ ничего не сломать — обернуть свой код в @media -запрос:
@media (min-width: 1024px) < /* Добавьте эту строку в начало кода */ /* Ваш CSS тут */ >/* Добавьте эту строку в конец кода. Это конец @media-запроса. */После этого можно переносить правила, которые должны работать на мобильной версии в конец CSS стиля (или начало, как вам удобнее):
/* Ваш CSS, который работает на любых экранах */ @media (min-width: 1024px) < /* Ваш CSS, который работает только на больших экранах */ >@media (min-width: 1024px) < /* Ваш CSS, который работает только на больших экранах */ >@media (max-width: 1023px) < /* Ваш CSS, который работает только на НЕбольших экранах */ >Простой пример – разный цвет меню в мобильной и настольной версиях:
/* Настройки mobile-версии */ /* Тёмно-зелёное верхнее меню */ .l-top_menu-v2 < background: #24723f; >/* Настройки desktop-версии */ @media (min-width: 1024px) < /* Тёмно-синее верхнее меню */ .l-top_menu-v2 < background: #243f72; >>Однако это не совсем точно – правила указанные без медиа-запроса будут работать как для мобильной, так и для настольной версии. То есть, свойства, указанные без медиа-запроса и не перезаписанные в дальнейшем из настроек настольной версии, будут продолжать работать. Это очень полезно, чтобы не писать одни и те же свойства для мобильной и настольной версий, но иногда требуется этого избежать. Чтобы указать правила исключительно для мобильной версии нужно использовать другие условия в медиа-запросе:
/* Настройки mobile-версии */ @media (max-width: 1024px) < /* Тёмно-зелёное верхнее меню */ .l-top_menu-v2 < background: #24723f; >> /* Настройки desktop-версии */ @media (min-width: 1025px) < /* Тёмно-синее верхнее меню */ .l-top_menu-v2 < background: #243f72; >>Условия в медиа-запросах могут быть разные, но основные это (min-width: ) и (max-width: ) , означающие что правила внутри медиа-запроса с такими условиями будут работать после определённой минимальной ширины и до определённой максимальной ширины соответственно.
Условия можно объединять:
/* Настройки mobile-версии */ @media (min-width: 360px) and (max-width: 599px) < /* Тёмно-зелёное верхнее меню */ .l-top_menu-v2 < background: #24723f; >> /* Настройки tablet-версии */ @media (min-width: 600px) and (max-width: 1024px) < /* Тёмно-красное верхнее меню */ .l-top_menu-v2 < background: #722424; >> /* Настройки desktop-версии */ @media (min-width: 1025px) < /* Тёмно-синее верхнее меню */ .l-top_menu-v2 < background: #243f72; >>Этот пример не учитывает ориентацию устройства (для этого в медиа-запросах существует отдельное условие orientation ), но уже вполне рабочий вариант для настройки стиля под разные устройства.
Полезно знать, что по умолчанию фоновая картинка на мобильных экранах отключается следующим медиа-запросом:
@media screen and (max-width: 1024px) < body < background: none !important; >>Подробнее о медиа-запросах можно прочитать на сайте webref.ru.
Как найти селектор элемента и менять его свойства?
Возможно необходимый селектор есть на странице «Список селекторов». Если нет, то следуйте инструкции:
1) Наводим мышкой на элемент, который хотим изменить. Нажимаем правую кнопку мышки и выбираем «Просмотреть код».
Другой вариант: Нажимаем Ctrl+Shift+C и щелкаем левой кнопкой мышки на нужном элементе.
2) В открывшейся панели 2 области: левая — HTML, правая — CSS. В левой мы видим все элементы страницы, а в правой — свойства, которые отвечают за их внешний вид.
3) Находим необходимое свойство в правой части панели и меняем его прямо там (так можно убедиться, что ваши изменения будут видны там где это нужно). Цвета можно изменить с помощью специального окошка, открывающегося по нажатию на цветной квадратик.
Что делать если нужного свойства нет?
Скорее всего свойство применяется не к этому элементу, а к его родителю или еще более старшему предку. Чтобы найти тот самый элемент необходимо открыть вкладку «Computed» в левой части и найти нужное на свойство в списке. Наведите на него и щелкните на стрелочку перед значение свойства. Вас перекинет к тому самому свойству у необходимого селектора. Смело переходите к пункту 4.
Что делать если нужного свойства все равно нет?
Некоторые свойства, такие как background-color , не наследуются по умолчанию, поэтому если у выделенного вами элемента (п. 1) нет свойства, которое вы ищите, взгляните на область HTML, и двигайтесь по дереву элементов вверх, чтобы найти нужный. Если вы ищите фон, поглядывайте на сайт — там подсвечивается выделенный элемент: подсветка должна совпадать с закрашенным элементом.
Работа с динамическими элементами
Динамические элементы — это элементы, которые появляются на странице или меняются по заданному JS-скриптами сценарию. Самый простой пример — всплывающее окно с комментарием или информацией о аниме. Чтобы редактировать CSS-свойства таких элементов было проще, можно остановить их изменения с помощью функции «Pause script execution» или «Поставить на паузу сценарий». Функция вызывается клавишей F8 или комбинацией — Ctrl + / . Вызов функции останавливает всё, что происходит на странице.
Этого вполне достаточно, чтобы примерить любые свойства на все выше перечисленные элементы.
К примеру, мы хотим изменить стили всплывающего окно с комментарием. Для этого мы должны открыть инспектор ( F12 ), навести курсор на упоминание или имя в цитате, а после появления всплывающего окна остановить выполнение сценариев ( F8 ). Страница остановится, а всплывающее окно перестанет пропадать при движении курсора с упоминания.
Этим способом можно редактировать правила не только для динамических элементов, но и состояний любых других элементов. Например, при наведении курсором на ссылку, она меняет цвет, потому что в момент наведения на элемент накладывается псевдокласс :hover , которому заданы дополнительные свойства. При обычных условиях, когда вы уберёте курсор — элемент вернёт свой изначальный цвет. Чтобы этого не происходило нам нужно остановить страницу в момент наведения: наводим курсором на элемент и нажимаем F8 , чтобы остановить страницу, а сам элемент в положении наведенного — теперь можно редактировать нужные свойства.
- На вкладке «Элементы» нажмите правой кнопкой на нужный элемент, выберите в выпадающем меню пункт «Установить состояние», а затем необходимое состояние. При этом напротив изменённого элемента в инспекторе появится круглый индикатор.
- На вкладке «Стили» рядом с поиском нажмите на кнопку :hov , чтобы открыть список состояний и выберите необходимые. На вкладке «Элементы» также появится индикатор.
4) После изменения свойства, двигайтесь вверх по списку свойств, пока не наткнетесь на открывающуюся фигурную скобку < . Перед ней находится "селектор", та самая штука, которая определяет к какому именно элементу страницы будет применяться ваши правила.
На примере Microsoft EDGE (в картинках)
1920×964 
1920×964 
1920×964
Что делать, если свойство не работает?
Если не работает только отдельное свойство, а не всё правило целиком, то к значению свойства нужно добавить !important .
/* Изменение цвета даты в истории пользователя (не работает) */ .p-profiles .profile-head .c-history .entry .misc.date < color: #acb1b4; >/* Изменение цвета даты в истории пользователя (работает!) */ .p-profiles .profile-head .c-history .entry .misc.date
- css-validator.org (на русском)
- csstree.github.io/docs/validator.html (eng без лишних настроек)
- csslint.net
Проверка кода в CSSLint
Чтобы быстро проверить свой код (проверять готовые стили не нужно!) в CSSLint, вставьте свой код на сайт, нажмите на стрелочку рядом с надписью «Lint» и в конце первой строчки нажмите на «(None)», чтобы отключить все лишние проверки. Затем нажмите на «Lint».
Полученные результаты можно сортировать по важности (по умолчанию) или по line, чтобы исправлять ошибки по порядку.
Самая распространённая ошибка: незакрытые/лишние фигурные скобки вызовут ошибку на следующей строке, поэтому если вы видите «красный» селектор, то обратите внимание на строку выше: скорее всего, ошибка кроется именно там.
Более подробные описания свойств и их значений можно найти на сайтах htmlbook.ru/css/ или webref.ru/css