Css w3c

Trong bài viết này, chúng ta sẽ cùng xây dựng một thanh điều hướng

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

2 sử dụng HTML và CSS. Bài viết này là một phần của bài CSS số 13 trong Series Tự Học Lập Trình Web Một Cách Thật Tự Nhiên mà mình đang thực hiện

Trước khi bắt đầu, hãy để mình giả định là bạn đến từ loạt bài viết về CSS mà mình đang thực hiện. Và như vậy thì tính đến thời điểm hiện tại, chúng ta đang có trong tay thêm một vài công cụ mới để sử dụng ở đây

• Biết tất cả các bộ chọn trong CSS và biết tìm tài liệu về chúng ở đâu. Bởi vì chúng ta sẽ không cố gắng ghi nhớ tất cả mọi thứ.
  
• Các bộ chọn

  .navbar {
     position: relative;
  }
  
  .navbar-right {
     position: absolute;
     top: 0;
     right: 0;
  }
  

  3 hay còn được gọi là các

  .navbar {
     position: relative;
  }
  
  .navbar-right {
     position: absolute;
     top: 0;
     right: 0;
  }
  

  4 giả định
• Các thuộc tính

  .navbar {
     position: relative;
  }
  
  .navbar-right {
     position: absolute;
     top: 0;
     right: 0;
  }
  

  5 và

  .navbar {
     position: relative;
  }
  
  .navbar-right {
     position: absolute;
     top: 0;
     right: 0;
  }
  

  6
• Cú pháp truy vấn thiết bị

  .navbar {
     position: relative;
  }
  
  .navbar-right {
     position: absolute;
     top: 0;
     right: 0;
  }
  

  7

And. đây là kết quả mà chúng ta dự kiến

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

8

2. Viết mã CSS cho màn hình thiết bị lớn

Sẽ có nhiều người khác trên Trái Đất này nói với bạn rằng bạn nên viết mã CSS cho các thiết bị có màn hình nhỏ trước bởi vì cái

/* Colors */

.navbar {
   background: Black;
}

.navbar-brand {
   background: RoyalBlue;
}

.navbar-brand,
.navbar .nav-link {
   color: White;
   text-decoration: none;
}

8 được người ta nhắc tới ở mọi nơi. Tuy nhiên, chắc chắn không phải là có nguyên tắc cố định nào về việc bạn phải làm như vậy mới đúng. Trong bài viết này thì chúng ta sẽ viết mã CSS cho các thiết bị có màn hình lớn trước, rồi sau đó mới quan tâm đến các thiết bị di động có màn hình nhỏ như điện thoại hay máy tính bảng

Nhiệm vụ này có thể được chia nhỏ thành các nhiệm vụ phụ như sau

1. Sắp xếp vị trí 2 danh sách liên kết để làm cho các liên kết hiển thị cùng hàng và chuyển một danh sách sang bên phải của thanh điều hướng
2. Lên màu chữ, màu nền và thiết lập kích thước cho các liên kết
3. Thêm hiệu ứng khi người dùng trỏ chuột tới các liên kết (ngoại trừ cái logo)

2. 1 Sắp xếp vị trí 2 danh sách liên kết

Theo mặc định thì 2 danh sách liên kết mà gói chúng ta tạo ra khi được đóng bằng thẻ

/* Colors */

.navbar {
   background: Black;
}

.navbar-brand {
   background: RoyalBlue;
}

.navbar-brand,
.navbar .nav-link {
   color: White;
   text-decoration: none;
}

9 sẽ có thuộc tính

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

0. Vì vậy nên điều này đã khiến 2 danh sách này không được hiển thị trên cùng hàng với logo

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

1. Vui lòng sửa lại thuộc tính này trước khi hết

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

1

Để chuyển khối

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

2 về phía bên phải, giải pháp đơn giản là chúng ta có thể sử dụng

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

3 và canh chỉnh vị trí theo

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

4 còn bên ngoài là

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

5

Bạn cũng có thể cân nhắc việc luôn gắn cố định thanh điều hướng ở trên đầu của các khung hiển thị trình duyệt web bằng cách sử dụng

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

6;

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

2. 2 Thiết lập màu sắc và kích thước cho các liên kết

Tới đây thì chúng ta sẽ thiết lập màu sắc cho các liên kết trước hết, bởi vì điều này sẽ giúp chúng ta có thể nhận biết được kích thước của các liên kết. Chúng ta cũng sẽ lược bỏ luôn hiệu ứng gạch chân nội dung chữ của các liên kết

/* Colors */

.navbar {
   background: Black;
}

.navbar-brand {
   background: RoyalBlue;
}

.navbar-brand,
.navbar .nav-link {
   color: White;
   text-decoration: none;
}

Để thiết lập kích thước cho các liên kết, chúng ta sẽ sử dụng

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

6 thay vì sử dụng các thuộc tính

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

20 và

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

21. Cách làm này sẽ giúp kích thước của các liên kết trở nên linh động và chúng ta sẽ không quan tâm đến nội dung chữ bên trong mỗi liên kết rút ngắn ra sao

/* Sizing links */

.navbar-brand,
.navbar .nav-link {
   display: inline-block;
   padding: 15px;
}

2. 3 Bổ sung hiệu ứng khi người dùng trỏ chuột tới các liên kết

Bản thân mình thì khá thích những hiệu ứng chuyển biến nhẹ nhàng và trong ví dụ này, mình sẽ sử dụng hiệu ứng giống như của Github. Khi người dùng di chuyển con trỏ chuột tới một liên kết, màu chữ sẽ bị giảm đi một chút, ngoại trừ logo

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

2

3. Viết mã CSS cho các thiết bị di động

Bây giờ là lúc chúng ta cần sử dụng tới cú pháp truy vấn thiết bị

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

7. Ở đây thì chúng ta sẽ chỉ tạo ra 1 điểm

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

23 nơi mà phong cách hiển thị sẽ được thay đổi. Tuy nhiên, bạn có thể tự tạo thêm nhiều điểm

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

23 nữa nếu cảm thấy cần thiết

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

9

Trước khi nói về những công việc mà chúng ta cần phải thực hiện, hãy thu nhỏ cửa sổ trình duyệt web của bạn để xem hướng điều khiển của chúng ta sẽ được hiển thị như thế nào trên thiết bị di động

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

25

3. 2 Thêm chức năng thu gọn/mở rộng

Thông thường thì nhiệm vụ này sẽ được xử lý bằng một ngôn ngữ khác, hơn nữa có tên gọi là JavaScript. Tuy nhiên, tính cho đến thời điểm này chúng ta vẫn chưa được gặp JS, vì vậy chúng ta sẽ phát triển theo cách của CSS. Cụ thể là chúng ta sẽ sử dụng một

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

90 làm thành phần tín hiệu biểu thị cho 2 trạng thái thu gọn/mở rộng của thanh điều hướng, và sử dụng

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

4 giả định

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

92 để thay đổi kích thước của thanh điều hướng dựa trên trạng thái

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

5

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

60

Khi

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

90 bị đánh dấu, có nghĩa là thanh điều hướng sẽ được hiển thị ở trạng thái thu gọn và đảo ngược sẽ là trạng thái hiển thị bình thường được mở rộng đầy đủ. Bây giờ thì chúng ta đã có thể đóng/mở danh sách liên kết bằng cách đánh dấu và bỏ đánh dấu

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

90

3. 3 Bổ sung thêm nút nhấn .navbar { position: relative; } .navbar-right { position: absolute; top: 0; right: 0; } 96

Tất cả chúng ta đều biết là các

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

90 không chắc chắn thân thiện với người dùng thiết bị di động. Sẽ rất khó để chạm chính xác vào một ô lựa chọn nhỏ được thiết kế dành cho người dùng máy tính với con trỏ chuột thông thường. Giải pháp ở đây mà chúng ta có thể hiểu đó là ẩn

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

90 và sử dụng một phần tử

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

99 để nhấn nút cho người dùng thiết bị di động

Chúng tôi hiển thị cũng sẽ muốn

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

90 được ẩn khỏi giao diện hiển thị dành cho người dùng máy tính. Vì vậy bạn nhớ di chuyển một đoạn code CSS ra khỏi khối truy vấn

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

7 nhé

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

61

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

62

4. Dọn dẹp và thu gọn mã

Xin chúc mừng. Bạn đã xây dựng xong một thanh điều hướng

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

2.

Có thể bạn cũng sẽ muốn bổ sung thêm một vài đường viền để phân chia 2 danh sách liên kết và nút nhấn đóng/mở trước khi thu gọn và lưu lại mã

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

63

Dưới đây là mã mà mình đã thu gọn xong và có bổ sung thêm 1 chút điều chỉnh để thanh hướng nhìn được hoàn thiện hơn theo chủ ý cá nhân. Bạn có thể lưu lại để tham khảo hoặc bỏ qua cũng được.

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

64

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

65

5. Tổng kết

Vì vậy, chúng ta phải viết khoảng ~100 dòng mã CSS để xây dựng một hướng thanh điều hướng

.navbar {
   position: relative;
}

.navbar-right {
   position: absolute;
   top: 0;
   right: 0;
}

2. Bạn đã hoàn thành một công việc quan trọng đấy. Tuy nhiên, chúng ta vẫn có thể tạo ra thứ gì đó tốt hơn nữa trong tương lai