Почему я получаю сообщение об ошибке "Стиль элемента" не может быть вложен в стиль элемента? "?
Мне нужно переопределить некоторые элементы <style>
на моей странице Razor, поэтому я вставил стили сразу после открытия кода:
@{
ViewBag.Title = "New Account";
Layout = "~/Views/Shared/_Layout_Form.cshtml";
}
<style type="text/css">
#main
{
height: 400px;
}
</style>
Страница отображается корректно в браузере, но зеленые кнопки Visual Studio в <style>
жалуются, что:
<Validation (XHTML 1.0 Transitional): Element 'style' cannot be nested within element 'style'>
Я дважды проверил главную страницу - там не было проблем.
Что Visual Studio ожидает в этот момент? Какой правильный способ переопределить стили на странице за страницей? Через jQuery?
Ответы
Ответ 1
Элемент стиля не может быть вложен под <body>
или дочерними элементами <body>
, вместо этого он должен перейти к элементу <head>
страницы.
Если вы попытаетесь переопределить стили, подобные этому, они будут вставлены в раздел по умолчанию страницы компоновки на @RenderBody()
, который, как я полагаю, находится внутри <body>
страницы макета, в то время как стили по умолчанию все еще остаются в <head>
.
Правильный способ переопределить часть страницы макета с страницы содержимого будет чем-то в этом направлении, используя разделы Razor:
_layout.cshtml
<head>
@if (IsSectionDefined("Style"))
{
@RenderSection("Style");
}
else
{
<style type="text/css">
/* Default styles */
</style>
}
</head>
<body>
@RenderBody()
...
page.cshtml
@{
Layout = "layout.cshtml";
}
@section Style
{
<style type="text/css">
#main
{
height: 400px;
}
</style>
}
<!-- Body content here -->
...
Теперь, если раздел Style
определен на странице содержимого, его содержимое переопределит значения по умолчанию на странице макета.
Я предлагаю вам ознакомиться с макетами и разделами Razor. Хорошую статью об этом от ScottGu можно найти здесь.
Что касается предупреждений валидации разметки Visual Studio
У Visual Studio есть проблема, когда разметка, составляющая одну страницу, разделяется между различными файлами, такими как. В большинстве случаев нет возможности для Visual Studio (или любой такой IDE, если на то пошло) знать, как различные фрагменты страницы будут динамически объединены в конце. Поэтому обычно вы не можете избежать некоторых из этих предупреждений в проекте.
Лично я игнорировал бы предупреждения, если бы знал, что я делаю, и результирующие страницы передают проверку разметки (http://validator.w3.org/).
Если вы действительно хотите скрыть предупреждения, вам необходимо отключить соответствующие параметры проверки в Visual Studio. Например. для HTML в Visual Studio 2012 это можно сделать в Инструменты > Параметры > Текстовый редактоp > HTML > Проверка.
Ответ 2
Это кажется причудой использования Razor. Валидатор не может "видеть" общий HTML, потому что он разбросан по нескольким файлам с помощью логики Razor, чтобы снова объединить все это.
Трюк, который я только что понял, - это "скрыть" <style>
и </style>
от валидатора. Вместо:
<style>
использование:
@MvcHtmlString.Create("<style type\"text/css\">")
И вместо:
</style>
использование:
@MvcHtmlString.Create("</style>")
Валидатор не понимает, что эти строки генерируют <style>
и </style>
, поэтому он перестает жаловаться на них.
Убедитесь, что вы используете @section XXX
вокруг элемента <style>
, где "XXX" ссылается на @RenderSection(name: "XXX", required: false)
в главном файле, который находится внутри элемента HTML <head>
. Это необходимо, чтобы убедиться, что элемент <style>
вставлен в элемент <head>
, где он принадлежит.
Ответ 3
Я видел, как это происходило и в моих проектах. К счастью, когда вы запускаете программу, она выделяется, и все должно отображаться так, как ожидалось.
Из-за разделения контента во время разработки, я считаю, что несколько предупреждений с бритвенных страниц можно смело игнорировать.
Если CSS на самом деле не распознается, обязательно добавьте это к вопросу, но если все, что вы делаете, пытается получить идеальную сборку предупреждений, тогда вам просто нужно будет установить VS для игнорирования парсера такие ошибки.
Ответ 4
Тег стиля должен находиться в теге head
, а не в теге body
.
Вы должны сделать область в теге head
в своем макете и поместить тег style
в этот регион.
Ответ 5
Если у вас есть ViewSource, страница, отображаемая в браузере, у вас есть
<style type="text/css">
//some other style stuff, then
<style type="text/css">
#main
{
height: 400px;
}
</style>
</style>
Как и то, что подразумевает валидатор.
Если страница проходит проверку W3, просто игнорируйте VS. Я думаю, что он немного борется с Razor.
Ответ 6
Я думаю, что вы должны установить стиль в HeadContent
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.hideGridColumn {
display: none;
}
</style>
</asp:Content>