Tìm hiểu bộ chọn CSS ID là gì và nó khác với bộ chọn lớp như thế nào.

Bạn đang xem : id truy cập trong css

Các phần tử HTML có thể được xác định theo loại, lớp, thuộc tính, trạng thái giả hoặc tên ID. Cách bạn xác định chúng sẽ ảnh hưởng đến cách bạn tùy chỉnh chúng bằng cách sử dụng công cụ chọn CSS .

Ví dụ: nếu bạn muốn thực hiện các thay đổi rộng rãi trên trang web của mình, thì bạn có thể sử dụng bộ chọn loại. Giả sử bạn muốn tạo kiểu cho mọi phần tử span trên trang web của mình. Sau đó, bạn sẽ sử dụng bộ chọn loại span {style properties}.

Để thực hiện các thay đổi chi tiết hơn, bạn cần một bộ chọn cụ thể hơn. Cụ thể nhất là một bộ chọn ID. Hãy xem xét kỹ hơn loại bộ chọn này bên dưới.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Bộ chọn CSS ID

Bộ chọn CSS ID sử dụng thuộc tính ID của một phần tử HTML để chọn một phần tử duy nhất trên một trang. Để sử dụng bộ chọn ID trong CSS, bạn chỉ cần viết một thẻ bắt đầu bằng # (#) theo sau là ID của phần tử. Sau đó, đặt các thuộc tính kiểu bạn muốn áp dụng cho phần tử trong dấu ngoặc.

Dưới đây là cái nhìn về cú pháp của công cụ chọn ID trong CSS:

  
#idname {style properties}

Có một số quy tắc bạn phải tuân theo để sử dụng chính xác bộ chọn CSS ID. Trước khi chúng ta xem xét các quy tắc dưới đây, hãy để tôi ghi chú quan trọng về các ví dụ bên dưới.

Tôi cũng sẽ sử dụng BootstrapCDN để tải biểu định kiểu mặc định của Bootstrap để các ví dụ sẽ được tạo kiểu cho phù hợp. Tuy nhiên, HTML và CSS của các ví dụ cũng sẽ hoạt động trên các trang HTML5. Vì vậy, nếu bạn đang xây dựng trang web của mình từ đầu thay vì sử dụng khung CSS Bootstrap , bạn vẫn có thể sử dụng HTML và CSS làm mẫu.

Cách sử dụng ID trong CSS

Quy tắc đầu tiên cần ghi nhớ khi sử dụng thuộc tính ID là thuộc tính này phải chứa ít nhất một ký tự và không được bắt đầu bằng một số.

Giả sử tôi có nhiều h2 trên trang web của mình và mỗi h2 đánh dấu sự bắt đầu của một chương mới. Sau đó, tôi có thể đặt cho mỗi h2 một tên ID.

HTML sau là đúng:

  
& lt; h2 id = "C1" & gt; Chương 1 & lt; / h2 & gt;
& lt; h2 id = " C2 "& gt; Chương 2 & lt; / h2 & gt;
& lt; h2 id =" C3 "& gt; Chương 3 & lt; / h2 & gt;
& lt; h2 id =" C4 "& gt; Chương 4 & lt; / h2 & gt;

Điều này không chính xác:

  
& lt; h2 id = "1" & gt; Chương 1 & lt; / h2 & gt;
& lt; h2 id = " 2 "& gt; Chương 2 & lt; / h2 & gt;
& lt; h2 id =" 3 "& gt; Chương 3 & lt; / h2 & gt;
& lt; h2 id =" 4 "& gt; Chương 4 & lt; / h2 & gt;

Quy tắc thứ hai cần ghi nhớ là nếu một phần tử được đặt tên ID, thì phần tử đó phải là duy nhất trong một trang. Theo cách đó, bộ chọn ID chỉ chọn một phần tử duy nhất.

Xem Thêm  Hình ảnh nền CSS - Cách thêm URL hình ảnh vào đơn vị của bạn - url hình nền phong cách

Quay lại ví dụ về nhiều h2, giả sử tôi muốn mỗi h2 này có một phong cách khác nhau để gợi ý trực quan cho người đọc khi chương mới bắt đầu. Trong trường hợp đó, tôi sẽ đặt cho mỗi h2 một tên ID duy nhất để tôi có thể sử dụng các bộ chọn ID để áp dụng một bộ giá trị thuộc tính duy nhất cho mỗi.

HTML sau là đúng:

  
& lt; h2 id = "C1" & gt; Chương 1 & lt; / h2 & gt;
& lt; h2 id = " C2 "& gt; Chương 2 & lt; / h2 & gt;
& lt; h2 id =" C3 "& gt; Chương 3 & lt; / h2 & gt;
& lt; h2 id =" C4 "& gt; Chương 4 & lt; / h2 & gt;

Điều này không chính xác:

  
& lt; h2 id = "C4" & gt; Chương 1 & lt; / h2 & gt;
& lt; h2 id = " C4 "& gt; Chương 2 & lt; / h2 & gt;
& lt; h2 id =" C4 "& gt; Chương 3 & lt; / h2 & gt;
& lt; h2 id =" C4 "& gt; Chương 4 & lt; / h2 & gt;

CSS sau sẽ thay đổi kích thước phông chữ của mỗi h2:

  
# C1 {
font-size: 18px;
}
# C2 {< br /> font-size: 20px;
}
# C3 {
font-size: 22px;
}
# C4 {
font-size : 24px;
}

Đây là kết quả:

Xem Bút ký mdWVXKM của Christina Perricone ( @hubspot ) trên CodePen .

Quy tắc cuối cùng cần ghi nhớ khi sử dụng bộ chọn ID là giá trị thuộc tính của bộ chọn ID phải khớp chính xác với tên ID.

Sử dụng HTML từ ví dụ trên, CSS sau sẽ chính xác.

  
# C1 {
font-size: 18px;
}
# C2 {< br /> font-size: 20px;
}
# C3 {
font-size: 22px;
}
# C4 {
font-size : 24px;
}

Điều này sẽ không chính xác:

  
# c1 {
font-size: 18px;
}
# c2 {< br /> font-size: 20px;
}
# c3 {
font-size: 22px;
}
# c4 {
font-size : 24px;
}

Nếu tôi sử dụng CSS này với chữ “c” viết thường, thì các bộ chọn CSS ID và các quy tắc CSS tương ứng của chúng sẽ không được áp dụng. Thay vào đó, kiểu h2 mặc định trong Bootstrap sẽ hiển thị, như hình dưới đây.

Xem Bút ký Cách KHÔNG sử dụng CSS ID [Ví dụ] của Christina Perricone ( @hubspot ) trên CodePen .

Chúng tôi đã đề cập đến các quy tắc sử dụng công cụ chọn ID trong CSS. Bây giờ hãy áp dụng chúng bằng cách sử dụng bộ chọn ID để tạo kiểu cho hình ảnh.

ID hình ảnh CSS

Bạn có thể sử dụng công cụ chọn ID trên các tiêu đề hoặc hình ảnh, nút và các phần tử HTML khác.

Giả sử bạn muốn tạo kiểu cho một hình ảnh cụ thể trên trang của mình. Có thể bạn muốn nó có hình dạng và mức độ mờ khác với các hình ảnh khác trên trang đó. Trong trường hợp đó, bạn có thể sử dụng bộ chọn ID.

Để bắt đầu, bạn sẽ thêm thuộc tính ID vào hình ảnh. Thuộc tính ID này có thể xuất hiện ở bất kỳ đâu bên trong phần tử hình ảnh: trước thuộc tính img src , sau thuộc tính src nhưng trước thuộc tính alt, sau cả img src và thuộc tính alt.

Trong ví dụ dưới đây, tôi sẽ đặt thuộc tính ID “round” trước thuộc tính src và alt trong phần tử hình ảnh thứ hai. Sau đó, tôi sẽ sử dụng công cụ chọn ID để tạo kiểu cho hình ảnh này tròn và mờ 70%.

Xem Thêm  Lập lịch: setTimeout và setInterval - setinterval và settimeout trong javascript

Đây là HTML:

  
& lt; img src = "https://source.unsplash.com/fk4tiMlDFF0/300x200/" alt = "chú cún nhỏ nhất "& gt;
& lt; img id =" round "src =" https://source.unsplash.com/TzjMd7i5WQI/300x200/ "alt =" chú cún nhỏ "& gt;
& lt; img src = "https://source.unsplash.com/-Go4DH2pZbc/300x200/" alt = "chú cún nhỏ nhất nhưng vẫn rất nhỏ" & gt;

Đây là CSS:

  
#round {
border-radius: 50%;
opacity: 0.7;
}

Đây là kết quả:

Xem CSS Image ID của Christina Perricone ( @hubspot ) trên CodePen .

Giờ chúng ta đã hiểu công cụ chọn ID là gì và cách sử dụng công cụ này trong CSS, hãy đảm bảo rằng chúng ta hiểu sự phân biệt giữa lớp và ID trong CSS.

Lớp CSS so với ID

Trong CSS, một lớp được sử dụng để nhóm nhiều phần tử, trong khi ID được sử dụng để xác định một phần tử. Do đó, một bộ chọn lớp được sử dụng để tạo kiểu cho nhiều phần tử HTML của cùng một lớp, trong khi một bộ chọn ID được sử dụng để tạo kiểu cho một phần tử HTML. Bạn có thể nhận ra bộ chọn lớp theo dấu chấm (“.”) Mà nó chứa và bộ chọn ID theo ký tự băm (“#”)

Một điểm khác biệt chính khác giữa bộ chọn lớp và bộ chọn ID là tính cụ thể . Bộ chọn CSS có các cấp độ cụ thể khác nhau, do đó nếu một phần tử HTML được nhắm mục tiêu bởi nhiều bộ chọn, trình duyệt sẽ áp dụng quy tắc CSS của bộ chọn có độ đặc hiệu cao hơn.

Khi so sánh bộ chọn lớp với bộ chọn ID, bộ chọn ID có độ đặc hiệu cao hơn và do đó mạnh mẽ hơn. (Trên thực tế, bộ chọn ID mạnh đến mức chỉ thuộc tính ! Important có thể ghi đè chúng trong CSS.) Điều đó có nghĩa là nếu một phần tử được nhắm mục tiêu bởi bộ chọn ID và bộ chọn lớp, kiểu CSS của bộ chọn ID sẽ được áp dụng cho phần tử thay vì kiểu của bộ chọn lớp.

Hãy xem ví dụ minh họa quy tắc này bên dưới.

Giả sử tôi đang tạo các nút cho trang web Bootstrap của tôi . Mặc dù Bootstrap CSS cung cấp các kiểu được xác định trước cho các nút, tôi sẽ tạo các kiểu tùy chỉnh nên tôi chỉ bắt đầu với mẫu cơ bản nhất, được hiển thị bên dưới.

  
& lt; button type = "button" class = "btn" & gt; Bản sao nút & lt; / button & gt;

Trên toàn bộ trang web của mình, tôi muốn các phần tử nút của mình có màu xanh lam Calypso. Trong trường hợp đó, tôi sẽ sử dụng bộ chọn lớp để xác định tất cả các phần tử trong lớp nút để có màu nền xanh lam (mã màu của mã màu # 00A4BD) và màu phông chữ trắng (#FFFFFF).

Đây là HTML:

  
& lt; button type = "button" class = "btn" & gt; Đăng ký & lt; / button & gt;
& lt; button type = "button" class = "btn" & gt; Đăng ký & lt; / button & gt;

Đây là CSS:

  
.btn {
background-color: # 00A4BD;
color: #FFFFFF;
}

Đây là kết quả:

Xem Bút ký qBrbxwa của Christina Perricone ( @hubspot ) trên CodePen .

Nhưng giả sử tôi muốn nút đăng ký trên trang chủ của mình bắt mắt hơn nữa. Sau đó, tôi có thể sử dụng bộ chọn ID để xác định một nút có ID “trang chủ” và tạo kiểu cho nó có màu nền fuschia và màu phông chữ đen (# 000000). Tất cả các nút không có ID “trang chủ” sẽ vẫn tuân theo quy tắc CSS của bộ chọn lớp (màu nền xanh lam và màu phông chữ trắng).

Xem Thêm  CSS tương đối so với tuyệt đối: Hướng dẫn về các giá trị định vị CSS này - css tương đối so với tuyệt đối

Đây là HTML:

  
& lt; button type = "button" class = "btn" id = "Home" & gt; Đăng ký & lt; / button & gt; < br /> & lt; button type = "button" class = "btn" & gt; Đăng ký & lt; / button & gt;

Đây là CSS:

  
#homepage {
background-color: # FF00FF;
color: # 000000;
}
.btn {
background-color: # 00A4BD;
color: #FFFFFF;
}

Đây là kết quả:

Xem Bút ký CSS Class vs ID [Example] của Christina Perricone ( @hubspot ) trên CodePen . < / p>

Thực hiện các thay đổi chi tiết với Bộ chọn ID CSS

Bộ chọn CSS cho phép bạn kiểm soát sự xuất hiện của các phần tử HTML trên trang web của mình. Với công cụ chọn ID, bạn có thể duy trì kiểm soát chi tiết đối với quy trình và mã tùy chỉnh của mình bằng cách nhắm mục tiêu một phần tử duy nhất trên trang. Để sử dụng bộ chọn này, bạn chỉ cần có kiến ​​thức cơ bản về HTML và CSS.

Ghi chú của người biên tập: Bài đăng này ban đầu được xuất bản vào tháng 5 năm 2020 và đã được cập nhật để có tính toàn diện.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề id truy cập trong css

2022-06-21, HTML, CSS 강좌, 59강, id와 class, 설명

alt

  • Tác giả: 방구석코딩
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 4857 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Selectors trong CSS

  • Tác giả: toidicode.com
  • Đánh giá: 5 ⭐ ( 5169 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau 2 bài lý thuyết về css bài này chúng ta sẽ bắt đầu tìm hiểu về thực hành css. Cụ thể là về selectors

Css Truy cập id img bên trong id div

  • Tác giả: vi.theshuggahpies.com
  • Đánh giá: 3 ⭐ ( 2523 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thứ tự ưu tiên và tối ưu CSS

  • Tác giả: timoday.edu.vn
  • Đánh giá: 5 ⭐ ( 3821 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp cách nhúng CSS vào trang web như InLine, Internal, External, thứ tự ưu tiên của các thẻ mà có cùng CSS. Ngoài ra cũng thảo luận cách để tối ưu CSS.

Cách sử dụng CSS Selector để xác định các phần tử Web trong các kịch bản Selenium

  • Tác giả: itzone.com.vn
  • Đánh giá: 4 ⭐ ( 8867 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Cách tìm ID class trùng lặp và các lỗi CSS

  • Tác giả: www.tips24h.net
  • Đánh giá: 5 ⭐ ( 2954 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm id, thuộc tính css không sử dụng hoặc trùng lặp, lỗi w3c và các đề xuất để sửa lỗi css validator

Cách sử dụng CSS Selector để xác định các phần tử Web trong các kịch bản Selenium

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 2597 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trước khi đi vào chi tiết chúng ta cùng tìm hiểu:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php