Id css img

cú pháp

#idname{ CSS-Property: value; ....................... }
Để sử dụng bộ chọn ID trong CSS
Chúng tôi đặt dấu thăng (#) theo sau là ID của phần tử
Sau đó, đặt các thuộc tính kiểu mà chúng tôi muốn áp dụng cho phần tử trong dấu ngoặc nhọn
Ví dụ
/* The element with id="box" */
#box {
  border: 2px solid blue;
}

Sự định nghĩa

Bộ chọn ID CSS chọn một phần tử duy nhất trong trang HTML nếu nó có một thuộc tính được gọi là ID, có giá trị khớp với giá trị được chỉ định trong bộ chọn

Cách sử dụng ID trong CSS?

Có một số quy tắc chúng ta phải ghi nhớ khi sử dụng bộ chọn id để tạo kiểu cho các thành phần HTML của mình

• Quy tắc đầu tiên chúng ta nên tuân thủ khi sử dụng thuộc tính ID là nó phải chứa ít nhất một ký tự và không thể bắt đầu bằng một số
• Quy tắc thứ hai cần ghi nhớ là nếu một phần tử có tên ID thì nó phải là duy nhất trong một trang
• Quy tắc cuối cùng 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

Bây giờ, hãy áp dụng các quy tắc này để tạo kiểu cho các phần tử HTML

Ví dụ

• chúng tôi sẽ phong cách của chúng tôi

  Vàcác phần tử sử dụng bộ chọn ID

• Xem xét tất cả các quy tắc trên, chúng tôi sẽ gán ID duy nhất cho từng phần tử

• ID tiêu đề chọn

  phần tử trong khi id nội dung tạo kiểu choyếu tố

HTML

    
    
    
    CSS ID selector
    



    

        
Learning CSS ID selector
        
The CSS id selector selects a unique element in an HTML page if it has an attribute called id, whose value matches the value specified in the selector.




    




CSS
Chúng tôi đặt tiền tố ID bằng ký hiệu pound (#) và chỉ định các thuộc tính CSS mà chúng tôi muốn tạo kiểu
Giá trị của bộ chọn ID khớp với giá trị của ID được chỉ định. Do đó, chúng ta có thể tùy chỉnh các yếu tố
/* Styling the container  */
div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    width: 50%;
    margin: 5rem auto;
    flex-direction: column;
    border-radius: 10px;
}

/* Using the id selector to style the 
 element  */
#heading {
    font-size: 2.5rem;
    color: rgb(211, 211, 243);
    text-align: center;
    padding: 2rem;
    border: 2px solid yellow;
    border-radius: 10px;
}

/* Using the id selector to style the  element */
#content {
    font-size: 2rem;
    text-align: justify;
    color: rgb(167, 237, 237);
    padding: 2rem;
}
đầu ra

ID hình ảnh CSS

Chúng ta có thể sử dụng bộ chọn ID trên các thành phần HTML khác nhau, chẳng hạn như tiêu đề, hình ảnh, nút, v.v.

Chẳng hạn, hãy tạo kiểu cho một hình ảnh cụ thể. Chúng tôi muốn sử dụng các hình dạng, đường viền và độ mờ khác nhau cho mỗi hình ảnh. Trong trường hợp như vậy, chúng ta có thể thực hiện việc này bằng cách sử dụng bộ chọn ID

Ví dụ

HTML

• Ở đây, chúng tôi có ba hình ảnh
• Chúng tôi sẽ chỉ định ID duy nhất cho mỗi hình ảnh

Ghi chú. Chúng ta cần chỉ định ID trước thuộc tính alt trong thẻ img

    
    
    
    CSS Image ID
    



    
CSS Image ID

    

    

    





CSS
Chúng tôi sẽ làm cho hình ảnh đầu tiên được làm tròn bằng cách sử dụng bộ chọn id
Chúng tôi sẽ thêm một đường viền xung quanh hình ảnh thứ hai
Chúng tôi sẽ thêm độ mờ cho cái cuối cùng
h2 {
    text-align: center;
    font-size: 2rem;
}

img {
    width: 400px;
    height: 300px;
    margin: 2.5rem;
}


/* Styling the image 1 */

#img1 {
    border-radius: 100%;
}


/* Styling the image 2 */

#img2 {
    border-radius: 15px;
    border: 10px double black;
    padding: 0.5rem;
}


/* Styling the image 3 */

#img3 {
    box-shadow: rgb(0 0 0 / 25%) 0px 5px 10px 2px;
    opacity: 0.8;
}
đầu ra
Hãy để chúng tôi hiểu sự khác biệt giữa một lớp và bộ chọn id trong CSS

Sự khác biệt giữa Bộ chọn Lớp và ID

Class SelectorId selectorBộ chọn lớp chọn các phần tử HTML với một thuộc tính lớp cụ thể. Bộ chọn id chọn một phần tử HTML có ID duy nhất. Chúng ta có thể áp dụng một lớp cho các phần tử khác nhau. ID là duy nhất trên một trang và chúng tôi chỉ có thể áp dụng nó cho một phần tử cụ thể. Chúng ta có thể đính kèm nhiều bộ chọn lớp vào một phần tử. Chúng tôi chỉ có thể đính kèm một bộ chọn ID vào một phần tử. Một lớp học bắt đầu với một. biểu tượng theo sau bởi tên của nó. ID bắt đầu bằng ký hiệu # theo sau là một tên duy nhất. cú pháp. . lớp { thuộc tính css. }Cú pháp. #id{ thuộc tính css. }

Khi nào nên sử dụng Lớp học

Chúng ta nên sử dụng các lớp khi phong cách của chúng ta cần được áp dụng nhiều lần trên cùng một trang. Ví dụ: chúng ta có thể sử dụng bộ chọn lớp để tạo kiểu cho đoạn văn, liên kết, nút, hộp nhập liệu, v.v.

Khi nào nên sử dụng ID

• Chúng ta nên sử dụng ID cho các thành phần đơn lẻ chỉ xuất hiện trên trang một lần hoặc chúng ta cần một mã định danh duy nhất cho thành phần đó
• Ví dụ: chúng ta có thể sử dụng ID để tạo kiểu cho đầu trang, chân trang, menu, v.v.
• Chúng ta cũng có thể sử dụng bộ chọn ID để thao tác DOM (mô hình đối tượng tài liệu)

tính tương thích của trình duyệt web

Các trình duyệt sau hỗ trợ bộ chọn CSS ID

Phiên bản trình duyệtGoogle Chrome1. 0Safari1Mozilla Firefox1Microsoft Edge12. 0Opera9. 5Chrome Android18Firefox dành cho Android4Opera Android10. 1Safari trên iOS1Samsung Internet1. 0WebXem Android37

Làm cách nào để sử dụng img id trong CSS?

IMG có thể có ID không?

Cách khai báo id trong CSS?

Làm cách nào để thêm img src trong CSS?