Hướng Dẫn - Sự Khác Nhau Giữa ID Và Class Trong CSS - VNXF

• Trang chủ
• Diễn đàn Bài viết mới Tìm chủ đề
• Dịch Vụ XenForo
• Tài nguyên Trả phí
• Chia sẻ Miễn phí Addons miễn phí Styles miễn phí Các bước dựng XenForo

Vietnamese Arabic Chinese English French German Hindi Indonesian Italian Japanese Khmer Korean Lao Portuguese Spanish Thai Vietnamese Đăng nhập

Tìm kiếm

Everywhere Chủ đề This forum This thread Chỉ tìm trong tiêu đề Note Bởi: Tìm Tìm kiếm nâng cao…

• Bài viết mới
• Tìm chủ đề

Menu Đăng nhập Đăng ký Install the app Cài đặt How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

• ✨ [VNXF] Core - Addon tối ưu XenForo & nền tảng cho hệ sinh thái addon của VNXF

• Diễn đàn
• CSS - HTML - Javascript
• CSS

You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. Hướng dẫnSự khác nhau giữa ID và Class trong CSS

• Thread starter Thread starter PVS
• Ngày gửi Ngày gửi 08/05/2017
• Từ khóa Từ khóa cascading style sheets class css index lap trinh ngon ngu vnxf vnxf.vn website xenforo

PVS

Super Moderator

Thành viên BQT Sự khác nhau giữa ID và Class trong CSS Trong CSS có hai trường phái (Nói vậy nó Sang) là Id và Class. Tuy chức năng của hai bạn này như nhau, nhưng giữa chúng có sự khác biệt rất rõ nét. Và nếu như chúng ta biết sử dụng chúng một cách hợp lý thì layout sẽ đạt đến trình độ cao và chuyên nghiệp hơn. Đặc biệt nó rất tốt cho việc đánh giá website sau này. 1. Id Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id 1.1 Id là gì? Id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML. 1.2 Id dùng khi nào? Do mỗi trang HTML mỗi đối tượng chỉ có thể có duy nhất một id chính vì vậy id được dùng cho những đối tượng nào mang tính duy nhất trong trang (ví dụ: khung viền (wrapper), menu chính (main menu),…). 1.3. Cách dùng id Trong file CSS chúng ta sẽ dùng dấu “#” trước tên đối tượng mà chúng ta đặt là id. Ví dụ: Mã: //Đối tượng <div id="IdName"> Nội dung </div> //Thì trong file CSS chúng ta viết như sau. #IdName{ //Lệnh CSS } 2. Class Bây giờ chúng ta tiếp tục đi tìm hiểu về thuật ngữ class và cách sử dụng chúng trong quá trình viết mã HTML. 2.1 Class là gì? 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ụ: Mã: //Đối tượng 1 <div class="ClassName"> Nội dung 1 </div> //Đối tượng 2 <div class="ClassName"> Nội dung 2 </div> //Thì trong file CSS chúng ta chỉ cần viết một Class có tên là ClassName được dùng chung cho hai đổi tượng. .ClassName{ //Lệnh CSS } Qua ví dụ trên chúng ta cũng thấy được việc sử dụng nhiều đối tượng thuộc cùng một class trong cùng một trang như thế nào. ​2.2 Dùng class khi nào? 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. 2.3 Cách dùng class Trong file CSS chúng ta đặt dấu “.” trước tên của đối tượng mà chúng ta đặt là class. Mã: //Đối tượng <div class="ClassName"> Nội dung </div> //Thì trong file CSS chúng ta viết như sau. .ClassName{ //Lệnh CSS } Qua bài viết này hy vọng các bạn sẽ biết cách phân biệt giữa id và class để có thể sử dụng hợp lý trong layout website. Chúc các bạn thành công. Nguồn: tuhocphp.com​ Bài viết liên quan Từ CSS đến SCSS: Hành trình từ nông dân thành fashionista của website bởi Thanh Nguyệt, 22/11/2025 Diễn đàn bị lỗi css bởi bloghocpiano, 06/07/2024 Tìm hiểu về CSS dễ hiểu nhất cho người mới bắt đầu bởi anhngan21, 05/10/2021 Cách xác định vị trí phần tử với thuộc tính position trong CSS bởi PVS, 08/06/2020 Sử dụng thuộc tính CSS visibility để thiết lập ẩn hiện phần tử HTML bởi PVS, 06/06/2020 Tìm hiểu thêm về thuộc tính display trong CSS bởi PVS, 06/06/2020 56,358 0 0 Bạn phải đăng nhập hoặc đăng ký để bình luận. Chia sẻ: Facebook Bluesky LinkedIn Reddit Pinterest Tumblr WhatsApp Email Chia sẻ Link

Dịch vụ XenForo của VNXF

Zalo 0906081284

Silzedt InboxPVS

Xử lý sự cố

• Làm gì khi tài khoản chủ web bị khóa do đăng nhập sai nhiều lần
• Cách đổi mật khẩu Admin XenForo bằng PhpMyAdmin
• Redirect tên miền trên CloudFlare để giữ từ khóa trên Google

Hướng dẫn sử dụng

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Textlink

Khám phá AI cùng người Việt Diễn đàn chia sẻ kinh nghiệm massage Review dịch vụ massage toàn quốc Cộng Đồng Massage Việt Nam Cộng đồng AI Việt Nam Liên hệ đặt Textlink

Nhà Tài Trợ

• Diễn đàn
• CSS - HTML - Javascript
• CSS

Back Top