Một trong những khía cạnh khó chịu nhất khi làm việc với mã cũ là kiểu dáng nội tuyến không thể ghi đè bằng CSS. Thông thường, điều này có nghĩa là dành một lượng thời gian đáng kể để xem qua mã cũ (hy vọng không phải là không có tổ chức) để xóa kiểu dáng nội tuyến theo cách thủ công, trong khi nhà phát triển đang tự nghĩ rằng phải có một cách khác. Hóa ra, thực sự có một cách khác. Bằng cách sử dụng tham số [kiểu] với bộ chọn trong biểu định kiểu CSS, bạn hoàn toàn có thể ghi đè bất kỳ kiểu nội tuyến nào có thể có trong HTML của mình Show Giả sử bạn có kiểu nội tuyến này trên div < Xem văn bản thuần túy > HTML
Nếu bạn đã cố ghi đè điều này trong CSS của mình bằng cách chỉ viết một kiểu mới cho nó như bên dưới, thì nó có thể sẽ không hoạt động, ngay cả khi bạn đã sử dụng kiểu đôi khi cau mày. quan trọng < Xem văn bản thuần túy > css
Tuy nhiên, nếu bạn ghép nối. bộ chọn myDiv với dấu ngoặc [kiểu] và sử dụng. giá trị quan trọng, bạn có thể ghi đè kiểu dáng nội tuyến khó chịu đó khá dễ dàng < Xem văn bản thuần túy > css
Mặc dù đây có thể không được coi là cách thực hành tốt nhất, nhưng có nhiều trường hợp đây sẽ là cách dễ nhất và nhanh nhất để loại bỏ kiểu dáng nội tuyến không mong muốn và với tư cách là nhà phát triển, nó chắc chắn đáng để tận dụng CSS gây khó chịu cho nhiều người. Tôi nghĩ ngoài việc tổ chức kém, rất nhiều sự thất vọng liên quan đến việc không biết làm thế nào các phong cách ghi đè lên các phong cách khác. Nó dẫn đến sự nhầm lẫn, CSS lộn xộn và không có tổ chức, cũng như rất nhiều thủ thuật và bộ chọn CSS phức tạp. Tính đặc hiệu của CSS giúp chúng tôi xác định cách các kiểu tương tác với các kiểu xung đột khác thứ tự xếp tầngTính đặc hiệu của CSS cho phép chúng tôi xác định bộ chọn kiểu nào trong CSS của chúng tôi được ưu tiên. Tuy nhiên, điều đầu tiên chúng ta cần tính đến là Thứ tự Cascading. Nghe có vẻ phức tạp hơn thực tế, nhưng về cơ bản, Cascading Order liên quan đến cách các kiểu được ghi đè tùy thuộc vào vị trí của chúng. Để ghi đè lên một kiểu đã được khai báo trước đó, chúng ta chỉ cần khai báo nó ở phía dưới trong tài liệu. Nhưng nếu chúng ta có nhiều tài liệu hoặc kiểu được đặt trong tài liệu bên ngoài và kiểu trong tiêu đề của tệp HTML thì sao? . Thứ tự như sau
Nó hoạt động theo kiểu phản trực giác, vì vậy chỉ cần giải thích thêm. các kiểu nội tuyến ghi đè CSS nội bộ và CSS nội bộ ghi đè các tệp CSS bên ngoài và các tệp CSS bên ngoài ghi đè mặc định của trình duyệt. Một cách để nghĩ về nó giống như các lớp. Phong cách càng “gần” với phần tử thì nó càng có mức độ ưu tiên cao hơn. Kiểu nội tuyến có mức độ ưu tiên cao nhất vì nó được viết theo nghĩa đen trên phần tử. Mặt khác, các kiểu mặc định của trình duyệt (nghĩ là Times New Roman, 16pt) dễ bị ghi đè vì chúng ở “xa” nhất so với phần tử Ví dụ: giả sử chúng ta có một tài liệu HTML với một thẻ đoạn văn, với lớp “giới thiệu” được áp dụng, như vậy nhà. html ______0 Trong tệp CSS của chúng tôi, 8, chúng tôi có định nghĩa kiểu saunội dung. css
Khi đoạn văn được hiển thị trong trình duyệt, nó trông như thế này Bây giờ, giả sử chúng ta quyết định thêm đoạn CSS sau vào thẻ 9 của tài liệu HTMLnội dung. css
Bây giờ nếu chúng ta tải lại trình duyệt, đoạn văn sẽ như thế này Bây giờ, như một phần bổ sung cuối cùng, hãy thêm một kiểu nội tuyến vào đoạn văn nhà. html ______5 Nếu chúng tôi tải lại trình duyệt lần cuối, đoạn văn sẽ như thế này Mặc dù không phải là ví dụ thú vị nhất, nhưng bạn có thể thấy cách CSS bên ngoài bị CSS nhúng ghi đè và CSS nhúng bị kiểu nội tuyến ghi đè. Điều này tuân theo Thứ tự xếp tầng và nó giúp ghi nhớ khi nghĩ về Tính đặc hiệu độ đặc hiệuVới Thứ tự xếp tầng, chúng tôi có thể biết cách các kiểu được ghi đè dựa trên vị trí của chúng, liên quan đến phần tử. Nhưng điều gì sẽ xảy ra nếu chúng ta có nhiều bộ chọn kiểu nhắm mục tiêu cùng một phần tử? Hãy quay lại ví dụ về đoạn văn của chúng ta, nhưng lần này hãy loại bỏ kiểu nội tuyến (vì kiểu nội tuyến thường không phải là một ý tưởng hay). Trong khi chúng ta đang ở đó, hãy tiếp tục và xóa tất cả các khai báo CSS khỏi 9 cũng như 8. Vì lợi ích của ví dụ này, tôi cũng sẽ đưa vào một đoạn khác________số 8 Hãy thêm một phong cách vào 8 hiện đang trốngnội dung. css 0Điều này sẽ tạo kiểu cho tất cả các thẻ p bằng phông chữ Helvetica Neue. Đối với các thẻ đoạn văn có lớp giới thiệu được áp dụng, hãy làm cho văn bản lớn hơn một chút nội dung. css 1Vì vậy, bây giờ, tất cả các đoạn văn trong tài liệu của chúng tôi sẽ được hiển thị bằng phông chữ Helvetica Neue và bất kỳ đoạn giới thiệu nào sẽ được hiển thị với kiểu chữ lớn hơn một chút Bây giờ, giả sử ai đó đã xem CSS của chúng ta và muốn tạo bộ chọn đầu tiên cụ thể hơn một chút cho trang nội dung. css 2Bây giờ nếu chúng tôi làm mới trang, chúng tôi sẽ thấy điều này Bạn thấy những gì đã xảy ra ở đây? . Nó bất chấp Thứ tự xếp tầng (chúng tôi mong đợi thứ hai sẽ ghi đè lên thứ nhất), điều này có thể khiến nó hơi khó hiểu. Đây là nơi biết cách hoạt động của Tính đặc hiệu có ích Tính toán độ đặc hiệu của CSSĐộ đặc hiệu CSS của bộ chọn có thể được tính toán bằng cách xem xét những gì tạo nên bộ chọn và đếm các thành phần khác nhau. Đây là một biểu đồ tiện dụng Độ đặc hiệu được viết là 3. Tại sao ký hiệu được phân tách bằng dấu phẩy? . Gây nhầm lẫn? . hãy xem lại ví dụ của chúng ta 8nội dung. css 2Hãy phá vỡ điều đó một chút Sử dụng công thức Tính đặc hiệu, chúng ta có thể thấy rằng bộ chọn đầu tiên là (0, 1, 1) và bộ chọn thứ hai là (0, 1, 0). Chúng ta có thể thấy bộ chọn đầu tiên rõ ràng có bộ chọn cao hơn bộ chọn thứ hai, đó là lý do tại sao bộ chọn được ưu tiên Ok, vậy làm thế nào chúng ta có thể đặt bộ chọn giới thiệu ghi đè bộ chọn 5? nội dung. css 8Bây giờ khi chúng ta xem xét các giá trị độ đặc hiệu, chúng ta sẽ thấy CẢ HAI đều có (0, 1, 1). Thế cái gì đang xảy ra vậy? . Tất cả đang đến với nhau Hãy xem một ví dụ khác trích dẫn. html ______10 kiểu. css 1Bây giờ hãy xem nó trông như thế nào khi chúng tôi tải nó lên trong trình duyệt của mình Như bạn có thể thấy, văn bản không in nghiêng, mặc dù chúng tôi đã khá cụ thể với bộ chọn thứ hai của mình. hãy tính toán Độ đặc hiệu để tìm hiểu điều gì đang xảy ra #top p Một bộ chọn id (#top) và một bộ chọn phần tử (p). Điều đó mang lại cho chúng tôi. (1, 0, 1) thùng chứa p. Trích dẫn Hai bộ chọn lớp và một bộ chọn phần tử. Điều đó mang lại cho chúng tôi. (0, 2, 1) Vì vậy, như bạn có thể thấy, id trên bộ chọn đầu tiên sẽ ghi đè lên bộ chọn thứ hai. Đó là bởi vì, như chúng tôi đã thiết lập, id LUÔN ghi đè lên các lớp. Nếu có một điểm nhỏ mà tôi muốn bạn rút ra từ bài đăng này, thì đó là việc sử dụng bộ chọn id trong CSS của bạn thường dẫn đến các vấn đề phức tạp. Thay vào đó, nếu bạn gắn bó với các lớp học, mọi thứ sẽ suôn sẻ hơn rất nhiều quan trọng và tại sao bạn không nên sử dụng nóBây giờ chúng ta đã hiểu cách hoạt động của Tính đặc hiệu CSS và Thứ tự xếp tầng, hãy bắt đầu tìm hiểu tình huống với. quy tắc quan trọng. Bạn có thể thêm 9 vào cuối bất kỳ quy tắc CSS nào để ưu tiên đặc biệt cho quy tắc đó. Bất kỳ quy tắc nào có thêm 9 sẽ ghi đè tất cả các quy tắc xung đột khác. Hãy cùng xemtrích dẫn. html ______12 kiểu. css 3trích dẫn. css 4Lưu ý trong ví dụ này rằng tôi đã bao gồm các kiểu. css và dấu ngoặc kép. css trong 9 dấu ngoặc kép. html. Khi được hiển thị trong trình duyệt, điều này trông giống như sauNhư bạn có thể thấy, màu của văn bản là màu xanh lục. Bộ chọn 2 trong 3 cố gắng chọn tất cả các thẻ p và đặt chúng thành màu cam (0, 0, 1), nhưng id của bộ chọn 4 (1, 0, 1) được ưu tiên. Những gì chúng tôi có thể làm về mặt kỹ thuật là thêm 9 vào bộ chọn 6. hãy xem điều gì sẽ xảy ratrích dẫn. css 5Bây giờ khi chúng tôi tải nó trong trình duyệt, chúng tôi thấy Bỏ qua tính đặc hiệu và Cascade Order, văn bản hiện có màu cam. Như bạn có thể thấy, 9 ghi đè tất cả các kiểu khác và “phá vỡ” thứ tự xếp tầng. Nếu chúng ta quay lại hình dung của mình, bạn có thể hình dung nó như thế nàyNó bỏ qua tất cả các kiểu khác và ảnh hưởng trực tiếp đến phần tử mục tiêu của nó. Nó không tuân theo quy ước thông thường, dẫn đến CSS khó hiểu và khó chịu. 9 thậm chí còn phức tạp hơn khi ngày càng có nhiều ________ 49 được ném lên trên các ________ 49 trước đó. Khi đó, Công cụ dành cho nhà phát triển của Chrome sẽ khó hiển thị cho bạn biết chuyện gì đang xảy ra. Và sau đó, bạn phải bắt đầu tìm hiểu các tệp nguồn để cố gắng hiểu ý nghĩa của nó, trong thời gian đó bạn đã mất trí và ném máy tính ra ngoài cửa sổDù sao, trở lại ví dụ của chúng tôi. hãy tưởng tượng chúng ta là nhà phát triển mới của dự án và quyết định thay đổi màu của thẻ p thành màu lục lam. hãy thêm phong cách vào 9 của 2trích dẫn. html ______16 Từ những gì chúng ta đã học trước đó về Cascade Order, văn bản bây giờ sẽ có màu lục lam, phải không? Vẫn màu cam. Có lẽ nếu chúng ta hiểu cụ thể hơn về bộ chọn p màu lục lam của mình? trích dẫn. css 7Không. Hãy nhìn vào tính toán cụ thể Mặc dù bộ chọn màu lục lam hiện có độ đặc hiệu là (1, 3, 2), bộ chọn màu cam (0, 0, 1) với. quan trọng được ưu tiên. Hãy tưởng tượng bạn là một nhà phát triển bị ném vào dự án này và bạn đang cố gắng tìm ra lý do tại sao văn bản có màu lục lam. Chắc chắn, đây sẽ là một dự án đơn giản vì chỉ có một vài tài liệu để sắp xếp, nhưng đối với một dự án lớn hơn, việc tìm hiểu lý do tại sao có thể rất khó khăn. Sự kết luậnĐể kết thúc, tôi không nghĩ bạn nhất thiết phải tính toán độ đặc hiệu của tất cả các bộ chọn của mình. Nhưng nó giúp ghi nhớ điều đó khi bạn viết CSS của mình. Cá nhân tôi cố gắng tránh sử dụng bộ chọn id khi tôi có thể. Thực tế là chúng có thể ghi đè bất kỳ bộ chọn lớp nào có thể khiến CSS của bạn khó tìm ra khá nhanh. Và một khi điều đó bắt đầu, vấn đề chỉ còn là thời gian trước khi bạn hoặc người khác có thể sử dụng 9 chỉ để làm việc gì đó. Mà, bạn biết đấy, là một viễn cảnh khá kinh hoàng. Để tóm tắt
Bạn có thể sử dụng CSS quan trọng trong nội tuyến không?Kiểu nội tuyến là kiểu được xác định bằng thuộc tính kiểu. Chúng cũng có thể là bình thường hoặc quan trọng .
CSS nội tuyến có ghi đè nội bộ không?CSS nội tuyến sẽ ghi đè CSS bên ngoài và bên trong . Nếu chúng ta thêm nhiều lớp với nhiều thuộc tính, nhưng chúng ta chỉ có một bộ chọn ID, thì bộ chọn ID đó sẽ có trọng số đặc hiệu cao hơn các bộ chọn khác.
Tại sao chúng ta nên tránh CSS nội tuyến?Tuy nhiên, nó có khả năng gây ra vấn đề về khả năng bảo trì do HTML và các kiểu được liên kết được liên kết chặt chẽ với nhau . Điều này có thể khiến việc phân chia công việc giữa các thành viên khác nhau trong nhóm trở nên khó khăn hơn và có thể làm phình to tệp HTML.
CSS nội tuyến có ảnh hưởng đến hiệu suất không?CSS nội tuyến có nghĩa là CSS được tải trong thẻ của HTML của trang web. Điều này nhanh hơn so với việc khách truy cập phải tải xuống các tệp CSS trực tiếp từ máy chủ; . if all the site's CSS is displayed inline it can actually slow down the load time of the entire site. |