將樣式內聯更改為CSS

Question

我有這些帶有內聯樣式的表單，但是我不能在CSS中使用它，因為當我在另一個視圖中引用CSS時，它會更改我的所有代碼：

<style>
    body {
      background: url('http://digitalresult.com/') fixed;
      background-size: cover;
      padding: 0;
      margin: 0;
    }
    .form-login {
      background-color: #EDEDED;
      padding-top: 10px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 15px;
      border-color:#d2d2d2;
      border-width: 5px;
      box-shadow:0 1px 0 #cfcfcf;
      opacity: 0.8;
    }

    h4 { 
      border:0 solid #fff; 
      border-bottom-width:1px;
      padding-bottom:10px;
      text-align: center;
    }

    .form-control {
      border-radius: 10px;
    }

    .wrapper {
      text-align: center;
    }
</style>
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="container" style="margin-top:40px">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <div class="panel panel-default form-login">
                <div class="panel-heading">
                    <strong> Press to continue</strong>
                </div>
                <div class="panel-body">
                    <form role="form" action="#" method="POST">
                        <fieldset>
                            <div class="row">

                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-10  col-md-offset-1 ">
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="glyphicon glyphicon-user"></i>
                                            </span>
                                            @Html.TextBoxFor(m => m.Email, new { @class = "form-control has-success", @autofocus = "autofocus", placeholder = "Usuario", required = "required" })
                                            @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon">
                                                <i class="glyphicon glyphicon-lock"></i>
                                            </span>
                                            @Html.TextBoxFor(m => m.Password, new { @class = "form-control has-success", placeholder = "Password", type = "password", required = "required" })
                                            @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
                                    </div>
                                    <p>@Html.ActionLink("Return to home page", "Index", "Home")</p>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

我認為問題是，如果我將body類發送到css，則它會在我引用css的所有頁面上更改，如何才能更改為僅在此視圖中更改？ 問候

Answer 1

如果您只需要在一個位置進行更改，則可以通過標記在頁面中添加樣式，也可以使用樣式元素提供內聯樣式，而不是在文件中進行更改。 但是應避免添加內聯樣式。 最好用id區分元素並為其賦予屬性

Answer 2

在這種情況下，您可以將上述內聯CSS保存到單獨的CSS文件中，然后將該css文件導入到您想要此CSS的HTML頁面中。

Answer 3

將背景添加到container ，或將另一個類添加到container並應用樣式。 並將margin-top更改為padding-top

.container {
  background: url('http://digitalresult.com/') fixed;
  background-size: cover;
  padding: 0;
  margin: 0;

    height: 100vh;
    padding-top:40px;
}

Answer 4

您可以使用視圖中提到的樣式創建CSS文件，然后僅在此視圖中導入該文件，這將解決您的問題。