Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
Cascading Stylesheets , hay còn gọi là CSS, là ngôn ngữ cho thiết kế và phong cách trực quan trên web. CSS có lịch sử lâu đời trên web từ năm 1994 với ý tưởng ban đầu. Theo thời gian, CSS đã trở thành một ngôn ngữ giàu tính năng có khả năng tạo ra một trang web, tạo ra các hình ảnh động phức tạp và hơn thế nữa.Vì CSS là ngôn ngữ tạo kiểu của web nên việc hiểu cách thức hoạt động và cách sử dụng nó là điều cơ bản để phát triển web. Điều đặc biệt có giá trị là phải hiểu để làm việc với Ngôn ngữ đánh dấu siêu văn bản (HTML) và JavaScript một cách hiệu quả. Hướng dẫn này sẽ tập trung vào việc áp dụng CSS vào HTML, phân tầng và tính cụ thể , là những khía cạnh cơ bản của CSS và sẽ giúp bạn chuẩn bị để sử dụng CSS một cách hiệu quả trong các dự án web của bạn .
CSS không phải là một ngôn ngữ lập trình thông thường. Mặc dù nó có một số tính năng được tìm thấy trong các ngôn ngữ lập trình khác, chẳng hạn như các biến và toán học , CSS hoàn toàn phụ thuộc vào HTML để hoạt động. Mục đích của CSS là cung cấp các sửa đổi trực quan cho HTML. Ngôn ngữ CSS giống như một danh sách việc cần làm cho trình duyệt: Bạn đang nói với trình duyệt, đây là danh sách những thứ tôi muốn bạn tìm. Khi trình duyệt tìm thấy những thứ đó, CSS sẽ hướng dẫn trình duyệt đi qua danh sách tập hợp con và thực hiện thay đổi đối với những thứ đó.
Trình duyệt tuân theo danh sách các hướng dẫn này từ trên xuống dưới một cách chắc chắn và CSS cần được viết với tâm trí đó. Phần tầng của Biểu định kiểu xếp tầng nói lên cách trình duyệt đọc danh sách. Vì trình duyệt là không thiên vị, nó làm cho phong cách thay đổi khi gặp chúng. Nếu CSS yêu cầu làm cho một số phần tử HTML có màu đỏ, thì sau đó trong CSS nói rằng làm cho các phần tử đó màu xanh lam, kết quả là màu xanh lam.
Việc áp dụng các kiểu cho một phần tử hơi phức tạp, vì có nhiều cách để yêu cầu trình duyệt tìm một phần tử trong HTML. Mỗi phần tử trong HTML có một tập hợp các thuộc tính được dùng để tìm một phần tử cụ thể. Do trình duyệt đọc hướng dẫn từ trên xuống dưới một cách vô tư, nên các hướng dẫn được cung cấp phải cụ thể. Đây được gọi là tính cụ thể , trong đó nhà phát triển phải viết các tiêu chí chính xác cho trình duyệt để tìm ra phần tử chính xác mà họ muốn áp dụng các kiểu.
Trong hướng dẫn này, bạn sẽ làm việc thông qua nhiều ví dụ thực hành để hiểu các cách khác nhau mà các kiểu có thể được áp dụng cho các phần tử HTML và cách phân tầng và tính cụ thể ảnh hưởng đến cách các kiểu được viết.
Yêu cầu
- Tệp HTML được lưu trên máy local của bạn dưới dạng
index.htmlmà bạn có thể truy cập từ editor và trình duyệt web bạn chọn. Để bắt đầu, hãy xem hướng dẫn Cách cài đặt dự án HTML của bạn và làm theo Cách sử dụng và hiểu các phần tử HTML để biết hướng dẫn về cách xem HTML trong trình duyệt của bạn.Nếu bạn chưa quen với HTML, hãy thử toàn bộ loạt bài Cách tạo trang web trong HTML .
Sử dụng Thuộc tính Kiểu HTML
Trong bước đầu tiên này, bạn sẽ áp dụng kiểu trực tiếp cho một phần tử HTML với thuộc tính style . Phương pháp này, còn gọi là tạo kiểu nội tuyến , sử dụng một thuộc tính phần tử HTML để chấp nhận một thuộc tính CSS làm giá trị, sau đó áp dụng nó trực tiếp cho phần tử.
Để tự làm quen với một số khái niệm về CSS, hãy bắt đầu bằng cách mở index.html trong editor của bạn. Trong file đó, hãy cài đặt cấu trúc HTML cơ sở của các <html> , <head> và <body> . Bên trong các <body> thêm một <div> với một câu văn bản ngắn:
<!doctype html> <html> <head> <title>Sammy Shark</title> </head> <body> <div>Sammy is the greatest shark in the ocean.</div> </body> </html> Tiếp theo, mở index.html trong trình duyệt của bạn. Bạn sẽ thấy văn bản của bạn trong <div> ở phần trên cùng bên trái của cửa sổ trình duyệt. Về mặt trực quan, văn bản sẽ xuất hiện tương tự như hình ảnh sau với văn bản màu đen trên nền trắng sử dụng phông chữ serif , chẳng hạn như Times New Roman:
Để bắt đầu tạo kiểu, hãy thêm thuộc tính có giá trị trống vào thẻ mở <div> :
... <div style="">Sammy is the greatest shark in the ocean.</div> ... Thuộc tính style là một thuộc tính đặc biệt dành cho HTML có chứa các thuộc tính và giá trị CSS. Trình duyệt sẽ áp dụng các kiểu đó cho phần tử đó.
Trong trường hợp này, hãy thay đổi màu câu của bạn thành color navy bằng cách sử dụng thuộc tính color . Định dạng cho thuộc tính và giá trị CSS bắt đầu bằng tên thuộc tính, theo sau là ký hiệu dấu hai chấm : , sau đó đến giá trị thuộc tính và cuối cùng là biểu tượng dấu chấm phẩy ; sau giá trị để cho trình duyệt biết rằng đó là tất cả cho giá trị:
... <div style="color: navy;">Sammy is the greatest shark in the ocean.</div> ... Lưu index.html , quay lại trình duyệt của bạn và làm mới. Văn bản đã thay đổi từ màu mặc định của trình duyệt là đen sang xanh nước biển, như trong hình sau:
Có nhiều thuộc tính CSS bạn có thể thử trong thuộc tính style , chẳng hạn như background-color hoặc font-family . Thông thường, phông chữ mặc định của trình duyệt là phông chữ serif, chẳng hạn như Times New Roman. Để thay đổi phông chữ thành phông chữ sans serif , chẳng hạn như Arial hoặc Helvetica, hãy thêm khoảng color sau dấu chấm phẩy cho thuộc tính color rồi nhập thuộc tính font-family , theo sau là dấu hai chấm, với sans-serif làm giá trị:
... <div style="color: navy; font-family: sans-serif;">Sammy is the greatest shark in the ocean.</div> ... Lưu file của bạn và làm mới trình duyệt của bạn để xem phông chữ cho câu của bạn đã thay đổi như thế nào. Phông chữ bây giờ sẽ là phông chữ sans-serif của trình duyệt, chẳng hạn như Helvetica hoặc Arial, thay vì phông chữ mặc định. Hình ảnh sau đây cho thấy cách thuộc tính font-family xây dựng dựa trên sự thay đổi màu sắc thành xanh nước biển.
Đến đây bạn đã viết một vài thuộc tính CSS, hãy bọc một từ trong câu của bạn bằng phần tử <strong> và quay lại trình duyệt của bạn:
... <div style="color: navy; font-family: sans-serif;">Sammy is the <strong>greatest</strong> shark in the ocean.</div> ... Trong trình duyệt của bạn, từ bên trong <strong> sẽ xuất hiện đậm hơn các từ khác trong câu, như thể hiện trong hình ảnh sau.
Từ có phần tử <strong> giữ lại các thuộc tính color và font-family của phần tử HTML mà nó nằm bên trong, còn gọi là cha của nó. Đây là một ví dụ về kế thừa, trong đó một phần tử con , một phần tử HTML bên trong một phần tử khác, kế thừa các kiểu được đặt trên phần tử mẹ. Phần tử <strong> cũng thêm kiểu mặc định của trình duyệt là font-weight: bold; , làm cho văn bản được in đậm. Ngoài ra, phần tử <strong> cũng có thể có thuộc tính style để cung cấp cho phần tử đó một giao diện tùy chỉnh:
... <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> ... Lưu file và làm mới trình duyệt của bạn để xem sự khác biệt, vì từ trong phần tử <strong> bây giờ có màu xanh lam, trái ngược với màu xanh nước biển của phần còn lại của câu. Thay đổi này được hiển thị trong hình ảnh sau:
Trong phần này, bạn đã sử dụng các thuộc tính style HTML để áp dụng kiểu cho phần tử <div> và <strong> . Trong phần tiếp theo, bạn sẽ lấy các kiểu bạn đã viết cho các phần tử cụ thể đó và áp dụng chúng cho tất cả các phần tử <div> và <strong> trên trang.
Sử dụng <style> để viết CSS
Tiếp theo, bạn sẽ lấy những gì đã viết trong phần trước và áp dụng các kiểu cho tất cả các phần tử tương tự trên trang. Bạn sẽ chuyển từ sử dụng thuộc tính style sang sử dụng phần tử HTML <style> . <style> là một phần tử đặc biệt cho phép bạn viết CSS bên trong nó và áp dụng những kiểu đó cho toàn bộ trang.
Sử dụng thuộc tính style trên một phần tử HTML có thể rất tiện dụng, nhưng nó bị giới hạn ở chỉ phần tử đó hoặc các phần tử con của nó. Để xem cách này hoạt động, hãy thêm một phần tử <div> với một câu mới:
... <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> <div>They like to swim with their friends.</div> ... Truy cập trình duyệt của bạn và reload trang. Như bạn có thể nhận thấy trong trình duyệt hoặc hình ảnh sau đây, câu đầu tiên có tất cả các kiểu bạn đã viết trước đó, nhưng câu mới sử dụng kiểu mặc định của trình duyệt để thay thế:
Bạn có thể áp dụng cùng một thuộc tính style trên từng phần tử riêng lẻ, nhưng điều đó sẽ trở nên rất rườm rà nếu bạn có nhiều câu mà bạn muốn trông giống nhau. Những gì bạn cần là một cách để nhắm đến đồng thời nhiều loại yếu tố giống nhau. Điều này có thể được thực hiện với phần tử HTML <style> .
Phần tử <style> thường được đặt trong <head> của trang HTML . Bằng cách này, trình duyệt đọc các kiểu trước khi đọc HTML, khiến trang tải đã được tạo kiểu. Sự nghịch đảo có thể gây ra hiện tượng nhấp nháy khi trình duyệt tải nội dung với các kiểu mặc định của trình duyệt và sau đó tải các kiểu tùy chỉnh. Tuy nhiên, hãy nhớ rằng <style> không bị giới hạn sử dụng trong <head> và có thể được đặt ở bất kỳ đâu trong <body> , điều này có thể có lợi trong một số trường hợp.
Thêm <style> vào <head> của index.html của bạn:
<!doctype html> <html> <head> <title>Sammy Shark</title> <style> </style> </head> <body> <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> <div>They like to swim with their friends.</div> </body> </html> Bên trong phần tử <style> , bạn có thể xác định loại phần tử bạn muốn nhắm đến bằng các bộ chọn , xác định các phần tử HTML nào để áp dụng các kiểu. Khi bộ chọn đã ở vị trí, sau đó bạn có thể group các kiểu bạn muốn áp dụng cho phần tử đó trong cái được gọi là khối bộ chọn .
Để bắt đầu cài đặt , hãy xem ví dụ trước đó. Ở đây có một <div> với hai thuộc tính, color và font-family .
... <div style="color: navy; font-family: sans-serif;">...</div> ... Để nhắm đến tất cả các phần tử <div> trên trang index.html , hãy thêm cái được gọi là bộ chọn kiểu trong thuộc tính <style> , theo sau là dấu ngoặc nhọn mở và đóng, xác định khối bộ chọn. Điều này yêu cầu trình duyệt tìm tất cả các phần tử <div> trên trang và áp dụng các kiểu được tìm thấy trong khối bộ chọn:
<!doctype html> <html> <head> <title>Sammy Shark</title> <style> div { } </style> </head> <body> <div style="color: navy; font-family: sans-serif;">Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> <div>They like to swim with their friends.</div> </body> </html> Tiếp theo, lấy các thuộc tính từ thuộc tính style và đặt chúng bên trong dấu ngoặc nhọn của khối selector. Để dễ đọc hơn, việc đặt từng thuộc tính trên một dòng riêng lẻ sẽ giúp ích:
<!doctype html> <html> <head> <title>Sammy Shark</title> <style> div { color: navy; font-family: sans-serif; } </style> </head> <body> <div>Sammy is the <strong style="color: blue;">greatest</strong> shark in the ocean.</div> <div>They like to swim with their friends.</div> </body> </html> Khi bạn đã lưu file , hãy quay lại trình duyệt và làm mới. Bây giờ cả hai câu đều được áp dụng cùng một kiểu, tất cả đều từ một bộ chọn duy nhất trong phần tử <style> :
Thêm một bộ chọn mới sau khối bộ chọn div của bạn để áp dụng các kiểu cho phần tử <strong> theo cách tương tự. Ngoài ra, hãy thêm phần tử <strong> xung quanh một từ trong câu thứ hai của bạn để xem CSS mới của bạn trên nhiều phần tử:
<!doctype html> <html> <head> <title>Sammy Shark</title> <style> div { color: navy; font-family: sans-serif; } strong { color: blue; } </style> </head> <body> <div>Sammy is the <strong>greatest</strong> shark in the ocean.</div> <div>They like to swim with their <strong>friends</strong>.</div> </body> </html> Lưu file và làm mới trình duyệt của bạn hoặc xem hình ảnh sau để thấy rằng bây giờ cả hai từ sử dụng phần tử <strong> đều có màu xanh lam:
Trong phần này, bạn đã viết các bộ chọn CSS trong phần tử <style> , áp dụng các kiểu cho tất cả các phần tử phù hợp trên trang. Trong phần tiếp theo, bạn sẽ di chuyển các kiểu này để chúng có thể được áp dụng trên nhiều trang của một trang web.
Tải tài liệu CSS bên ngoài vào HTML
Trong phần này, bạn sẽ bắt đầu làm việc với một file CSS được tải trên nhiều trang HTML. Bạn sẽ di chuyển các kiểu từ phần trước sang file CSS và tạo một trang HTML mới để xem cách một file CSS có thể tạo kiểu cho nhiều trang.
Cũng giống như thuộc tính style được giới hạn trong việc tạo kiểu cho một phần tử, CSS được tìm thấy trong một phần tử <style> bị giới hạn trong việc tạo kiểu cho một trang. Các trang web thường là tập hợp của nhiều trang web có cùng phong cách. Nếu bạn có nhiều trang cần phải trông giống nhau và bạn đã sử dụng phần tử <style> để giữ CSS của bạn , thì việc áp dụng các thay đổi đối với kiểu sẽ đòi hỏi nhiều công việc lặp lại trên mỗi trang. Đây là nơi chứa file CSS.
Tạo một file mới trong editor có tên là styles.css . Trong file đó, sao chép nội dung của phần tử <style> từ index.html và thêm chúng vào file styles.css của bạn. Đảm bảo loại trừ các <style> .
div { color: navy; font-family: sans-serif; } strong { color: blue; } Đến đây bạn đã có một file CSS độc lập, đã đến lúc tải file đó vào trang để trình duyệt có thể áp dụng các kiểu. Bắt đầu bằng cách xóa các <style> khỏi <head> . Sau đó, bên trong <head> , hãy viết một phần tử <link /> tự đóng với hai thuộc tính, href và rel . Giá trị href chứa đường dẫn đến style.css để trình duyệt có thể tham chiếu đến CSS. Thuộc tính rel phải có giá trị là biểu stylesheet vì nó xác định kiểu quan hệ giữa trang và tài liệu đang được tham chiếu:
<!doctype html> <html> <head> <title>Sammy Shark</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div>Sammy is the <strong>greatest</strong> shark in the ocean.</div> <div>They like to swim with their <strong>friends</strong>.</div> </body> </html> Bây giờ hãy truy cập trình duyệt của bạn và làm mới index.html . Trong trường hợp này, bạn sẽ không tìm thấy bất kỳ điều gì thay đổi vì tất cả những gì bạn đã làm là thay đổi nơi các kiểu đang tồn tại.
Để chứng minh file CSS hữu ích như thế nào, hãy tạo một file HTML mới có tên about.html . Copy paste HTML từ index.html , sau đó áp dụng các thay đổi đối với các câu hoặc tạo các câu mới:
<!doctype html> <html> <head> <title>About Sharks</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div>There are over <strong>500</strong> species of sharks.</div> <div>The great white shark can grow up to <strong>6.1 meters</strong> long.</div> </body> </html> Tiếp theo, mở about.html trong cửa sổ trình duyệt mới để bạn có thể xem và so sánh đồng thời cả hai file HTML. Điều này dẫn đến about.html có các kiểu giống nhau cho cả phần tử div và strong , như thể hiện trong hình ảnh sau.
Quay lại editor của bạn và mở styles.css và thay đổi giá trị thuộc tính color của bộ chọn div thành green :
div { color: green; font-family: sans-serif; } strong { color: blue; } Trong trình duyệt của bạn, hãy làm mới cả index.html và about.html để xem việc thay đổi kiểu trong file CSS ảnh hưởng như thế nào đến cả hai file HTML. Như hình ảnh sau đây cho thấy, văn bản đã thay đổi từ màu xanh nước biển sang màu xanh lục trong cả index.html và about.html :
Mỗi trang có các kiểu giống nhau được áp dụng với văn bản màu xanh lá cây và các phần tử <strong> màu xanh lam, tất cả đều từ một file CSS trung tâm.
Trong phần này, bạn đã tạo một file CSS và tải file CSS đó trên nhiều trang HTML. Bạn đã chuyển CSS của bạn từ phần tử <style> vào file CSS, file này áp dụng các kiểu giống nhau cho index.html và trang about.html mới. Tiếp theo, bạn sẽ bắt đầu làm việc với CSS cascade và cụ thể.
Làm việc với Cascade và Tính đặc hiệu
Phần này sẽ đi sâu vào các tính năng CSS của tầng và tính cụ thể được đề cập trong phần giới thiệu. Bạn sẽ viết CSS minh họa cho những khái niệm này, bắt đầu với thác và sau đó là tính cụ thể. Hiểu về phân tầng và tính cụ thể có thể giúp khắc phục sự cố bạn có thể tìm thấy trong mã của bạn .
Với những gì bạn đã đạt được cho đến nay, giai đoạn này là ngắn ngủi. Khi file CSS của bạn ngày càng tăng về kích thước, thì càng cần phải lưu ý thứ tự của các bộ chọn và thuộc tính CSS của bạn. Một cách để nghĩ về thác là nghĩ về một thác nước và băng qua các ghềnh thác. Bạn nên đi với hiện tại, vì cố gắng đi ngược dòng sẽ đòi hỏi nỗ lực sâu rộng để đạt được ít tiến bộ. Điều này cũng đúng với CSS: nếu mã của bạn không hoạt động như mong đợi, nó có thể đi ngược lại dòng chảy của tầng.
Để xem điều này trong thực tế, hãy mở các file trước đó. Mở styles.css trong editor và index.html trong trình duyệt của bạn. Các phần tử <div> trong trình duyệt hiện sẽ có green , với phần chữ in đậm blue . Sau thuộc tính font-family trong bộ chọn div , hãy thêm một thuộc tính color khác với giá trị orange :
div { color: green; font-family: sans-serif; color: orange; } strong { color: blue; } Trình duyệt đi qua dòng thác và chạm vào kiểu màu xanh lá cây, chuyển div màu xanh lục. Sau đó, trình duyệt truy cập kiểu màu cam và thay đổi màu từ xanh lục sang cam. Làm mới index.html trong trình duyệt của bạn để xem văn bản màu xanh lá cây bây giờ có màu cam, như trong hình ảnh sau:
Trong trường hợp này, trình duyệt đã được cung cấp hai thuộc tính color và do bản chất của tầng, trình duyệt áp dụng thuộc tính color cuối cùng cho phần tử. Khi một thuộc tính tiếp tục xuống tầng phủ định một thuộc tính trước đó, điều này dẫn đến tình huống được gọi là ghi đè . Khi một file CSS phát triển về kích thước và phạm vi, các overrides có thể là nguồn root của lỗi cũng như giải pháp cho các vấn đề.
Trong khi phân tầng giải quyết cách trình duyệt đọc và áp dụng các kiểu cho các phần tử, thì tính cụ thể giải quyết các phần tử được tìm thấy và tạo kiểu.
Mở about.html trong trình duyệt của bạn. Ngay bây giờ cả hai câu có cùng một phong cách. Tiếp theo, bạn sẽ thay đổi màu của <strong> phần tử trong câu thứ hai thành red , nhưng giữ nguyên <strong> màu đầu tiên được đặt thành blue . Để thực hiện thay đổi này, yêu cầu một bộ chọn độ cụ thể cao hơn. Hiện tại, các bộ chọn được gọi là độ cụ thể thấp vì chúng đang nhắm đến tất cả các <strong> phần tử trên trang, dù phần tử root của chúng là gì.
Có thể đạt được độ đặc hiệu cao hơn theo một số cách khác nhau, nhưng cách phổ biến và hiệu quả nhất là bộ chọn lớp. Trên phần tử <strong> thứ hai, hãy thêm một thuộc tính mới được gọi là class và cung cấp cho thuộc tính đó một giá trị thuộc tính là highlight :
<!doctype html> <html> <head> <title>About Sharks</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div>There are over <strong>500</strong> species of sharks.</div> <div>The great white shark can grow up to <strong class="highlight">6.1 meters</strong> long.</div> </body> </html> Tiếp theo, mở styles.css trong editor của bạn để tạo bộ chọn lớp. Đầu tiên, loại bỏ color: orange; từ div bạn đã thêm trước đó.
Trong CSS, bộ chọn phần tử được viết ra mà không có số nhận dạng, nhưng với bộ chọn lớp, dấu chấm ( . ) Đứng trước giá trị được tìm thấy trong thuộc tính. Trong trường hợp này, hãy sử dụng bộ chọn .hightlight để áp dụng thuộc tính color có giá trị là red :
div { color: green; font-family: sans-serif; } strong { color: blue; } .highlight { color: red; } Lưu các thay đổi cho cả styles.css và about.html và làm mới about.html trong trình duyệt của bạn. Bạn sẽ thấy rằng phần tử <strong> thứ hai bây giờ có red , như được thấy trong hình ảnh sau:
Để hiểu mức độ mạnh mẽ của tính cụ thể liên quan đến tầng, hãy swap các khối bộ chọn strong và .highlight . Các loại bộ chọn khác nhau có độ đặc hiệu cao hơn. Trong trường hợp này, bộ chọn lớp có độ đặc hiệu cao hơn bộ chọn phần tử:
div { color: green; font-family: sans-serif; } .highlight { color: red; } strong { color: blue; } Lưu và làm mới about.html trong trình duyệt của bạn và bạn sẽ không nhận thấy sự thay đổi nào. Hình ảnh sau đây cho thấy rằng không có sự thay đổi trực quan nào mặc dù CSS đã sắp xếp lại.
Điều này là do tính đặc hiệu thấp của bộ chọn phần tử và độ đặc hiệu cao của bộ chọn lớp. Trong khi trình duyệt đang đọc danh sách từ trên xuống dưới mà không quan tâm, bạn có thể yêu cầu trình duyệt chú ý hơn khi áp dụng một kiểu bằng cách sử dụng các bộ chọn độ cụ thể cao hơn.
Trong phần này, bạn đã làm việc với các tính năng CSS về tầng và tính đặc hiệu. Bạn đã áp dụng cùng một thuộc tính hai lần cho một phần tử, điều này cho thấy cách hoạt động của tầng bằng cách sử dụng thuộc tính cuối cùng trong danh sách. Bạn cũng đã tạo kiểu bằng cách sử dụng một bộ chọn độ cụ thể cao hơn được gọi là bộ chọn lớp. Tiếp theo, bạn sẽ tìm hiểu về một luật CSS đặc biệt overrides cả phân tầng và tính cụ thể.
Sử dụng luật !important
Trong phần cuối cùng này, bạn sẽ tìm hiểu về luật CSS !important Important và viết một ví dụ về cách sử dụng nó. Ví dụ này sử dụng một tình huống hư cấu trong đó bạn sẽ không có quyền kiểm soát HTML và do đó phải khắc phục sự cố chỉ bằng cách sử dụng CSS.
Mặc dù CSS thường sẽ hoạt động theo tầng và có tính cụ thể tốt, nhưng đôi khi một phong cách cần phải bị ép buộc. Điều này được thực hiện bằng cách thêm cờ !important Important vào cuối giá trị thuộc tính, trước dấu chấm phẩy. Đây không phải là một luật được sử dụng nhẹ nhàng và khi sử dụng, bạn nên đưa vào một comment mã giải thích lý do sử dụng !important
Cảnh báo: Do cách hoạt động của luật !important Important, nó chỉ nên được sử dụng nếu tất cả các phương pháp khác không thành công. Việc sử dụng luật sẽ overrides giá trị trên tất cả các phần tử phù hợp, điều này khiến bạn khó hoặc không thể overrides thêm. Điều này sẽ làm cho mã của bạn ít dễ đọc hơn đối với các nhà phát triển khác.
Để xem cách này hoạt động, hãy mở index.html trong editor và thêm thuộc tính style với color được đặt thành red :
<!doctype html> <html> <head> <title>Sammy Shark</title> <link href="styles.css" rel="stylesheet" /> </head> <body> <div>Sammy is the <strong style="color: red;">greatest</strong> shark in the ocean.</div> <div>They like to swim with their friends.</div> </body> </html> Tải index.html trong trình duyệt của bạn và bạn sẽ thấy rằng thuộc tính style sẽ overrides màu xanh lam với màu đỏ, vì thuộc tính style có độ đặc hiệu cao hơn so với CSS selector. Những gì trong trình duyệt sẽ giống như hình ảnh sau:
Khi làm việc với các trang web, thông thường Javascript được tải có thể áp dụng các kiểu nội tuyến như thế này. Các phần tử có thuộc tính style nằm ở dưới cùng của tầng, nghĩa là ngay cả với các kiểu chuyển tất cả các thẻ strong blue , thẻ này sẽ có red . Trong trường hợp Javascript tạo thuộc tính style , nó không thể bị xóa khỏi HTML.
Để buộc overrides kiểu, hãy mở styles.css trong editor và sau giá trị thuộc tính blue trong bộ chọn strong , hãy thêm !important :
... strong { color: blue !important; } Bây giờ trở lại trình duyệt của bạn và làm mới index.html . Bạn sẽ thấy lại màu xanh lam, như trong hình sau:
Mặc dù thuộc tính style xác định màu là red , bây giờ là blue , nhờ luật !important Important nói với trình duyệt rằng đây là kiểu quan trọng hơn để sử dụng. Sẽ rất hữu ích nếu bạn thêm một comment mã CSS giải thích lý do của !important để các nhà phát triển tương lai hoặc tương lai bạn hiểu tại sao bạn đang sử dụng nó.
... strong { /* !imporant used here because of JavaScript applying a style attribute on the selector */ color: blue !important; } Trong phần này, bạn đã học về luật !important Important và sử dụng nó trong một tình huống thực tế. Bạn cũng biết rằng luật !important Important là một công cụ nguy hiểm nên được sử dụng một cách có chủ đích vì mức độ quyết liệt của nó sẽ overrides lên các tầng và tính cụ thể. Ngoài ra, bạn đã viết một comment CSS, được sử dụng để thông báo cho các nhà phát triển trong tương lai đang xem mã của bạn cũng như nhắc nhở bạn khi bạn quay lại mã của bạn sau này.
Kết luận
CSS là một ngôn ngữ đa năng được tạo ra để thao tác và tạo kiểu cho HTML. Trong hướng dẫn này, bạn đã tạo kiểu cho các phần tử HTML thông qua các phương pháp áp dụng kiểu khác nhau. Đến đây bạn đã có nền tảng để bắt đầu viết các phong cách của riêng mình. Nếu bạn muốn tìm hiểu sâu hơn về CSS và cách thức hoạt động của CSS, World Wide Web Consortium (W3C), cơ quan quản lý CSS, cung cấp tất cả các loại thông tin về ngôn ngữ này.
Nếu bạn muốn xem thêm hướng dẫn về CSS, hãy xem trang chủ đề CSS của ta .
Các tin liên quan
Cách tạo chủ đề chế độ tối bằng các biến CSS2020-09-23
Cách thay đổi độ mờ của ảnh nền CSS
2020-09-21
Cách xác định phông chữ tùy chỉnh trong CSS với @ font-face và font-display
2020-09-16
Cách tạo ảnh động với Animate.css
2020-09-16
6 tiện ích mở rộng CSS tuyệt vời cho VS Code
2020-09-15
Màu mã hex CSS với giá trị alpha
2020-09-09
Thay đổi con trỏ chuột trong CSS bằng thuộc tính con trỏ
2020-09-08
image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
