Hướng dẫn gọi id trong css

Trong CSS, ID được sử dụng để định kiểu cho phần tử với id được chỉ định. ID thường được dùng cho các đối tượng nào là duy nhất trong website, mỗi tên id chỉ được đặt duy nhất cho một phần tử.

Để khai báo ID trong CSS, ta dùng cú pháp sau:

#ten_id {
định dạng các thuộc tính CSS
}

Ví dụ:

#quantrimang {
background-color: black;
color: white;
font-size: 30px;

Trong HTML, ID nằm trong thể mở của tag HTML với cú pháp: id=ten_id.

Ví dụ:

Website Quản Trị Mạng

Lưu ý:

• ID có thể dùng với bất kì phần tử HTML nào.
• Tên ID chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới _, dấu gạch nối -. Tên ID không nên bắt đầu bằng chữ số
• Giá trị ID có phân biệt chữ thường và chữ hoa.
• Giá trị ID phải chứa ít nhất 1 kí tự và không chứa khoảng trắng.

Ví dụ:

LÀNG CÔNG NGHỆ
CÔNG NGHỆ
KHOA HỌC - CUỘC SỐNG

Kết quả:

Xem thêm:

• Học CSS Cơ bản
• Học CSS Nâng cao

Đặt vấn đề

Ví dụ, tôi có một đoạn mã như sau:

    
WEB CƠ BẢN 1
    
WEB CƠ BẢN 2
    
WEB CƠ BẢN 3

Để định dạng cho phần tử chứa nội dung "WEB CƠ BẢN 2" có nền màu đen, chữ màu trắng, kích cỡ 30px thì đoạn mã sẽ trở thành:

    


    
WEB CƠ BẢN 1
    
WEB CƠ BẢN 2
    
WEB CƠ BẢN 3

Xem ví dụ

Tuy nhiên, nếu làm như thế thì phần tử chứa nội dung "WEB CƠ BẢN 1 & 3" cũng bị thay đổi theo.

Từ đây, chúng ta có một giải pháp để XÁC ĐỊNH CỤ THỂ phần tử muốn định dạng, chính là dùng thuộc tính id và thuộc tính class.

Thuộc tính id

Thuộc tính id dùng để đặt tên cho phần tử HTML (mỗi tên id chỉ được đặt duy nhất cho một phần tử)

Để xác định một phần tử HTML bằng tên id, ta sử dụng cú pháp #tên id

Tôi đặt tên cho hai phần tử chứa nội dung 'WEB CƠ BẢN 1' và 'WEB CƠ BẢN 3' lần lượt là 'abc' và 'xyz'

    


    
WEB CƠ BẢN 1
    
WEB CƠ BẢN 2
    
WEB CƠ BẢN 3

Xem ví dụ

Thuộc tính class

Thuộc tính class dùng để đặt tên cho các phần tử HTML muốn có cùng một kiểu định dạng.

Để xác định phần tử HTML bằng tên class, ta sử dụng cú pháp .tên class

Tôi muốn:

• Hai phần tử chứa nội dung 'WEB CƠ BẢN 1 & 3' có cùng định dạng, nên đặt cho chúng tên class là 'abc'
• Ba phần tử chứa nội dung 'WEB CƠ BẢN 5 & 6 & 7' có cùng định dạng, nên đặt cho chúng tên class là 'xyz'

    


    
WEB CƠ BẢN 1
    
WEB CƠ BẢN 2
    
WEB CƠ BẢN 3
    
WEB CƠ BẢN 4
    
WEB CƠ BẢN 5
    
WEB CƠ BẢN 6
    
WEB CƠ BẢN 7

Xem ví dụ

Một phần tử có thể có nhiều class

    


    
WEB CƠ BẢN 1
    
WEB CƠ BẢN 2
    
WEB CƠ BẢN 3

Xem ví dụ