CSS屬性在角度中無法正常作業-有解無憂

我的一些 css 樣式（例如 body background-image 和 align 不能與 angular 一起正常作業，盡管它們在運行具有相同樣式的 html 檔案時可以正常作業，但我不明白為什么

這是我的代碼：

* {
  margin: 0
}

body {
  background-image: linear-gradient(180deg, 
                                  rgba(125, 70, 184, 1) 0%,  
                                  rgba(100, 106, 195, 1) 35%,  
                                  rgba(55, 182, 216, 1) 100%);
}

table,
td {
  color: white;
}

.regContainer {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  padding-top: 20px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 80%;
}

.regContainer h1 {
  color: white;
  background-color: rgb(38, 33, 87);
  font-family: sans-serif;
  text-align: left;
  margin-top: 50px;
  padding-top: 10px;
  padding-left: 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.regContainer p {
  color: white;
  background-color: rgb(38, 33, 87);
  font-family: sans-serif;
  margin: 0px;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
}

.registartion-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  font-size: 18px;
  font-family: sans-serif;
  color: rgb(255, 255, 255);
  background-color: rgba(44, 43, 105);
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.registartion-form input,
.registartion-form select,
.registartion-form textarea {
  border: none;
  border-radius: 5px;
  padding: 5px;
  margin-top: 10px;
  font-family: sans-serif;
}

.registartion-form input:focus,
.registartion-form textarea:focus {
  box-shadow: 3px 3px 10px rgb(228, 228, 228), -3px -3px 10px rgb(224, 224, 224);
}

.registartion-form .submit {
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: rgb(255, 255, 255);
  background-color: rgb(96, 177, 45);
  border-radius: 5px;
}

.registartion-form .submit:hover {
  box-shadow: 0px 3px 6px rgb(255, 255, 255);
}

<head>
    <link rel="stylesheet" href="regCSS.css" type="text/css">
</head>

<div class="container">
    <div class="regContainer">
    <h1>Register</h1>
    <p>Please fill in this form to create an account.</p>
  </div>
    <form name="registration" class="registartion-form" onsubmit="return formValidation()">
      <table>
        <tr>
          <td><label for="name">Name:</label></td>
          <td><input type="text" name="name" id="name" placeholder="your name"></td>
        </tr>
        <tr>
          <td><label for="email">Email:</label></td>
          <td><input type="text" name="email" id="email" placeholder="your email"></td>
        </tr>
        <tr>
          <td><label for="password">Password:</label></td>
          <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
          <td><label for="phoneNumber">Phone Number:</label></td>
          <td><input type="tel" name="phoneNumber" id="phoneNumber"></td>
        </tr>
        <tr>
          <td><label for="gender">Gender:</label></td>
          <td>Male: <input type="radio" name="gender" value="male">
            Female: <input type="radio" name="gender" value="female"></td>
        </tr>
        <tr>
          <td><label for="language">language</label></td>
          <td>
            <select name="language" id="language">
              <option value="">Select language</option>
              <option value="English">English</option>
              <option value="Spanish">Spanish</option>
              <option value="Hindi">Hindi</option>
              <option value="Arabic">Arabic</option>
              <option value="Russian">Russian</option>
            </select>
          </td>
        </tr>
        <tr>
          <td><label for="zipcode">Zip Code:</label></td>
          <td><input type="number" name="zipcode" id="zipcode"></td>
        </tr>
        <tr>
          <td><label for="about">About:</label></td>
          <td><textarea name="about" id="about" placeholder="Write about yourself..."></textarea></td>
        </tr>
        <tr>
          <td colspan="2"><input type="submit" class="submit" value="Register" /></td>
        </tr>
      </table>
    </form>
  </div>

<body>
    <script type="text/javascript" src="regJS.js"></script>
</body>

大部分作業正常，除了我看不到背景漸變并且表格沒有以角度為中心

應該如何： CSS屬性在角度中無法正常作業

角度如何： CSS屬性在角度中無法正常作業

uj5u.com熱心網友回復：

有一些 css 選擇器默認情況下不能被組件定位。

所以你有兩種方法：

定位檔案中的那些選擇器style.scss。

默認情況下，諸如body、html、*等選擇器（甚至是材質或任何庫的樣式）不能被組件的范圍定位，因此如果將它們移動到根 css 檔案中（通常是style.scss），您將看到已應用的屬性。

更改組件的封裝。

如果您想從組件的范圍本身更改這些選擇器，您可以使用ViewEncapsulation.None.

@Component({
  selector: 'your-selector',
  templateUrl: './foo.html',
  styleUrls: ['./foo.scss'],
  encapsulation: ViewEncapsulation.None
})

使用ViewEncapsulation.None意味著樣式適用于應用程式的任何 HTML 元素，而不管它們的宿主組件如何。

請注意，不使用封裝可能會導致一些不需要的情況。更多細節在這里

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531388.html

標籤：htmlcss有角度的

上一篇：如何基于onChange()函式呼叫3個不同的Api

下一篇：墊復選框自定義和特定顏色