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

Содержание

Почему не применяются правила CSS, которые я пишу?



По какой-то странной причине я не могу редактировать или применять стили к html в Sublime Text 2. Я не могу делать внутренние стили или ссылаться на внешние стили. Однако если я возьму код, который я сделал в Dreamweaver или Notepad++, стили будут применены и доступны для редактирования? Как я могу получить sublime Text 2, чтобы позволить мне применять и редактировать стили?

У меня есть Windows 7, и я новичок в HTML и CSS. Я пытаюсь изучить разные редакторы кода, но это довольно сложно, когда редакторы не работают 🙁

Спасибо!

ETA: когда я имею в виду стили, я имею в виду css. Я не могу просматривать любые css стиль на мой html странице в возвышенное текст 2. Только когда я использовать Notepad++ или Dreamweaver. Я не вижу css в браузере, когда использую sublime text 2.

Вот мой код:

<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Untitled Document</title>
</head>

<style> 
    body{
        background: orange;
    }

</style>

<body>
</body>
</html>
html css styles stylesheet sublimetext2
Поделиться Источник Addy     25 января 2013 в 20:27

2 ответа


  • CSS правила применяются частично

    Я разрабатываю небольшой сайт vCards . Я использую файлы Twitter Bootstrap LESS в качестве основы для отзывчивости и сетки. У меня была проблема раньше, сетка не реагировала ( вопрос Stack Overflow), и на основе ответа я понял, что должен был включить файл responsive.less вместе с файлом...

  • Реверс-инжиниринг какие правила CSS применяются к данному элементу DOM?

    Пожалуйста, обратите внимание: я нашел этот вопрос , а также Этот , но оба их ответа связаны с написанием и выполнением customized JS. Мой вопрос здесь заключается в том, как использовать инструменты Chrome Dev (или аналогичные им) для выполнения того же самого в режиме реального времени. У меня...



5

Проблема не в Редакторе, скорее всего, в документе есть какие-то ошибки.

В настоящее время вам не хватает открывающих

<html> , <style> элементов, которые должны находиться внутри <head> или <body> , а не между ними, и атрибут charset должен иметь 2-ю кавычку, чтобы окружить значение:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>

    <style> 
        body{
            background: orange;
        }

    </style>
</head>

<body>
</body>
</html>

Поделиться Jonathan Lonowski     25 января 2013 в 20:47



1

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

Кроме того, убедитесь, что вы сохраняете его как .html, Sublime Text 2 не будет автоматически давать вашим файлам расширение, как Dreamweaver или другие редакторы.

Поделиться Chris Bier     25 января 2013 в 20:48


Похожие вопросы:


Найти CSS неприменимые правила

У меня есть большой лист стилей CSS (около 6500 строк). Есть ли какой-нибудь способ определить, какие правила не применяются на данной странице (firefox плагин, веб-util или что-то еще) ? Спасибо!...


Как собрать все правила CSS для элемента вместе

Для использования такого сайта, как jsfiddle или cssdesk, как бы я собрал все правила css, которые применяются к моему элементу, вместе в одном месте? Мой CMS имеет довольно большое количество...


Таблица внутри блочного элемента. Какие правила применяются

Может кто-нибудь объяснить, почему div с красной каймой не расширяется? <body style=padding:200px> <div style=border:1px solid red> <table> <tr> <input type=text...


CSS правила применяются частично

Я разрабатываю небольшой сайт vCards . Я использую файлы Twitter Bootstrap LESS в качестве основы для отзывчивости и сетки. У меня была проблема раньше, сетка не реагировала ( вопрос Stack...


Реверс-инжиниринг какие правила CSS применяются к данному элементу DOM?

Пожалуйста, обратите внимание: я нашел этот вопрос , а также Этот , но оба их ответа связаны с написанием и выполнением customized JS. Мой вопрос здесь заключается в том, как использовать...


Отключите некоторые правила css

У меня есть проект, где я пишу некоторые интерфейсы, которые встроены в другие интерфейсы. Если я использую bootstrap, чистые правила bootsrap вступают в конфликт с правилами других файлов css....


Почему изменения перехода jquery .css не применяются в safari, а изменения преобразования .css применяются?

Я пытаюсь использовать jquery для редактирования css элемента, чтобы дать ему случайное время перехода, а затем повернуть элемент. Все это прекрасно работает в chrome, но в safari первая строка из...


Как узнать, какие правила CSS применяются на конкретной странице?

Существует ли какой-либо метод или расширение, чтобы увидеть, какие правила CSS применяются на странице? Например, правило span ни к чему не применяется. <html> <head> <style> div{...


Пользовательские правила стиля CSS применяются только при добавлении в тег стиля, если Bootstrap CSS связан

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


Реагировать не применяются правила CSS

Я использую React для создания какой-то кнопки и CSS для стилизации темы. Итак, я создал кнопку класса: export default class Button extends React.Component{ public className: string;...

Css стили не применяются` - CodeRoad



Я пытался, но не могу понять, почему мой стиль не применяется.

<html lang="en">
 <head>
<title>Document</title>
<style>
#contact
 {
padding: 2em 0;
height: 70em;
width: 100%;
color:red;
 }
#contact h2
 {
text-align: center;
color:red;
 }
</style>
</head>
<body>
<div id"contact">
    <div>
        <h2>Contact us</h2>
        <p></p>
    </div>
</div>
</body>
</html>

Это небольшой пример, я пробовал, но ни один из них не применяется.

css
Поделиться Источник rishabh c     18 апреля 2016 в 07:47

2 ответа


  • Ссылка на таблицу стилей include отображается в HTML, но стили не применяются, когда Turbolinks включен?

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

  • CKEditor - мои стили в editor.css не применяются

    Я пытаюсь изменить цвет / размер шрифта по умолчанию и т. д. В области моего экземпляра ckeditor, но это не работает для меня. В chrome inspector я могу добавить этот стиль в заголовок и он работает: .cke_editable { color: #fff; font-size: 14px; font-family: Calibri; } Однако когда я добавляю это...



2

Добавьте знак = после 'id':

<div>

Поделиться timolawl     18 апреля 2016 в 07:47



0

Во-первых, измените это: 'div'

Поделиться Ciprianis     18 апреля 2016 в 07:49


Похожие вопросы:


Как проверить, какие стили применяются к элементу?

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


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

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


Переопределенные стили GWT CSS не применяются после deployment

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


Ссылка на таблицу стилей include отображается в HTML, но стили не применяются, когда Turbolinks включен?

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


CKEditor - мои стили в editor.css не применяются

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


CSS стили не применяются в XAMPP localhost

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


когда стили CSS применяются к DOM?

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


CSS стили не применяются к ag-сетке в firefox при использовании с Polymer

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


CSS стили не применяются в заголовке

У меня есть файл 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

  • Чтение занимает 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, в том числе 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.

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

    В 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. Таблица стилей браузера по умолчанию

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

    Каждый раз, когда мы определяем правило CSS, например font-family, мы фактически заменяем правилом таблицы стилей браузера по умолчанию .Это каскад в действии.

    Что происходит при возникновении конфликтов?

    Могут быть случаи, когда два или более объявления применяются к одному и тому же элементу. Также не исключено, что между ними может быть конфликт. Когда возникают подобные конфликты, используется объявление с наибольшим весом. Итак, как определяется вес?

    Правила каскада
    1. Найдите все объявления, селекторы которых соответствуют определенному элементу.
    2. Сортировка этих деклараций по весу и происхождению
    3. Сортировка селекторов по специфике
    4. Сортировать по указанному порядку

    Полное описание этих правил см. В разделе Что происходит при возникновении конфликтов?

    Вопросы заказа CSS

    В CSS имеет значение порядок, в котором мы указываем наши правила.

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

    Пример лучше всего это проиллюстрирует.

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

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

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

    Правила №1 и №4 противоречат друг другу. Они взяты из одной таблицы стилей и имеют одинаковый уровень специфичности. Если все остальное в каскаде одинаково, мы сортируем по указанному порядку .

    Правило №4 объявляется последним в документе CSS и, следовательно, отменяет ранее объявленное Правило №1.

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

    Альтернативные таблицы стилей - CSS: каскадные таблицы стилей

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

    Firefox позволяет пользователю выбирать таблицу стилей с помощью подменю View> Page Style . Internet Explorer также поддерживает эту функцию (начиная с IE 8), доступ к которой также осуществляется из меню «Вид »> «Стиль страницы» . Для использования этой функции Chrome требуется расширение (начиная с версии 48). Веб-страница также может предоставлять собственный пользовательский интерфейс, позволяющий пользователю переключать стили.

    Альтернативные таблицы стилей обычно указываются с использованием элемента с rel = "alternate stylesheet" и title = "... " атрибутов. Например:

      
    
    
    
    
      

    В этом примере стили «Стиль по умолчанию», «Необычный» и «Базовый» будут перечислены в подменю Page Style с предварительно выбранным «Стиль по умолчанию».Когда пользователь выбирает другой стиль, страница немедленно перерисовывается с использованием этой таблицы стилей.

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

    Попробовать

    Любая таблица стилей в документе попадает в одну из следующих категорий:

    • Постоянный (no rel = "alternate" , no title = "" ): всегда применяется к документу.
    • Предпочтительный (нет rel = "alternate" , с title = "... "указано ): применяется по умолчанию, но отключается, если выбрана альтернативная таблица стилей. Может быть только одна предпочтительная таблица стилей , поэтому предоставление таблиц стилей с разными атрибутами заголовка приведет к тому, что некоторые из них будут проигнорированы. См. Правильное использование заголовков С внешними таблицами стилей для более подробного обсуждения.
    • Альтернативный ( rel = "альтернативная таблица стилей" , title = "..." должен быть указан ): по умолчанию отключено, можно выбрать.

    Когда на таблицы стилей ссылаются с помощью атрибута title в элементе или