Не применяются css стили: Не применяются CSS стили

У меня есть элемент объекта HTML, который извлекается с помощью document.getElementById() Есть ли способ узнать, какие стили применяются к этому элементу? Не просто имя класса, заданное в атрибуте…

Я использую версию magento2.2.3 в моей теме magneto добавлен пользовательский файл css в приведенном ниже пути project/app/design/frontend/vendor/theme/web/css/custom.css и добавил исходный файл в…

В настоящее время я разрабатываю веб-приложение с использованием GWT. Для конкретного представления мне пришлось использовать виджет GWT DataGrid. Поскольку у меня были проблемы с применением к нему…

Я строю большой сайт и хотел бы иметь много конкретных контроллеров css. Я хотел бы использовать turbolinks, но конкретные стили контроллера не применяются, когда turbolinks загружает новую…

Я пытаюсь изменить цвет / размер шрифта по умолчанию и т. д. В области моего экземпляра ckeditor, но это не работает для меня. В chrome inspector я могу добавить этот стиль в заголовок и он…

Я использую XAMPP для создания PHP страницы и тестирования их локально, но у меня есть проблема с тем, что стили CSS не применяются. Когда я перехожу к http://localhost/example/index.php , я получаю…

Я использую knockout для рендеринга динамического списка, который имеет свойство as CSS width auto (width: auto), и мне нужно знать, когда это CSS применяется . Есть ли событие для захвата, когда…

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

У меня есть файл header.php , который я хочу включить в представление CodeIgniter. Заголовок показан, но проблема в том, что стили CSS, которые я написал внутри файла header.php , не применяются, и…

Я хотел бы создать отдельный файл для хранения стилей для IE 9-11. Для этого я создал и импортировал файл InternetExplorer.scss в основной файл styles.scss : @import scss/InternetExplorer.scss;…

css — почему стили не применяются в magento2.2.3 после включения настраиваемого файла css

Я использую версию magento2.2.3 в моей теме магнето, добавив пользовательский файл css по пути ниже проект / приложение / дизайн / интерфейс / поставщика / тема / Web / CSS / custom.css

И добавил исходный файл в файл default_head_blocks.XML . после этого добавили страницу со следующим кодом в HTML-содержимом

<div><span>count down custom code</span></div>

В custom.css код как

.tested { 
    color: red !important; 
    font-size: 20px;
}

При просмотре источника страницы пользовательский файл css включен в заголовок, но стили не применяются для текста.

1

Bala 4 Фев 2019 в 12:45

2 ответа

Лучший ответ

Ваш XML-файл должен иметь имя default_head_blocks.xml вместо default_head_blocks.XML .

После изменения имени очистите кеш и статические файлы:

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

php bin/magento deploy:mode:show

1. Если режим разработчика установлен на production, попробуйте воссоздать статический контент.

php bin/magento setup:static-content:deploy

1. В любом случае (производство или разработчик) очистите все кешированные файлы

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush;

Надеюсь, это поможет

0

Antoine Martin 4 Фев 2019 в 21:11

После обновления с 2.1 до 2.3.2 я обнаружил, что мой собственный css образцов содержимого Magento_Swatches / web / css / swatches.css из моей настраиваемой темы не объединяется со стилями-m.css и styles-l.css, которые вызывают проблемы с макетом в страница сведений о продукте.

После исследования я не могу понять, как заставить Magento 2.3.2 объединить пользовательский файл css со стилями-m.css и styles-l.css

Поэтому я решил создать новый файл .less для Magento_Swatches. Я создаю новый файл Magento_Swatches / web / css / source / _module.less в своей настраиваемой теме, а затем перемещаю все содержимое

Magento_Swatches / веб / CSS / swatches.css

К

Magento_Swatches / веб / CSS / источник / _module.less

Затем запускает команду setup: upgrade

Hozaaaaaay ! проблема решена, и все настраиваемые css объединены в styles-m.css & styles-l.css Похоже, Magento 2.3.2 не позволяет использовать .css напрямую в модуле

0

V.Tran 21 Авг 2019 в 07:55

Веб-страница стилей CSS неправильно отображается в Internet Explorer — Browsers

• 03/03/2020
• Чтение занимает 2 мин

В этой статье

В этой статье приведены инструкции по описанию неполадок, которые веб-страница стилей CSS не отображается правильно в Internet Explorer.

Исходная версия продукта:   Internet Explorer
Исходный номер статьи базы знаний:   262161

Симптомы

Стили на веб-странице отсутствуют или выглядят неправильно при загрузке страницы в Internet Explorer.

Примечание

Эта проблема может возникнуть, если веб-страница использует встроенную таблицу стилей или указывает на каскадную таблицу стилей.

Кроме того, вы можете получить следующее сообщение об ошибке:

Страница, которую вы ищете, может быть перемещена или изменена.

Причина

Эта проблема возникает из-за того, что в Internet Explorer выполняются следующие условия:

• Все теги стиля после первых 31 тега стиля не будут применены.
• Все правила стилей после первых 4 095 правил не применяются.
• На страницах, использующих @import правило, для непрерывного импорта внешних таблиц стилей, которые импортируют другие таблицы стилей, игнорируются таблицы стилей с более чем тремя уровнями.

Дополнительные сведения

Средство сетевого монитора может указывать на то, что при получении браузером Internet Explorer страницы, на которой возникла проблема, возникает сброс TCP. Затем Internet Explorer создает еще один запрос POST, если исходный запрос был запросом POST. Или же Internet Explorer может отправить вместо этого запрос GET.

Это ограничение на теги стиля также может повлиять на просмотр XML-файлов с помощью XSL-файлов. Когда XSL-файл содержит теги style, внедренные в документ, при попытке просмотреть XML-файл отображается следующее сообщение об ошибке:

Браузеру Internet Explorer не удалось открыть Интернет-сайт:
file://c:\aaa.xml

При нажатии кнопки ОКотображается следующее сообщение об ошибке:

Не удается отобразить страницу

Пример кода, приведенный в разделе действия по воспроизведению проблемы, динамически создает таблицы стилей и создает следующее сообщение об ошибке:

Произошла ошибка среды выполнения.
Вы хотите выполнить отладку?

Строка: 8
Ошибка: недопустимый аргумент.

Если таблицы стилей не применяются динамически, но не применяются с помощью <Style> тегов или с помощью CSS-файлов, сообщение об ошибке с недопустимым аргументом не создается. В этом случае все таблицы стилей после пропуска листа с тридцатью первыми игнорируются.

Действия по воспроизведению проблемы

Вставьте следующий пример кода на HTML-страницу. Запустите пример кода. Сообщение об ошибке создается после применения тега «тридцать-First Style».

<html>
    <head>
        <script>
            function fnCreateStyleSheets() {
                for (i = 1; i <= 32; i++) {
                    document.createStyleSheet()
                    StyleSheetCount.innerText = "Total Style Sheets = " + i
                }
            }
        </script>
    </head>
    <body onLoad="fnCreateStyleSheets()">
        <div></div>
    </body>
</html>

Ссылки

За дополнительными сведениями обратитесь к следующим веб-сайтам Microsoft Developer Network (MSDN):

Почему не применяются css к странице

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

Надпись inspector-stylesheet говорит о том, что данное правило добавлено не в css файлах, а вручную через инспектор. Если через инспектор необходимые изменения внешнего вида корректируемого элемента были достигнуты, то далее необходимо эти изменения внести в файл стилей сайта.

Если неизвестно из какого файла берутся стили сайта, то это можно посмотреть в исходном коде страницы (в большинстве браузеров вызывается через ctrl+u):

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

Далее необходимо внести изменения в css файл, обычно новые стили с соответствующими комментариями добавляются последними строками в файл.

Но иногда изменения стилей не применяются, это может происходить по нескольким причинам:

• Изменения на самом деле применились,но результата не видно из-за не обновленного кеша веб браузера. Всегда после изменения стилей необходимо делать очистку кеша через ctrl+F5.
  

  У меня на мобильном телефона в веб браузере chrome часто бывает такой глюк: даже после очистки кеша сайт отображается неправильно. Берешь телефон друга, открываешь на нем сайт — там изменения применены. А на твоем телефоне, даже после очистки истории — нет.Вообще для проверки изменения в стилях удобно использовать режим инкогнито, в нем браузер не сохраняет кешированные версии сайта у себя в памяти, а все время делает загрузку с веб сервера.

• Из-за плагинов кэширования. Например, в cms вордпресс такими плагинами являются autoptimize и fastest cache. Данные плагины используются на сайте для ускорения его загрузки. То есть при открытии сайта на устройстве клиента плагин вернет страницу, сохраненную у себя в файлах, а не то, что реально выполнит сервер. Это действительно сокращает время ответа сервера.
  

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

• Кеш самой cms. Многие самописные и не самописные(например битрикс и джумла) движки также используют внутренний кеш.
• Если изменения внесены в css, который не используется при отображении данной страницы. Для различных страниц сайта могут использоваться разные шаблоны с разными файлами стилей. Поэтому изменения могут примениться на одних страницах, которые использую измененный файл стилей, а на других страницах, который данный файл не используют — нет.
• Изменения не применяются, потому что они переназначаются css правилами расположенными ниже по коду, либо в других файлах стилей, вызывающихся после данного. Это должно быть видно в инспекторе браузера, новые правила будут зачеркнуты, а рядом должны находится перебивающие их правила.
• Ошибка в коде правила. Если правила внесены в css файл с синтаксической ошибкой из-за которой веб браузер их не понимает и не применяет.

Angular | Стили и шаблоны компонента

Стили и шаблоны компонента

Последнее обновление: 16.05.2021

Стилизация компонента может производиться как с помощью установки стилей в самом компоненте, так и с помощью подключения внешних css-файлов.

Для установки стилей в директиве @Component определено свойство styles:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h2>Hello Angular 12</h2>
			<p>Angular 12 представляет модульную архитектуру приложения</p>`,
	styles: [` 
			h2, h3{color:navy;}
			p{font-size:13px; font-family:Verdana;}
	`]
})
export class AppComponent { }

Параметр styles содержит набор стилей, которые будут использоваться компонентом:

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

<body>
    <my-app>Loading...</my-app>
	<h3>Подзаголовок</h3>
</body>

Если бы заголовок h3 здесь располагался бы в шаблоне компонента, то к нему применялся бы стиль. А так он не будет стилизован:

Селектор :host

Селектор :host ссылается на элемент, в котором хостится компонент. То есть в данном случае это элемент <my-app></my-app>. И селектор :host как раз позволяет применить стили к этому элементу:

styles: [` 
	h2, h3{color:navy;}
	p{font-size:13px;}
	:host {
		font-family: Verdana;
		color: #555;
	}
`]

Подключение внешних файлов

Если стилей много, то код компонента может быть слишком раздут, и в этом случае их вынести в отдельный файл css. Так, создадим в одной папке с классом компонента (который по умолчанию располагается в папке app) новый файл app.component.css со следующим содержимым:

h2, h3{color:navy;}
p{font-size:13px;}
:host {
	font-family: Verdana;
	color: #555;
}

Затем изменим код компонента:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h2>Hello Angular 12</h2>
			<p>Angular 12 представляет модульную архитектуру приложения</p>`,
	styleUrls: ['./app.component.css']
})
export class AppComponent { }

Параметр styleUrls позволяет указать набор файлов css, которые применяются для стилизации. В данном случае предполагается, что файл css располагается в проекте в папке app.

Похожим образом мы можем вынести шаблон в отдельный файл html. Также в папке app создадим новый файл app.component.html со следующим кодом:

<h2>Hello Angular 12</h2>
<p>Angular 12 представляет модульную архитектуру приложения</p>

То есть здесь определен весь тот же код, что ранее был в шаблоне компонента. И теперь изменим сам компонент:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent { }

Таким образом, за счет выноса кода css и html код самого компонента стал чище и проще.

React css — компонентый подход

Всем привет. В этом уроке мы разберем как работать с стилями в react.

Если мы посмотрим в index.js файл, то увидим, что там импортируется index.css. То есть в javascript можно импортировать css. Это делается при помощи webpack лоадера, который специальным образом обрабатывает все файлы с расширением .css.

Давайте добавим в index.css у body

background: green

Как мы видим, в браузере фон поменялся на зеленый. Если мы посмотрим в head нашей страницы, то увидим, что у нас добавился элемент style с стилями внутри. Обратите внимание, что когда мы меняем стили, страница не перегружается. Это происходит потому, что внутри react-create-app настроен hot-reloader, который позволяет многие действия применять без перезагрузки страницы. Это очень удобно, так как позволяет быстро пробовать различные стили и елементы.

Как же мы с вами можем структурировать стили этого проекта?

1. В index.css пишем глобальные стили
2. Под каждый компонент пишем стили для каждого компонента отдельно

Давайте попробуем

Создадим App.css и импортируем его в App.js

import './App.css';

Для того, чтобы задать елементу в react класс, используется специальный атрибут className. Например, мы можем в className задать строку container. И эта запись конвертируется в обычный класс в html, который будет искать у нас .container. Если мы напишите атрибут class, то он работать не будет. Это очень часто бывает у людей, которые только начинают знакомиться с реакт.

<div className="container">
  <RegistationForm />
</div>

И добавим стили в файле App.css к классу container.

.container {
  width: 700px;
  border: 1px solid red;
  margin: 0 auto;
}

Как мы видим, я неправильно указал импорт App.css. Нам нужно указать relative путью

Как мы видим в браузере все стили применились, но они глобальные. То есть написав класс container в двух разных файлах и примените к ним стили, мы перетрем стили одного из них.

Ну и напоследок давайте применим какие-то стили к вложенному компоненту RegistationForm. Мы, естественно, не хотим их писать в App.js, поскольку это будет тогда не внутри формы регистрации. Мы хотим ее переиспользовать сразу с стилями. Создаем новый файл RegistationForm.css и добавляем классы к инпуту и к button.

  <input
    type="text"
    placeholder="E-mail"
    value={this.state.email}
    onChange={this.handleEmailChange}
    className="emailField"
  />
  <button className="submitBtn">Save</button>

Импортируем цсс файл к нашей компоненте

import './RegistationForm.css';

Добавляем стили для инпута и кнопки.

.emailField {
  width: 300px;
  height: 40px;
  display: block;
  border-radius: 4px;
  margin-bottom: 10px;
}

.submitBtn {
  width: 300px;
  background: green;
  height: 50px;
  border: 0;
}

Теперь если мы посмотрим в браузер, мы видим, что все наши стили применились. И единственный вопрос, что же будет с стилями для продакшена. Так как у нас все стили находятся в head, и это подойдет не всем. Для продакшена многие люди хотят отдельный файл css в котором все стили минифицированы. Это абсолютно нормально, потому что create-react-app позволяет билдить наш продакшен командой

npm run build

То у вас в папке build/static будет лежать 2 файла css и js. Оба файла минифицированы. У нас также есть файл index.html, в который подключены эти файлы. Все что вам остается после билда — это засунуть эти файлы в проект на сервере.

html — Почему мой стиль CSS не применяется?

У меня есть html:

  

     Разлука - такая сладкая печаль!   - Билл Рэттлэндроллспир 

  

… и этот css (добавлен в конец Site.css):

  .fancify {
    размер шрифта: 1.5em;
    font-weight: 800;
    семейство шрифтов: Consolas, "Segoe UI", Calibri, без засечек;
    стиль шрифта: курсив;
}
  

Итак, я бы ожидал, что цитата («Разлука — такая сладкая печаль!») Будет выделена курсивом и будет отличаться шрифтом от имени цитаты (Bill Rattleandrollspeer), поскольку ее тег span имеет класс «fancify», прикрепленный к Это.Класс обязательно должен быть замечен, поскольку файл, в котором он появляется, ссылается на файл макета, который использует файл Site.css.

Какую ошибку новичка я делаю сейчас?

ОБНОВЛЕНИЕ

Я подумал, что проблема в том, что я добавил новый класс в Site.css после этого раздела в этом файле:

  / ********************
* Мобильные стили *
******************** /
@media only screen и (max-width: 850px) {
  

… но я переместил его туда, и он все еще не работает и не отображается через F12 | Осмотрите элемент на предмет наличия соответствующей метки.

Я переместил ссылку на Site.css под файлом bootstrap.css, который действительно меняет внешний вид этого текста, но все еще не выделен курсивом и все еще не отображается в инспекторе элементов …

ОБНОВЛЕНИЕ 2

Вот как развивается HTML:

  

    
         Разлука - такая сладкая печаль! 
  

… и вот мое правило css в Site.css:

  p этикетка .fancify {
        размер шрифта: 1.5em;
        font-weight: 800;
        семейство шрифтов: Consolas, "Segoe UI", Calibri, без засечек;
        стиль шрифта: курсив;
        дисплей: встроенный;
    }
  

… но он не распознается. Я считаю, что это нарушение протокола css / html, и это должно быть рассмотрено каким-то мировым органом. Опять же, я мог где-то совершить какую-то глупую ошибку.

c # — стиль CSS не применяется

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

Вместо этого попробуйте использовать это …

  " />
  

ОБНОВЛЕНИЕ (после обновленного вопроса) …

Если HTML-код, отправленный браузеру, выглядит следующим образом, то я полагаю, что LoginStyleSheet.css находится либо в другом месте, либо имеет некоторые права доступа к файлу, которые мешают его правильному обслуживанию…

(я удалил закомментированные строки и добавил строку, начинающуюся с ** … ** НЕ должен включаться)

  <заголовок>
  
  
  ** 

  

ТАКЖЕ @ aRsen49 подчеркивает возможность в своем ответе …и это то, что файл CSS загружается правильно, но CSS неверен. Вы дважды проверили соответствие CSS так, как должно (помня, что # обозначает идентификатор, а . обозначает класс)?

ДАЛЬНЕЙШЕЕ ОБНОВЛЕНИЕ

Если @Trisped прав в своем предположении, я думаю, что могу понять, что происходит не так …

Если usrLabel и Label4 являются объектами asp (например, ), тот факт, что вы используете Masterpages, означает, что фактический идентификатор элементов управления в HTML, отправленном в браузер, не будет usrLabel и Label4 , но на самом деле это будет что-то вроде ct100_Content1_usrLabel и ct100_Content1_Label4 … так что ваш CSS в том виде, в каком он у вас есть, не будет правильно соединяться.

Поэтому я бы порекомендовал вам либо обновить свой CSS, чтобы использовать идентификатор, отправленный в браузер, либо (и это было бы моим предпочтением) вам следует добавить CssClss = "usrLabel" атрибутов к каждому из объектов, а затем обновить свой CSS. вместо .usrLabel .

Устранение неполадок, связанных с неработающим CSS

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

Мы обсудим наиболее распространенные проблемы, из-за которых CSS не работает:

Кэширование браузера

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

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

Если очистка кеша браузера не помогает, попробуйте еще несколько стратегий:

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

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

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

Неверный формат CSS

должен быть написан в определенном формате, чтобы браузер мог его понять.Существует множество онлайн-инструментов для проверки правильности вашего CSS, в том числе CSS Validator от W3School. Это отличный вариант, если у вас много настраиваемого CSS и хотя бы небольшой предыдущий опыт создания CSS.

Однако, если вы используете лишь небольшое количество CSS, иногда может быть проще выполнить быструю проверку формата самостоятельно. Для начала рассмотрим фрагмент действительного CSS:

 div.wpforms-container-full .wpforms-form .wpforms-title {
    размер шрифта: 26 пикселей;
    маржа: 0 0 10px 0;
}
 

Вот почему этот CSS действителен или «читается» браузерами:

• Правильный формат селектора: Если селектор включает в себя несколько частей, его необходимо записать от «наибольшего» к «наименьшему».В приведенном выше примере div.wpforms-container-full является самым большим элементом контейнера в HTML, а .wpforms-form находится внутри этого контейнера. Самый маленький и последний элемент в селекторе, .wpforms-title , содержится внутри обоих этих других элементов. В любом другом порядке браузер не сможет прочитать этот селектор.
• Две скобки: Фигурная скобка должна быть сразу после селектора CSS и в конце списка свойств / значений.Забыть о закрывающей скобке — распространенная ошибка, которая обычно предотвращает отображение в браузере всего CSS под ней.
• Двоеточие и точка с запятой: Не забудьте поставить двоеточие (:) между каждым свойством и значением CSS (например, font-size: 26px ) и точку с запятой (;) после каждого значения, чтобы браузер мог прочитать ваш CSS. .
• Правильное использование пробелов: По большей части CSS не очень требователен к пробелам (включая табуляции и пробелы).Однако исключение составляют единицы. Например, 26px будет работать, а 26px — нет.

Для получения дополнительной информации о написании CSS с правильным синтаксисом вы можете проверить это руководство от W3Schools.

Специфика CSS

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

Например, вот CSS по умолчанию, который устанавливает размер шрифта заголовков форм в WPForms:

 div.wpforms-container-full .wpforms-form .wpforms-title {
    размер шрифта: 26 пикселей;
}
 

Давайте попробуем переопределить этот CSS, чтобы шрифт стал больше. Может возникнуть соблазн использовать короткий селектор CSS, например:

 .wpforms-title {
    размер шрифта: 40 пикселей;
}
 

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

 div.wpforms-container-full .wpforms-form .wpforms-title {
    размер шрифта: 40 пикселей;
}
 

Для получения дополнительной информации о селекторах вы можете ознакомиться со списком селекторов полей форм WPForms и их стилей по умолчанию.

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

Однако важно отметить, что добавление ! Important не всегда работает. Давайте попробуем этот подход для CSS, который мы обсуждали в последнем примере:

 .wpforms-title {
    размер шрифта: 40 пикселей! важно;
}
 

В этой ситуации браузер предпочитает специфичность CSS по умолчанию, а не ! Important , и поэтому этот CSS не будет применяться на вашем сайте.

Давайте посмотрим на пример, в котором добавление ! Important дает . По умолчанию звездочка, обозначающая «обязательное» поле в WPForms, будет красной:

Вот CSS, который создает этот стиль (# ff0000 — шестнадцатеричный код красного цвета):

 div.wpforms-container-full .wpforms-form .wpforms-required-label {
    цвет: # ff0000;
}
 

Вместо этого мы хотим сделать эти звездочки синими. Мы могли бы скопировать этот полный селектор из приведенного выше CSS или использовать короткий селектор и добавить ! Important , как в этом фрагменте CSS:

.wpforms-required-label {
    цвет: # 007acc! important;
}
 

Может быть сложно понять, будет ли работать ! Important , поэтому вам, вероятно, придется попробовать и проверить.

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

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

CSS не загружается — HTML и CSS — Форумы SitePoint

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

Для вашего первого пробного запуска кода, который я опубликовал, скопируйте и вставьте «рабочую страницу» в новый файл на вашем компьютере. Присвойте этому файлу суффикс .htm или .html и дважды щелкните его, чтобы открыть в браузере.Он должен открыться мгновенно. Сделайте снимок экрана, если он не похож на мой снимок экрана.

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

, ul и ol , по умолчанию имеют padding-left, а не margin-left; поэтому ваш ul {margin-left: 0} был заменен на ul {padding-left: 0;} , чтобы отменить отступы по умолчанию.Списки с по имеют значения по умолчанию для верхнего и нижнего полей, поэтому при желании можно добавить ul {margin: 0;} , чтобы свести на нет эти верхнее и нижнее поля по умолчанию.

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

При перечислении размеров шрифта рекомендуется использовать em, rem или даже проценты, а не px.

Страница имеет фиксированную ширину 1000 пикселей. Таким образом, он не реагирует — его можно просматривать на небольших устройствах. Вместо {width: 1000px;} рассмотрите возможность использования {max-width: 1000px;}, который позволит странице становиться уже при просмотре в окне шириной менее 1000 пикселей. Давай, попробуй. Чтобы проверить, потяните за край окна браузера.

Орфография, регистр и пунктуация. Одно из «портфелей» написано с ошибкой.

  
  Портфолио  
  

Для устранения неполадок, связанных с медленной загрузкой CSS, вам может потребоваться сообщить нам о вашей среде разработки: вашем компьютере, операционной системе, браузере и любых используемых вами средствах программирования.Является ли медленная загрузка CSS результатом задержки до сервера после изменения? Или что? Нам нужно больше информации, иначе мы будем гадать вслепую.

Обратная связь полезна, поэтому, пожалуйста, ответьте на наши вопросы и «отгадывайте». Дайте нам знать, что вы найдете.

Наследование CSS, каскад и специфичность

Вернуться на страницу четвертого класса »

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

Наследование

В CSS некоторые стили наследуются вниз по дереву HTML-документа, а другие — нет.

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

Унаследованные стили

Унаследованные стили обычно связаны со стилем текста документа.

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

Элемент body в нашем HTML является родительским для всех других наших HTML-элементов (за исключением раздела ). Установка свойства шрифта в элементе body позволяет остальной части документа унаследовать правило шрифта.

 body {font: 14px / 18px Helvetica, Verdana, sans-serif; } 

Используя приведенное выше правило, весь текст (если мы не укажем иное) будет иметь размер 14 пикселей с высотой строки 18 пикселей и быть Helvetica или Verdana.

Стили, не унаследованные

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

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

Ссылка на наследование, страница

В общем, вы можете просто использовать здравый смысл, чтобы выяснить, унаследовано ли свойство или нет.Подумайте про себя, «Имеет ли смысл передать эту собственность по наследству?»

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

Специфичность

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

Специфичность — это один из способов применения конфликтующих правил.

Селекторы имеют разные значения важности (или специфичности). Вот краткий список (в порядке важности):

1. селекторы id
2. селекторы классов и псевдоклассов
3. Селекторы элементов

Если несколько правил CSS конфликтуют друг с другом, будет применяться наиболее важный или конкретный селектор.

Расчет уровня специфичности

Обычно мы комбинируем различные типы селекторов в нашем CSS для создания правил.Мы можем использовать относительно простой метод для оценки уровня специфичности каждого правила.

Предположим, у нас есть следующий фрагмент HTML:

 <тело>
   

      

        
 ссылка 
        
 ссылка 
      
   
  

Теперь предположим, что у нас есть следующие правила CSS (номера строк добавлены для ясности):

 1.div {цвет: красный; }
2. div # nav {цвет: синий; }
3. div.links {цвет: салатовый; }
4. body div # nav {цвет: зеленый; }
5. body div # nav ul li {цвет: голубой; }
6. body div # nav ul li.active {цвет: фиолетовый; } 

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

А — В — С

Вот как работает система подсчета очков:

1. Добавьте один к A для каждого идентификатора в селекторе
2. Добавьте один к B для каждого класса или псевдокласса в селекторе
3. Добавить по одному в C для каждого имени элемента
4. Считать результат в виде трехзначного числа

Итак, правила CSS 1-3 в приведенном выше коде применяются к одному и тому же тегу div .Кто победит?

 1. div {цвет: красный; } / * 0 - 0 - 1 * /
2. div # nav {цвет: синий; } / * 1 - 0 - 1 * /
3. div.nav {цвет: салатовый; } / * 0 - 1 - 1 * / 

Как мы видим, селектор div # nav выигрывает, потому что он наиболее специфичен для . Цвет текста в div будет синим.

Для тех из вас, кто не слишком разбирается в математике, всегда есть этот графический метод.

Каскад

Мы уже говорили о том, что может быть много разных источников стилей CSS. Как мы узнаем, какой из них будет использоваться?

В CSS таблицы стилей каскадируются в порядке важности. Если правила в разных таблицах стилей конфликтуют друг с другом, выигрывает правило из наиболее важной таблицы стилей.

Ниже приведен список возможных источников правила CSS. Они перечислены в порядке важности.Как создатель таблицы стилей вы являетесь автором .

1. Автор встроенных стилей
2. Автор встроенных стилей (также известных как внутренние таблицы стилей)
3. Автор внешней таблицы стилей
4. Таблица стилей пользователя
5. Таблица стилей браузера по умолчанию

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

1. p {цвет: черный;}
2. ul {border: 1px сплошной розовый;}
3. p.intro {цвет: коричневый;}
4. p {color: red;}