Hướng dẫn css only designs - css chỉ thiết kế

CSS là ngôn ngữ chúng tôi sử dụng để tạo kiểu cho một tài liệu HTML.

CSS mô tả cách hiển thị các phần tử HTML.

Hướng dẫn này sẽ dạy bạn CSS từ cơ bản đến nâng cao.

Bắt đầu học CSS ngay bây giờ »

---

Ví dụ trong mỗi chương

Hướng dẫn CSS này chứa hàng trăm ví dụ CSS.

Với trình soạn thảo trực tuyến của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả.

Ví dụ CSS

Body {& nbsp; & nbsp; màu nền: lightBlue;}
  background-color: lightblue;
}

H2 {& nbsp; & nbsp; màu: màu trắng; & nbsp; & nbsp; văn bản-align: trung tâm; }
  color: white;
  text-align: center;
}

p {& nbsp; Phông chữ-gia đình: Verdana; & nbsp; & nbsp; kích thước phông chữ: 20px; }
  font-family: verdana;
  font-size: 20px;
}

Hãy tự mình thử »

Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào.

---

Ví dụ CSS

Tìm hiểu từ hơn 300 ví dụ! Với trình chỉnh sửa của chúng tôi, bạn có thể chỉnh sửa CSS và nhấp vào nút để xem kết quả.

Đi đến ví dụ CSS!

---

Sử dụng menu

Chúng tôi khuyên bạn nên đọc hướng dẫn này, trong chuỗi được liệt kê trong menu.

Nếu bạn có một màn hình lớn, menu sẽ luôn có mặt ở bên trái.

Nếu bạn có một màn hình nhỏ, hãy mở menu bằng cách nhấp vào dấu hiệu Menu trên cùng.☰.

---

Mẫu CSS

Chúng tôi đã tạo một số mẫu W3.CSS đáp ứng để bạn sử dụng.

Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng chúng trong tất cả các dự án của bạn.

Mẫu CSS miễn phí!

---

---

Bài tập CSS

---

Câu đố CSS

Kiểm tra kỹ năng CSS của bạn với một bài kiểm tra.

Bắt đầu câu đố CSS!

---

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập" miễn phí tại đây tại W3Schools.

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm!

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng học tập của tôi.

---

Tài liệu tham khảo CSS

Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo CSS hoàn chỉnh của tất cả các thuộc tính và bộ chọn với cú pháp, ví dụ, hỗ trợ trình duyệt, v.v.

Khởi động sự nghiệp của bạn

Được chứng nhận bằng cách hoàn thành khóa họcthe course

Được chứng nhận

W3SchoolScertified.2022

---

Chỉ định mã hoạt hình

hoạt hình

Một thuộc tính tốc ký để thiết lập tất cả các thuộc tính hoạt hình

Hoạt hình-Delay

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

---

Chỉ định độ trễ để bắt đầu hoạt hình

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.

Tài sản
@KeyFrames	43.0	10.0	16.0	9.0	30.0
tên hoạt hình	43.0	10.0	16.0	9.0	30.0
Thời lượng hoạt ảnh	43.0	10.0	16.0	9.0	30.0
Hoạt hình-Delay	43.0	10.0	16.0	9.0	30.0
Hoạt hình-itation-Count	43.0	10.0	16.0	9.0	30.0
Phía định hướng hoạt hình	43.0	10.0	16.0	9.0	30.0
hoạt hình thời gian chức năng	43.0	10.0	16.0	9.0	30.0
chế độ hoạt hình	43.0	10.0	16.0	9.0	30.0
hoạt hình	43.0	10.0	16.0	9.0	30.0

---

Hoạt hình CSS là gì?

Một hình ảnh động cho phép một yếu tố dần dần thay đổi từ phong cách này sang kiểu khác.

Bạn có thể thay đổi khi nhiều thuộc tính CSS bạn muốn, nhiều lần tùy thích.

Để sử dụng hoạt hình CSS, trước tiên bạn phải chỉ định một số khung chính cho hình ảnh động.

KeyFrames giữ những kiểu mà phần tử sẽ có vào những thời điểm nhất định.

---

Quy tắc @KeyFrames

Khi bạn chỉ định các kiểu CSS bên trong quy tắc @keyframes, hình ảnh động sẽ dần thay đổi từ phong cách hiện tại sang kiểu mới tại một số thời điểm nhất định.

Để có được một hình ảnh động để hoạt động, bạn phải liên kết hoạt hình với một yếu tố.

Ví dụ sau đây liên kết hoạt hình "ví dụ" với phần tử. Hoạt hình sẽ kéo dài trong 4 giây và nó sẽ dần dần thay đổi màu nền của phần tử từ "đỏ" thành "vàng":

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/ * Phần tử để áp dụng hình ảnh động cho */ div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; }
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP; The animation-duration property defines how long an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds). 

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm nhiều thay đổi kiểu tùy thích.

Ví dụ sau đây sẽ thay đổi màu nền của phần tử khi hình ảnh động hoàn thành 25%, hoàn thành 50% và một lần nữa khi hoạt hình hoàn thành 100%:

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/ * Phần tử để áp dụng hình ảnh động cho */ div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; }
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/ * Phần tử để áp dụng hình ảnh động cho */ div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; }
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Hãy tự mình thử »

---

---

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm nhiều thay đổi kiểu tùy thích.

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Hãy tự mình thử »

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Hãy tự mình thử »

---

Lưu ý: Thuộc tính animation-duration xác định thời gian hoạt hình sẽ mất bao lâu để hoàn thành. Nếu thuộc tính animation-duration không được chỉ định, sẽ không có hình ảnh động nào xảy ra, vì giá trị mặc định là 0s (0 giây). & NBSP;

Trong ví dụ trên, chúng tôi đã chỉ định khi kiểu sẽ thay đổi bằng cách sử dụng các từ khóa "từ" và "đến" (đại diện cho 0% (bắt đầu) và 100% (hoàn thành)).

Cũng có thể sử dụng phần trăm. Bằng cách sử dụng phần trăm, bạn có thể thêm nhiều thay đổi kiểu tùy thích.

Thí dụ

/ * Mã hoạt hình */ @KeyFrames Ví dụ {& nbsp; & nbsp; từ {nền màu: màu đỏ;} & nbsp; đến {màu nền: màu vàng;}}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Hãy tự mình thử »

Ví dụ sau sử dụng giá trị "vô hạn" để làm cho hoạt hình tiếp tục mãi mãi:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Hãy tự mình thử »

---

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.

Thuộc tính hướng hoạt hình có thể có các giá trị sau:

• animation-name5 - Hoạt hình được phát là bình thường (chuyển tiếp). Đây là mặc định
• animation-name6 - Hoạt hình được phát theo hướng ngược (ngược)
• ________ 17- Hoạt hình được phát trước đầu tiên, sau đó ngược lại
• animation-name8 - Hoạt hình được phát ngược trước, sau đó chuyển tiếp

Ví dụ sau đây sẽ chạy hoạt hình theo hướng ngược (ngược):

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Hãy tự mình thử »

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Hãy tự mình thử »

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Hãy tự mình thử »

---

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.

Thuộc tính hướng hoạt hình có thể có các giá trị sau:

• animation-name5 - Hoạt hình được phát là bình thường (chuyển tiếp). Đây là mặc định
• animation-name6 - Hoạt hình được phát theo hướng ngược (ngược)
• ________ 17- Hoạt hình được phát trước đầu tiên, sau đó ngược lại
• animation-name8 - Hoạt hình được phát ngược trước, sau đó chuyển tiếp
• Ví dụ sau đây sẽ chạy hoạt hình theo hướng ngược (ngược):
• div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 4S; & nbsp; Định hướng hoạt hình: đảo ngược;}

Ví dụ sau sử dụng giá trị "thay thế" để làm cho hoạt hình chạy về phía trước trước, sau đó ngược:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Hãy tự mình thử »

---

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thuộc tính animation-direction chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hoặc trong các chu kỳ thay thế.

Thuộc tính hướng hoạt hình có thể có các giá trị sau:

animation-name5 - Hoạt hình được phát là bình thường (chuyển tiếp). Đây là mặc định

• animation-name6 - Hoạt hình được phát theo hướng ngược (ngược)
• ________ 17- Hoạt hình được phát trước đầu tiên, sau đó ngược lại
• animation-name8 - Hoạt hình được phát ngược trước, sau đó chuyển tiếp
• Ví dụ sau đây sẽ chạy hoạt hình theo hướng ngược (ngược):

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: màu đỏ; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 4S; & nbsp; Định hướng hoạt hình: đảo ngược;}

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Hãy tự mình thử »

Chạy hoạt hình theo hướng ngược hoặc chu kỳ thay thế

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; Vị trí: tương đối; & nbsp; & nbsp; màu nền: Red; & nbsp; & nbsp; tên hoạt hình: Ví dụ; & nbsp; & nbsp; hoạt hình thời gian: 4S; & nbsp; Hoạt hình-itation-Count: Infinite;}
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Hãy tự mình thử »

Ví dụ sau cho phép phần tử nhận được các giá trị kiểu được đặt bởi khung hình đầu tiên trước khi hoạt hình bắt đầu và giữ lại các giá trị kiểu từ khung khóa cuối cùng khi hình ảnh động kết thúc:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: màu đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chế độ hoạt hình-fill: cả hai; }
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Hãy tự mình thử »

---

Hoạt hình tài sản tốc ký

Ví dụ dưới đây sử dụng sáu thuộc tính hoạt hình:

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: màu đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chế độ hoạt hình-fill: cả hai; }
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Hãy tự mình thử »

Hoạt hình tài sản tốc ký

Thí dụ

div {& nbsp; chiều rộng: 100px; & nbsp; Chiều cao: 100px; & nbsp; & nbsp; nền: màu đỏ; & nbsp; Vị trí: tương đối; & nbsp; tên hoạt hình: Ví dụ; & nbsp; Thời gian hoạt hình: 3S; & NBSP; Hoạt hình-Delay: 2S; & nbsp; chế độ hoạt hình-fill: cả hai; }
  animation: example 5s linear 2s infinite alternate;
}

Hãy tự mình thử »

---

---

Hoạt hình tài sản tốc ký

Ví dụ dưới đây sử dụng sáu thuộc tính hoạt hình:

div {& nbsp; tên hoạt hình: Ví dụ; & nbsp; Hoạt hình thời gian: 5s; & nbsp; hoạt hình thời gian chức năng: tuyến tính; & nbsp; Hoạt hình-Phân chế: 2s; & nbsp; Hoạt hình-itation-Count: Infinite; & nbsp; Định hướng hoạt hình: Thay thế; }	Hiệu ứng hoạt hình tương tự như trên có thể đạt được bằng cách sử dụng thuộc tính tốc ký animation:
div {& nbsp; Hoạt hình: Ví dụ 5S tuyến tính 2S Infinite thay thế; }	Thuộc tính hoạt hình CSS
Bảng sau liệt kê quy tắc @KeyFrames và tất cả các thuộc tính hoạt hình CSS:	Tài sản
Sự mô tả	@KeyFrames
Chỉ định mã hoạt hình	hoạt hình
Một thuộc tính tốc ký để thiết lập tất cả các thuộc tính hoạt hình	Hoạt hình-Delay
Chỉ định độ trễ để bắt đầu hoạt hình	Phía định hướng hoạt hình
Chỉ định xem một hình ảnh động nên được phát về phía trước, ngược hay trong các chu kỳ thay thế	Thời lượng hoạt ảnh
Chỉ định thời gian hoạt hình sẽ mất bao lâu để hoàn thành một chu kỳ	chế độ hoạt hình
Chỉ định một kiểu cho phần tử khi hoạt hình không phát (trước khi nó bắt đầu, sau khi nó kết thúc hoặc cả hai)	Hoạt hình-itation-Count
Chỉ định số lần hoạt hình nên được phát	tên hoạt hình