Tin Tức

Thanh điều hướng – Navigation Bar trong CSS

Admin

12/09/2023

Share

thanh dieu huong navigation bar trong css 398203

Thanh điều hướng (Navbar) là gì?

Thanh điều hướng, còn được gọi là thanh navbar, là một phần trong giao diện người dùng (GUI) giúp khách truy cập web xem thông tin trên trang của bạn. Đây là một thành phần quan trọng trên trang web, bao gồm các liên kết đến các phần khác của trang.

Công cụ điều hướng chủ yếu nằm ở phần đầu của trang web dưới dạng danh sách link ngang. Nó có thể được đặt dưới logo hoặc header, nhưng luôn được đặt trước nội dung chính của trang.

Một trang web cần có một hệ thống điều hướng dễ sử dụng để thu hút khách truy cập và giúp họ truy cập vào các phần khác nhau một cách nhanh chóng.

3 thành phần tạo nên thanh điều hướng tốt cho trang web là:

Hầu hết các chủ trang web đều mong muốn có lượng khách truy cập mới đáng kể hàng ngày. Để đạt được điều này, việc đầu tiên cần làm là cung cấp cho người xem một liên kết rõ ràng và chính xác. Bạn nên tạo ra một thanh điều hướng thúc đẩy tính tò mò và hấp dẫn khách truy cập. Dưới đây là ba yếu tố quan trọng bạn nên xem xét khi thiết kế thanh điều hướng HTML:

  • Thanh điều hướng nên được thiết kế gọn gàng và dễ đọc, thay vì lộn xộn với các liên kết tới từng trang. Để trang web trở nên dễ sử dụng, bạn nên tạo ra một danh mục rộng hơn cho trang. Nếu có thể, hãy thêm một menu phụ để tạo ra một menu thả xuống.
  • Tạo sự chú ý: Thanh điều hướng đáp ứng đơn giản không phải làm cho việc trở nên nhàm chán. Bạn nên kết hợp với một màu sắc thương hiệu đã được xác định trước để tạo sự nhất quán trong thiết kế. Bạn có thể thử nghiệm với bảng màu và sử dụng các sắc thái sáng hoặc tối để làm nổi bật và tạo hiệu ứng khi thả xuống menu.
  • Hiện nay, số lượng người dùng truy cập web trên điện thoại di động đã vượt qua số lượng người dùng truy cập bằng máy tính để bàn. Vì vậy, tính đáp ứng của trang web trở nên rất quan trọng, đặc biệt là việc điều hướng trên màn hình nhỏ của điện thoại di động.

    • Có nhiều phương pháp để tạo thanh navbar bằng CSS. Dưới đây là hướng dẫn chi tiết để tạo các loại thanh navbar.

    Có 2 dạng điều hướng thường được sử dụng nhiều nhất.

  • Vertical Navigation – Thanh điều hướng theo chiều dọc.
  • Thanh điều hướng ngang – Thanh điều hướng ngang.
    • Xem nhiều:  T-SQL là gì? So sánh chi tiết T-SQL với SQL và PL/SQLZ.com Cloud VPS – Tốc Độ Cao Khởi Tạo Trong 1 Phút

    Navbar là một thành phần giao diện trên trang web, thường được đặt ở đầu trang và chứa các liên kết hoặc các menu để dẫn dắt người dùng đến các trang hoặc phần tử quan trọng khác của trang web.

    Với CSS, bạn có thể biến các thanh menu tẻ nhạt thành hấp dẫn hơn.

    Xây dựng thanh điều hướng

    Trong bài học này, chúng ta sẽ khám phá nhiều phương pháp khác nhau để tạo ra một navigation. Một trong số đó là sử dụng danh sách và các thẻ <ul> và <li>.

    Ví dụ bạn có thể tạo danh sách chứa các thành phần như trong hình trên.

    ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.

    Kết quả:.

    Xây dựng thanh điều hướng giúp người dùng dễ dàng di chuyển và tìm kiếm thông tin trên trang web, tăng trải nghiệm người dùng và sự thuận tiện trong việc sử dụng trang web.

    Tuy nhiên chúng ta cần xóa bỏ các dấu đầu mục và khoảng cách lề, đệm ra khỏi danh sách.

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    Xây dựng thanh điều hướng giúp người dùng dễ dàng di chuyển và tìm kiếm thông tin trên trang web, tăng trải nghiệm người dùng và sự thuận tiện trong việc sử dụng trang web.

  • Sử dụng list-style-type: none để loại bỏ các ký hiệu đầu mục vì thanh điều hướng không cần ký hiệu này.
  • Thiết lập margin: 0 padding: 0 để loại bỏ thiết lập lề mặc định của trình duyệt.

    • Mã nguồn đầy đủ như sau:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    </style>
    </head>
    <body>
    ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
    </body>
    </html>

    Lưu ý: Đoạn mã này áp dụng cho cả thanh điều hướng theo chiều ngang và theo chiều dọc.

    Thanh điều hướng dọc – Vertical Navigation

    Để tạo một thanh điều hướng dọc, bạn cần thêm đoạn mã sau vào phần tử <a> trong danh sách như ví dụ trên.

    li a {
      display: block;
      width: 60px;
    }
  • Display: block được sử dụng để hiển thị liên kết dưới dạng các phần tử khối, cho phép bạn nhấp chuột vào bất kỳ nơi nào trong khối để mở liên kết (không chỉ là nhấp vào phần văn bản như trước đây).
  • Có thể xác định kích thước ngang, đệm, lề… Nếu muốn.

    • Hơn nữa, bạn có thể đặt độ rộng của cả <ul> và tạo ra kết quả tương tự như trên:.

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 60px;
    }
    Li a { hiển thị: khối;}.

    Ví dụ về thanh điều hướng dọc

    Tạo một thanh điều hướng dọc đơn giản với một màu nền tùy chọn và thay đổi màu nền của đường dẫn khi người dùng di chuột vào.

    Ví dụ về thanh điều hướng dọc giúp người dùng dễ dàng di chuyển và tìm kiếm thông tin trên trang web một cách thuận tiện và nhanh chóng.

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #e9d8f4;
    }
    Li a { hiển thị: khối; màu: trắng; lề: 8px 16px; trang trí văn bản: không gạch chân;}.
    /* Thay đổi màu liên kết khi di chuột qua */
    li a:hover {
      background-color: #db7093;
      font-weight: bold;
      color: white;
    }
    </style>
    </head>
    <body>
    <h2>Thanh điều hướng dọc - Website Quản trị mạng</h2>
    ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
    </body>
    </html>

    URL điều hướng hiện tại đang hoạt động

    Thêm “hoạt động” vào đường dẫn hiện tại để người dùng biết hiện tại họ đang xem mục nào.

    .active {
    background-color: #58257b;
    color: white;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #e9d8f4;
    }
    Li a { hiển thị: khối; màu sắc: #000; đệm: 8px 16px; trang trí văn bản: none;}.
    li a.active {
      background-color: #58257b;
      font-weight: bold;
      color: white;
    }
    li a:hover:not(.active) {
      background-color: #db7093;
      font-weight: bold;
      color: white;
    }
    </style>
    </head>
    <body>
    <h2>Thanh điều hướng dọc - Website Quản trị mạng</h2>
    ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
    </body>
    </html>

    Điều chỉnh đường dẫn và thêm viền (border) cho thanh điều hướng

    Thêm text-align:center vào <li> hoặc <a> để căn chỉnh đường link nằm ở giữa khối.

    Xem nhiều:  Khai tử iPhone là gì? Những dòng iPhone đã bị khai tử [Update 2022)

    Thêm thuộc tính border vào thẻ

      để tạo viền quanh thanh điều hướng. Nếu bạn muốn có đường viền bên trong thanh điều hướng, hãy thêm thuộc tính border-bottom vào tất cả các phần tử

    • trừ phần tử cuối cùng.

      ul {
        border: 1px solid #db7093;
      }
      Li { text-align: center; border-bottom: 1px solid #db7093;}.
      li:last-child {
        border-bottom: none;
      }

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: #e9d8f4;
        border: 1px solid #58257b;
      }
      Li a { hiển thị: khối; màu sắc: #000; đệm: 8px 16px; trang trí văn bản: none;}.
      li {
        text-align: center;
        border-bottom: 1px solid #58257b;
      }
      li:last-child {
        border-bottom: none;
      }
      li a.active {
        background-color: #58257b;
        font-weight: bold;
        color: white;
      }
      li a:hover:not(.active) {
        background-color: #db7093;
        font-weight: bold;
        color: white;
      }
      </style>
      </head>
      <body>
      <h2>Thanh điều hướng dọc - Website Quản trị mạng</h2>
      ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
      </body>
      </html>

      Gắn kích thước chiều cao của thanh điều hướng dọc

      Tạo một thanh điều hướng có kích thước cố định ở phía bên trái.

      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 25%;
        background-color: #f1f1f1;
        height: 100%; /* chiều cao 100% */
        position: fixed; /* cố định thanh điều hướng cả khi cuộn để đọc website */
        overflow: auto; /* nếu nội dung quá dài sẽ có thêm thanh cuộn để xem phần còn lại */
      }

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {
        margin: 0;
      }
      Ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9d8f4; position: fixed; height: 100%; overflow: auto;}.
      li a {
         display: block;
        color: #000;
        padding: 8px 16px;
        text-decoration: none;
      }
      li a.active {
        background-color: #58257b;
        font-weight: bold;
        color: white;
      }
      li a:hover:not(.active) {
        background-color: #db7093;
        font-weight: bold;
        color: white;
      }
      </style>
      </head>
      <body>
      ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
      <div>
        <h2>Giới thiệu về CSS (by: Quantrimang.com)</h2>
          <h3>CSS giúp ích rất nhiều khi viết một trang web bằng HTML.</h3>
            <p><strong>CSS là gì?</strong></p>
            <p>CSS là viết tắt của cụm từ tiếng Anh "Cascading Style Sheet".</p>
            <p>CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương 
            tiện khác.</p>
            <p>CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang 
            trên một website.</p>
            <p>Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .CSS.</p>
            <p><strong>Vì sao nên dùng CSS?</strong></p>
            <p>CSS được dùng để định nghĩa kiểu cách cho các trang trên website của 
            bạn, gồm cả thiết kế, dàn trang và các cách hiển thị khác nhau trên nhiều 
            thiết bị với kích thước màn hình khác nhau.</p>
            <p><strong>CSS giúp giải quyết vấn đề lớn của HTML.</strong></p>
            <p>HTML không có phần tử để để định dạng cho trang web. HTML chỉ được 
            dùng để tạo nội dung cho trang. Khi các phần tử như <font> và thuộc tính 
            màu sắc được thêm vào HTML 3.2, cơn ác mộng của các nhà phát triển web 
            bắt đầu. Việc phát triển một website lớn mà thêm thông tin font hay màu 
            sắc vào từng trang đòi hỏi rất nhiều thời gian.</p>
            <p>Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra 
            CSS, giúp loại bỏ việc định dạng kiểu cách khỏi trang HTML.Các định nghĩa
            liên quan đến kiểu cách được đưa vào tập tin .css và nhờ vào tập tin 
            stylesheet ngoài, bạn có thể thay đổi toàn bộ website chỉ bằng một tập 
            tin duy nhất.</p>
      </div>
      </body>
      </html>

      Lưu ý:.

    • Thanh điều hướng bên cạnh được thiết lập với chiều rộng là 25%, điều này dẫn đến việc phần tử div có lề trái margin-left là 25%. Nếu margin-left không được sử dụng, thanh điều hướng sẽ chồng lên trên phần tử div này.
    • Dùng overflow: auto để thêm một thanh cuộn nếu nội dung quá dài để xem phần dư.
    • Ví dụ này có thể không hoạt động chính xác trên các thiết bị di động.

      • Thanh điều hướng ngang – Thanh điều hướng ngang

      Có 2 cách để tạo một thanh điều hướng theo chiều ngang, đó là sử dụng danh sách dạng inline hoặc float.

      Thanh dẫn hướng ngang

      Áp dụng Inline

      Cách hiển thị các phần tử trên cùng một hàng được gọi là Inline. Để tạo thanh điều hướng ngang, bạn thêm thuộc tính display: inline vào phần tử

    • trong ví dụ tạo thanh điều hướng ở phần đầu bài viết.

      li {
        display: inline;
      }

      Theo cài đặt mặc định, phần tử <li> được xem là một phần tử dạng khối (block). Chúng ta có thể thay đổi thành dạng hiển thị trên một dòng bằng cách đè lên thuộc tính display: inline và loại bỏ các dòng ngắt trước và sau mỗi yếu tố.

      Áp dụng Float

      Có một phương pháp khác để tạo thanh điều hướng ngang là sử dụng thuộc tính float cho các phần tử

    • và định dạng bố cục cho các liên kết điều hướng:.

      Li { dòng: trái;}.
      Một { hiển thị: khối; đệm: 8px; màu nền: #e9d8f4;}.
    • Sử dụng float: left để các phần tử khối nổi kề nhau.
    • Thuộc tính display: block cho phép hiển thị liên kết dưới dạng phần tử khối, cho phép nhấp vào bất kỳ vị trí nào trong khối để mở liên kết. Bạn cũng có thể chỉ định các thuộc tính padding, height, width, margin nếu cần.
    • Các phần tử khối theo mặc định sẽ chiếm toàn bộ chiều rộng của trang web, làm cho chúng không thể float cạnh nhau. Để giải quyết vấn đề này, ta có thể chỉ định một số padding để làm cho chúng hiển thị gọn gàng hơn.
    • Background-color: #e9d8f4: thêm màu nền vào mỗi thành phần (nên thêm vào <ul> thay vì thành phần <a>).
      • <!DOCTYPE html>
      <html>
      <head>
      <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      Li { dòng: trái;}.
      li a {
        display: block;
        padding: 8px;
        background-color: #dddddd;
      }
      </style>
      </head>
      <body>
      ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
      </body>
      </html>

      Một ví dụ về thanh điều hướng ngang

      Tạo một thanh điều hướng ngang đơn giản với một màu nền bất kỳ và thay đổi màu nền của đường dẫn khi người dùng di chuột vào:.

      Một ví dụ về thanh điều hướng ngang là một phần quan trọng của giao diện người dùng, được sử dụng để điều hướng giữa các trang hoặc các phần trong một trang web hoặc ứng dụng. Thanh điều hướng ngang thường được đặt ở phía trên hoặc dưới của trang và chứa các liên kết hoặc biểu tượng để người dùng có thể dễ dàng truy cập và tìm kiếm thông tin.

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      h2 {
        color: #58257b
      }
      Ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #e9d8f4;}.Output: ul { loại danh sách: không; biên tập: 0; lề: 0; tràn: ẩn; màu nền: #e9d8f4;}.
      Li { dòng: trái;}.
      li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover {
        color: white;
        background-color: #db7093;
        font-weight: bold;
      }
      </style>
      </head>
      <body>
      <h2>Thanh điều hướng ngang - Website Quản trị mạng</h2>
      ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
      </body>
      </html>

      URL điều hướng hiện tại đang hoạt động

      Thêm “hoạt động” vào đường dẫn hiện tại để người dùng biết hiện tại họ đang xem mục nào.

      .active {
        background-color: #58257b;
        color: white;
      }

      Tinh chỉnh liên kết điều hướng

      Bạn có thể sử dụng float:right để đẩy một phần tử sang bên phải màn hình theo cách sắp xếp của website.

      <ul>
        <li><a href="https://quantrimang.com/support/about">Giới thiệu</a></li>
        <li><a href="https://quantrimang.com/support/terms">Điều khoản</a></li>
        <li><a href="https://quantrimang.com/support/contact">Liên hệ</a></li>
        <li><a href="https://quantrimang.com/
        support/help">Đăng ký</a></li>
      </ul>

      Phân chia thanh điều hướng bằng cách sử dụng đường viền

      Thêm một viền bên phải cho tất cả các mục trong danh sách, trừ mục cuối cùng, nhằm tạo ra sự phân biệt rõ ràng hơn trong thanh điều hướng.

      li {
        border-right: 1px solid #db7093;
      }
      Li:last-child { border-right: không có;}

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      Ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #e9d8f4;}.Output: ul { loại danh sách: không; biên tập: 0; lề: 0; tràn: ẩn; màu nền: #e9d8f4;}.
      Li { bên trái: trôi; đường viền phải: 1px solid #58257b;}.
      Li:last-child { border-right: không có;}
      li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover:not(.active) {
        color: white;
        background-color: #db7093;
        font-weight: bold;
      }
      .active {
        background-color: #58257b;
        color: white;
        font-weight: bold;
      }
      </style>
      </head>
      <body>
      <ul>
        <li><a href="https://quantrimang.com/support/about">
        Giới thiệu</a></li>
        <li><a href="https://quantrimang.com/support/terms">Điều khoản</a></li>
        <li><a href="https://quantrimang.com/support/contact">Liên hệ</a></li>
        <li><a href="https://quantrimang.com/support/help">
        Đăng ký</a></li>
      </ul>
      </body>
      </html>

      Thanh điều hướng có viền

      ul {
        border: 1px solid #d6b7eb;
        background-color: #e9d8f4;
      }
      Li a { color: #000000;}.

      Thanh điều hướng có viền giúp tạo ra đường viền xung quanh thanh điều hướng, làm nổi bật và tăng tính thẩm mỹ cho giao diện.

      Gắn kết thanh điều hướng

      1. Sử dụng vị trí cố định.

      Đặt thanh điều hướng ở trên hoặc dưới trang web, thậm chí khi người dùng cuộn để xem nội dung.

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {margin:0;}
      Thanh cuộn được đặt ở trên cùng, có chiều rộng 100%, màu nền là #e9d8f4. Mục lục không có dấu hiệu, không có khoảng trống và không có ngắn cách.
      Li { dòng: trái;}.
      li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover:not(.active) {
        color: white;
        background-color: #db7093;
        font-weight: bold;
      }
      .active {
        background-color: #58257b;
        color: white;
        font-weight: bold;
      }
      </style>
      </head>
      <body>
      <ul>
        <li><a href="https://quantrimang.com/">Trang chủ</a></li>
        <li><a href="https://quantrimang.com/lang-cong-nghe">LCN</a></li>
        <li><a href="https://quantrimang.com/cong-nghe">KH</a></li>
        <li><a href="https://quantrimang.com/cuoc-song">CS</a></li>
      </ul>
      <div>
        <h2>Giới thiệu về CSS (by: Quantrimang.com)</h2>
              <p><strong>CSS giúp ích rất nhiều khi viết một trang web bằng HTML.
              </strong></p>
          <h3>CSS là gì?</h3>
            <p>CSS là viết tắt của cụm từ tiếng Anh "Cascading Style Sheet".</p>
            <p>CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương 
            tiện khác.</p>
            <p>CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang 
            trên một website.</p>
            <p>Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .CSS.</p>
          <h3>Vì sao nên dùng CSS?</h3>
            <p>CSS được dùng để định nghĩa kiểu cách cho các trang trên website của 
            bạn, gồm cả thiết kế, dàn trang và các cách hiển thị khác nhau trên 
            nhiều thiết bị với kích thước màn hình khác nhau.</p>
          <h3>CSS giúp giải quyết vấn đề lớn của HTML.</h3>
            <p>HTML không có phần tử để để định dạng cho trang web. HTML chỉ được 
            dùng để tạo nội dung cho trang. Khi các phần tử như <font> và thuộc tính 
            màu sắc được thêm vào HTML 3.2, cơn ác mộng của các nhà phát triển web 
            bắt đầu.</p>
            <p>Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra 
            CSS, giúp loại bỏ việc định dạng kiểu cách khỏi trang HTML.</p>
      </div>
      </body>
      </html>

      2. Sử dụng vị trí dính.

      Khi sử dụng thuộc tính này, menu ban đầu vẫn có thể di chuyển linh hoạt đến một vị trí cố định và bám vào đó.

      ul {
        position: -webkit-sticky; /* áp dụng với Safari */
        position: sticky;
        top: 0;
      }

      Gắn kết thanh điều hướng là một tính năng trên giao diện người dùng của một trang web hoặc ứng dụng, được sử dụng để giúp người dùng dễ dàng điều hướng và tìm kiếm thông tin trên trang web hoặc ứng dụng đó. Thanh điều hướng thường nằm ở phía trên hoặc dưới trang web và chứa các liên kết hoặc menu con để người dùng có thể điều hướng đến các trang khác hoặc các phần khác nhau của trang web hoặc ứng dụng.

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      body {margin:0;}
      Div { lề:10px}.
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #e9d8f4;
        position: fixed;
        top: 0;
        position: sticky;
        width: 100%;
      }
      Li { dòng: trái;}.
      li a {
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }
      li a:hover:not(.active) {
        color: white;
        background-color: #db7093;
        font-weight: bold;
      }
      .active {
        background-color: #58257b;
        color: white;
        font-weight: bold;
      }
      </style>
      </head>
      <body>
      <div>
        <h2>Website Quản trị mạng</h2>
          <p>Kiến thức - Kinh nghiệm - Hỏi đáp</p>
      </div>
      ≪ul> <li><a href="https://quantrimang.Com/">Trang chủ</a></li> <li><a href="https://quantrimang.Com/lang-cong-nghe">Làng Công nghệ</a></li> <li><a href="https://quantrimang.Com/cong-nghe">Công nghệ</a></li> <li><a href="https://quantrimang.Com/khoa-hoc">Khoa học</a></li> <li><a href="https://quantrimang.Com/cuoc-song">Cuộc sống</a></li></ul>.
      <div>
        <h2>Giới thiệu về CSS (by: Quantrimang.com)</h2>
            <p><strong>CSS giúp ích rất nhiều khi viết một trang web bằng HTML.
            </strong></p>
          <h3>CSS là gì?</h3>
            <p>CSS là viết tắt của cụm từ tiếng Anh "Cascading Style Sheet".</p>
            <p>CSS mô tả cách các phần tử HTML hiển thị trên màn hình và các phương 
            tiện khác.</p>
            <p>CSS rất hữu ích và tiện lợi. Nó có thể kiểm soát tất cả các trang 
            trên một website.</p>
            <p>Các stylesheet ngoài được lưu trữ dưới dạng các tập tin .CSS.</p>
          <h3>Vì sao nên dùng CSS?</h3>
            <p>CSS được dùng để định nghĩa kiểu cách cho các trang trên website của 
            bạn, gồm cả thiết kế, dàn trang và các cách hiển thị khác nhau trên 
            nhiều thiết bị với kích thước màn hình khác nhau.</p>
          <h3>CSS giúp giải quyết vấn đề lớn của HTML.</h3>
            <p>HTML không có phần tử để để định dạng cho trang web. HTML chỉ được 
            dùng để tạo nội dung cho trang. Khi các phần tử như <font> và thuộc tính 
            màu sắc được thêm vào HTML 3.2, cơn ác mộng của các nhà phát triển web 
            bắt đầu. Việc phát triển một website lớn mà thêm thông tin font hay màu 
            sắc vào từng trang đòi hỏi rất nhiều thời gian.</p>
            <p>Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo ra 
            CSS, giúp loại bỏ việc định dạng kiểu cách khỏi trang HTML.Các định 
            nghĩa liên quan đến kiểu cách được đưa vào tập tin .css và nhờ vào tập 
            tin stylesheet ngoài, bạn có thể thay đổi toàn bộ website chỉ bằng một 
            tập tin duy nhất.</p>
      </div>
      </body>
      </html>

      Bài trước: Thuộc tính Độ mờ/Độ trong suốt trong CSS.

      Bài tiếp: Tác động Thả xuống trong CSS.

      Xem nhiều:  Cách lấy danh bạ từ Gmail trên điện thoại iPhone hoặc Android