Hướng dẫn can we use css with angular? - chúng ta có thể sử dụng css với góc cạnh không?

Angular CLI tạo ra hai loại tệp kiểu:

• Kiểu thành phần: CLI Angular cung cấp cho mỗi thành phần tệp riêng cho các kiểu. Các kiểu trong tệp này chỉ áp dụng cho thành phần của nó.
• styles.css: Trong thư mục src, các kiểu trong tệp này áp dụng cho toàn bộ ứng dụng của bạn trừ khi bạn chỉ định các kiểu ở cấp thành phần.

Tùy thuộc vào việc bạn đang sử dụng bộ tiền xử lý CSS, phần mở rộng trên các tệp CSS của bạn có thể thay đổi. Angular hỗ trợ CSS, SCSS, SASS, ít hơn và bút stylus.

Trong src/styles.css, dán các kiểu sau:

body {
  font-family: Helvetica, Arial, sans-serif;
}

.btn-wrapper {
  /* flexbox */
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.btn {
  color: #000;
  background-color: #fff;
  border: 2px solid #cecece;
  padding: 0.35rem 1rem 0.25rem 1rem;
  font-size: 1rem;
}

.btn:hover {
  background-color: #ecf2fd;
}

.btn:active {
  background-color: #d1e0fe;
}

.btn:focus {
  outline: none;
  border: black solid 2px;
}

.btn-primary {
  color: #fff;
  background-color: #000;
  width: 100%;
  padding: 0.75rem;
  font-size: 1.3rem;
  border: black solid 2px;
  margin: 1rem 0;
}

.btn-primary:hover {
  background-color: #444242;
}

.btn-primary:focus {
  color: #000;
  outline: none;
  border: #000 solid 2px;
  background-color: #d7ecff;
}

.btn-primary:active {
  background-color: #212020;
}

CSS trong src/styles.css áp dụng cho toàn bộ ứng dụng, tuy nhiên, các kiểu này không ảnh hưởng đến mọi thứ trên trang. Bước tiếp theo là thêm các kiểu áp dụng cụ thể cho AppComponent.

Trong app.component.css, thêm các kiểu sau:

.main {
  max-width: 500px;
  width: 85%;
  margin: 2rem auto;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1);
}

@media screen and (min-width: 600px) {
  .main {
    width: 70%;
  }
}

label {
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
  padding-bottom: 1rem;
}

.lg-text-input {
  width: 100%;
  padding: 1rem;
  border: 2px solid #000;
  display: block;
  box-sizing: border-box;
  font-size: 1rem;
}

.btn-wrapper {
  margin-bottom: 2rem;
}

.btn-menu {
  flex-basis: 32%;
}

.active {
  color: green;
}

ul {
  padding-inline-start: 0;
}

ul li {
  list-style: none;
}

Bước cuối cùng là xem lại trình duyệt của bạn và xem cách kiểu dáng đã được cập nhật. Mọi thứ bây giờ có ý nghĩa hơn một chút.

Tôi có thể sử dụng CSS và SCSS trong góc không?

Angular có sử dụng CSS trong JS không?

Bạn có thể có cả CSS và SCSS trong AngularJS không?

Bộ chọn CSS trong góc là gì?