Trong hướng dẫn này, chúng ta sẽ nói về cách tạo kiểu cho các liên kết web thông qua CSS. Liên kết là một phần trung tâm của bất kỳ trang web. Chúng cho phép bạn di chuyển khách truy cập đến các phần khác của nó, tham khảo các nguồn để nhấn mạnh những điểm bạn đang thực hiện, giúp người đọc khám phá các bài đăng trên blog có liên quan hơn, v.v.
Học cách thay đổi thiết kế của chúng cho phép bạn đảm bảo rằng chúng có thể được nhận dạng dưới dạng các liên kết và phù hợp với phần còn lại của trang web của bạn. CSS cung cấp nhiều cách và thuộc tính khác nhau cho điều đó, vì vậy hãy xem qua từng cách một
Tiêu chuẩn liên kết và kiểu liên kết mặc định
Trước khi chúng tôi tìm hiểu cách thực hiện các thay đổi đối với thiết kế liên kết của bạn, trước tiên hãy hiểu cấu trúc của chúng. Đây là phần tử liên kết trông như thế nào trong HTML
TorqueMag
Như bạn có thể thấy, nó bao gồm một số phần
4 – Đây là toán tử để tạo phần tử liên kết. Tại sao#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
5?#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
6 – Bất cứ điều gì trong dấu ngoặc kép là nơi liên kết này trỏ đến. Đó là địa chỉ mà ai đó nhấp vào nó sẽ đến#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
7 – Đây là văn bản liên kết xuất hiện trên trang, đ. g. như thế này [đừng nhấp vào nó, liên kết này không dẫn đến đâu cả]#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
8 – Phần đóng phần tử liên kết và cho trình duyệt biết rằng văn bản liên kết kết thúc tại đây#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
Cho đến nay, rất dễ dàng
Liên kết trông như thế nào theo mặc định
Điều thú vị là khi bạn xem loại liên kết này trông như thế nào trên trang. bạn có thể đã nhìn thấy nó trước đây
Nếu bạn khai báo bất kỳ liên kết cũ nào trong tài liệu HTML và không cung cấp bất kỳ thông tin về kiểu dáng nào, thì nó sẽ có kiểu dáng mặc định
- Văn bản liên kết có màu xanh lam và bản thân liên kết được gạch chân
- Khi bạn di chuột qua nó, con trỏ sẽ chuyển thành biểu tượng bàn tay nhỏ
- Khi bạn nhấp vào nó, nó sẽ chuyển sang màu đỏ trong một giây
- Khi bạn đã truy cập vào liên kết, màu của nó sẽ chuyển sang màu tím
- Khi bạn điều hướng đến liên kết thông qua phím lập bảng trên bàn phím, nó sẽ có đường viền màu xanh xung quanh
Các tiêu chuẩn này được thiết lập từ những ngày đầu của Internet và không thay đổi nhiều kể từ những năm 90. Điều buồn cười là, ngay cả khi bạn chưa bao giờ nghĩ về điều này một cách có ý thức, thì ở một mức độ nào đó, bạn có thể nhận thức được hầu hết những điều trên chỉ bằng cách lướt web.
Tìm hiểu về các trạng thái liên kết
Một điều cũng trở nên rõ ràng ở trên là các liên kết có các trạng thái khác nhau ảnh hưởng đến giao diện của chúng. Bạn có thể nhắm mục tiêu những thứ này bằng các lớp giả CSS khác nhau cho phép bạn tác động đến kiểu dáng riêng của chúng. đó là
5 – Đây là thẻ neo đã nói ở trên. Nó nhắm mục tiêu tất cả các liên kết trong tất cả các giai đoạn#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
0 – Đối với liên kết bình thường, chưa được truy cập. Về mặt kỹ thuật,#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
1 nhắm mục tiêu tất cả các thẻ neo có thuộc tính#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
2. Trong thực tế, nó không được sử dụng nhiều. Nhiều người chỉ đơn giản sử dụng#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
5, vì các thẻ neo không có thuộc tính#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
2 khá hiếm nên thường không cần loại phân biệt này#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
5 – Mô tả một liên kết mà người dùng hiện tại đã truy cập trước đó, nghĩa là nó tồn tại trong lịch sử của trình duyệt#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
6 – Nhắm mục tiêu kiểu dáng hiển thị khi người dùng di con trỏ chuột qua một liên kết#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
7 – Kiểu dáng có thể nhìn thấy ngắn gọn trong thời điểm nhấp vào liên kết#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
8 – Một liên kết được tập trung, e. g. mà người dùng đã điều hướng đến bằng cách sử dụng phím tab.#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
9 và#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
70 thường được tạo kiểu cùng nhau#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
Điều quan trọng cần lưu ý là khi thay đổi kiểu dáng cho nhiều trạng thái liên kết cùng một lúc, bạn phải thực hiện theo thứ tự sau
5#link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb[61, 76, 128]; }
0#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
5#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
8#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
6#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
7#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
Tạo kiểu cho các trạng thái liên kết được xây dựng trên nhau và xếp tầng xuống. Do đó, thứ tự quan trọng để đảm bảo chúng hoạt động như dự kiến
Đáp ứng mong đợi của người dùng
Phần cuối cùng trước khi chúng ta tìm hiểu cách bạn có thể thay đổi kiểu liên kết thông qua CSS, là nói về kỳ vọng của người dùng. Lý do tại sao bạn có thể dễ dàng nhận ra các liên kết mặc định là các liên kết là bởi vì một số mặc định nhất định đã ăn sâu vào chúng ta với tư cách là người dùng trong một thời gian rất dài
Kết quả là, chúng tôi – và mọi người khác – có những kỳ vọng rất rõ ràng về hình thức của các liên kết. Những kỳ vọng, nếu không được đáp ứng, có thể khiến mọi người khó nhận ra các liên kết là gì. Vì lý do đó, khi làm việc với thiết kế trang web của mình, bạn nên làm tốt để đáp ứng những kỳ vọng đó.
Trong điều kiện thực tế có nghĩa là
- Đảm bảo các liên kết được đánh dấu theo một cách nào đó. Màu sắc hoặc gạch chân đều được miễn là bạn làm cho các liên kết nổi bật trên trang. Tránh những thứ như in nghiêng hoặc in đậm
- Cung cấp phản hồi bằng cách thay đổi các liên kết khi được di chuột và, ở mức độ thấp hơn, được nhấp vào [
7, nhớ chứ?]. Bạn cũng không nên lộn xộn với con trỏ biến thành biểu tượng bàn tay để biểu thị một yếu tố tương tác#link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb[61, 76, 128]; } #link-three:focus { background-color: rgb[61, 76, 128]; color: #fff; }
Sau đây, chúng tôi sẽ cho bạn biết cách thay đổi tất cả những điều trên. Tuy nhiên, hãy nhớ rằng bạn nên làm như vậy trong chừng mực để tránh làm phiền người dùng của bạn
Cách thay đổi kiểu văn bản liên kết của bạn qua CSS
Trước tiên hãy nói về cách thay đổi phần văn bản của liên kết vì đó là thứ tạo nên phần cốt lõi của liên kết
Sửa đổi màu văn bản liên kết
Những điều chúng tôi trình bày trong phần này tương đối giống với bài viết của chúng tôi về cách khai báo màu qua CSS. Vì vậy, nếu bạn muốn thực sự đi vào chi tiết, tôi khuyên bạn cũng nên xem bài đăng đó
Bạn có thể thay đổi màu của văn bản liên kết theo nhiều cách khác nhau. từ màu và các hệ thống ký hiệu màu khác nhau như mã HEX,
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
78/#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
79, #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
70/_______271, v.v.#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
Đây là những gì ở trên trông giống như trên trang
Thông thường nhất, bạn sẽ sử dụng thứ gì đó như HEX hoặc
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
78. Sử dụng tên màu là cực kỳ hiếm bên ngoài các trường hợp thử nghiệm đơn giảnHệ thống màu nào bạn sử dụng tùy thuộc vào các yếu tố khác nhau như khả năng tương thích của trình duyệt hoặc bạn có cần độ trong suốt hay không. Tuy nhiên, như bạn có thể thấy, việc gán màu cho các liên kết khá đơn giản thông qua thuộc tính
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
73 và nó hoạt động theo cùng một cách đối với tất cả các trạng thái liên kết khác. Do đó, bạn cũng có thể dễ dàng thay đổi màu văn bản cho #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
74 hoặc #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
75Điều chỉnh màu nền
Bên cạnh việc thay đổi màu văn bản, bạn cũng có thể sửa đổi màu nền của các liên kết và các trạng thái khác nhau của chúng. Điều này dễ dàng như sử dụng thuộc tính
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
76Đây là đánh dấu cho ví dụ trên
#link-one {
background-color: #fadbd8;
color: red;
}
#link-two {
background-color: #f26c2e;
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
#link-three:focus {
background-color: rgb[61, 76, 128];
color: #fff;
}
Các tùy chọn tạo kiểu văn bản khác
Vì các liên kết không là gì ngoài văn bản nên tất cả các cách tạo kiểu văn bản khác trong CSS cũng áp dụng cho chúng. Điều đó có nghĩa là bạn có thể gán các thuộc tính khác cho các liên kết và các trạng thái khác nhau của chúng, đồng thời yêu cầu chúng thay đổi kích thước phông chữ, họ phông chữ hoặc những thứ khác khi người dùng di chuột qua chúng
Điều này có thể có ý nghĩa đối với một số thiết kế nhất định, tuy nhiên, chúng là những cách ít phổ biến hơn để tạo kiểu liên kết thông qua CSS
Đây là đánh dấu để đạt được các hiệu ứng trên
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
7Làm việc với gạch dưới
Như chúng ta đã học lúc đầu, các liên kết được gạch chân theo mặc định. Nếu bạn muốn loại bỏ điều đó, bạn có thể sử dụng
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
77 [đây là cách sử dụng phổ biến nhất của thuộc tính #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
78]#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
7Một số người cũng chỉ thích thêm gạch chân khi di chuột chứ không thích cho liên kết bình thường. Điều này cũng dễ thực hiện
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
0Ngoài ra, bạn có thể sử dụng
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
79 thay vì #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
00 để thêm một dòng dưới các liên kết của mình. Mọi người thường sử dụng điều này vì nó cung cấp các tùy chọn kiểu dáng tốt hơn. Tuy nhiên, ngày nay chúng tôi có các thuộc tính mới cho phương pháp #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
01 tiêu chuẩn cho phép nhiều tùy chỉnh hơnVí dụ:
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
02 cho phép bạn kiểm soát khoảng cách giữa văn bản và dòng bên dưới khi sử dụng #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
78. #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
04 cho phép bạn đặt độ rộng dòng tùy chỉnh. Vì vậy, việc đi theo tuyến đường #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
05 không còn cần thiết như trước đây nữaBên cạnh đó, thực sự có rất nhiều cách bạn có thể làm việc với dòng bên dưới các liên kết, bao gồm cả hoạt ảnh. Bạn có lẽ có thể viết một bài viết khác chỉ về điều đó
Thay đổi kiểu con trỏ khi di chuột
Như chúng ta đã nói, khi bạn di chuột qua một liên kết, con trỏ chuột sẽ thay đổi từ một mũi tên nhỏ thành một bàn tay nhỏ đang trỏ
Hiện tại, đó là dấu hiệu phổ biến cho thấy bạn đang xử lý một phần tử HTML có thể nhấp được. Tuy nhiên, bạn có thể không biết rằng bạn cũng có thể thay đổi con trỏ sang những thứ khác, từ hình chữ thập trên mũi tên thay đổi kích thước sang chỉ báo tải
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
8Nếu bạn tò mò, hãy thử những điều trên trong môi trường phát triển địa phương để xem hiệu quả của chúng. Có rất nhiều lựa chọn khác, mà bạn có thể tìm thấy ở đây
Tuy nhiên, vì con trỏ rất phổ biến nên đây chắc chắn là điều người dùng mong đợi và bạn thường nên gắn bó với nó. Nếu vì lý do nào đó, nó không hoạt động với các liên kết của bạn, bạn có thể sửa nó bằng đoạn mã sau
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
9Thậm chí có thể sử dụng hình ảnh tùy chỉnh nếu bạn muốn sử dụng con trỏ của riêng mình trên trang web của mình. Ví dụ: cửa hàng trực tuyến của Đức về hàng hóa âm nhạc sử dụng con trỏ con trỏ theo chủ đề của riêng họ
Nếu bạn kiểm tra cách họ làm điều đó thông qua các công cụ dành cho nhà phát triển trình duyệt của bạn, bạn sẽ tìm thấy đoạn mã sau
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
0Như bạn có thể thấy, bạn chỉ cần sử dụng con trỏ tùy chỉnh bằng cách cung cấp địa chỉ cho tệp hình ảnh
Thực hiện Thay đổi đối với một. tiêu điểm
Tạo kiểu cho
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
70 là một công cụ hỗ trợ tiếp cận quan trọng, vì vậy hãy đảm bảo rằng nó luôn tồn tại. Theo mặc định, phần tô sáng diễn ra thông qua thuộc tính #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
07, làm cho một hộp xuất hiện xung quanh nóTại sao bạn hỏi
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
07 mà không phải #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
05?Bởi vì _______ 407 không chiếm dung lượng trên trang. Thay vào đó, nó nằm trên nền của phần tử. Bằng cách đó, tập trung vào một liên kết không thay đổi bố cục trang hoặc tương tự
Vì vậy, bạn có những tùy chọn kiểu dáng nào khác cho một liên kết tập trung?
Rất nhiều. Nó lấy mọi thứ từ
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
76 đến #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
73, #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
83, #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
84 , bạn đặt tên cho nó. Đây là cách để đạt được những điều trên
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
0Sử dụng
#link-one {
background-color: #fadbd8;
color: red;
}
#link-two {
background-color: #f26c2e;
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
#link-three:focus {
background-color: rgb[61, 76, 128];
color: #fff;
}
8, về cơ bản bạn có thể làm bất cứ điều gì bạn muốn. Tuy nhiên, một trong những ứng dụng thú vị nhất có thể là bạn cũng có thể đơn giản tùy chỉnh mặc định của trình duyệt bằng thuộc tính #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
07#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
0Đây là những gì ở trên trông giống như trên trang
Liên kết các nút và hộp
Tất nhiên, liên kết không chỉ là liên kết văn bản. Ở một số nơi, chúng thường xuất hiện dưới dạng hộp, chẳng hạn như menu điều hướng, dưới dạng một phần của biểu mẫu hoặc gọi hành động
Điều này không quá khó để đạt được. Về cơ bản, bạn chỉ cần tìm cách thêm khoảng trống xung quanh văn bản liên kết và cung cấp nền hoặc đường viền/đường viền để nó hiển thị dưới dạng nút hoặc hộp. Bên cạnh đó, chúng vẫn là phần tử liên kết giống như chúng tôi đã sử dụng trước đây
Có một số cách để đạt được điều này, từ việc thêm phần đệm vào các hệ thống như flexbox hoặc grid. Dưới đây chỉ là một ví dụ về cách bạn có thể làm điều đó, có nhiều tùy chọn khác
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
1Trong trường hợp này, CSS chứa cả kiểu dáng cho liên kết cũng như vùng chứa chứa liên kết đó. Tất nhiên, bạn có thể sử dụng các trạng thái liên kết giống như trước đây để bao gồm các hành vi khác nhau cho các tình huống khác nhau
Bao gồm các biểu tượng trong liên kết của bạn
Một điều nhanh chóng đáng được giải thích là bạn cũng có khả năng đưa các biểu tượng vào liên kết của mình. Đó là điều mà một số người làm để làm rõ hơn rằng một thứ gì đó là một liên kết ngoài sẽ đưa người dùng ra khỏi trang hiện tại
Đây là cách để làm điều đó. Đầu tiên là HTML
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
2Sau đó, CSS
#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
3#link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
87 chỉ nhắm mục tiêu các thẻ neo có địa chỉ bắt đầu bằng #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
88 trong #link-one {
color: red;
}
#link-two {
color: #3af278;
}
#link-three {
color: rgb[61, 76, 128];
}
6. Đối với những thứ đó, đánh dấu thêm một hình nền, đó là biểu tượng, đặt nó thành không lặp lại, di chuyển nó sang bên phải và căn giữa nó theo chiều dọc. Phần còn lại của đánh dấu xác định kích thước biểu tượng và tạo một chút khoảng cách giữa nó và văn bảnSuy nghĩ cuối cùng. Tạo kiểu CSS cho liên kết
Thay đổi kiểu liên kết thông qua CSS không khó lắm khi bạn có kiến thức cơ bản. Phần quan trọng nhất là hiểu rằng chúng đảm nhận các trạng thái khác nhau được nhắm mục tiêu bởi các toán tử và lớp giả khác nhau. Sau đó, chỉ cần sử dụng các thuộc tính CSS phổ biến để thay đổi thiết kế của chúng thành bất kỳ thứ gì bạn muốn. Bây giờ bạn có tất cả thông tin bạn cần để bắt đầu
Cách yêu thích của bạn để tạo kiểu liên kết thông qua CSS là gì?