Kể từ khi phát minh ra ngôn ngữ đánh dấu siêu văn bản, HTML, các khái niệm về bố cục và cách trình bày của tài liệu web đã thay đổi đáng kể. Với sự hỗ trợ gần như hoàn chỉnh của các trình duyệt phổ biến cho các tiêu chuẩn biểu định kiểu xếp tầng CSS và CSS2, nó có thể ảnh hưởng đến hầu hết mọi khía cạnh của bản trình bày trực quan của tài liệu. Ví dụ: bạn có thể làm cho nền của một liên kết có màu, được tô bằng một số hình ảnh và cũng có thể thay đổi tùy thuộc vào hành động của người dùng.
Cần thiết
- - khả năng chỉnh sửa văn bản của tài liệu hoặc văn bản của các biểu định kiểu tài liệu;
- - một trình soạn thảo văn bản cho phép bạn lưu tài liệu ở dạng mã hóa ban đầu.
Hướng dẫn
Bước 1
Làm cho nền của liên kết được tô màu ngẫu nhiên đồng nhất bằng cách thêm thông tin kiểu nội tuyến vào phần tử A. Thêm kiểu vào các thuộc tính của phần tử A tương ứng với liên kết có nền bạn muốn thay đổi. Trong nội dung của thuộc tính style, hãy đặt thuộc tính CSS background-color với giá trị đã cho, đây là giá trị nhận dạng chính xác cho màu nền. Ví dụ, nó có thể trông như thế này:
văn bản liên kết
Bước 2
Xác định nền của liên kết trong biểu định kiểu bên ngoài hoặc được nhúng trong tài liệu của bạn. Trong biểu định kiểu thích hợp, hãy thêm một bộ quy tắc được giải quyết bởi một bộ chọn có mức độ cụ thể có thể chấp nhận được. Trong bộ quy tắc, hãy nhập thuộc tính màu nền theo cách tương tự như trong bước trước. Chọn tính cụ thể của bộ chọn dựa trên quy tắc xếp tầng CSS2 và phạm vi mong muốn. Vì vậy, nếu bạn chỉ cần đặt màu cho một liên kết, bạn nên sử dụng bộ chọn ID, nếu có nhiều liên kết như vậy, tốt hơn nên sử dụng bộ chọn thuộc tính dựa trên giá trị lớp.
Ví dụ: để đặt nền xanh cho một liên kết cụ thể trong tài liệu, bạn có thể thêm một bộ quy tắc vào biểu định kiểu:
A # ID_GREEN
{
màu nền: # 00FF00;
}
Bạn cũng nên đặt thuộc tính ID của phần tử A tương ứng với liên kết mong muốn thành ID_GREEN:
văn bản liên kết
Bước 3
Điền vào nền của liên kết bằng một hình ảnh. Thực hiện theo các phương pháp được mô tả trong bước một và bước hai, nhưng thay vì thuộc tính CSS background-color, hãy sử dụng background-image. Ví dụ:
văn bản liên kết
Nếu cần, hãy thêm thuộc tính background-repeat vào bộ quy tắc CSS để xác định các tùy chọn sao chép hình nền theo chiều ngang và chiều dọc.
Bước 4
Làm cho nền của liên kết thay đổi khi bạn di chuột qua nó hoặc khi tiêu điểm di chuyển. Thêm bộ quy tắc vào biểu định kiểu tài liệu bên ngoài hoặc được nhúng để xác định nền của liên kết hoặc nhóm liên kết ở các trạng thái khác nhau. Sử dụng bộ chọn ID và thuộc tính cùng với các lớp giả động: hover,: active và: focus. Ví dụ: để nền của liên kết có giá trị thuộc tính ID là ID_DYNAMIC_BACKGROUND có màu đỏ ở trạng thái không hoạt động và màu xanh lục ở trạng thái nằm dưới con trỏ chuột, các bộ quy tắc sau phải được thêm vào biểu định kiểu:
# ID_DYNAMIC_BACKGROUND
{
màu nền: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: di chuột
{
màu nền: # 00FF00;
}
Bạn có thể làm tương tự để tạo nền với hình ảnh thay đổi động.
