Ghi đè kiểu css trong html

Nếu bạn cần điều chỉnh giao diện của một trang trên trang web doanh nghiệp của mình, bạn có thể phải sửa đổi mã Cascading Style Sheet. Nhà phát triển sử dụng CSS để đặt kích thước, màu sắc và các thuộc tính khác của đối tượng trên trang Web. Sau khi tạo một lớp CSS xác định các thuộc tính này, bạn có thể gán lớp đó cho một DIV hoặc bất kỳ đối tượng trang Web nào khác để làm cho nó sử dụng các thuộc tính đó. Chẳng hạn, nếu một lớp xác định chiều rộng là 100 pixel, thì tất cả các DIVS tham chiếu đến lớp đó sẽ có chiều rộng là 100 pixel. Bạn có thể ghi đè định nghĩa lớp CSS của DIV bằng cách cập nhật mã HTML của DIV

1. 1

   Mở tài liệu HTML có chứa DIV tham chiếu đến các lớp CSS. Một DIV điển hình có thể xuất hiện như hình bên dưới

   Nội dung bên trong DIV này có màu xanh lam

   DIV trong ví dụ này tham chiếu đến một lớp CSS có tên là "backgroundBlue. " Khi thêm tham chiếu lớp vào DIV, nhà phát triển nhập từ "lớp", theo sau là dấu bằng, rồi tên lớp trong dấu ngoặc kép, như minh họa ở trên

2. 2

   Nhập thuộc tính kiểu sau sau định nghĩa lớp của DIV

   style="màu nền. màu đỏ"

   Bao gồm một khoảng trắng trước từ "phong cách. " Nếu bạn đã thêm thuộc tính kiểu đó vào DIV được hiển thị ở bước trước, mã sẽ xuất hiện như sau

   Nội dung bên trong DIV này có màu xanh dương

   Nhà phát triển gọi thuộc tính kiểu mà bạn đã thêm là "kiểu nội tuyến" vì thuộc tính này nằm bên trong mã HTML của phần tử. Nếu lớp backgroundBlue trong ví dụ này có thuộc tính màu là xanh lam, thì kiểu nội tuyến bạn thêm vào sẽ ghi đè lên kiểu trong lớp CSS và làm cho màu nền của DIV có màu đỏ. Để ghi đè một thuộc tính mà lớp CSS định nghĩa, chỉ cần thêm một kiểu nội tuyến mới sau định nghĩa lớp của DIV

   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

   Giả sử bạn có kiểu nội tuyến này trên div

   HTML

   
   

   1. /div >

   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

   css

   
   

   1. .myDiv{

   2. đường viền. không;

   3. }

   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

   css

   
   

   1. .myDiv[ kiểu ]{

   2. đường viền. không có . quan trọng ;

   3. }

   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

   Trong bài viết này, chúng ta sẽ tìm hiểu cách ghi đè kiểu CSS hoạt động. Cascading Style Sheets được gọi là CSS, là một ngôn ngữ được thiết kế đơn giản nhằm đơn giản hóa quá trình làm cho các trang web có thể hiển thị được. CSS cho phép bạn áp dụng các kiểu cho các trang web. Quan trọng hơn, CSS cho phép bạn làm điều này độc lập với HTML tạo nên mỗi trang web

   ghi đè. Ghi đè trong CSS có nghĩa là bạn đang cung cấp bất kỳ thuộc tính kiểu nào cho một phần tử mà bạn đã cung cấp kiểu. Ví dụ: nếu bạn đã cung cấp một số kiểu cho một phần tử bằng cách sử dụng CSS bên ngoài và sau đó, bạn cần thay đổi CSS nhưng nếu bạn không tìm thấy nơi bạn đã viết mã thì bạn có thể ghi đè kiểu đó bằng cách sử dụng trong

   Thứ tự ưu tiên

   inline stylesheet [highest]  >> … tags  >>  external style sheet[lowest]

   Inline stylesheet: If you are using any Inline stylesheet, then it takes the highest priority, and therefore, it will override any property defined in … tags or property defined in an external style sheet file.

   Style tag: If you are using any property defined in … tag, it will override the property defined in any external style sheet file.

   CSS bên ngoài. Nếu bạn đang sử dụng bất kỳ thuộc tính nào được xác định trong tệp biểu định kiểu bên ngoài thì thuộc tính đó có mức ưu tiên thấp nhất và thuộc tính được xác định trong tệp này sẽ chỉ được áp dụng khi hai thuộc tính trên không được áp dụng

   Ví dụ 1. Trong ví dụ dưới đây, chúng tôi đã ghi đè thuộc tính. Đầu tiên, chúng tôi đã xác định màu tiêu đề1 thành màu đỏ bằng thẻ kiểu, sau đó ghi đè màu tiêu đề1 thành màu xanh lá cây bằng cách sử dụng biểu định kiểu nội tuyến

   HTML