Giá trị mặc định của css là gì?

.important {
  border: 1px red solid;
}

.what-will-this-do {
  border: inherit;
}

  This is important!

Sẽ khiến phần tử con kế thừa thuộc tính đường viền của phần tử gốc.

Cái này quan trọng

Giá trị 'mặc định'

Nếu bạn muốn đặt lại thuộc tính của phần tử về giá trị mặc định, bạn có thể sử dụng giá trị CSS initial 15.

Hãy xem xét phong cách sau đây

p {
  color: red;  
}
.default {
  color: initial;
}

Khi áp dụng cho đoạn mã sau

This is some styled text!

This is some default styled text

Kết quả sau đây. 16

Đây là một số văn bản theo kiểu

Đây là một số văn bản theo kiểu mặc định

Từ cuối cùng

Các phần tử con có thể kế thừa các giá trị CSS từ phần tử cha của chúng – tùy thuộc vào thuộc tính CSS cụ thể

Tất cả các phần tử HTML đều có các kiểu mặc định được áp dụng cho chúng. Một số kiểu này được xác định bởi cài đặt trình duyệt, những kiểu khác do đặc tả CSS

Trong CSS, mọi thuộc tính đều có giá trị ban đầu. Đôi khi đây được gọi là giá trị mặc định, nhưng thông số kỹ thuật sử dụng thuật ngữ ban đầu, mà tôi nghĩ là một thuật ngữ tốt hơn một chút

Về mặt kỹ thuật, giá trị ban đầu của bất kỳ thuộc tính cụ thể nào chỉ cần được khai báo nếu giá trị đó ghi đè một giá trị được xác định trước đó không phải là giá trị ban đầu. Nhưng các giá trị ban đầu thường xuất hiện ngay cả khi chúng không cần thiết

Ví dụ: giả sử tôi có một phần tử cấp khối mà tôi muốn chiếm toàn bộ chiều rộng của phần tử gốc của nó. Tôi muốn nó nằm trên “dòng” của riêng nó, có thể nói như vậy, trong bố cục, vì vậy tôi thêm đoạn CSS sau

.element {
  float: none;
  width: auto;
}

Điều đó thật tuyệt, phải không? . Ngoài ra, nó không bị ràng buộc bởi giá trị chiều rộng nên chiều rộng được tính tự động dựa trên chiều rộng của cấp độ gốc

Nếu bạn là một nhà phát triển CSS có kinh nghiệm hoặc thậm chí là khá mới với CSS, bạn có thể thấy ngay đoạn mã trên có gì sai. Nó thừa. Đó không phải là mã sai; . Mọi phần tử cấp khối không có giá trị

This is some styled text!

This is some default styled text

This is some styled text!

This is some default styled text

@media print {
  .column, aside {
    float: none;
  }
}

This is some styled text!

This is some default styled text

@media print {
  .column, aside {
    float: none;
  }
}

Đôi khi giá trị ban đầu là cần thiết

Nhưng điều gì sẽ xảy ra nếu bạn bắt gặp CSS như trên trong mã của mình hoặc trong mã mà bạn đã kế thừa. Có thể có một vài điều đang diễn ra ở đây

• CSS được đề cập đang ghi đè nội dung nào đó trước đó trong biểu định kiểu [e. g. kiểu in đè lên màn hình]
• Tên lớp cụ thể đó được thêm vào tài liệu thông qua JavaScript, tên này cũng sẽ ghi đè lên một thứ gì đó ở nơi khác [nó cũng có thể là một phần tử HTML được thêm vào với tên lớp đó được áp dụng]
• Tác giả mã đang thực sự rõ ràng về những gì đang xảy ra trong mã [cố ý hoặc thiếu hiểu biết]

Có thể có một kịch bản khác đang diễn ra ở đây mà tôi chưa từng nghĩ tới, nhưng điều đó ít nhiều bao gồm hầu hết, nếu không muốn nói là tất cả, các khả năng

Sau đây là một ví dụ về kịch bản đầu tiên mà tôi đã liệt kê ở trên

@media print {
  .column, aside {
    float: none;
  }
}

Do điều này nằm trong một truy vấn phương tiện, nên mục đích của nó sẽ khá dễ dàng nhận ra [do đó bạn sẽ không nghi ngờ rằng nó thừa và loại bỏ nó], trong khi cách sau sẽ phức tạp hơn một chút

Ở đây,

@media print {
  .column, aside {
    float: none;
  }
}

@media print {
  .column, aside {
    float: none;
  }
}

@media print {
  .column, aside {
    float: none;
  }
}

@media print {
  .column, aside {
    float: none;
  }
}

[Tôi cần lưu ý ở đây rằng

@media print {
  .column, aside {
    float: none;
  }
}

@media print {
  .column, aside {
    float: none;
  }
}

@media print {
  .column, aside {
    float: none;
  }
}

@media print {
  .column, aside {
    float: none;
  }
}

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

Sử dụng Công cụ dành cho nhà phát triển trình duyệt để tìm phần ghi đè ban đầu

Nếu bạn đang làm việc trong CSS của mình trong khi xem trang trực tiếp mà CSS được đề cập đang xử lý, thì không khó để biết điều gì đang xảy ra nếu bạn bắt gặp một giá trị CSS được khai báo rõ ràng về trạng thái ban đầu của nó

Đây là những gì bạn sẽ thấy trong DevTools của Chrome nếu bạn có ví dụ về

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

DevTools làm rõ ràng rằng giá trị

@media print {
  .column, aside {
    float: none;
  }
}

Rõ ràng trong CSS của bạn

Bạn sẽ nhận thấy rằng tôi đã đưa ra tùy chọn thứ ba về lý do tại sao bạn có thể tìm thấy các giá trị ban đầu được khai báo trong biểu định kiểu. Tác giả mã đang thực sự rõ ràng về những gì đang xảy ra trong mã [cố ý hoặc thiếu hiểu biết]

Tôi không nhất thiết phải đồng ý với việc thêm các giá trị ban đầu vì lý do này, nhưng tôi cũng không nhất thiết phải nói đó là mã xấu. Một ví dụ hoàn hảo về điều này là CSS dành cho các công nghệ tương đối mới có thể được sao chép và dán từ các hướng dẫn trực tuyến hoặc tương đối xa lạ với người viết mã

Ví dụ: khi đọc hướng dẫn về các tính năng CSS mới như flexbox, bạn có thể thấy mã giống như thế này

p {
  color: red;  
}
.default {
  color: initial;
}

Tôi đã phóng đại quan điểm của mình trong ví dụ trên, nhưng một số ví dụ mã trực tuyến nhất định có một số điểm tương đồng với điều đó. Nếu bạn là người mới sử dụng flexbox, thì có lẽ bạn sẽ không gặp nhiều vấn đề với mã. Nhưng đoán xem?

p {
  color: red;  
}
.default {
  color: initial;
}

Bảy trong số tám thuộc tính liên quan đến flexbox mà tôi đưa vào trong ví dụ trước đã bị xóa vì tất cả chúng đều được đặt thành giá trị ban đầu, vì vậy những dòng đó là thừa

Trong trường hợp này, tôi không ngại thêm những dòng bổ sung đó vì việc xem một số thuộc tính flexbox tiềm năng có sẵn, cùng với một số giá trị, có thể mang tính giáo dục. Vì vậy, đây là trường hợp mã rõ ràng với một số lợi ích đối với việc quét mã. Xét cho cùng, mặc dù rõ ràng trong phiên bản rút gọn rằng phần tử

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

Chỉ ra các giá trị ban đầu trong các bình luận

Vì vậy, nếu chúng ta lấy một ví dụ thực tế hơn sử dụng một số tính rõ ràng với các giá trị ban đầu, tôi nghĩ một số điều như sau có thể hữu ích

p {
  color: red;  
}
.default {
  color: initial;
}

Trong ví dụ trên, có bốn dòng thừa [thực tế hơn bảy dòng] và mỗi dòng được nhận xét để chỉ ra rằng tác giả mã nhận thức được điều này nhưng muốn các dòng ở lại

Và tất nhiên, điều này có thể được thực hiện đối với bất kỳ thuộc tính CSS nào được đặt thành giá trị ban đầu, kể cả CSS ghi đè CSS trước đó. Đây lại là ví dụ về

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

p {
  color: red;  
}
.default {
  color: initial;
}

Và tôi cho rằng trong một số trường hợp nhất định, những điều sau đây sẽ còn tốt hơn nữa

p {
  color: red;  
}
.default {
  color: initial;
}

Ở đây tôi đang sử dụng giá trị từ khóa CSS

h2 {
  background-color: #444;
  color: white;
  padding: 7px;
}

/* ...hundreds of lines of code here.. */

aside h2 {
  background: none;
  color: #444;
}

Suy nghĩ cuối cùng

Tôi không nhất thiết nghĩ rằng các giá trị ban đầu không cần thiết là một vấn đề lớn trong CSS. Một vài dòng bổ sung sẽ không phá vỡ cơ sở mã hoặc gây ra các vấn đề lớn về hiệu suất

Mối quan tâm chính của tôi là với các giá trị ban đầu không rõ ràng rằng chúng được ghi đè và nội dung được đưa vào [hoặc sao chép] vì lý do giáo dục bằng cách sử dụng các tính năng CSS mới đối với tác giả của mã

Thuộc tính CSS nào được sử dụng làm mặc định?

Giá trị CSS là gì?

HTML giá trị mặc định là gì?

CSS có thể đặt giá trị hiển thị mặc định không?