Truy cập tăng html

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

Ví dụ sử dụng CSS Counters:

Giới thiệu CSS

CSS Color

CSS Background

Chú ý: IE8 chỉ hỗ trợ thuộc tính này nếu có khai báo !DOCTYPE.

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ẻ

5

2 và

5

3 để 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

5

4

1. First value is name of counter
2. 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

Con Elemental style setting

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ả 

5

5 của phần tử

5

6 trong danh sách của chúng ta

1. Ở đây chúng ta đã bổ sung giá trị của bộ đếm vào thuộc tính của

   5

   7 của

   5

   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
2. Chúng ta tham chiếu đến tên của bộ đếm
3. 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
4. Trong thuộc tính

0 chúng ta một lần nữa tham chiếu đến tên của bộ đếm
5. 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

    
Some text here.

________0____8_______

0

10_______2

    
List Item

___

4

    
Some text here.

10_______6

8

9

2

0

2

1_______11_______2_______11_______3

And CSS link code

1

2

5

2

2

7

3

2

9

4

5

2

0

4

2

6

4

8

6

3

0

8

3

2

2

0

3

4

2

2

2

9

3

7

3

8

3

9

    
List Item

0

    
List Item

1

    
List Item

2

    
List Item

3

    
List Item

4

    
List Item

5

    
List Item

6

    
List Item

7

    
List Item

8

    
List Item

9

4

0

4

1

4

2

4

3

4

4

4

5

4

6

4

7

4

8

4

9

    
Some text here.

0

    
Some text here.

1

    
Some text here.

2

    
Some text here.

3

    
Some text here.

4

    
Some text here.

5

    
Some text here.

6

    
Some text here.

7

    
Some text here.

8

    
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

Wall Street JournalHandelsblatt

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

SpikeNode

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