Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để chúng ta sử dụng các lớp CSS khác nhau trong HTML?


Trong HTML, xác định các quy tắc kiểu dựa trên thuộc tính lớp của các phần tử. Các phần tử có lớp đó sẽ được định dạng theo quy tắc đã xác định. Đây được gọi là bộ chọn lớp. Để chọn các phần tử với một lớp cụ thể, bạn cần viết một ký tự dấu chấm (.), Theo sau là tên của lớp, ví dụ:.black

.black {
   color: #000000;
}

Hiển thị nội dung bằng màu đen cho mọi phần tử có thuộc tính lớp được đặt thành màu đen trong tài liệu của chúng tôi. Ví dụ:chỉ hiển thị nội dung bằng màu đen cho các phần tử

có thuộc tính lớp được đặt thành màu đen.

h3.black {
   color: #000000;
}

Một ví dụ khác có thể bao gồm việc tạo kiểu cho thẻ

. Thông qua phần sau, hãy tạo kiểu cho tất cả các phần tử

bằng class ="device"

Ví dụ

<!DOCTYPE html>
<html>
   <head>
     <style>
        p.device {
           background: #000000;
           color: #fffffF;
        }
     </style>
   </head>
   <body>
      <p>This is demo text</p>
      <p class="device">Information about devices.</p>
      <p>This is demo text</p>
   </body>
</html>

Việc tạo kiểu của thẻ

có thể được thực hiện với nhiều lớp, tức là thiết bị và phụ kiện tại đây

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         p.device {
            background: #000000;
            color: #fffffF;
         }
         p.accessories {
            text-align: center;
         }
      </style>
   </head>
   <body>
      <p class="device accessories">DEVICE DETAILS</p>
      <p class="device">Information about devices.</p>
   </body>
</html>