thuộc tính lớp

6.1 Thuộc tính lớp và thẻ kiểu

Nhưng đó không phải là tất cả. Sau khi hàng trăm "phong cách" được phát minh, câu hỏi đặt ra: làm thế nào để sử dụng chúng? Và rồi họ nảy ra ý tưởng nhóm chúng thành “các lớp”. Tất nhiên, đây không phải là các lớp giống như trong Java. Chỉ cần nhóm phong cách đặc biệt.

Và nếu trước khi sử dụng "các lớp", bạn đã có một bức ảnh:

       <img src="logo.png" style="width=100px;height=100px;opacity=0.5">
    

Bây giờ nó có thể được viết là:

<img src="logo.png" class="picture">
 
<style>
    img.picture {
        width=100px;
        height=100px;
        opacity=0.5
    }
</style>

Chúng tôi đã tạo một cái đặc biệt «style» picturevà chuyển các giá trị kiểu từ tệp style. Sau đó, chúng tôi gắn thẻ <img> và ảnh "phong cách" với thẻ class.

6.2 Bộ chọn, các loại bộ chọn

Những phong cách này, được hiển thị riêng biệt, được gọi là classeshoặc selectors. Họ có một số tính năng quan trọng.

Một người html-elementcó thể có nhiều bộ chọn. Tên của họ được chỉ định với một không gian. Ví dụ:

       <img src="logo.png" class="picture main">
    

Một lý do chúng tôi đề cập đến bộ chọn ở đây là vì chúng có thể được áp dụng tự động. Và tài sản hữu ích này sẽ được sử dụng rất thường xuyên trong tương lai. Bao gồm cả các nhà phát triển Java.

Dưới đây là một danh sách ngắn của họ:

* {
  margin: 0;
  padding: 0;
}

#img123 {
   width:100px;
   height 100px;
}

table {
   color: black;
}

table.important {
   color: red;
}

.picture {
  opacity: 0.5
}

main article {
  color: blue;
}

a:link {
color: blue;
}

a:visited {
color: red;
}

input[type=radio]:checked {
 border: 1px solid black;
}

div:hover {
  background: red;
}

ul li:first-child {
 border-top: none;
}

Bạn không cần phải ghi nhớ tất cả. Nhưng sẽ tốt hơn nếu bạn nghiên cứu bảng này một vài lần và tất cả những điều này đã lắng đọng trong đầu bạn. Không có web trong cuộc sống hiện đại, không nơi nào và trên web - không nơi nào không có bộ chọn.