[BÀI 4]Class và ID trong CSS
Class và ID trong CSS Class : class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó. Ví dụ : ...
Class và ID trong CSS
- Class : class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó.
Ví dụ :
|
1 2 3 |
<div class=”class_name”>nội dung 1</div> <div class=”class_name”>nội dung 2</div> |
-Khi muốn tác động tới 2 thẻ div trên thì ta chỉ cần tác động tới class có tên “class_name”. “Class_name” sẽ được dùng chung cho cả 2 thẻ div.
-Do tính chất của class đã trình bày ở trên có thể suy ra rằng nếu khi nào chúng ta muốn nhiều đối tượng dùng chung một số thuộc tính nào đó (vd: color, background, border,…) thì chúng ta nên gộp chúng vào chung một class.
-Bộ chọn lớp không xác định thẻ
– Cho phép tạo lớp có thể gắn vào nhiều thẻ (các thẻ phải chấp nhận thuộc tính này) bằng cách bỏ tên thẻ ở đầu và giữ lại dấu “.”.
>> Khi bạn đã học xong HTML và Css bạn có thể tìm hiểu lap trinh php tại nhà nhé
Ví dụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style type="text/css"> .center{ text-align: center; } </style> <body> <div class="center">đoạn văn canh giữa</div> <div class="center">đoạn văn canh giữa</div> <div>đoạn văn canh giữa</div> </body> </html> |
-Có thể sử dụng nhiều lớp trong 1 thẻ, các lớp cách nhau bởi khoảng trắng
Ví dụ :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <style type="text/css"> .giua{ text-align: center; } .mau{ color: blue; } </style> <body> <div class="giua mau">giua_mau_xanh</div> </body> </html> |
Kết quả :
- ID :
– Định danh ID cho phép chia thẻ thành nhiều loại khác nhau
– Định danh chỉ có thể áp dụng duy nhất cho 1 thẻ và tên của định danh phải là duy nhất trên trang web
– Cú pháp ID selector
|
1 |
[Tên thẻ]#<id của thẻ> { property: value ; …} |
Ví dụ :
Đoạn mã sau có thể áp dụng cho thẻ <p> có id là test
|
1 2 3 4 5 6 7 |
p#test { text-align: center; color: red } <p id="test"> Nội dung </p> |
- Kết luận :
Qua bài viết này giúp các bạn phân biệt được class và id. Hy vọng nó sẽ giúp các bạn sử dụng hợp lý trong layout website.
Để tìm hiểu chi tiết hơn, các bạn có thể tham khảo các khóa học tại đây.!!!
Tìm hiểu thêm khóa học lập trình khác nữa:
- Cách học lap trinh ios qua video
- Địa chỉ hoc lap trinh game unity o dau
