Các nút được sử dụng để làm gì trong css?

Các thuộc tính chuyển đổi và 

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

7 có thể tạo hiệu ứng mờ dần cho các nút. Bạn cũng cần bộ chọn 

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

6 để đặt trình kích hoạt cho hiệu ứng

Mục tiêu của tôi ở đây chủ yếu là để giới thiệu cách áp dụng và sử dụng các quy tắc và kiểu CSS khác nhau. Chúng ta sẽ không thấy nhiều cảm hứng thiết kế cũng như sẽ không thảo luận về ý tưởng tạo kiểu

Thay vào đó, đây sẽ là phần tổng quan hơn về cách hoạt động của các kiểu, các thuộc tính thường được sử dụng và cách kết hợp chúng

Trước tiên, bạn sẽ thấy cách tạo một nút trong HTML. Sau đó, bạn sẽ học cách ghi đè các kiểu nút mặc định. Cuối cùng, bạn sẽ có một cái nhìn thoáng qua về cách tạo kiểu cho các nút cho ba trạng thái khác nhau của chúng

Mục lục

1. Tạo một nút trong HTML
2. Thay đổi kiểu dáng mặc định của các nút
   1. Thay đổi màu nền
   2. Thay đổi màu văn bản
   3. Thay đổi kiểu đường viền
   4. thay đổi kích thước
3. Trạng thái nút kiểu
   1. Trạng thái di chuột kiểu
   2. Trạng thái lấy nét kiểu
   3. Phong cách trạng thái hoạt động
4. Sự kết luận

Bắt đầu nào

Cách tạo một nút trong HTML

Để tạo một nút, hãy sử dụng phần tử

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

2

Đây là một tùy chọn ngữ nghĩa và dễ tiếp cận hơn so với việc sử dụng một vùng chứa chung được tạo bằng phần tử

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

3

Trong tệp

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

4 bên dưới, tôi đã tạo cấu trúc cơ bản cho trang web và thêm một nút duy nhất

    
    
    
    
    


    Click me!

Hãy chia nhỏ dòng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

5

• Trước tiên, bạn thêm phần tử nút, bao gồm thẻ

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  2 mở và thẻ đóng

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  7
• Thuộc tính

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  8 trong thẻ mở đầu

  * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  2 rõ ràng tạo nút có thể nhấp. Vì nút cụ thể này không được sử dụng để gửi biểu mẫu nên việc thêm nút này sẽ hữu ích vì các lý do ngữ nghĩa để làm cho mã rõ ràng hơn và không kích hoạt bất kỳ hành động không mong muốn nào
• Thuộc tính

  .button1 {font-size: 15px;}
  .button2 {font-size: 17px;}
  .button3 {font-size: 19px;}
  .button4 {font-size: 21px;}
  .button5 {font-size: 23px;}
  

  10 sẽ được sử dụng để tạo kiểu cho nút trong một tệp CSS riêng. Giá trị

  .button1 {font-size: 15px;}
  .button2 {font-size: 17px;}
  .button3 {font-size: 19px;}
  .button4 {font-size: 21px;}
  .button5 {font-size: 23px;}
  

  11 có thể là bất kỳ tên nào khác mà bạn chọn. Ví dụ: bạn có thể đã sử dụng

  .button1 {font-size: 15px;}
  .button2 {font-size: 17px;}
  .button3 {font-size: 19px;}
  .button4 {font-size: 21px;}
  .button5 {font-size: 23px;}
  

  12
• Văn bản

  .button1 {font-size: 15px;}
  .button2 {font-size: 17px;}
  .button3 {font-size: 19px;}
  .button4 {font-size: 21px;}
  .button5 {font-size: 23px;}
  

  13 là văn bản hiển thị bên trong nút

Bất kỳ kiểu nào sẽ được áp dụng cho nút sẽ nằm trong một tệp ________ 114 riêng biệt

Bạn có thể áp dụng các kiểu cho nội dung HTML bằng cách liên kết hai tệp với nhau. Bạn làm điều này với thẻ

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

15 đã được sử dụng trong

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

4

Trong tệp

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

14, tôi đã thêm một số kiểu chỉ đặt nút ở giữa cửa sổ trình duyệt

Lưu ý rằng

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

10 được sử dụng với bộ chọn

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

19. Đây là một cách để áp dụng các kiểu trực tiếp cho nút

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

Đoạn mã trên sẽ cho kết quả như sau

Kiểu dáng mặc định của các nút sẽ khác nhau tùy thuộc vào trình duyệt bạn đang sử dụng

Đây là một ví dụ về giao diện của kiểu gốc cho các nút trên trình duyệt Google Chrome

Cách thay đổi kiểu dáng mặc định của các nút

Cách thay đổi màu nền của các nút

Để thay đổi màu nền của nút, hãy sử dụng thuộc tính CSS

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

20 và đặt cho nó một giá trị màu sắc theo sở thích của bạn

Trong bộ chọn

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

19, bạn sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

22 để thay đổi màu nền của nút

.button1 {font-size: 15px;}
.button2 {font-size: 17px;}
.button3 {font-size: 19px;}
.button4 {font-size: 21px;}
.button5 {font-size: 23px;}

1

Cách thay đổi màu văn bản của các nút

Màu mặc định của văn bản là màu đen, vì vậy khi bạn thêm màu nền tối, bạn sẽ nhận thấy rằng văn bản đã biến mất

Một điều khác cần đảm bảo là có đủ độ tương phản giữa màu nền của nút và màu văn bản. Điều này giúp làm cho văn bản dễ đọc hơn và dễ nhìn hơn

Tiếp theo, sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

23 để thay đổi màu của văn bản

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

2

Cách thay đổi kiểu viền của các nút

Chú ý màu xám xung quanh các cạnh của nút?

Một cách để khắc phục điều này là sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

24. Bạn đặt giá trị giống với giá trị của

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

20. Điều này đảm bảo các đường viền có cùng màu với nền của nút

Một cách khác là loại bỏ hoàn toàn đường viền xung quanh nút bằng cách sử dụng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

26

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

1

Tiếp theo, bạn cũng có thể làm tròn các cạnh của nút bằng cách sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

27, như vậy

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

3

Bạn cũng có thể thêm hiệu ứng đổ bóng tối xung quanh nút bằng cách sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

28

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

5

Cách thay đổi kích thước của các nút

Cách để tạo thêm không gian bên trong đường viền của nút là tăng

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

29 của nút

Dưới đây tôi đã thêm một giá trị 15px cho phần đệm trên cùng, dưới cùng, bên phải và bên trái của nút

Tôi cũng đặt chiều cao và chiều rộng tối thiểu, với các thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

10 và

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

11 tương ứng. Các nút cần phải đủ lớn cho tất cả các loại thiết bị khác nhau

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

9

Cách tạo kiểu cho các trạng thái của nút

Các nút có ba trạng thái khác nhau

• * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  12

• * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  13

• * {
      box-sizing: border-box;
  } 
  
  body {
      display:flex;
      justify-content: center;
      align-items: center;
      margin:50px auto;
  }
  
  .button {
      position: absolute;
      top:50%
  }
  

  14

Tốt nhất là ba trạng thái được tạo kiểu khác nhau và không chia sẻ cùng một kiểu

Trong các phần sau, tôi sẽ giải thích ngắn gọn về ý nghĩa của từng trạng thái và điều gì kích hoạt chúng. Bạn cũng sẽ thấy một số cách bạn có thể tạo kiểu cho nút cho từng trạng thái riêng biệt

Cách tạo kiểu * { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% } 12 Kỳ

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 xuất hiện khi người dùng di chuột qua một nút, bằng cách đưa chuột hoặc bàn di chuột của họ lên trên nút đó mà không chọn hoặc nhấp vào nút đó

Để thay đổi kiểu của nút khi bạn di chuột qua nút đó, hãy sử dụng bộ chọn lớp giả của ________ 312 CSS
.

Một thay đổi phổ biến cần thực hiện với

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 là chuyển đổi màu nền của nút

Để thay đổi ít đột ngột hơn, hãy ghép nối

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 với thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

30

Thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

30 sẽ giúp quá trình chuyển đổi từ trạng thái không có sang trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 diễn ra suôn sẻ hơn nhiều

Việc thay đổi màu nền sẽ diễn ra chậm hơn một chút so với khi không có thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

30. Điều này cũng sẽ giúp làm cho kết quả cuối cùng ít chói tai hơn đối với người dùng

    
    
    
    
    


    Click me!

2

Trong ví dụ trên, tôi đã sử dụng giá trị mã màu Hex để làm cho màu nền sáng hơn khi tôi di chuột qua nút

Với sự trợ giúp của thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

30, tôi cũng đã gây ra sự chậm trễ của

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

35 khi quá trình chuyển đổi từ trạng thái không sang trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 xảy ra. Điều này gây ra sự chuyển đổi chậm hơn từ màu nền

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

37 ban đầu sang màu nền

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

38

Hãy nhớ rằng lớp giả ________ 312 không hoạt động cho màn hình thiết bị di động và ứng dụng dành cho thiết bị di động. Chọn chỉ sử dụng hiệu ứng di chuột cho các ứng dụng web trên máy tính để bàn chứ không phải màn hình cảm ứng

Cách tạo kiểu * { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% } 13 Kỳ

Trạng thái ________ 313 có hiệu lực đối với người dùng bàn phím - cụ thể là nó sẽ kích hoạt khi bạn tập trung vào một nút bằng cách nhấn phím ________ 352 (______ 353)

Nếu bạn đang theo dõi, khi bạn tập trung vào nút sau khi nhấn phím

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

52, bạn sẽ thấy như sau

Bạn có để ý thấy đường viền màu xanh nhạt xung quanh nút khi nó được lấy nét không?

Các trình duyệt có kiểu dáng mặc định cho lớp giả

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

13, cho mục đích điều hướng bàn phím trợ năng. Không nên xóa hoàn toàn

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

56 đó

Tuy nhiên, bạn có thể tạo các kiểu tùy chỉnh cho nó và làm cho nó dễ dàng phát hiện được

Một cách để làm như vậy là đặt màu đường viền đầu tiên là

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

57

Sau đó, bạn có thể duy trì

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

58 đến

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

59. Cuối cùng, sử dụng thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

28, bạn có thể thêm màu theo ý thích của mình khi phần tử được tập trung vào

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

0

Bạn cũng có thể ghép nối lại các kiểu này với thuộc tính

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

30, tùy thuộc vào hiệu ứng mà bạn muốn đạt được

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

0

Làm thế nào để Phong cách cho Nhà nước * { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% } 14

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

14 được kích hoạt khi bạn nhấp vào nút bằng cách nhấp chuột của máy tính hoặc nhấn xuống bàn di chuột của máy tính xách tay

Nói như vậy, hãy xem điều gì xảy ra khi tôi nhấp vào nút sau khi tôi đã áp dụng và giữ kiểu cho các trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 và

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

13

Kiểu trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

12 được áp dụng trước khi nhấp khi tôi di chuột qua nút

Kiểu trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

13 cũng được áp dụng, bởi vì khi nhấp vào một nút, nó cũng nhận được trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

13 cùng với trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

14

Tuy nhiên, hãy nhớ rằng chúng không giống nhau

Trạng thái

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

13 là khi một phần tử đang được tập trung vào và

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

14 là khi người dùng

    
    
    
    
    


    Click me!

22 trên một phần tử bằng cách giữ và nhấn vào phần tử đó

Để thay đổi kiểu khi người dùng nhấp vào nút, hãy áp dụng kiểu cho bộ chọn giả CSS ________ 314

Trong trường hợp này, tôi đã thay đổi màu nền của nút khi người dùng nhấp vào nút đó

* {
    box-sizing: border-box;
} 

body {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:50px auto;
}

.button {
    position: absolute;
    top:50%
}

1

Sự kết luận

Và bạn có nó rồi đấy. Bây giờ bạn đã biết những kiến ​​thức cơ bản về cách tạo kiểu cho một nút bằng CSS

Chúng tôi đã giới thiệu cách thay đổi màu nền và màu văn bản của các nút cũng như cách tạo kiểu cho các nút cho các trạng thái khác nhau của chúng

Để tìm hiểu thêm về thiết kế web, hãy xem Chứng nhận thiết kế web đáp ứng của freeCodeCamp. Trong các bài học tương tác, bạn sẽ học HTML và CSS bằng cách xây dựng 15 dự án thực hành và 5 dự án chứng nhận

Lưu ý rằng chứng chỉ trên vẫn đang trong giai đoạn thử nghiệm - nếu bạn muốn phiên bản ổn định mới nhất, hãy kiểm tra tại đây

Cảm ơn đã đọc và mã hóa hạnh phúc

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Dionysia Lemonaki

Học một cái gì đó mới mỗi ngày và viết về nó

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Điểm của một nút là gì?

Trạng thái nút trong CSS là gì?

Tại sao chúng ta sử dụng các nút trong HTML?

Loại nút trong CSS là gì?