Hướng dẫn what is styling links in css? - liên kết tạo kiểu trong css là gì?

Hãy xem xét một số liên kết

Chúng tôi đã xem xét cách các liên kết được thực hiện trong HTML của bạn theo các thực tiễn tốt nhất trong việc tạo các siêu liên kết. Trong bài viết này, chúng tôi sẽ xây dựng dựa trên kiến ​​thức này, cho bạn thấy những thực tiễn tốt nhất để tạo kiểu cho chúng.

Liên kết trạng thái

Điều đầu tiên cần hiểu là khái niệm về trạng thái liên kết-các trạng thái khác nhau mà các liên kết có thể tồn tại. Chúng có thể được tạo kiểu bằng cách sử dụng các lớp giả khác nhau:

• Liên kết: Một liên kết có đích (nghĩa là, không chỉ là một mỏ neo có tên), được tạo kiểu bằng lớp giả

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  1.: A link that has a destination (i.e., not just a named anchor), styled using the

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  1 pseudo class.
• Đã truy cập: Một liên kết đã được truy cập (tồn tại trong lịch sử của trình duyệt), được tạo kiểu bằng cách sử dụng lớp giả

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  2.: A link that has already been visited (exists in the browser's history), styled using the

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  2 pseudo class.
• Hover: Một liên kết được di chuột bởi con trỏ chuột của người dùng, được tạo kiểu bằng lớp giả

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  3.: A link that is hovered over by a user's mouse pointer, styled using the

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  3 pseudo class.
• Trọng tâm: Một liên kết được tập trung (ví dụ: được chuyển sang người dùng bàn phím bằng cách sử dụng phím tab hoặc một cái gì đó tương tự hoặc tập trung theo chương trình bằng cách sử dụng

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  4) - điều này được tạo kiểu bằng cách sử dụng lớp giả

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  5.: A link that is focused (e.g., moved to by a keyboard user using the Tab key or something similar, or programmatically focused using

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  4) — this is styled using the

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  5 pseudo class.
• Hoạt động: Một liên kết được kích hoạt (ví dụ: nhấp vào), được tạo kiểu bằng lớp giả

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  6.: A link that is activated (e.g., clicked on), styled using the

  p {
    font-size: 2rem;
    text-align: center;
  }
  

  6 pseudo class.

Kiểu mặc định

Ví dụ sau đây minh họa những gì một liên kết sẽ hoạt động theo mặc định (CSS đang mở rộng và tập trung văn bản để làm cho nó nổi bật hơn).

<p><a href="#">A simple linka>p>

p {
  font-size: 2rem;
  text-align: center;
}

Lưu ý: Tất cả các liên kết trong các ví dụ trên trang này là các liên kết giả - một

p {
  font-size: 2rem;
  text-align: center;
}

p {
  font-size: 2rem;
  text-align: center;
}

p {
  font-size: 2rem;
  text-align: center;
}

p {
  font-size: 2rem;
  text-align: center;
}

Bạn sẽ nhận thấy một vài điều khi bạn khám phá các kiểu mặc định:

• Liên kết được gạch chân.
• Các liên kết không được chú ý là màu xanh.
• Liên kết truy cập là màu tím.
• Di chuột một liên kết làm cho con trỏ chuột thay đổi thành một biểu tượng tay nhỏ.
• Các liên kết tập trung có một phác thảo xung quanh chúng - bạn sẽ có thể tập trung vào các liên kết trên trang này với bàn phím bằng cách nhấn phím tab. .
• Liên kết hoạt động là màu đỏ. Hãy thử giữ nút chuột trên liên kết khi bạn nhấp vào nó.

Thật thú vị, các kiểu mặc định này gần giống như chúng đã trở lại trong những ngày đầu của các trình duyệt vào giữa những năm 1990. Điều này là do người dùng biết và đã mong đợi hành vi này - nếu các liên kết được tạo kiểu khác nhau, nó sẽ gây nhầm lẫn cho rất nhiều người. Điều này không có nghĩa là bạn không nên tạo kiểu liên kết. Nó chỉ có nghĩa là bạn không nên đi lạc quá xa hành vi mong đợi. Ít nhất bạn nên:

• Sử dụng gạch chân cho các liên kết, nhưng không phải cho những thứ khác. Nếu bạn không muốn nhấn mạnh các liên kết, ít nhất là làm nổi bật chúng theo một cách khác.
• Làm cho chúng phản ứng theo một cách nào đó khi lơ lửng/tập trung, và theo một cách hơi khác khi được kích hoạt.

Các kiểu mặc định có thể được tắt/thay đổi bằng các thuộc tính CSS sau:

• p {
    font-size: 2rem;
    text-align: center;
  }
  

  9 cho màu văn bản.

• a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  0 Đối với kiểu con trỏ chuột - Bạn không nên tắt điều này trừ khi bạn có lý do rất chính đáng.

• a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  1 cho phác thảo văn bản. Một phác thảo tương tự như một biên giới. Sự khác biệt duy nhất là một đường viền chiếm không gian trong hộp và một phác thảo không; Nó chỉ ngồi trên đỉnh của nền. Đề cương là một hỗ trợ truy cập hữu ích, vì vậy không nên được xóa mà không thêm một phương thức khác để chỉ ra liên kết tập trung.

Lưu ý: Bạn không chỉ giới hạn các thuộc tính trên để tạo kiểu liên kết của bạn - bạn có thể tự do sử dụng bất kỳ thuộc tính nào bạn thích. You are not just limited to the above properties to style your links — you are free to use any properties you like.

Tạo kiểu một số liên kết

Bây giờ chúng tôi đã xem xét các trạng thái mặc định trong một số chi tiết, hãy xem xét một tập hợp các kiểu liên kết điển hình.

Để bắt đầu, chúng tôi sẽ viết ra các quy tắc trống của chúng tôi:

a {
}

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

Thứ tự này rất quan trọng vì các kiểu liên kết được xây dựng trên nhau. Ví dụ, các kiểu trong quy tắc đầu tiên sẽ áp dụng cho tất cả các kiểu tiếp theo. Khi một liên kết được kích hoạt, nó cũng thường lơ lửng. Nếu bạn đặt những thứ này theo thứ tự sai và bạn đang thay đổi các thuộc tính tương tự trong mỗi quy tắc, mọi thứ sẽ không hoạt động như bạn mong đợi. Để ghi nhớ thứ tự, bạn có thể thử sử dụng một mnemon như tình yêu sợ hãi.LoVe Fears HAte.

Bây giờ chúng ta hãy thêm một số thông tin để có được kiểu này đúng cách:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

Chúng tôi cũng sẽ cung cấp một số HTML mẫu để áp dụng CSS cho:

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
  <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
p>

Đặt hai người lại với nhau cho chúng ta kết quả này:

Vậy chúng ta đã làm gì ở đây? Điều này chắc chắn trông khác với kiểu dáng mặc định, nhưng nó vẫn cung cấp trải nghiệm đủ quen thuộc để người dùng biết những gì đang diễn ra:

• Hai quy tắc đầu tiên không thú vị cho cuộc thảo luận này.
• Quy tắc thứ ba sử dụng bộ chọn

  a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  2 để loại bỏ bản gạchu văn bản mặc định và phác thảo tập trung (dù sao cũng thay đổi giữa các trình duyệt) và thêm một lượng nhỏ đệm cho mỗi liên kết - tất cả điều này sẽ trở nên rõ ràng sau này.
• Tiếp theo, chúng tôi sử dụng các bộ chọn

  a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  3 và

  a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  4 để đặt một vài biến thể màu trên các liên kết không được truy cập và không được truy cập, vì vậy chúng là khác biệt.
• Hai quy tắc tiếp theo sử dụng

  a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  5 và

  a {
  }
  
  a:link {
  }
  
  a:visited {
  }
  
  a:focus {
  }
  
  a:hover {
  }
  
  a:active {
  }
  

  6 để đặt các liên kết tập trung và lơ lửng để có các màu nền khác nhau, cộng với một gạch chân để làm cho liên kết nổi bật hơn nữa. Hai điểm cần lưu ý ở đây là:
  • Việc gạch chân đã được tạo ra bằng cách sử dụng

    a {
    }
    
    a:link {
    }
    
    a:visited {
    }
    
    a:focus {
    }
    
    a:hover {
    }
    
    a:active {
    }
    

    7, không phải

    a {
    }
    
    a:link {
    }
    
    a:visited {
    }
    
    a:focus {
    }
    
    a:hover {
    }
    
    a:active {
    }
    

    8 - một số người thích điều này vì cái trước có các tùy chọn kiểu dáng tốt hơn so với cái sau. Nó cũng được rút ra thấp hơn một chút để nó không cắt ngang các hậu duệ của từ được gạch chân (ví dụ: đuôi trên G và Y).
  • Giá trị

    a {
    }
    
    a:link {
    }
    
    a:visited {
    }
    
    a:focus {
    }
    
    a:hover {
    }
    
    a:active {
    }
    

    7 đã được đặt là

    body {
      width: 300px;
      margin: 0 auto;
      font-size: 1.2rem;
      font-family: sans-serif;
    }
    
    p {
      line-height: 1.4;
    }
    
    a {
      outline: none;
      text-decoration: none;
      padding: 2px 1px 0;
    }
    
    a:link {
      color: #265301;
    }
    
    a:visited {
      color: #437a16;
    }
    
    a:focus {
      border-bottom: 1px solid;
      background: #bae498;
    }
    
    a:hover {
      border-bottom: 1px solid;
      background: #cdfeaa;
    }
    
    a:active {
      background: #265301;
      color: #cdfeaa;
    }
    

    0, không có màu được chỉ định. Làm điều này làm cho biên giới áp dụng cùng màu với văn bản của phần tử, rất hữu ích trong các trường hợp như thế này mà văn bản có màu khác nhau trong mỗi trường hợp.
• Cuối cùng,

  body {
    width: 300px;
    margin: 0 auto;
    font-size: 1.2rem;
    font-family: sans-serif;
  }
  
  p {
    line-height: 1.4;
  }
  
  a {
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
  }
  
  a:link {
    color: #265301;
  }
  
  a:visited {
    color: #437a16;
  }
  
  a:focus {
    border-bottom: 1px solid;
    background: #bae498;
  }
  
  a:hover {
    border-bottom: 1px solid;
    background: #cdfeaa;
  }
  
  a:active {
    background: #265301;
    color: #cdfeaa;
  }
  

  1 được sử dụng để cung cấp cho các liên kết một bảng màu đảo ngược trong khi chúng đang được kích hoạt, để làm rõ điều gì đó quan trọng đang xảy ra!

Học tập tích cực: Phong cách liên kết của riêng bạn

Trong phiên học tập tích cực này, chúng tôi muốn bạn thực hiện bộ quy tắc trống của chúng tôi và thêm các tuyên bố của riêng bạn để làm cho các liên kết trông thực sự tuyệt vời. Sử dụng trí tưởng tượng của bạn, đi hoang. Chúng tôi chắc chắn rằng bạn có thể đưa ra một cái gì đó mát hơn và hoạt động như ví dụ của chúng tôi ở trên.

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại nó bằng nút đặt lại. Nếu bạn thực sự bị mắc kẹt, hãy nhấn nút Hiển thị giải pháp để chèn ví dụ chúng tôi đã hiển thị ở trên.

<div
  class="body-wrapper"
  style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Inputh2>
  <textarea
    id="code"
    class="html-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
<p>There are several browsers available, such as <a href="#">Mozilla
 Firefoxa>, <a href="#">Google Chromea>, and
<a href="#">Microsoft Edgea>.p>textarea>

  <h2>CSS Inputh2>
  <textarea
    id="code"
    class="css-input"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}
  textarea>

  <h2>Outputh2>
  <div
    class="output"
    style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">div>
  <div class="controls">
    <input
      id="reset"
      type="button"
      value="Reset"
      style="margin: 10px 10px 0 0;" />
    <input
      id="solution"
      type="button"
      value="Show solution"
      style="margin: 10px 0 0 10px;" />
  div>
div>

const htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
const htmlCode = htmlInput.value;
const cssCode = cssInput.value;
const output = document.querySelector(".output");
const solution = document.getElementById("solution");

const styleElem = document.createElement("style");
const headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", () => {
  htmlInput.value = htmlCode;
  cssInput.value = `p {
  font-size: 1.2rem;
  font-family: sans-serif;
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}`;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Bao gồm các biểu tượng trên các liên kết

Một thực tế phổ biến là bao gồm các biểu tượng trên các liên kết để cung cấp thêm một chỉ số về loại nội dung mà liên kết trỏ đến. Chúng ta hãy xem một ví dụ thực sự đơn giản thêm một biểu tượng vào các liên kết bên ngoài (các liên kết dẫn đến các trang web khác). Một biểu tượng như vậy thường trông giống như một mũi tên nhỏ chỉ ra khỏi một hộp. Đối với ví dụ này, chúng tôi sẽ sử dụng ví dụ tuyệt vời này từ icons8.com.

Chúng ta hãy xem xét một số HTML và CSS sẽ cho chúng ta hiệu ứng chúng ta muốn. Đầu tiên, một số HTML đơn giản đến kiểu:

<p>
  For more information on the weather, visit our <a href="#">weather pagea>,
  look at <a href="https://en.wikipedia.org/">weather on Wikipediaa>, or check
  out
  <a href="https://www.nationalgeographic.org/topics/resource-library-weather/">
    weather on National Geographic
  a>.
p>

Tiếp theo, CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus,
a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href^="http"] {
  background: url("external-link-52.png") no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

Vậy chuyện gì đang xảy ra ở đây? Chúng tôi sẽ bỏ qua hầu hết các CSS, vì đó chỉ là cùng một thông tin bạn đã xem xét trước đây. Tuy nhiên, quy tắc cuối cùng rất thú vị: Chúng tôi đang chèn một hình ảnh nền tùy chỉnh trên các liên kết bên ngoài theo cách tương tự như cách chúng tôi xử lý các viên đạn tùy chỉnh trên các mục danh sách trong bài viết trước. Tuy nhiên, lần này, chúng tôi đang sử dụng tốc ký

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

Chúng tôi cũng sử dụng

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

Cuối cùng, chúng tôi đặt một số

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

Một từ cuối cùng: Làm thế nào chúng ta chọn chỉ các liên kết bên ngoài? Chà, nếu bạn đang viết liên kết HTML của mình đúng cách, bạn chỉ nên sử dụng URL tuyệt đối cho các liên kết bên ngoài - sẽ hiệu quả hơn khi sử dụng các liên kết tương đối để liên kết đến các phần khác của trang web của bạn (như với liên kết đầu tiên). Do đó, văn bản "http" chỉ nên xuất hiện trong các liên kết bên ngoài (như tên thứ hai và thứ ba) và chúng ta có thể chọn điều này với bộ chọn thuộc tính:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

À chính nó đấy. Hãy thử xem lại phần học tập tích cực ở trên và thử kỹ thuật mới này!

Lưu ý: Các giá trị

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
  <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
p>

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437a16;
}

a:focus {
  border-bottom: 1px solid;
  background: #bae498;
}

a:hover {
  border-bottom: 1px solid;
  background: #cdfeaa;
}

a:active {
  background: #265301;
  color: #cdfeaa;
}

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
  <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
p>

Liên kết kiểu dáng như các nút

Các công cụ bạn đã khám phá cho đến nay trong bài viết này cũng có thể được sử dụng theo những cách khác. Ví dụ, các trạng thái như Hover có thể được sử dụng để tạo kiểu cho nhiều yếu tố khác nhau, không chỉ các liên kết - bạn có thể muốn tạo kiểu cho trạng thái di chuột của các đoạn văn, các mục trong danh sách hoặc những thứ khác.

Ngoài ra, các liên kết khá phổ biến được tạo kiểu để nhìn và cư xử như các nút trong một số trường hợp nhất định. Một menu điều hướng trang web có thể được đánh dấu là một tập hợp các liên kết và điều này có thể được tạo kiểu để trông giống như một bộ nút điều khiển hoặc tab cung cấp cho người dùng quyền truy cập vào các phần khác của trang web. Hãy khám phá cách.

Đầu tiên, một số HTML:

<nav class="container">
  <a href="#">Homea>
  <a href="#">Pizzaa>
  <a href="#">Musica>
  <a href="#">Wombatsa>
  <a href="#">Finlanda>
nav>

Và bây giờ CSS của chúng tôi:

p {
  font-size: 2rem;
  text-align: center;
}

Điều này cho chúng ta kết quả sau:

HTML xác định phần tử

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
  <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
p>

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
  <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
p>

<p>
  There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
  <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
p>

CSS bao gồm kiểu dáng cho container và các liên kết mà nó chứa.

• Quy tắc thứ hai nói:
  • Container là một flexbox. Các mục nó chứa - các liên kết, trong trường hợp này - sẽ là các mục Flex.
  • Khoảng cách giữa các mục Flex sẽ là

    <p>
      There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
      <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
    p>
    

    4 chiều rộng của container.
• Quy tắc thứ ba kiểu các liên kết:
  • Tuyên bố đầu tiên,

    <p>
      There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
      <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
    p>
    

    5, có nghĩa là chiều rộng của các mục sẽ được điều chỉnh để chúng sử dụng tất cả không gian có sẵn trong container.
  • Tiếp theo, chúng tôi tắt mặc định

    a {
    }
    
    a:link {
    }
    
    a:visited {
    }
    
    a:focus {
    }
    
    a:hover {
    }
    
    a:active {
    }
    

    8 và

    a {
    }
    
    a:link {
    }
    
    a:visited {
    }
    
    a:focus {
    }
    
    a:hover {
    }
    
    a:active {
    }
    

    1 - chúng tôi không muốn những người làm hỏng cái nhìn của chúng tôi.
  • Ba khai báo cuối cùng là tập trung văn bản bên trong mỗi liên kết, đặt

    <p>
      There are several browsers available, such as <a href="#">Mozilla Firefoxa>,
      <a href="#">Google Chromea>, and <a href="#">Microsoft Edgea>.
    p>
    

    8 thành 3 để cung cấp cho các nút một số chiều cao (cũng có lợi thế là trung tâm văn bản theo chiều dọc) và đặt màu văn bản thành màu đen.

Bản tóm tắt

Chúng tôi hy vọng bài viết này đã cung cấp cho bạn tất cả những gì bạn cần biết về các liên kết - bây giờ! Bài viết cuối cùng trong mô -đun văn bản kiểu của chúng tôi chi tiết cách sử dụng phông chữ tùy chỉnh trên trang web của bạn (hoặc phông chữ web, vì chúng được biết đến nhiều hơn).

• Trước
• Tổng quan: văn bản kiểu dáng
• Tiếp theo

Trong mô -đun này