Hướng dẫn what has the highest priority in css? - cái gì có mức độ ưu tiên cao nhất trong css?

• 
• Ngày 07 tháng 5 năm 2020May 07, 2020

Nội dung chính Show

• Giới thiệu
• Bản tóm tắt
• Thứ tự ưu tiên của CSS là gì?
• Tính đặc hiệu cao nhất trong CSS là gì?
• Loại phong cách nào có ưu tiên cao nhất?

• 105.9k
• 1

Giới thiệu

Mô tả ưu tiên của các giá trị thuộc tính CSS trong tài liệu HTML. Nếu chúng ta đưa ra các giá trị khác nhau cho một thuộc tính duy nhất cho cùng một bộ chọn của tài liệu HTML

Sau đó, giá trị nào sẽ có ưu tiên cao nhất được mô tả trong bài viết này.

Bước 1

Chúng tôi có thể áp dụng CSS cho một tài liệu HTML theo một trong ba cách sau:

1. Phong cách nội bộ
2. Phong cách nhúng
3. Phong cách bên ngoài

Bước 2

Hãy bắt đầu với một số thiết kế HTML và đưa ra một kiểu nội tuyến cho màu nền cơ thể; hiểu:

1.   
2.   
3.     Untitled Document  
4.   
5.   "background: #6CC7E1">  
6.       
7.         Text Line one  
8.       
9.         Text Line two  
10.       
11.         Text Line three  
12.   
13. & nbsp;

Đầu ra

Lưu ý: Nó chỉ là một thiết kế HTML; Tôi đã không áp dụng bất kỳ kiểu CSS nào ngoại trừ nền cơ thể.It is only an HTML design; I had not applied any CSS styles except body background.

Bước 3

Bây giờ tôi sẽ áp dụng một kiểu CSS nội tuyến cho Div đầu tiên của cấu trúc HTML này; hiểu:

1. Văn bản & nbsp; dòng & nbsp; One & nbsp;"height:50px; font:Arial, Helvetica, sans-serif; font-size:25px; background:#D10A0A; display:inline-block">Text Line one

Đầu ra

Lưu ý: Nó chỉ là một thiết kế HTML; Tôi đã không áp dụng bất kỳ kiểu CSS nào ngoại trừ nền cơ thể.

Bước 3

1.   
2.   
3.     Untitled Document    
4.       
5.         .textbox  
6.         {  
7.             height: 70px;  
8.             font-size: 35px;  
9.             background: #C04ACA;  
10.         }  
11.       
12.         
13.   
14.   "background: #6CC7E1">  
15.     class="textBox" style="height: 50px; font: Arial, Helvetica, sans-serif; font-size: 25px;  
16.         background: #D10A0A">  
17.         Text Line one  
18.       class="textBox">  
19.         Text Line two  
20.       class="textBox">  
21.         Text Line three  
22.   
23. & nbsp;

Đầu ra

Lưu ý: Nó chỉ là một thiết kế HTML; Tôi đã không áp dụng bất kỳ kiểu CSS nào ngoại trừ nền cơ thể.

Bước 3

Bây giờ tôi sẽ áp dụng một kiểu CSS nội tuyến cho Div đầu tiên của cấu trúc HTML này; hiểu:

1.   
2.     Untitled Document  
3.       
4.         .textbox  
5.         {  
6.             height: 70px;  
7.             font-size: 35px;  
8.             background: #C04ACA;  
9.         }  
10.       
11.       "cssvalues.css" rel="stylesheet" type="text/css" />  
12. & nbsp;

Đầu ra

Lưu ý: Nó chỉ là một thiết kế HTML; Tôi đã không áp dụng bất kỳ kiểu CSS nào ngoại trừ nền cơ thể.

1. body{background:#6CC7E1}  
2. Bước 3

Bây giờ tôi sẽ áp dụng một kiểu CSS nội tuyến cho Div đầu tiên của cấu trúc HTML này; hiểu:

Văn bản & nbsp; dòng & nbsp; One & nbsp;Here note that the properties defined in the external CSS override the properties defined in the embedded CSS because it uses a top to bottom approach.

Bước 4

Tôi sẽ xác định một lớp cho các div này và áp dụng kiểu CSS nhúng cho cấu trúc HTML này cho bộ chọn lớp.

Đầu ra

Lưu ý: Nó chỉ là một thiết kế HTML; Tôi đã không áp dụng bất kỳ kiểu CSS nào ngoại trừ nền cơ thể.

Bước 3

Bây giờ tôi sẽ áp dụng một kiểu CSS nội tuyến cho Div đầu tiên của cấu trúc HTML này; hiểu:

Văn bản & nbsp; dòng & nbsp; One & nbsp;

Bước 4

1. body{background:#6CC7E1}  background:#6CC7E1}  
2. Tôi sẽ xác định một lớp cho các div này và áp dụng kiểu CSS nhúng cho cấu trúc HTML này cho bộ chọn lớp.height:100px !important; font-size:35px; background:#488921; display:inline-block} 

Đầu ra

Lưu ý: Ở đây Lưu ý rằng giá trị được đưa ra cho thuộc tính chiều cao trong CSS bên ngoài ghi đè các giá trị được cung cấp cho thuộc tính này theo dòng và CSS được nhúng vì trong CSS bên ngoài, giá trị này được định nghĩa là một giá trị quan trọng. Here note that the value given for the height property in external CSS overrides the values given to this property in Inline and Embedded CSS because in external CSS this value is defined as an important value.

Bản tóm tắt

Bây giờ chúng ta có thể nói rằng mức độ ưu tiên của thuộc tính CSS trong tài liệu HTML được áp dụng từ trên xuống dưới và từ trái sang phải.

Các giá trị được xác định là quan trọng sẽ có mức độ ưu tiên cao nhất.

CSS nội tuyến có mức độ ưu tiên cao hơn CSS 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> ID Nesting> ID> Lớp làm tổ> Lớp> Tag Nesting> Tag.

Hãy đăng ý kiến ​​của bạn về chủ đề này bằng cách nhấp vào bài bình luận.

Thứ tự ưu tiên của CSS là gì?

Tính đặc hiệu cao nhất trong CSS là gì?

Loại phong cách nào có ưu tiên cao nhất?