.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- Tạo một nút trong HTML
- Thay đổi kiểu dáng mặc định của các nút
- Thay đổi màu nền
- Thay đổi màu văn bản
- Thay đổi kiểu đường viền
- thay đổi kích thước
- Trạng thái nút kiểu
- Trạng thái di chuột kiểu
- Trạng thái lấy nét kiểu
- Phong cách trạng thái hoạt động
- 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%
}
3Trong 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
CSS Button Style
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ẻ
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* { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% }
- Thuộc tính
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* { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% }
- Thuộc tính
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.button1 {font-size: 15px;} .button2 {font-size: 17px;} .button3 {font-size: 19px;} .button4 {font-size: 21px;} .button5 {font-size: 23px;}
- Văn bản
13 là văn bản hiển thị bên trong nút.button1 {font-size: 15px;} .button2 {font-size: 17px;} .button3 {font-size: 19px;} .button4 {font-size: 21px;} .button5 {font-size: 23px;}
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%
}
4Trong 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ệtLư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ạnTrong 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;}
1Cá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%
}
2Cá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útMộ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%
}
1Tiế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%
}
3Bạ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%
}
5Cá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útDướ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%
}
9Cá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
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* { box-sizing: border-box; } body { display:flex; justify-content: center; align-items: center; margin:50px auto; } .button { position: absolute; top:50% }
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ỳ
* {
box-sizing: border-box;
}
body {
display:flex;
justify-content: center;
align-items: center;
margin:50px auto;
}
.button {
position: absolute;
top:50%
}
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%
}
30Thuộ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ềuViệ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
CSS Button Style
Click me!
2Trong 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%
}
38Hã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ỳ
* {
box-sizing: border-box;
}
body {
display:flex;
justify-content: center;
align-items: center;
margin:50px auto;
}
.button {
position: absolute;
top:50%
}
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ư sauBạ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%
}
57Sau đó, 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%
}
0Bạ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%
}
0Là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
* {
box-sizing: border-box;
}
body {
display:flex;
justify-content: center;
align-items: center;
margin:50px auto;
}
.button {
position: absolute;
top:50%
}
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 tayNó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%
}
13Kiể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útKiể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%
}
14Tuy 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
CSS Button Style
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%
}
1Sự 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
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