Biểu định kiểu tác nhân người dùng là gì

Từ khóa CSS

h3 {
  font-weight: normal;
  color: blue;
}
6 hoàn nguyên giá trị xếp tầng của thuộc tính từ giá trị hiện tại của nó thành giá trị mà thuộc tính sẽ có nếu không có thay đổi nào được thực hiện bởi nguồn gốc kiểu hiện tại đối với phần tử hiện tại. Do đó, nó đặt lại thuộc tính về giá trị kế thừa nếu nó kế thừa từ cha mẹ hoặc giá trị mặc định được thiết lập bởi biểu định kiểu của tác nhân người dùng [hoặc theo kiểu người dùng, nếu có tồn tại]. Nó có thể được áp dụng cho bất kỳ thuộc tính CSS nào, bao gồm cả thuộc tính tốc ký CSS
h3 {
  font-weight: normal;
  color: blue;
}
7

Từ khóa này xóa khỏi tầng tất cả các kiểu đã bị ghi đè cho đến khi đạt đến kiểu đang được khôi phục

  • Nếu được sử dụng bởi các kiểu riêng của trang web [nguồn gốc của tác giả], thì
    h3 {
      font-weight: normal;
      color: blue;
    }
    
    6 sẽ khôi phục giá trị xếp tầng của thuộc tính về kiểu tùy chỉnh của người dùng, nếu có;
  • Nếu được sử dụng trong biểu định kiểu tùy chỉnh của người dùng hoặc nếu kiểu được người dùng áp dụng [gốc người dùng], thì
    h3 {
      font-weight: normal;
      color: blue;
    }
    
    6 sẽ khôi phục giá trị xếp tầng về kiểu mặc định của tác nhân người dùng
  • Nếu được sử dụng trong các kiểu mặc định của tác nhân người dùng, từ khóa này có chức năng tương đương với
    h3 {
      font-weight: normal;
      color: blue;
    }
    
    0

Từ khóa

h3 {
  font-weight: normal;
  color: blue;
}
6 hoạt động giống hệt như từ khóa
h3 {
  font-weight: normal;
  color: blue;
}
0 trong nhiều trường hợp. Sự khác biệt duy nhất là dành cho các thuộc tính có giá trị do trình duyệt đặt hoặc bởi biểu định kiểu tùy chỉnh do người dùng tạo [đặt ở phía trình duyệt]

Hoàn nguyên sẽ không ảnh hưởng đến các quy tắc được áp dụng cho phần tử con của phần tử bạn đặt lại [nhưng sẽ loại bỏ tác động của quy tắc gốc đối với phần tử con]. Vì vậy, nếu bạn có

h3 {
  font-weight: normal;
  color: blue;
}
3 cho tất cả các phần và
h3 {
  font-weight: normal;
  color: blue;
}
4 cho một phần cụ thể, màu của phần đó sẽ là màu đen. Nhưng nếu bạn có một quy tắc để làm cho tất cả các đoạn màu đỏ, thì tất cả các đoạn vẫn sẽ có màu đỏ trong tất cả các phần

Ghi chú. Hoàn nguyên chỉ là một giá trị. Vẫn có thể ghi đè giá trị

h3 {
  font-weight: normal;
  color: blue;
}
6 bằng tính đặc hiệu

Ghi chú. Từ khóa

h3 {
  font-weight: normal;
  color: blue;
}
6 khác và không nên nhầm lẫn với từ khóa
h3 {
  font-weight: normal;
  color: blue;
}
7, từ khóa này sử dụng giá trị ban đầu được xác định trên cơ sở từng thuộc tính theo thông số CSS. Ngược lại, biểu định kiểu tác nhân người dùng đặt giá trị mặc định trên cơ sở bộ chọn CSS

Ví dụ: giá trị ban đầu cho thuộc tính

h3 {
  font-weight: normal;
  color: blue;
}
8 là
h3 {
  font-weight: normal;
  color: blue;
}
9, trong khi biểu định kiểu tác nhân người dùng thông thường đặt giá trị mặc định của
h3 {
  font-weight: normal;
  color: blue;
}
8 là
This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
1 thành
This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
2, của
This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
3 thành
This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
4, v.v.

ví dụ

Hoàn nguyên so với không đặt

Mặc dù

h3 {
  font-weight: normal;
  color: blue;
}
6 và
h3 {
  font-weight: normal;
  color: blue;
}
0 giống nhau nhưng chúng khác nhau về một số thuộc tính đối với một số phần tử

Vì vậy, trong ví dụ dưới đây, chúng tôi đặt

This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
7 tùy chỉnh, nhưng sau đó cố gắng đặt
h3 {
  font-weight: normal;
  color: blue;
}
6 và
h3 {
  font-weight: normal;
  color: blue;
}
0 nội tuyến trong tài liệu HTML. Từ khóa
h3 {
  font-weight: normal;
  color: blue;
}
6 sẽ hoàn nguyên văn bản thành chữ đậm vì đó là giá trị mặc định cho các tiêu đề trong hầu hết các trình duyệt. Từ khóa
h3 {
  font-weight: normal;
  color: blue;
}
0 sẽ giữ cho văn bản bình thường vì đó là giá trị ban đầu cho thuộc tính
This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
7

HTML

h3 {
  font-weight: normal;
  color: blue;
}
7

CSS

h3 {
  font-weight: normal;
  color: blue;
}

Kết quả

Hoàn nguyên tất cả

Hoàn nguyên tất cả các giá trị rất hữu ích trong trường hợp bạn đã thực hiện một số thay đổi về kiểu và sau đó bạn muốn hoàn nguyên về các giá trị mặc định của trình duyệt. Vì vậy, trong ví dụ trên, thay vì hoàn nguyên riêng rẽ

This will have custom styles
Just some text
This should be reverted to browser/user defaults.
Just some text
7 và
h3 {
  font-weight: normal;
  color: blue;
}
04, bạn chỉ có thể hoàn nguyên tất cả chúng cùng một lúc - bằng cách áp dụng từ khóa
h3 {
  font-weight: normal;
  color: blue;
}
6 trên
h3 {
  font-weight: normal;
  color: blue;
}
7

HTML

________số 8

CSS

h3 {
  font-weight: normal;
  color: blue;
}
0

Kết quả

Hoàn nguyên trên cha mẹ

Hoàn nguyên sẽ loại bỏ hiệu quả giá trị cho phần tử bạn chọn bằng một số quy tắc và điều này chỉ xảy ra đối với phần tử đó. Để minh họa điều này, chúng tôi sẽ đặt màu xanh lá cây trên một phần và màu đỏ trên một đoạn văn

HTML

h3 {
  font-weight: normal;
  color: blue;
}
3

CSS

h3 {
  font-weight: normal;
  color: blue;
}
4

Lưu ý cách đoạn vẫn có màu đỏ mặc dù thuộc tính màu cho phần đã được hoàn nguyên. Cũng lưu ý rằng cả tiêu đề và nút văn bản thuần túy đều có màu đen. Điều này hoàn toàn giống như nếu

h3 {
  font-weight: normal;
  color: blue;
}
07 sẽ không tồn tại cho phần thứ hai

Chủ Đề