Trong chương trước, chúng ta đã học về bộ chọn. Bây giờ chúng ta sẽ nói về bộ chọn id và lớp thường được sử dụng để tạo kiểu cho các thành phần trang web
Bộ chọn ID là mã định danh duy nhất của phần tử HTML mà một kiểu cụ thể phải được áp dụng. Nó chỉ được sử dụng khi một phần tử HTML duy nhất trên trang web phải có một kiểu cụ thể
Cả trong Biểu định kiểu bên trong và bên ngoài, chúng tôi sử dụng hàm băm [#] cho bộ chọn id
Title of the document
The first paragraph.
The second paragraph.
The third paragraph.
Như bạn thấy, chúng tôi đã chỉ định màu xanh làm bộ chọn id của đoạn thứ hai [id="blue"] và khai báo kiểu của nó bằng thuộc tính color - #blue {color. #1c87c9;} trong phần. Điều đó có nghĩa là phần tử HTML có bộ chọn id màu xanh lam sẽ được hiển thị trong #1c87c9
Kiểm tra mã này trong trình chỉnh sửa trực tuyến HTML của chúng tôi để thấy rằng màu của đoạn thứ hai là #1c87c9
Bộ chọn lớp được sử dụng khi phải áp dụng cùng một kiểu cho nhiều thành phần HTML trên cùng một trang web
Cả trong Biểu định kiểu bên trong và bên ngoài, chúng tôi đều sử dụng dấu chấm [. ] cho bộ chọn lớp
Title of the document
This is some heading.
The second paragraph.
The third paragraph.
Trong ví dụ của chúng tôi, bộ chọn lớp được sử dụng hai lần, trong tiêu đề và đoạn văn
Như bạn thấy, chúng tôi đã chỉ định màu xanh lam làm bộ chọn lớp [class="blue"] và khai báo kiểu của nó bằng thuộc tính color -. màu xanh da trời. #1c87c9;} trong phần. Điều đó có nghĩa là các phần tử có bộ chọn lớp màu xanh lam sẽ được hiển thị trong #1c87c9
Trong ví dụ của chúng tôi, tiêu đề và đoạn thứ ba là #1c87c9. Kiểm tra nó trong trình chỉnh sửa trực tuyến HTML của chúng tôi
Sự khác biệt giữa ID và lớp là cái đầu tiên là duy nhất và cái thứ hai thì không. Điều này có nghĩa là mỗi phần tử chỉ có thể có một ID và mỗi trang chỉ có thể có một phần tử với ID này. Khi sử dụng cùng một ID trên nhiều phần tử, mã sẽ không vượt qua xác thực. Nhưng vì các lớp không phải là duy nhất, nên cùng một lớp có thể được sử dụng trên nhiều phần tử và ngược lại, bạn có thể sử dụng một số lớp trên cùng một phần tử
ID và lớp là hai cách bạn có thể làm cho mã của mình sạch hơn và hiệu quả hơn khi làm việc trong HTML. Tìm hiểu cách sử dụng các dấu hiệu này
qua
Shauna Blackmon
Shauna Blackmon
mũi tên phảinhà văn
Shauna Blackmon là một nhà báo và nhà văn chuyên viết về sự giao thoa giữa công nghệ và con người. Cô hiện cũng đang hoàn thành bằng thạc sĩ về quan hệ quốc tế, tập trung vào công nghệ tương lai và biên giới thông minh
XKiểm tra Chỉnh sửa bởi
Kelly Thomas
Kelly Thomas
mũi tên phảibiên tập viên
Kelly Thomas là biên tập viên của BestColleges và chuyên về giáo dục thay thế. Cô ấy đề cập đến các chủ đề như chương trình đào tạo mã hóa và ngành công nghệ, cũng như các chứng chỉ và giao dịch lành nghề. Cô có bằng cử nhân khoa học chính trị của trường Đại học
XKiểm tra Được đánh giá bởi
Darnell Kenebrew
Darnell Kenebrew
mũi tên phảingười phản biện
Darnell Kenebrew là kỹ sư phân tích dữ liệu tại Meta và là giám đốc điều hành của COOP Careers — một tổ chức phi lợi nhuận nhằm khắc phục tình trạng thiếu việc làm. Là thế hệ đầu tiên tốt nghiệp đại học, Kenebrew lấy bằng cử nhân khoa học máy tính, bắt đầu sự nghiệp của mình
XXuất bản ngày 18 tháng 8 năm 2022
Tìm hiểu thêm về quy trình biên tập của chúng tôi
6 phút đọc
Chia sẻ bài viết này
Cao đẳng tốt nhất. com là một trang web hỗ trợ quảng cáo. Các chương trình đối tác nổi bật hoặc đáng tin cậy và tất cả các kết quả tìm kiếm, công cụ tìm hoặc đối sánh trường học đều dành cho các trường trả thù lao cho chúng tôi. Khoản bồi thường này không ảnh hưởng đến xếp hạng trường học của chúng tôi, hướng dẫn tài nguyên hoặc thông tin độc lập về mặt biên tập khác được công bố trên trang web này
- Lớp và ID là bộ chọn được sử dụng để tổ chức mã CSS
- ID mô tả một cái gì đó số ít
- Lớp mô tả một cái gì đó với nhiều yếu tố
- Mặc dù chúng hoạt động tương tự nhau, nhưng biết khi nào nên sử dụng từng loại có thể làm cho mã của bạn sạch hơn
Khi tạo một trang web, điều quan trọng là phải có một phong cách thống nhất trên toàn trang. Bất kỳ sự không nhất quán nào, chẳng hạn như sử dụng phông chữ hoặc kích thước không chính xác, có thể gây mất tập trung cho người đọc. Tuy nhiên, nếu các nhà phát triển web buộc phải xem xét từng yếu tố trong mỗi trang để đảm bảo mọi thứ ở dạng chính xác, thì đó sẽ là một nỗi đau lớn.
Rất may, các nhà phát triển có thể tránh được nhiệm vụ tẻ nhạt này bằng cách triển khai bộ chọn CSS. Có năm loại bộ chọn, nhưng bài viết này tập trung vào các bộ chọn đơn giản. Bộ chọn ID và lớp
Khi làm việc trong CSS, ID và lớp có thể xác định và chặn các phần tử cùng nhau để đảm bảo chúng chia sẻ các phần tử thiết kế. ID và lớp được sử dụng đúng cách có thể làm cho mã sạch hơn và dễ cấu trúc hơn. Lúc đầu, chúng có thể khó hình dung, nhưng khi bạn đã quen với việc sử dụng các ký hiệu này, chúng có thể đơn giản hóa và tăng tốc quá trình mã hóa
ID là gì?
ID cho phép nhà phát triển xác định một phần tử trong mã HTML và áp dụng một kiểu cụ thể cho phần tử đó. ID là cụ thể và được nhắm mục tiêu, tương tự như một danh từ thích hợp. Có thể có nhiều phần tử trên một trang, nhưng ID đánh dấu một phần tử cụ thể. Mỗi phần tử chỉ có thể có một ID và mỗi trang chỉ có thể có một phần tử với ID cụ thể đó
Ví dụ: nếu chúng tôi có năm thẻ div trong HTML của mình, chúng tôi có thể tạo một ID và mỗi thẻ có màu xanh lá cây và cao 60 pixel. ID được xác định bằng ký tự băm [#], theo sau là tên ID
div{
background-color: #008000;
height: 60px;
}
Lớp học là gì?
Bạn nên sử dụng một lớp nếu bạn cần sử dụng cùng một bộ chọn nhiều lần trong một trang hoặc một trang web. Mặc dù ID dành riêng cho một phần tử, nhưng các lớp có thể được gán cho nhiều phần tử trên một trang hoặc trên toàn bộ trang web. Họ không phải là duy nhất. Và trong khi một phần tử chỉ có thể có một ID, nó có thể có nhiều lớp
Các lớp được biểu thị bằng dấu chấm, theo sau là tên lớp. Trong ví dụ này, tất cả các phần tử được gắn thẻ với lớp "trung tâm" sẽ được căn giữa và có màu xanh lục
.center {
text-align: center;
color: green;
}
Sự khác biệt giữa ID so với. Lớp?
Lúc đầu, việc tìm ra thời điểm sử dụng các lớp và ID có thể khó khăn vì chúng làm những việc rất giống nhau. Sự khác biệt là ở quy mô của hành động và cách nó được thực hiện. Các nhà phát triển thường mất một chút thời gian để có cảm giác khi nào nên sử dụng từng bộ chọn, nhưng sẽ dễ dàng hơn khi thực hành
Một cách để nghĩ về ID và lớp là mã vạch và số sê-ri. Ví dụ: tất cả các sản phẩm trong cửa hàng điện tử đều có mã vạch và số sê-ri, nhưng chúng cung cấp các loại thông tin khác nhau
Tất cả các điện thoại có cùng kiểu dáng và kiểu dáng sẽ có cùng một mã vạch để biểu thị thông tin như giá cả hoặc thông tin sản phẩm cụ thể, nhưng nó sẽ không giúp bạn phân biệt điện thoại này với điện thoại khác. Tuy nhiên, số sê-ri là duy nhất cho một điện thoại cụ thể. Điều này sẽ không cho bạn biết bất cứ điều gì về giá hoặc vị trí của nó trong cửa hàng, nhưng nó có thể xác định một đối tượng cụ thể
Thông thường, một phần tử cụ thể có thể có cả ID và lớp [hoặc nhiều lớp] được liên kết với nó
Lớp
Kiểm tra
Chọn một nhóm các phần tử Kiểm tra
Được viết bằng ký hiệu băm theo sau là tên ID Kiểm tra
Có thể được sử dụng để đánh dấu nhiều yếu tố trong một trang
TÔI
Kiểm tra
Chọn một phần tử duy nhất Kiểm tra
Được viết với một khoảng thời gian tiếp theo là tên lớp Kiểm tra
Chỉ có thể được sử dụng để đánh dấu một phần tử trong một trang
Bạn nên chọn cái nào?
Lúc đầu, có thể khó hiểu khi nào bạn nên sử dụng ID so với lớp. Bởi vì chúng tương tự nhau, nên việc sử dụng cái này thay vì cái kia không hoàn toàn sai, nhưng việc xác định chính xác thời điểm sử dụng đúng từng ký hiệu sẽ giúp bạn có mã sạch hơn, dễ làm việc hơn
Cho dù bạn chọn cái nào, hãy đảm bảo xác định [các] yếu tố bạn đang tham chiếu một cách rõ ràng. Điều gì đó có thể có ý nghĩa với bạn vào lúc này, nhưng nó có thể ít rõ ràng hơn sau vài ngày không viết mã
Câu hỏi thường gặp về ID so với. Lớp CSS
ID có mạnh hơn lớp CSS không?
Bộ chọn ID được thực hiện trước bộ chọn lớp vì chúng cụ thể hơn. Vì vậy, họ được ưu tiên. Đầu tiên, trình duyệt xác định nguồn gốc và tầm quan trọng của tầng. Sau đó, một thuật toán có tên là Tính đặc hiệu sẽ xác định thứ tự hoạt động cho các khai báo CSS bằng cách đánh giá trọng số của bộ chọn CSS cụ thể đó
Chỉ với hai bộ chọn, điều này khá đơn giản. Tuy nhiên, hãy nhớ rằng có rất nhiều danh mục bộ chọn khác. Bạn càng sử dụng nhiều, càng khó dự đoán thứ tự và khiến mã chạy chính xác
Lệnh cuối cùng là
- Các giá trị được xác định là quan trọng
- kiểu nội tuyến
- bộ chọn ID
- Bộ chọn lớp
- Yếu tố
ID có nhanh hơn lớp CSS không?
Vì ID là hành động đầu tiên được giải quyết nên về mặt kỹ thuật, chúng nhanh hơn. Tuy nhiên, với tốc độ xử lý hiện đại, sự khác biệt quá nhỏ nên nó không phải là yếu tố quyết định cách bạn viết mã.
Tìm ra bộ chọn nào sẽ sử dụng [và khi nào] sẽ giúp bạn viết mã sạch hơn, đây là yếu tố quan trọng hơn tốc độ hoạt động
Bạn có thể sử dụng lớp và ID cùng nhau không?
Đúng. Một phần tử có thể và thường có cả lớp và bộ chọn ID. Trên thực tế, việc sử dụng nhiều bộ chọn có thể là một công cụ tổ chức hiệu quả — nếu bạn làm tốt. Một ví dụ có thể trông như thế này
Trong một số trường hợp, một phần tử có thể có ID và nhiều lớp hoặc bộ chọn khác. Tuy nhiên, điều này có thể bắt đầu gây nhầm lẫn cho các nhà phát triển mới, vì vậy tốt nhất bạn nên thực hành và đảm bảo rằng bạn hiểu rõ khi nào nên sử dụng các bộ chọn khác nhau trước khi bắt đầu sắp xếp chúng