Cách làm cho các liên kết trông giống như css văn bản bình thường

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

• #link-one {
  	color: red;
  }
  
  #link-two {
  	color: #3af278;
  }
  
  #link-three {
  	color: rgb(61, 76, 128);
  }

  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

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

1. 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
2. Khi bạn di chuột qua nó, con trỏ sẽ chuyển thành biểu tượng bàn tay nhỏ
3. Khi bạn nhấp vào nó, nó sẽ chuyển sang màu đỏ trong một giây
4. 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
5. 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à

• #link-one {
  	color: red;
  }
  
  #link-two {
  	color: #3af278;
  }
  
  #link-three {
  	color: rgb(61, 76, 128);
  }

  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 {
  	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;
  }

  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 {
  	color: red;
  }
  
  #link-two {
  	color: #3af278;
  }
  
  #link-three {
  	color: rgb(61, 76, 128);
  }

  5, vì các thẻ neo không 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 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 {
  	color: red;
  }
  
  #link-two {
  	color: #3af278;
  }
  
  #link-three {
  	color: rgb(61, 76, 128);
  }

  70 thường được tạo kiểu cùng nhau

Đ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

1. #link-one {
   	color: red;
   }
   
   #link-two {
   	color: #3af278;
   }
   
   #link-three {
   	color: rgb(61, 76, 128);
   }

   5

2. #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;
   }

   0

3. #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

4. #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

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;
   }

   6

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

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 (

  #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, 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

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);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#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);
}

Hệ 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);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Đ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);
}

Đâ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);
}

Là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);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Mộ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);
}

Ngoài ra, bạn có thể sử dụng

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Ví dụ:

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Bê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);
}

Nế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);
}

Thậ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);
}

Như 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);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Tại sao bạn hỏi

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

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);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Đâ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);
}

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;
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#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

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);
}

Trong 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);
}

Sau đó, CSS

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

#link-one {
	color: red;
}

#link-two {
	color: #3af278;
}

#link-three {
	color: rgb(61, 76, 128);
}

Suy 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ì?