Tầm quan trọng của css

Cách tốt nhất đề giải thích nó được bắt đầu với một ví dụ sẽ làm bạn khó hiểu và có thể sẽ hoạt động không như bạn mong đợi. Sau đó chúng ta sẽ xem xét kỹ hơn về cách tính giá trị đặc hiệu mà bộ chọn sẽ được ưu tiên

Đây là một danh sách đơn giản và không có thứ tự

<ul id="summer-drinks">
  <li>Whiskey and Ginger Aleli>
  <li>Wheat Beerli>
  <li>Mint Julipli>
ul>

Bây giờ bạn muốn chỉ định một đồ uống thành yêu thích trong danh sách đồ uống của bạn và thay đổi nó về phong cách một chút. Bạn cần một cái móc cho điều này nên bạn sẽ áp dụng thông tin của nó thông qua một tên lớp cho nó

<ul id="summer-drinks">
   <li class="favorite">Whiskey and Ginger Aleli>
   <li>Wheat Beerli>
   <li>Mint Julipli>
ul>

Bây giờ bạn hãy mở tệp CSS của bạn và tạo kiểu cho lớp mới

.favorite {
  color: red;
  font-weight: bold;
}

Sau đó bạn nhìn nó làm việc thế nào, nhưng nó không làm việc. Một cái gì đó đang gây ra vấn đề ở đây

Đi sâu hơn vào tệp CSS, bạn sẽ thấy điều này

ul#summer-drinks li {
   font-weight: normal;
   font-size: 12px;
   color: black;
}

Vấn đề đang ở ngay đó. Hai bộ chọn CSS khác nhau đang nói đoạn văn bản đó có màu sắc và phông chữ gì không. Nhưng chỉ có một lệnh cho kích thước phông chữ nên rõ ràng cái đó sẽ có hiệu lực. Không có xung đột gì ở đây cả nhưng trình duyệt cần quyết định một trong các lệnh để áp dụng và hiển thị chúng. Nó làm bằng cách tuân thủ theo một bộ quy tắc tiêu chuẩn

Tôi nghĩ rằng điều này sẽ gây ra một chút khó khăn cho người mới bắt đầu bởi vì họ chưa hoàn toàn nhận ra điều này. Họ có thể nghĩ vì lớp học. yêu thích nằm sâu hơn trong CSS hoặc bởi vì nó gần với chữ hơn trong HTML. v sẽ là kẻ chiến thắng

Trong thực tế, thứ tự của các bộ chọn trong CSS sẽ đóng vai trò chính và quy tắc "từ trên xuống dưới" sẽ được áp dụng khi các giá trị đặc trưng giống nhau. Cho ví dụ

favorite {
   color: red;
}
.favorite {
   color: black;
}

At the wire it will have color black. Nhưng chúng ta đang lạc đề. v

Các vấn đề ở đây là chúng ta muốn cụ thể hóa nó để nó có ý nghĩa với mọi ví dụ mà chúng ta có. Ngay cả với ví dụ đơn giản được trình bày ở trên, cuối cùng bạn cũng sẽ thấy chỉ cần sử dụng tên lớp Mục đích hướng tới mục tiêu "đồ uống yêu thích" là không thay đổi hoặc sẽ không hoàn toàn ngay cả khi nó hoạt động. Sẽ thông báo cho mình hơn nếu sử dụng điều này

ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

Đó là những cái mà tôi đang gọi là " cụ thể để nó có nghĩa". Bạn thực sự có thể "cụ thể" hơn khi sử dụng định dạng kiểu như thế này

html body div#pagewrap ul#summer-drinks li.favorite {
  color: red;
  font-weight: bold;
}

Nhưng nó sẽ là code Css của bạn khó đọc và không mang lại lợi ích thực tế. Một cách khác để tăng giá trị đặc hiệu cho lớp ". yêu thích" của bạn là sử dụng quan trọng

.favorite {
  color: red !important;
  font-weight: bold !important;
}

Tôi đã từng nghe nói rằng. giống như một trò lừa bịp về tinh thần trong css. Quả thực là như vậy, và bạn có thể buộc ý chí của mình vượt qua những khó khăn trong cs bằng cách sử dụng nó. Nhưng. quan trọng là đặt ra rằng sẽ nâng cao hiệu quả tính năng mạng trên bộ chọn và từ đó sẽ vượt qua các phong cách khác nhau

quan trọng có thể dễ dàng sử dụng sai nếu hiểu lầm. Đó là cách tốt để giữ cho mã của bạn sạch hơn, trong các ví dụ mà bạn biết các yếu tố với bộ chọn lớp cụ thể nên sử dụng phong cách quán nhất bất kể nó là gì. Ngược lại, không nên sử dụng thủ thuật để ghi đè kiểu của một phần tử nào đó vì tìm ra cách CSS được viết và hoạt động theo tác giả ban đầu

Một ví dụ về điển điển là

________số 8

Tôi thường sử dụng nó trong các tình huống có nhiều khối kết nối, cho khối cuối cùng bên phải trong một hàng. Điều đó chắc chắn đảm bảo rằng khối cuối cùng không có lề phải bất kỳ nào bất kỳ điều gì này sẽ giúp nó được thoải mái như vậy với cha mẹ nó. Mỗi khối có thể có các công cụ chọn Css để thêm lề phải cho chúng, nhưng. quan trọng sẽ phá vỡ điều đó và làm cho lớp nhìn đơn giản và rõ ràng hơn

Special CSS value value

Tại sao nỗ lực đầu tiên của chúng tôi để thay đổi màu sắc và trọng lượng phông chữ không thành công? . Css áp dụng các dấu hiệu đặc biệt quan trọng khác cho id và lớp. Trong thực tế một Id có giá trị cao hơn nhiều. Vì vậy, một lớp không thể vượt qua id

Chúng ta hãy xem cách các số thực được tính toán.

Tầm quan trọng của css
Nói cách khác.

  • Nếu phần tử có kiểu dáng nội tuyến, tự động đó sẽ thắng (1,0,0,0 điểm)
  • Mỗi ID áp dụng (0,1,0,0 điểm)
  • Mỗi lớp (hoặc lớp giả hoặc bộ chọn thuộc tính) áp dụng (0,0,1,0 điểm)
  • Với mỗi phần tử tham chiếu trực tiếp có (0,0,0,1 điểm)

Nói chung, bạn có thể đọc giá trị như các con số, chẳng hạn như 1,0,0,0 là "1000", Vì thế nó rõ ràng sẽ giành được các đặc hiệu 0,1,0,0 hoặc "100". Dấu hiệu ở đây thực sự để nhắc nhở chúng ta rằng nó không phải sự thật là "cơ sở 10". Về mặt kỹ thuật bạn có thế có các giá trị như 0,1,13,4 và "13" không tràn ra như "cơ số 10"

Tính toán một cách đơn giản

Tầm quan trọng của css
Tầm quan trọng của css
Tầm quan trọng của css

Cập nhật. . not() sort-of-pseudo-class không thêm giá trị đặc hiệu vào chính nó. Chỉ những thứ bên trong cha mẹ được thêm vào giá trị đặc trưng