Lớp id CSS
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 Show
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
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
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àyCao đẳ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
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
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
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
TÔI
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 CSSID 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à
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 CSS ID và lớp là gì?Mặc dù ID chỉ 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.
CSS có sử dụng ID hoặc lớp không?Bộ chọn id CSS
. Id của một phần tử là duy nhất trong một trang, vì vậy bộ chọn id được sử dụng để chọn một phần tử duy nhất. Để chọn một phần tử có id cụ thể, hãy viết ký tự băm (#), theo sau là id của phần tử. The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Tôi có thể sử dụng lớp và ID cùng nhau trong CSS không?Có, bạn có thể . Bạn chỉ cần hiểu chúng dùng để làm gì, lớp này tổng quát hơn và có thể được sử dụng nhiều lần, id (giống như id của bạn) bạn chỉ có thể sử dụng một lần.
Lớp ID là gì?Sự khác biệt giữa bộ chọn Lớp và ID
. ID chỉ được sử dụng khi một thành phần trên trang phải được áp dụng một kiểu cụ thể cho nó. Tuy nhiên, một lớp có thể được sử dụng để xác định nhiều hơn một phần tử HTML. an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element. |