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» picture
và 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à classes
hoặc selectors
. Họ có một số tính năng quan trọng.
Một người html-element
có 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ọ:
# | Bộ chọn | Ví dụ | Sự miêu tả |
---|---|---|---|
1 | * |
|
Áp dụng cho tất cả các thành phần của tài liệu HTML. |
2 | #nhận dạng |
|
# được theo sau bởi id của phần tử mà kiểu đã cho sẽ được áp dụng. |
3 | nhãn |
|
Áp dụng cho tất cả các bảng trong tài liệu. |
4 | tag.selector |
|
Áp dụng cho tất cả các bảng tài liệu có thuộc tính lớp được chỉ định. |
5 | .bộ chọn |
|
Áp dụng cho tất cả các phần tử có thuộc tính lớp được chỉ định. Bất kỳ thẻ nào. |
6 | cha mẹ con |
|
Áp dụng cho tất cả các phần tử mà thẻ cha chứa lớp chính và thẻ con chứa lớp bài viết. |
7 | thẻ: liên kết |
|
Lớp giả :link được sử dụng để tạo kiểu cho các liên kết mà người dùng chưa nhấp vào. |
số 8 | thẻ:đã truy cập |
|
Lớp giả :link được sử dụng để tạo kiểu cho các liên kết mà người dùng đã nhấp vào. |
9 | thẻ: đã kiểm tra |
|
Lớp giả này sẽ chỉ chọn các thành phần giao diện người dùng đã chọn: nút radio hoặc hộp kiểm. |
10 | thẻ: di chuột |
|
Lớp giả này cho phép bạn thay đổi kiểu dáng của một phần tử khi di chuột qua phần tử đó. |
mười một | Thẻ:con đầu lòng |
|
Lớp giả này sẽ chỉ cho phép phần tử con đầu tiên được chọn. |
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.