Bạn đang tìm kiếm một cách để cách điệu các phần tử HTML mà không gặp rắc rối? . Trong bài viết này, bạn sẽ tìm hiểu chính xác các lớp trong CSS là gì và cách sử dụng chúng một cách hiệu quả.

Lớp CSS là gì?

Cú pháp CSS chứa một bộ chọn và một lớp chính xác như vậy. Nó cần thiết để cách điệu các phần tử HTML – bao gồm thay đổi màu sắc, phông chữ hoặc kích thước của văn bản

Nếu bạn muốn sử dụng một lớp, hãy sử dụng dấu chấm [. ] theo sau là tên lớp trong khối kiểu. Tiếp theo, sử dụng dấu ngoặc được gọi là khối khai báo có chứa thuộc tính để định kiểu phần tử, chẳng hạn như màu văn bản hoặc kích thước văn bản

Hãy lấy một ví dụ, đây là giao diện nếu bạn muốn thay đổi màu văn bản thành màu xanh lá cây

.green-text {

color: #008000;

}

CSS Classes sẽ giúp bạn cách điệu các phần tử HTML một cách nhanh chóng. Hơn nữa, bạn có thể tránh lặp lại cùng một mã cho từng phần tử HTML sử dụng cùng một kiểu dáng. Do đó, số lượng mã CSS cần sử dụng giảm đi – điều này giúp mã dễ đọc hơn và dễ gỡ lỗi hơn

Một lưu ý khác, bạn cũng có thể sử dụng bộ chọn ID để cách điệu các phần tử HTML. Tuy nhiên, nó chỉ có thể thay đổi một phần tử HTML, trong khi bộ chọn lớp có thể cách điệu nhiều phần tử

Làm cách nào để sử dụng Lớp CSS để tạo kiểu cho một phần tử?

Bạn đã sẵn sàng sử dụng các lớp CSS chưa? . Hãy bắt đầu bằng cách tạo các lớp bằng thẻ kiểu

.green-text {

color: #008000;

}





.font-36{

font-size: 36px;

}

Hãy chia nhỏ nó ra và xem mỗi phần đại diện cho điều gì

• –  thẻ kiểu chỉ định thông tin kiểu của phần tử HTML. Bạn có thể đặt nhiều thẻ kiểu trong tài liệu HTML
• tên lớp - nó đề cập đến các thuộc tính sẽ được thêm vào phần tử. Chẳng hạn, tên lớp là green-text và font-36 vì phần tử sẽ có màu xanh lục và phông chữ có kích thước 36 pixel. Ngoài ra, đừng quên đặt một dấu chấm [. ] trước tên lớp vì nó sẽ không hoạt động nếu không
• {property} – nó chứa các thuộc tính sẽ được thêm vào các phần tử, chẳng hạn như màu xanh lục và cỡ chữ 36 pixel

Sau khi tạo các lớp, bạn có thể áp dụng chúng cho các phần tử HTML

This is an example of a sentence with bigger font size

This is an example of a sentence with regular font size

Như bạn có thể thấy, có hai câu; . Do đó kết quả sẽ như thế này

Cả hai câu đều sử dụng lớp văn bản xanh; . Tuy nhiên, câu đầu tiên cũng sử dụng lớp font-36, biến kích thước của văn bản thành 36 pixel và làm cho nó lớn hơn câu còn lại

Keep in mind that you can use both classes if you separate them with a single space. You should also put the class inside the relevant HTML tag to make it work. For example, if you want to style an H1 heading, then you have to use the

tag:

An Example of a Heading 1 Text

3 mẹo để làm chủ các lớp trong CSS

Có những thứ khác mà bạn cần chú ý khi tạo các lớp trong CSS, chẳng hạn như các thuộc tính mà bạn sẽ đặt trên các phần tử và số lượng các lớp mà bạn muốn tạo. Nếu bạn lập kế hoạch trước, nó sẽ giúp bạn sắp xếp mã dễ dàng hơn

Nói chung, bạn cũng nên chú ý đến ba yếu tố này

• Đặt tên đúng cho lớp của bạn –  tên lớp phải cung cấp thông tin về các thuộc tính được thêm vào phần tử. Như vậy sẽ dễ hiểu hơn. Chẳng hạn, nếu bạn muốn thêm một lớp sẽ thay đổi kích thước phông chữ thành 36, thì cách tốt nhất là đặt tên cho nó là phông chữ-36
• Đảm bảo rằng một lớp chỉ thực hiện một việc – thêm nhiều thuộc tính có thể khiến lớp đó khó sử dụng lại. Ví dụ: bạn không thể sử dụng một lớp chứa hai thuộc tính – văn bản màu xanh lá cây và cỡ chữ 36 pixel nếu bạn chỉ muốn một văn bản màu xanh lá cây mà không thay đổi kích thước phông chữ
• Nhóm các lớp của bạn dựa trên đặc điểm của chúng – khi tạo các lớp, hãy sắp xếp chúng dựa trên việc sử dụng chúng. Ví dụ: bạn có thể nhóm các lớp có liên quan đến cỡ chữ. Thực hành này sẽ giúp bạn về lâu dài

Phần kết luận

Sử dụng các lớp trong CSS sẽ giúp bạn định dạng các phần tử HTML một cách dễ dàng. Bây giờ bạn có thể nhanh chóng thêm nhiều thuộc tính vào các phần tử bằng cách sử dụng các lớp khác nhau. Cuối cùng, hãy giữ chúng ngăn nắp và đảm bảo rằng chúng có thể tái sử dụng

Bạn có câu hỏi nào liên quan đến các lớp trong CSS không?

Tác giả

Domantas G

Domantas dẫn dắt các nhóm nội dung và SEO về phía trước với những ý tưởng mới và phương pháp tiếp cận vượt trội. Được trang bị kiến ​​thức sâu rộng về SEO và tiếp thị, anh đặt mục tiêu quảng bá Hostinger đến mọi nơi trên thế giới. Trong thời gian rảnh rỗi, Domantas thích trau dồi kỹ năng phát triển web của mình và đi du lịch đến những nơi xa lạ

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

Chúng ta có thể sử dụng lớp trong div không?

Làm cách nào để sử dụng div trong HTML?

Lớp div để làm gì?