Bài tập - Selectors

  • 6 phút

Trong bài tập trước, bạn đã áp dụng kiểu cho các yếu tố như html và h1. Bạn thường xuyên cần phải hẹp hơn một chút trong phong cách áp dụng.

Trong bài tập này, bạn thiết lập kiểu cho các phần và liên kết trải nghiệm và phương tiện truyền thông xã hội trên trang.

Áp dụng kiểu cho các lớp và ID

Bạn bắt đầu bằng cách thiết lập phong cách cho các phần truyền thông xã hội và trải nghiệm.

  1. Quay lại cửa sổ vscode.dev bạn đã sử dụng trong bài tập trước đó.

  2. Bên trong index.html, hãy chú ý phần section tử có ID của phương tiện truyền thông xã hội ở dòng 10; bạn áp dụng style cho phần này để đặt màu thành màu xanh lam.

  3. Ở phần cuối của style.css, hãy thêm CSS sau đây để đặt màu cho phần tử truyền thông xã sau:

    #social-media {
    color: blue;
}

  4. Trang cập nhật, đặt nội dung trong phần mạng xã hội thành màu xanh lam.

  5. Bên trong index.html, chú ý hai phần ở dòng 28 và 32 với trải nghiệm lớp học; Bạn áp dụng kiểu cho các phần này để in nghiêng phông chữ.

  6. Vào cuối của style.css, thêm CSS sau đây để sửa đổi phông chữ cho các thành phần với kinh nghiệm sau lớp:

    .experience {
    font-style: italic;
}

  7. Trang cập nhật, đặt phông chữ bên trong trải nghiệm thành in nghiêng.

Nhiều nhà phát triển web thay đổi màu sắc và kiểu của siêu kết nối trên một trang. Bạn đặt màu cho các liên kết thành màu xanh lá cây và đánh dấu các liên kết khi người dùng di chuột qua chúng.

  1. Ở cuối style.css, hãy thêm CSS sau đây để đặt nối kết luôn có màu xanh lục:

    a:visited {
    color: green;
}

a:link {
    color: green;
}

  2. Trang cập nhật để hiển thị nối kết dưới dạng màu xanh lục.

  3. Thêm CSS sau đây vào cuối style.css để tô sáng các nối kết khi chúng được di chuột qua:

    a:hover {
    background-color: yellow;
}

  4. Di chuột qua các nối kết trên trang và nhận thấy các nối kết được tô sáng.

Xem xét

Ảnh chụp màn hình sau đây hiển thị kết quả của CSS bạn đã áp dụng. Bạn đã sử dụng các lớp học, ID và lớp pseudo để áp dụng kiểu cho các thành phần cụ thể và nhóm thành phần lô-gic.

ảnh chụp màn hình kết xuất trình duyệt của C S được áp dụng cho mã H T M L.