Ghi đè lớp css trong javascript
Mục đích của bài học này là phát triển sự hiểu biết của bạn về một số khái niệm cơ bản nhất của CSS — tầng, tính đặc hiệu và tính kế thừa — điều khiển cách CSS được áp dụng cho HTML và cách giải quyết xung đột giữa các khai báo kiểu Show
Mặc dù học qua bài học này có vẻ ít liên quan ngay lập tức và mang tính hàn lâm hơn một chút so với một số phần khác của khóa học, nhưng việc hiểu các khái niệm này sẽ giúp bạn tránh được rất nhiều khó khăn sau này. Chúng tôi khuyến khích bạn xem kỹ phần này và kiểm tra xem bạn đã hiểu các khái niệm chưa trước khi tiếp tục điều kiện tiên quyết. Biết sử dụng máy tính cơ bản, cài đặt phần mềm cơ bản, kiến thức cơ bản về làm việc với tệp, kiến thức cơ bản về HTML (học Giới thiệu về HTML) và ý tưởng về cách thức hoạt động của CSS (học các bước đầu tiên của CSS. )Khách quan. Để tìm hiểu về tầng và tính đặc hiệu cũng như cách hoạt động của tính kế thừa trong CSSxung đột quy tắcCSS là viết tắt của Cascading Style Sheets và từ đầu tiên đó là phân tầng cực kỳ quan trọng để hiểu — cách hoạt động của tầng là chìa khóa để hiểu CSS Tại một số thời điểm, bạn sẽ làm việc trên một dự án và bạn sẽ thấy rằng CSS mà bạn nghĩ nên áp dụng cho một phần tử không hoạt động. Thông thường, vấn đề là bạn tạo hai quy tắc áp dụng các giá trị khác nhau của cùng một thuộc tính cho cùng một phần tử. Cascade và khái niệm đặc hiệu có liên quan chặt chẽ là các cơ chế kiểm soát quy tắc nào được áp dụng khi có xung đột như vậy. Quy tắc tạo kiểu cho phần tử của bạn có thể không phải là quy tắc bạn mong đợi, vì vậy bạn cần hiểu cách các cơ chế này hoạt động Điều quan trọng nữa ở đây là khái niệm kế thừa, có nghĩa là một số thuộc tính CSS theo mặc định kế thừa các giá trị được đặt trên phần tử cha của phần tử hiện tại và một số thì không. Điều này cũng có thể gây ra một số hành vi mà bạn có thể không ngờ tới Hãy bắt đầu bằng cách xem nhanh những vấn đề chính mà chúng ta đang giải quyết, sau đó chúng ta sẽ xem xét lần lượt từng vấn đề và xem cách chúng tương tác với nhau và CSS của bạn. Đây có vẻ như là một tập hợp các khái niệm khó hiểu. Khi bạn thực hành viết CSS nhiều hơn, cách thức hoạt động của nó sẽ trở nên rõ ràng hơn đối với bạn tầngXếp tầng biểu định kiểu — ở mức độ rất đơn giản, điều này có nghĩa là nguồn gốc, tầng xếp tầng và thứ tự của các quy tắc CSS đều quan trọng. Khi áp dụng hai quy tắc từ cùng một tầng tầng và cả hai đều có tính đặc hiệu như nhau, quy tắc được xác định cuối cùng trong biểu định kiểu là quy tắc sẽ được sử dụng Trong ví dụ dưới đây, chúng tôi có hai quy tắc có thể áp dụng cho phần tử độ đặc hiệuTính đặc hiệu là thuật toán mà trình duyệt sử dụng để quyết định giá trị thuộc tính nào được áp dụng cho một phần tử. Nếu nhiều khối kiểu có các bộ chọn khác nhau định cấu hình cùng một thuộc tính với các giá trị khác nhau và nhắm mục tiêu cùng một phần tử, thì tính đặc hiệu sẽ quyết định giá trị thuộc tính được áp dụng cho phần tử. Tính đặc hiệu về cơ bản là thước đo mức độ cụ thể của lựa chọn của bộ chọn
Dưới đây, chúng ta lại có hai quy tắc có thể áp dụng cho phần tử Chúng tôi sẽ giải thích thuật toán cụ thể sau Di sảnTính kế thừa cũng cần được hiểu trong ngữ cảnh này — một số giá trị thuộc tính CSS được đặt trên các phần tử cha được kế thừa bởi các phần tử con của chúng và một số thì không Ví dụ: nếu bạn đặt Một số thuộc tính không kế thừa — ví dụ: nếu bạn đặt Ghi chú. Trên các trang tham chiếu thuộc tính MDN CSS, bạn có thể tìm thấy hộp thông tin kỹ thuật có tên "Định nghĩa chính thức", liệt kê một số điểm dữ liệu về thuộc tính đó, bao gồm cả việc nó có được kế thừa hay không. Xem thuộc tính màu phần Định nghĩa chính thức làm ví dụ Hiểu cách các khái niệm hoạt động cùng nhauBa khái niệm này (xếp tầng, tính đặc hiệu và tính kế thừa) cùng nhau kiểm soát CSS nào áp dụng cho phần tử nào. Trong các phần bên dưới, chúng ta sẽ xem cách chúng hoạt động cùng nhau. Đôi khi nó có vẻ hơi phức tạp, nhưng bạn sẽ bắt đầu nhớ chúng khi có nhiều kinh nghiệm hơn với CSS và bạn luôn có thể tra cứu chi tiết nếu quên. Ngay cả các nhà phát triển có kinh nghiệm cũng không nhớ tất cả các chi tiết Video sau đây cho biết cách bạn có thể sử dụng Firefox DevTools để kiểm tra tầng trang, tính đặc hiệu, v.v. Hiểu thừa kếChúng ta sẽ bắt đầu với thừa kế. Trong ví dụ bên dưới, chúng ta có một phần tử Tài sản Các tài sản như Mặc dù mọi trang thuộc tính CSS đều liệt kê xem thuộc tính có được kế thừa hay không, nhưng bạn thường có thể đoán tương tự bằng trực giác nếu bạn biết giá trị thuộc tính sẽ định kiểu theo khía cạnh nào Kiểm soát thừa kếCSS cung cấp năm giá trị thuộc tính phổ quát đặc biệt để kiểm soát tính kế thừa. Mọi thuộc tính CSS đều chấp nhận các giá trị này class 0Đặt giá trị thuộc tính được áp dụng cho một phần tử được chọn giống với giá trị của phần tử cha của nó. Thực tế, điều này "bật kế thừa" class 1Đặt giá trị thuộc tính được áp dụng cho phần tử đã chọn thành giá trị ban đầu của thuộc tính đó class 2Đặt lại giá trị thuộc tính được áp dụng cho một phần tử đã chọn về kiểu dáng mặc định của trình duyệt thay vì giá trị mặc định được áp dụng cho thuộc tính đó. Giá trị này hoạt động như class 4Đặt lại giá trị thuộc tính được áp dụng cho một thành phần đã chọn thành giá trị được thiết lập trong tầng tầng trước đó class 3Đặt lại tài sản về giá trị tự nhiên của nó, có nghĩa là nếu tài sản được thừa kế một cách tự nhiên thì nó hoạt động như Ghi chú. Xem các loại Nguồn gốc trong Giới thiệu CSS Cascade để biết thêm thông tin về từng loại này và cách chúng hoạt động Chúng ta có thể xem danh sách các liên kết và khám phá cách các giá trị phổ quát hoạt động. Ví dụ trực tiếp bên dưới cho phép bạn chơi với CSS và xem điều gì sẽ xảy ra khi bạn thực hiện thay đổi. Chơi với mã thực sự là cách tốt nhất để hiểu rõ hơn về HTML và CSS Ví dụ
Đặt lại tất cả các giá trị thuộc tínhThuộc tính tốc ký CSS Trong ví dụ dưới đây, chúng ta có hai blockquotes. Cái đầu tiên có kiểu dáng được áp dụng cho chính phần tử blockquote. Thứ hai có một lớp được áp dụng cho blockquote, đặt giá trị của Hãy thử đặt giá trị của Hiểu về dòng thácBây giờ chúng tôi hiểu rằng tính kế thừa là lý do tại sao một đoạn được lồng sâu trong cấu trúc HTML của bạn có cùng màu với CSS được áp dụng cho phần thân. Từ các bài học giới thiệu, chúng ta đã hiểu cách thay đổi CSS được áp dụng cho một thứ gì đó tại bất kỳ điểm nào trong tài liệu — cho dù bằng cách gán CSS cho một phần tử hay bằng cách tạo một lớp. Bây giờ chúng ta sẽ xem cách tầng xác định quy tắc CSS nào áp dụng khi có nhiều hơn một khối kiểu áp dụng cùng một thuộc tính, nhưng với các giá trị khác nhau, cho cùng một phần tử Có ba yếu tố cần xem xét, được liệt kê ở đây theo thứ tự quan trọng tăng dần. Cái sau lấn át cái trước
Chúng tôi sẽ xem xét những điều này để xem cách các trình duyệt tìm ra chính xác CSS nào nên được áp dụng Nguồn đặt hàngChúng ta đã thấy thứ tự nguồn quan trọng như thế nào đối với tầng. Nếu bạn có nhiều quy tắc, tất cả đều có trọng số chính xác như nhau, thì quy tắc nào đứng cuối trong CSS sẽ thắng. Bạn có thể nghĩ về điều này như. quy tắc gần phần tử hơn sẽ ghi đè lên phần tử trước đó cho đến khi phần tử cuối cùng chiến thắng và tạo kiểu cho phần tử Thứ tự nguồn chỉ quan trọng khi trọng số cụ thể của các quy tắc là như nhau, vì vậy hãy xem xét cụ thể độ đặc hiệuBạn sẽ thường gặp phải tình huống mà bạn biết rằng một quy tắc xuất hiện sau trong biểu định kiểu, nhưng một quy tắc mâu thuẫn trước đó lại được áp dụng. Điều này xảy ra bởi vì quy tắc trước đó có tính đặc hiệu cao hơn — nó cụ thể hơn và do đó, đang được trình duyệt chọn làm quy tắc nên tạo kiểu cho phần tử Như chúng ta đã thấy trước đó trong bài học này, bộ chọn lớp có trọng số lớn hơn bộ chọn phần tử, vì vậy các thuộc tính được xác định trong khối kiểu lớp sẽ ghi đè lên các thuộc tính được xác định trong khối kiểu phần tử Một điều cần lưu ý ở đây là mặc dù chúng ta đang nghĩ về bộ chọn và các quy tắc được áp dụng cho văn bản hoặc thành phần mà chúng chọn, nhưng không phải toàn bộ quy tắc bị ghi đè, chỉ các thuộc tính được khai báo ở nhiều nơi Hành vi này giúp tránh lặp lại trong CSS của bạn. Một thực tế phổ biến là xác định các kiểu chung cho các phần tử cơ bản, sau đó tạo các lớp cho các phần tử khác nhau. Ví dụ: trong biểu định kiểu bên dưới, chúng tôi đã xác định các kiểu chung cho các tiêu đề cấp 2, sau đó tạo một số lớp chỉ thay đổi một số thuộc tính và giá trị. Các giá trị được xác định ban đầu được áp dụng cho tất cả các tiêu đề, sau đó các giá trị cụ thể hơn được áp dụng cho các tiêu đề với các lớp Bây giờ chúng ta hãy xem trình duyệt sẽ tính toán độ đặc hiệu như thế nào. Chúng ta đã biết rằng một bộ chọn phần tử có độ đặc hiệu thấp và có thể bị ghi đè bởi một lớp. Về cơ bản, một giá trị tính bằng điểm được trao cho các loại bộ chọn khác nhau và việc cộng những điểm này sẽ mang lại cho bạn trọng số của bộ chọn cụ thể đó, sau đó có thể được đánh giá dựa trên các kết quả phù hợp tiềm năng khác Mức độ cụ thể của bộ chọn được đo bằng cách sử dụng ba giá trị (hoặc thành phần) khác nhau, có thể được coi là các cột ID, LỚP và THÀNH PHẦN ở vị trí hàng trăm, hàng chục và hàng đơn vị
Ghi chú. Bộ chọn chung ( Bản thân các lớp giả phủ định ( Bảng sau đây cho thấy một vài ví dụ riêng biệt để giúp bạn có tâm trạng. Hãy thử xem qua những điều này và đảm bảo rằng bạn hiểu lý do tại sao chúng có tính đặc hiệu mà chúng tôi đã cung cấp cho chúng. Chúng tôi chưa trình bày chi tiết về bộ chọn, nhưng bạn có thể tìm thấy thông tin chi tiết về từng bộ chọn trên tài liệu tham khảo về bộ chọn MDN SelectorIdentifiersClassesElementsTotal specificitymain-heading 30010-0-1main-heading 40030-0-3main-heading 50220-2-2main-heading 61001-0-0main-heading 7)1011-0-1Trước khi tiếp tục, hãy xem một ví dụ đang hoạt động Vì vậy, những gì đang xảy ra ở đây?
Ghi chú. Mỗi loại bộ chọn có mức độ đặc hiệu riêng không thể bị ghi đè bởi bộ chọn có mức độ đặc hiệu thấp hơn. Ví dụ: một triệu bộ chọn lớp được kết hợp sẽ không thể ghi đè lên tính đặc hiệu của một bộ chọn id Cách tốt nhất để đánh giá tính đặc hiệu là cho điểm từng mức độ đặc hiệu bắt đầu từ mức cao nhất và chuyển sang mức thấp nhất khi cần thiết. Chỉ khi có sự ràng buộc giữa các điểm của bộ chọn trong một cột về độ đặc hiệu thì bạn mới cần đánh giá thấp hơn cột tiếp theo; kiểu nội tuyếnKiểu nội tuyến, nghĩa là khai báo kiểu bên trong thuộc tính quan trọngCó một đoạn CSS đặc biệt mà bạn có thể sử dụng để ghi đè lên tất cả các tính toán ở trên, thậm chí cả các kiểu nội tuyến - cờ Ghi chú. Thật hữu ích khi biết rằng cờ Hãy xem ví dụ này, nơi chúng tôi có hai đoạn văn, một trong số đó có ID Hãy xem qua phần này để xem điều gì đang xảy ra — hãy thử xóa một số thuộc tính để xem điều gì sẽ xảy ra nếu bạn cảm thấy khó hiểu
Ghi chú. Cách duy nhất để ghi đè một khai báo quan trọng là đưa một khai báo quan trọng khác có cùng tính đặc hiệu vào sau trong thứ tự nguồn hoặc một khai báo có tính đặc hiệu cao hơn hoặc bao gồm một khai báo quan trọng trong lớp xếp tầng trước đó (chúng tôi chưa đề cập đến các lớp xếp tầng Một tình huống mà bạn có thể phải sử dụng cờ Ảnh hưởng của vị trí CSSCuối cùng, điều quan trọng cần lưu ý là thứ tự ưu tiên của một khai báo CSS phụ thuộc vào biểu định kiểu và lớp tầng mà nó được chỉ định trong Người dùng có thể đặt biểu định kiểu tùy chỉnh để ghi đè kiểu của nhà phát triển. Ví dụ: người dùng khiếm thị có thể muốn đặt kích thước phông chữ trên tất cả các trang web họ truy cập gấp đôi kích thước bình thường để cho phép đọc dễ dàng hơn Cũng có thể khai báo các kiểu nhà phát triển trong các lớp xếp tầng. bạn có thể tạo các kiểu không phân lớp ghi đè các kiểu được khai báo trong các lớp hoặc bạn có thể tạo các kiểu được khai báo ở các lớp sau ghi đè các kiểu từ các lớp đã khai báo trước đó. Ví dụ: với tư cách là nhà phát triển, bạn không thể chỉnh sửa biểu định kiểu của bên thứ ba, nhưng bạn có thể nhập biểu định kiểu bên ngoài vào lớp xếp tầng để tất cả các kiểu của bạn dễ dàng ghi đè lên các kiểu đã nhập mà không phải lo lắng về tính đặc hiệu của bộ chọn bên thứ ba Thứ tự khai báo ghi đèCác khai báo xung đột sẽ được áp dụng theo thứ tự sau, những khai báo sau sẽ ghi đè lên những khai báo trước đó
Ghi chú. Thứ tự ưu tiên bị đảo ngược đối với các kiểu được gắn cờ bằng Thứ tự các lớp thácMặc dù các lớp xếp tầng là một chủ đề nâng cao và bạn có thể không sử dụng tính năng này ngay lập tức, điều quan trọng là phải hiểu cách các lớp xếp tầng Khi bạn khai báo CSS trong các lớp xếp tầng, thứ tự ưu tiên được xác định theo thứ tự khai báo các lớp. Các kiểu CSS được khai báo bên ngoài bất kỳ lớp nào được kết hợp với nhau, theo thứ tự mà các kiểu đó được khai báo, thành một lớp không tên, như thể đó là lớp được khai báo cuối cùng. Với các kiểu bình thường (không quan trọng) cạnh tranh, các lớp sau được ưu tiên hơn các lớp được xác định trước đó. Tuy nhiên, đối với các kiểu được gắn cờ Khi bạn có nhiều khối kiểu trong các lớp khác nhau cung cấp các giá trị cạnh tranh cho một thuộc tính trên một phần tử, thì lớp trong đó các kiểu được khai báo sẽ xác định mức độ ưu tiên. Tính đặc hiệu giữa các lớp không thành vấn đề, nhưng tính đặc hiệu trong một lớp thì vẫn có Hãy thảo luận một số điều từ ví dụ trên để hiểu điều gì đang xảy ra. Hai lớp đã được khai báo, Nếu bạn thay đổi dòng CSS đầu tiên trong ví dụ này thành Kiểm tra kỹ năng của bạnBạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . thác nước Bản tóm tắtNếu bạn đã hiểu hầu hết bài viết này, thì bạn đã hoàn thành xuất sắc — bạn đã bắt đầu làm quen với các cơ chế cơ bản của CSS. Tiếp theo, chúng ta sẽ xem xét chi tiết các bộ chọn Nếu bạn chưa hiểu đầy đủ về tầng, tính đặc hiệu và tính kế thừa, thì đừng lo lắng. Đây chắc chắn là điều phức tạp nhất mà chúng tôi đã đề cập cho đến nay trong khóa học và là điều mà ngay cả các nhà phát triển web chuyên nghiệp đôi khi cũng thấy khó khăn. Chúng tôi khuyên bạn nên quay lại bài viết này một vài lần khi tiếp tục khóa học và tiếp tục suy nghĩ về nó Tham khảo lại tại đây nếu bạn bắt đầu gặp sự cố lạ với các kiểu không áp dụng như mong đợi. Nó có thể là một vấn đề cụ thể Bạn có thể thay đổi lớp CSS bằng JavaScript không?Với JavaScript, chúng tôi có thể đặt kiểu CSS cho một hoặc nhiều thành phần trong DOM , sửa đổi, xóa chúng hoặc thậm chí thay đổi toàn bộ biểu định kiểu cho tất cả trang của bạn.
Bạn có thể thao tác CSS bằng JavaScript không?Giờ đây, JavaScript là một ngôn ngữ mạnh mẽ, do đó, chúng ta không chỉ có thể thao tác với các phần tử HTML bằng nó mà còn chúng ta còn có thể sử dụng nó để thao tác với các thuộc tính CSS của bất kỳ trang web nào.
Ghi đè CSS là gì?Bạn có thể đã áp dụng khái niệm ưu tiên trong nhiều lĩnh vực của cuộc sống, tôi. e. , ưu tiên công việc, nhà cửa và những thứ cá nhân của bạn. Trong lập trình HTML, trình duyệt cần dự đoán mức độ ưu tiên của các phần tử hoặc hướng dẫn để hiển thị tương ứng . Khái niệm này được gọi là “CSS Override”. |