Hướng dẫn css custom properties w3schools - thuộc tính tùy chỉnh css w3schools

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

---

Thuộc tính position chỉ định loại phương pháp định vị được sử dụng cho một phần tử (tĩnh, tương đối, cố định, tuyệt đối hoặc dính).

---

Thuộc tính vị trí

Thuộc tính position chỉ định loại phương thức định vị được sử dụng cho một phần tử.

Có năm giá trị vị trí khác nhau:

• static
• relative
• fixed
• absolute
• sticky

Các phần tử sau đó được định vị bằng các thuộc tính trên, dưới, trái và bên phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính position được đặt đầu tiên. Chúng cũng hoạt động khác nhau tùy thuộc vào giá trị vị trí.

---

Vị trí: tĩnh;

Các phần tử HTML được định vị tĩnh theo mặc định.

Các phần tử định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên, dưới, trái và bên phải.

Một yếu tố với position: static; không được định vị theo bất kỳ cách đặc biệt nào; Nó luôn được định vị theo luồng thông thường của trang:

Yếu tố này có vị trí: tĩnh;

Đây là CSS được sử dụng:

---

Vị trí: tương đối;

Một yếu tố với position: relative; được định vị so với vị trí bình thường của nó.

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Yếu tố này có vị trí: tương đối;

Đây là CSS được sử dụng:

Thí dụ

Vị trí: tương đối;
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Hãy tự mình thử »

---

---

Một yếu tố với position: relative; được định vị so với vị trí bình thường của nó.

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Yếu tố này có vị trí: tương đối;

div.Relative {& nbsp; Vị trí: tương đối; & nbsp; Trái: 30px; & nbsp; Biên giới: 3px rắn #73ad21;}

Thí dụ

Vị trí: Đã sửa;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Hãy tự mình thử »

Một phần tử có position0 được định vị so với chế độ xem, điều đó có nghĩa là nó luôn ở cùng một nơi ngay cả khi trang được cuộn. Các thuộc tính trên, phải, dưới và trái được sử dụng để định vị phần tử.

---

Một phần tử cố định không để lại một khoảng trống trong trang nơi nó thường được đặt.

Lưu ý phần tử cố định ở góc dưới bên phải của trang. Đây là CSS được sử dụng:

div.Fixed {& nbsp; Vị trí: Đã sửa; & nbsp; Dưới cùng: 0; & nbsp; Phải: 0; & nbsp; chiều rộng: 300px; & nbsp; Biên giới: 3px rắn #73ad21;}

Yếu tố này có position0 Absolute positioned elements are removed from the normal flow, and can overlap elements.

Vị trí: Tuyệt đối;

Yếu tố này có vị trí: tương đối;

div.Relative {& nbsp; Vị trí: tương đối; & nbsp; Trái: 30px; & nbsp; Biên giới: 3px rắn #73ad21;}

Đây là CSS được sử dụng:

Thí dụ

Vị trí: tương đối;
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

Một yếu tố với position: relative; được định vị so với vị trí bình thường của nó.
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Hãy tự mình thử »

---

Đặt các thuộc tính trên, phải, dưới và bên trái của một phần tử tương đối có vị trí sẽ khiến nó được điều chỉnh khỏi vị trí bình thường của nó. Nội dung khác sẽ không được điều chỉnh để phù hợp với bất kỳ khoảng cách nào do phần tử để lại.

Yếu tố này có vị trí: tương đối;

div.Relative {& nbsp; Vị trí: tương đối; & nbsp; Trái: 30px; & nbsp; Biên giới: 3px rắn #73ad21;}

Vị trí: Đã sửa;Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of position6, position7, position8 or position9 for sticky positioning to work.

Một phần tử có position0 được định vị so với chế độ xem, điều đó có nghĩa là nó luôn ở cùng một nơi ngay cả khi trang được cuộn. Các thuộc tính trên, phải, dưới và trái được sử dụng để định vị phần tử.

Thí dụ

div.sticky {& nbsp; Vị trí: -Webkit -sticky; / * Safari */& nbsp; Vị trí: Sticky; & nbsp; Top: 0; & nbsp; màu nền: màu xanh lá cây; & nbsp; Biên giới: 2px rắn #4caf50;}
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Hãy tự mình thử »

---

Định vị văn bản trong một hình ảnh

Cách định vị văn bản trên một hình ảnh:

---

Nhiều ví dụ hơn

Đặt hình dạng của một phần tử Ví dụ này thể hiện cách đặt hình dạng của một phần tử.Các yếu tố được cắt thành hình dạng này, và hiển thị.
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.

---

---

Tất cả các thuộc tính định vị CSS

Tài sản	Sự mô tả
đáy	Đặt cạnh lề dưới cho một hộp định vị
kẹp	Clip một yếu tố hoàn toàn có vị trí
bên trái	Đặt cạnh lề trái cho một hộp định vị
Chức vụ	Chỉ định loại định vị cho một phần tử
bên phải	Đặt cạnh lề phải cho một hộp định vị
đứng đầu	Đặt cạnh lề trên cùng cho một hộp định vị