Trong ví dụ này tạo một bộ đếm cho trang [phần chính] và bộ đếm cho mỗi phần tử [phần phụ]. Phần thống kê sẽ đếm từng phần tử với nội dung “Phần. ” và bộ đếm “subsection” sẽ đếm từng phần tử
with content “. ”
Thuộc tính counter-increment
thường được sử dụng cùng với thuộc tính counter-reset và thuộc tính content
Giá trị mặc định. không kế thừa. không có hoạt ảnh. không. Đọc về animatableVersion. Cú pháp CSS2JavaScript. mục tiêu. Phong cách. counterIncrement = "tiểu mục";
Hỗ trợ trình duyệt
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
Bộ đếm tài sản tăng4. 08. 02. 03. 19. 6
Cú pháp CSS
chống tăng. không ai. Tôi. ban đầu. thừa kế;
Giá trị tài sản
ValueDescriptionnoneGiá trị mặc định. Không có bộ đếm nào được tăng số idSố id xác định bộ đếm nào sẽ tăng. Số đặt bộ đếm sẽ tăng bao nhiêu sau mỗi lần xuất hiện của bộ chọn. Số gia mặc định là 1. Cho phép giá trị âm. Nếu id đề cập đến một bộ đếm chưa được khởi tạo bằng cách đặt lại bộ đếm, thì giá trị ban đầu mặc định là 0initialĐặt thuộc tính này thành giá trị mặc định của nó. Đọc về khởi tạo Kế thừa thuộc tính này từ phần tử cha của nó. Đọc về thừa kế
Bộ đếm CSS giống như một "biến [biến]". Giá trị của biến này được tính theo quy tắc của CSS [Dựa theo số lần mà nó được sử dụng ]
Để làm việc với CSS Counter, bạn phải biết các thuộc tính sau
- đặt lại bộ đếm - Khởi tạo hoặc đặt lại bộ đếm
- counter-increment - Tăng giá trị biến đếm
- nội dung - Chèn thêm nội dung
- bộ đếm[] hoặc bộ đếm[] function - Thêm giá trị của biến đếm vào phần tử.
Để sử dụng Bộ đếm CSS, đầu tiên phải khởi động với đặt lại bộ đếm
Ví dụ bên dưới đếm thẻ
và in ra phía trước dòng chữ: Bài
body { counter-reset: dem-p; /* giá trị dem-p khi này là 0. */ /* tên biến đếm 'dem-p' bạn tự đặt, dùng để phân biệt nếu có nhiều biến đếm*/ } p::before { counter-increment: dem-p; /* Mỗi lần đếm giá trị tăng lên 1. */ content: "Bài " counter[dem-p] ": "; /* In giá trị 'Bài '+ giá trị đếm ra trước mỗi thẻ p*/ }
Mã HTML
Giới thiệu CSS CSS Color CSS Background
Ví dụ sử dụng CSS Counters:
Kết quả hiển thị
Ví dụ sử dụng Bộ đếm CSS
CSS giới thiệu
Màu CSS
Nền CSS
Counter lồng nhau
Ta could lồng bộ đếm với nhau. Thường hay áp dụng cho menu đa cấp. Cùng xem ví dụ menu đếm dưới đây nhé
Trong hướng dẫn nhanh này, chúng ta sẽ khám phá những điều rất cơ bản của ; . Khi chúng tôi xây dựng xong bản demo, chúng tôi sẽ xem xét một số ví dụ thực tế của các trang web mà việc tận dụng lợi thế của CSS Counter
Mục tiêu. Định cách một danh sách có thứ tự
Bước đầu tiên, hãy nhìn vào bố cục cục bộ mà chúng ta sẽ xây dựng
Không có gì đặc biệt, phải không? . chúng ta sẽ sử dụng các mã đánh dấu có nghĩa [semantic markup], giới hạn sử dụng các thẻ
52 và
53 để xây dựng các nhãn cho các số đếm đó
Hãy thảo luận về một giải pháp giải quyết gọn gàng và linh hoạt
Bộ đếm CSS
Để tạo ra một bố cục nêu trên, ta định nghĩa một danh sách có thứ tự. Tại thời điểm hiện tại, bạn có thể ngạc nhiên là chúng ta có thể sử dụng một phần tử khác hoặc ngay cả một danh sách không thứ tự hay không. Câu trả lời rút gọn là "có", nhưng hãy nhớ rằng một danh sách có thứ tự là phần tử duy nhất mô tả chính xác cấu trúc trang web của chúng tôi
Sau đó, bạn có thể hỏi liệu nó có thể hoàn thành toàn bộ tùy chọn biến xuất hiện của những con số của danh sách có thứ tự, xây dựng bố cục cục bộ mong muốn theo cách đó hay không. Định phong cách có con số của danh sách thứ tự có thể là sự thật rắc rối. Mặc dù vậy, rất có thể, có một cách tiếp cận thay thế , vì vậy hãy đánh dấu vào các con số mặc định danh sách và tận dụng lợi thế của Bộ đếm CSS để thay thế
cú pháp
Bộ đếm CSS cho phép chúng tôi tạo ra các số dựa trên các phần tử kỹ thuật số và phong cách cho chúng tôi một cách tương ứng. Xem Bộ đếm CSS như là các biến mà giá trị của chúng có thể được tăng lên. Vui lòng xem cú pháp cơ bản
Tạo bộ đếm mớiỞ đây chúng ta tạo một bộ đếm mới trên một danh sách có thứ tự và định nghĩa phạm vi của nó. Chúng ta sử dụng thuộc tính
54
- First value is name of counter
- theo sau bởi một tham số tùy chọn định nghĩa giá trị khởi động của bộ đếm [mặc định. 0]. Lưu ý rằng counter sẽ luôn bắt đầu từ dưới lên, vì như vậy đầu tiên tạo ra giá trị trong trường hợp của chúng ta sẽ là 1
Trong minh họa thứ hai chúng ta có thể thấy rằng chúng ta đang định phong cách của phần tử giả
55 của phần tử
56 trong danh sách của chúng ta
- Ở đây chúng ta đã bổ sung giá trị của bộ đếm vào thuộc tính của
5
7 của5
5. Cần lưu ý rằng bằng cách sử dụng CSS Counter với nội dung thuộc tính, chúng ta có thể kết nối các số được tạo ra với các chuỗi - Chúng ta tham chiếu đến tên của bộ đếm
- and default style of counter as "decimal". Các giá trị có thể ở đây tương tự với những giá trị đã được sử dụng cho thuộc tính
5
9 - Trong thuộc tính
- sau đó sử dụng một tham số tùy chọn để xác định bằng cách tăng số lượng bộ đếm. Default value at here is 1
Đánh dấu
dựa trên những gì mà chúng ta vừa mới cập nhật, dưới đây là mã đánh dấu của chúng ta
________9____10_______
2
3
List Item
4
________0____8_______Some text here.
0
___List Item
4
10_______6Some text here.
8
9
20
21_______11_______2_______11_______3
And CSS link code
1
25
2
27
3
29
4
5
0
2
4
6
30
8
32
20
34
22
29
37
38
39
0List Item
1List Item
2List Item
3List Item
4List Item
5List Item
6List Item
7List Item
8List Item
9List Item
40
41
42
43
44
45
46
47
48
49
0Some text here.
1Some text here.
2Some text here.
3Some text here.
4Some text here.
5Some text here.
6Some text here.
7Some text here.
8Some text here.
Some text here.
Điều này cho chúng ta kết quả như hình dưới đây
Un mode
Tại thời điểm này, điều quan trọng cần lưu ý là phần tử giả hoàn toàn không thể truy cập. Để thử điều này, tôi đã thực hiện kiểm tra nhanh. Tôi cài đặt NVDA và sử dụng Chrome 50, Firefox 45 và Internet Explorer 11 để xem trước trang demo
Những gì tôi thấy là khi Internet Explorer được sử dụng, trình đọc màn hình không thông báo nội dung được tạo ra. Ngày nay, phần đông trình đọc màn hình [trình đọc màn hình] nhận ra nội dung được tạo theo dạng này, nhưng bạn nên lưu ý những hạn chế có thể, và từ đó quyết định nội dung nào đủ an toàn để tạo ra bằng
Bộ đếm CSS trong thực tế sử dụng
Bây giờ thì chúng ta đã biết những điều cơ bản của CSS Counter, chúng ta đã sẵn sàng để đưa ra một số ví dụ minh họa triển vọng của chúng ta
Trước hết, CSS Counter thường được sử dụng trên các tờ báo trực tuyến. Phần lớn, bạn sẽ thấy chúng trong các thanh bên
Bộ đếm CSS cũng có thể được sử dụng trong các đoạn miêu tả các bước hoặc đưa ra chỉ dẫn. Dưới đây là một ví dụ như vậy
Ví dụ về việc sử dụng HTML thuần túy
Trong phần trước, chúng ta đã thấy hai tờ báo trực tuyến tận dụng lợi thế của CSS Counter. Bây giờ chúng ta hãy xem hai tờ báo sử dụng mã đánh dấu đầu hút [dù với nội dung có thể truy cập] thay cho CSS Counter