Почему в css не появляется цвет

Наследование в CSS: что это и как работает

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

Наследование в CSS – это способность элементов-потомков перенимать правила форматирования (свойства CSS), которые присвоены их предкам (о родственных связях элементов HTML мы писали ранее).

Рассмотрим простой пример:

И результат на скриншоте:

Пример CSS наследования стилей Скриншот: пример CSS наследования

На скриншоте можно увидеть, что теги <p> переняли стиль у своего предка <body> : цвет текста на странице стал #913D88 . А вот рамка border появляется только один раз – для тега <body> , но не для <p> .

Почему рамка не появилась у других элементов веб-страницы? Всё потому, что согласно спецификации CSS, существуют определенные правила наследования. Есть свойства, которые наследуются (в основном, это свойства, определяющие внешний вид текста) и те, которые не наследуются (например, border , а также свойства, определяющие границы, поля, отступы). К тому же, у браузеров есть свои стили, установленные по умолчанию. Именно поэтому стандартная синяя подчеркнутая гиперссылка a не будет перенимать от body свойство color , что видно на скриншоте.

Узнать, наследуется ли то или иное свойство, можно в этом стандарте CSS. Если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется.

Значение inherit

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

Для демонстрации используем предыдущий пример: чтобы всё-таки заставить теги <p> унаследовать рамку border от своего предка <body> , необходимо записать:

Пример использования inherit Скриншот: пример использования inherit

Такой вариант удобен тем, что при необходимости можно внести правки только в стиль для элемента body , а на теги <p> тратить время не нужно, так как стиль автоматически изменится и для них.

Итоги

Благодаря тому, что наследование существует, вы можете экономить очень большое количество времени, сил и места в коде. Если бы таких правил не существовало, трудно представить, насколько бы усложнилась наша работа. При этом механизм наследования CSS хорошо продуман, поскольку не все свойства наследуются (и если бы они наследовались, то ни к чему хорошему это бы не привело).

Почему не отображается css?

У меня в проекте 2 html файла, для каждого из них есть свой css файл.

HTML 1:

CSS 1:

HTML 2:

CSS 2:

С первым html’ем и css’ом все хорошо, все работает.

Проблема с файлами номер 2, а точнее с файлом css. HTML отображается но css нет.

Очень странно т.к. расположение файлов одинаково.

Все это я проверяю в Eclipse на сервере Tomcat 8.

У ссылок появляется подчеркивание

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

Вашу проблему hover и active должны решать. Если они не работают, то вы скорее всего не так их определили в css-файле. Вы точно не забыли, что это не обычные классы, а ПСЕВДОклассы? Класс задаёте Вы сами через атрибут class. ПСЕВДОклассы уже вшиты в систему, их определять не надо. И у них отличается не только название, но и синтаксис. Обычные классы в css-файле описывают так: a.myclass <. >. Псевдоклассы пишут не через точку, а через двоеточие: a:active, a:hover. Это только предположение. Чтобы сказать точно надо бы посмотреть на Ваш код.

удаляет с ссылок подчеркивание совсем

Попробуйте данный код

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css html5 css3 или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *