Điều gì là quan trọng nhất trong CSS?

Theo MDN, tính đặc hiệu là phương tiện để trình duyệt quyết định giá trị thuộc tính CSS nào phù hợp nhất với một phần tử và do đó, sẽ được áp dụng. Độ đặc hiệu là trọng số được áp dụng cho một khai báo CSS nhất định, được xác định bởi số lượng của từng loại bộ chọn trong bộ chọn phù hợp. Tính cụ thể chỉ áp dụng khi cùng một yếu tố được nhắm mục tiêu bởi nhiều khai báo. Theo quy tắc CSS, các phần tử được nhắm mục tiêu trực tiếp sẽ luôn được ưu tiên hơn các quy tắc mà một phần tử kế thừa từ tổ tiên của nó

Giá trị độ đặc hiệu của các bộ chọn từ cao nhất đến thấp nhất như sau

1. Inline styles (

   )Bộ chọn ID ( #navbar)Các lớp, thuộc tính và lớp giả (. hộp, [type=”đài”],. bay lượn)Các phần tử và phần tử giả (h1,. trước)Có một số thông tin sai lệch về cách tính độ đặc hiệu. Một số tài nguyên cho biết nó được tính điểm bằng cách gán các giá trị điểm, chẳng hạn như. một kiểu nội tuyến có giá trị 1000 điểm, ID có giá trị 100, một lớp, thuộc tính hoặc lớp giả có giá trị 10 và các phần tử hoặc phần tử psuedo có giá trị 1. Điều này là không chính xác về mặt kỹ thuật — tuy nhiên, trong hầu hết các trường hợp, vẫn có thể tính toán độ đặc hiệu theo cách nàyCách chính xác để tính toán độ đặc hiệu là như vậy (adsbygoogle = window.adsbygoogle || []).push({}); Kiểu nội tuyến — 1,0,0,0ID — 0,1,0,0Lớp, thuộc tính và lớp giả — 0,0,1,0Phần tử và phần tử giả — 0,0,0,1Chúng tôi đi từ trái sang phải so sánh từng giá trị được phân tách bằng dấu phẩy. Trong trường hợp hiếm hoi mà chúng tôi có 12 bộ chọn lớp so với 1 bộ chọn ID, bộ chọn ID sẽ thắng. Đó là bởi vì ID có 1 (0,1,0,0) trong đó 12 bộ chọn lớp có 0 (0,0,12,0). Nếu chúng tôi tính toán sai điều này với hệ thống 10 điểm cơ bản, 12 bộ chọn lớp sẽ giành chiến thắng với 120 điểm cho ID 100 điểmNhìn vào ví dụ và cố gắng tìm ra màu của các mục trong danh sách

   • juice
   • bread
   • cookies

   .grocery-items { color: blue}ul li { color: red}Độ đặc hiệu của bộ chọn làm cho các mục trong danh sách có màu xanh lam là 0,0,1,0. Độ đặc hiệu của các bộ chọn làm cho các mục trong danh sách có màu đỏ là 0,0,0,2. Vì vậy, màu sẽ là màu xanh. Nếu tính đặc hiệu của nhiều bộ chọn nhắm mục tiêu cùng một phần tử giống nhau, thì phần khai báo cuối cùng (bất kỳ phần nào ở cuối trang) trong CSS sẽ giành chiến thắngNgoài ra còn có một “. quan trọng”, áp dụng cho một tuyên bố. . chiến thắng quan trọng trước bất kỳ bộ chọn nào (adsbygoogle = window.adsbygoogle || []).push({}); .grocery-items { color: blue}ul li { color: red !important;}Mặc dù các bộ chọn trỏ đến màu đỏ ít cụ thể hơn,. quan trọng vẫn thắng và màu đỏTuy nhiên, nếu chống lại người khác. quan trọng, sau đó người chiến thắng sẽ được quyết định dựa trên số điểm của người chọn.grocery-items { color: blue !important;}ul li { color: red !important;}Màu sẽ có màu xanh vì. lớp mặt hàng tạp hóa cụ thể hơn hai phần tử ul li. sử dụng. quan trọng về cơ bản giống như có độ đặc hiệu là 1,0,0,0,0. Vậy 1,0,0,1,0 (. cửa hàng tạp hóa) cụ thể hơn 1,0,0,0,2 (ul li)2. Sự khác biệt giữa các giá trị thuộc tính kích thước hộp nội dung và hộp viền là gì?

   Chúng tôi dùng thuật ngữ “box model” (hình trên) để nói về thiết kế và bố cục trong CSS. Mọi phần tử trong CSS với kiểu hiển thị là “khối” đều có mô hình hộp chữ nhật với các thuộc tính như phần đệm, lề và đường viền. Chúng ta có thể sửa đổi cách tính chiều cao và chiều rộng của phần tử bằng cách thay đổi thuộc tính kích thước hộp thành hộp nội dung hoặc hộp viền. Hộp nội dung là giá trị mặc định của thuộc tính kích thước hộp. Nó cho chúng ta biết chiều rộng và chiều cao của phần tử sẽ được tính dựa trên kích thước của vùng nội dung (vùng màu xanh trong mô hình hộp ở trên). Phần đệm và đường viền của phần tử sẽ không được tính đến khi xác định chiều rộng và chiều cao của phần tử. Mọi phần đệm hoặc đường viền bổ sung sẽ được thêm vào bên trên chiều rộng và chiều cao đã cho và vùng nội dung của phần tử sẽ giữ nguyên. Ví dụ

   .box {
     width: 300px;
     height: 600px;
     border: 5px solid black;
     padding: 3px;
   }

   Chiều rộng và chiều cao của vùng nội dung của hộp này sẽ luôn là 300px x 600px, nhưng hộp thực tế được hiển thị trên trang sẽ là 308px x 608px vì hộp sẽ bao gồm phần đệm và đường viền bổ sung. Điều này không lý tưởng trong hầu hết các trường hợp và nhiều người thích đặt thuộc tính kích thước hộp thành hộp viền để giải quyết vấn đề này

   .box {
     width: 300px;
     height: 600px;
     border: 5px solid black;
     padding: 3px;
     box-sizing: border-box;
   }

   Các. phần tử hộp bây giờ sẽ bao gồm phần đệm và đường viền khi tính toán chiều rộng và chiều cao. Điều này có nghĩa là tổng diện tích của phần tử được hiển thị trên trang sẽ luôn là 300px x 600px. Phần đệm và đường viền sẽ được trừ khỏi khu vực nội dung của phần tử để duy trì kích thước mong muốn của chúng tôi là 300px x 600px. Vì vậy, lĩnh vực nội dung của. hộp bây giờ là 292px x 592px. Sử dụng hộp viền giúp chúng ta rõ ràng hơn khi xác định hộp viền của các thành phần khối. Lưu ý rằng thuộc tính lề sẽ không có bất kỳ ảnh hưởng nào đến phép tính chiều rộng và chiều cao của thuộc tính kích thước hộp

   Cảm ơn vì đã đọc — kết nối với tôi trên LinkedIn và xem danh mục đầu tư của tôi tại kylefarmer. nhà phát triển, chúc mừng

   Những điều quan trọng trong CSS là gì?

   Đây là những gì bạn sẽ học. .

   Mô hình hộp. Mọi thứ được hiển thị bởi CSS là một hộp. .

   Bộ chọn. Để áp dụng CSS cho một phần tử, bạn cần chọn phần tử đó. .

   dòng thác. Đôi khi hai hoặc nhiều quy tắc CSS cạnh tranh có thể áp dụng cho một phần tử. .

   độ đặc hiệu. .

   Di sản. .

   Màu. .

   đơn vị định cỡ. .

   Cách trình bày

   Khái niệm chính trong CSS là gì?

   Có ba phần chính của CSS - bộ chọn, thuộc tính và giá trị .

   Thứ tự quan trọng trong CSS là gì?

   CSS nội tuyến có mức độ ưu tiên cao hơn so với CSS được nhúng và bên ngoài. Vì vậy, thứ tự cuối cùng là. Giá trị được xác định là Quan trọng > Nội tuyến > lồng id > id > lồng lớp > lớp > lồng thẻ > thẻ .