Danh sách đánh dấu css. Quy tắc CSS để tùy chỉnh giao diện của danh sách trên trang html. Thuộc tính kiểu danh sách (loại, hình ảnh, vị trí)

Ul li( border: 2px Solid #ff0000; )

Bây giờ, nếu bạn nhìn, điểm đánh dấu hình ảnh của bạn nằm bên ngoài thành phần danh sách, giống khung mà chúng ta đã tạo ở trên. Do đó, đôi khi bạn cần điểm đánh dấu nằm trong một thành phần danh sách. Chính vì vậy có một tài sản danh sách kiểu-vị trí , ban đầu được đặt thành ngoài , nghĩa là đặt các điểm đánh dấu bên ngoài phần tử.

Để nhúng điểm đánh dấu bên trong một phần tử, hãy sử dụng giá trị bên trong . Bây giờ nếu bạn đặt thuộc tính này thành bên trong , thì điểm đánh dấu sẽ nằm bên trong thành phần danh sách và khung màu đỏ hiển thị rõ ràng điều này cho chúng ta.

Ul( list-style-image: url(../images/Name of marker image.jpg); list-style-position:inside; ) ul li( border: 2px Solid #ff0000; )

Đây là cách ba thuộc tính này hoạt động. Ngoài ra còn có một phiên bản rút gọn của ký hiệu kết hợp tất cả các thuộc tính này.

Nghĩa là, tài sản được chỉ định kiểu danh sách và sau đó, theo thứ tự, các giá trị của loại điểm đánh dấu, vị trí điểm đánh dấu và, nếu cần, đường dẫn đến hình ảnh, sẽ là điểm đánh dấu. Và chúng ta có được hình ảnh sau:

Ul( kiểu danh sách: bên trong url(../images/Tên của điểm đánh dấu image.jpg); )

Đây là cách viết ra một phiên bản ngắn của các quy tắc liên quan đến sự xuất hiện của danh sách. Mục nhập này nói rằng điểm đánh dấu phải ở bên trong phần tử và điểm đánh dấu sẽ có cùng một hình ảnh

Đó là tất cả với các danh sách, nhưng hãy dành thêm một chút thời gian cho các danh sách, tự luyện tập bằng cách cài đặt các điểm đánh dấu khác nhau và cảm nhận cách thức hoạt động của tất cả. TRONG thử nghiệm các tùy chọn cho cài đặt điểm đánh dấu sẽ được hiển thị, nơi bạn có thể so sánh để kiểm tra tính chính xác của công việc của mình.

Thuộc tính list-style-type đặt loại điểm đánh dấu. Đây là cái bàn giá trị chấp nhận đượcđối với tài sản này:

Trong bảng, tôi đã liệt kê hai thuộc tính rất khác thường: Georgian và cjk-ideographic. Những thuộc tính này được sử dụng theo khu vực. Có một số ý nghĩa thú vị tương tự khác của thuộc tính này, ví dụ như tiếng Armenia hoặc chữ hiragana, nhưng không có ích gì khi liệt kê tất cả chúng.

Bây giờ là một ví dụ về việc sử dụng thuộc tính này:

1. Điểm đầu tiên.
2. Điểm thứ hai.
3. Điểm thứ ba.

Xin lưu ý rằng chúng tôi đã chuyển danh sách đánh số

trong nhãn.

Hình 1. Thuộc tính kiểu kiểu danh sách.

Hãy chắc chắn chú ý đến giá trị không, giá trị này sẽ loại bỏ hoàn toàn các điểm đánh dấu. Thuộc tính này thường được sử dụng để định dạng danh sách bằng CSS.

Thuộc tính list-style-type khá đơn giản, giống như các thuộc tính khác để làm việc với danh sách.

Thuộc tính list-style-image đặt ký hiệu điểm đánh dấu thành tệp đồ họa.

• Điểm đầu tiên.
• Điểm thứ hai.
• Điểm thứ ba.

Đây là những gì chúng ta thấy:

Hình 3. Định dạng khối
.

Điều quan trọng cần chú ý là các điểm đánh dấu danh sách vượt ra ngoài đường viền của khối phần tử

• , được bao quanh bởi một đường viền màu đỏ. Điều này có thể dẫn tới kết quả bất ngờ, ví dụ: hãy đặt lại về 0 phần đệm
  .
  • Điểm đầu tiên.
  • Điểm thứ hai.
  • Điểm thứ ba.

  Đây là những gì chúng tôi nhận được:

  Hình 4. Định dạng khối
  .

  Các điểm đánh dấu danh sách hiện ở bên ngoài vùng chứa

  . Do đó, các điểm đánh dấu có thể vượt ra ngoài vùng chứa bài viết chứa danh sách, điều này sẽ làm gián đoạn giao diện của trang web.

  Sẽ tốt hơn nếu đặt chúng vào trong một thùng chứa

  • . Điều đó sẽ giải quyết nó vấn đề này. Đó chính là mục đích của thuộc tính list-style-position.

    Thuộc tính list-style-position đặt vị trí của điểm đánh dấu so với khối

  • . Thuộc tính này có hai ý nghĩa:

    Giá trị mặc định là bên ngoài .

    Hãy áp dụng thuộc tính này vào ví dụ của chúng ta và đặt các điểm đánh dấu vào khối

  • bằng cách đặt thuộc tính này vào bên trong .
    • Điểm đầu tiên.
    • Điểm thứ hai.
    • Điểm thứ ba.

    Đây là những gì chúng tôi có:

    Hình 5. Thuộc tính List-style-position.

    Danh sách đạn hiện được lồng trong một khối

  • .

    thuộc tính kiểu danh sách

    Thuộc tính list-style là một dạng viết tắt cho phép bạn sử dụng các giá trị của cả ba thuộc tính trước đó.

    Ví dụ: tạo một bức ảnh bằng điểm đánh dấu và đặt điểm đánh dấu bên trong khối mục danh sách.

    • Điểm đầu tiên.
    • Điểm thứ hai.
    • Điểm thứ ba.

    Đây là kết quả:

    Hình 6. Thuộc tính kiểu danh sách.

    Chúng tôi đã chỉ định hai giá trị trong một thuộc tính kiểu danh sách: vị trí của điểm đánh dấu và đường dẫn của tệp đồ họa của điểm đánh dấu.

    Thuộc tính kiểu danh sách được sử dụng thường xuyên nhất, thậm chí để đặt một giá trị duy nhất. Nó ngắn và dễ viết.

    Công thức CSS liên quan

    • Cách tạo menu thả xuống trong CSS, ví dụ phức tạp với những cái bóng.

    Xin chào các độc giả thân mến của trang blog. Hôm nay sẽ có một bài viết khác về các thuộc tính của Cascading Style Sheet. Nó sẽ tập trung vào thiết kế bằng cách sử dụng các quy tắc CSS.

    Nói chung, danh sách giữa khối phần tửđứng ngoài. Điều này là do chúng bao gồm các dấu đầu dòng và đánh số do chính trình duyệt đặt.

    Thuộc tính kiểu danh sách - thiết kế danh sách trên trang html

    TRONG ngôn ngữ CSS Có ba thuộc tính bắt đầu bằng kiểu danh sách, chịu trách nhiệm thiết kế danh sách có dấu đầu dòng và đánh số. Ngoài ra còn có quy tắc kiểu danh sách đúc sẵn cho phép bạn giảm số lượng mã.

    Tất cả các thuộc tính này có thể được sử dụng cho cả hai phần tử html li, và cho các phần tử ul và ol. Sự khác biệt duy nhất là nếu các quy tắc được viết cho một giá trị cụ thể của danh sách li thì nó sẽ chỉ được áp dụng cho giá trị đó. Và nếu các quy tắc css tương tự được viết cho các vùng chứa ul hoặc ul thì chúng sẽ được áp dụng cho tất cả các phần tử li có trong các vùng chứa này.

    Hãy bắt đầu với thuộc tính kiểu danh sách, bộ nào loại dấu hiệu hoặc đánh số cho các mục danh sách:

    kiểu danh sách: đĩa|hình tròn|hình vuông|số thập phân|số thập phân dẫn đầu-0|tiếng La Mã thấp hơn|tiếng La Mã trên|tiếng Hy Lạp thấp hơn|alpha thấp|tiếng latin thấp|alpha trên|tiếng latin trên|tiếng armenian| Georgia|không có|kế thừa

    Như bạn có thể thấy, thuộc tính list-style-type có nhiều giá trị khả dụng, có thể chỉ định cả loại điểm đánh dấu và các loại khác nhauđánh số.

    • đĩa - điểm đánh dấu ở dạng vòng tròn màu đen (giá trị mặc định cho danh sách có dấu đầu dòng).
    • vòng tròn - điểm đánh dấu ở dạng vòng tròn không được lấp đầy.
    • hình vuông - điểm đánh dấu ở dạng hình vuông. Nó có thể sáng hoặc tối, tùy thuộc vào trình duyệt.
    • thập phân - đánh số bằng chữ số Ả Rập (giá trị mặc định cho danh sách được đánh số).
    • số thập phân hàng đầu-số 0 - đánh số bằng chữ số Ả Rập từ 01 đến 99 với số 0 đứng đầu.
    • chữ La Mã thấp hơn - đánh số bằng chữ số La Mã nhỏ.
    • chữ La Mã thượng lưu - đánh số bằng chữ số La Mã lớn.
    • tiếng Hy Lạp thấp hơn - đánh số bằng chữ cái Hy Lạp nhỏ.
    • Lower-alpha và Lower-latin - đánh số bằng chữ cái Latinh nhỏ.
    • Upper-alpha và Upper-latin - đánh số bằng chữ Latinh in hoa.
    • tiếng Armenia - đánh số bằng chữ số truyền thống của người Armenia.
    • Georgian - đánh số bằng cách sử dụng chữ số Georgia truyền thống.
    • không - việc đánh dấu và đánh số sẽ không được thực hiện chút nào.

    Đây là giao diện của các mục danh sách trong trình duyệt với các giá trị kiểu kiểu danh sách khác nhau:

    sử dụng Kiểu CSS việc sử dụng phần tử nào (OL hoặc UL) để tạo danh sách không quan trọng. OL và UL chỉ khác nhau ở hành vi mặc định và với thuộc tính list-style-type, bạn có thể dễ dàng biến một loại danh sách này thành một loại danh sách khác.

    Thuộc tính kiểu danh sách kiểu-hình ảnh cho phép bạn thiết lập như đánh dấu Danh sách sản phẩm hình ảnh đồ họa . Khi sử dụng thuộc tính list-style-image, giá trị của thuộc tính list-style-type sẽ bị bỏ qua:

    danh sách-kiểu-hình ảnh: không có|<интернет-адрес файла изображения>|kế thừa

    Nghĩa không có xóa điểm đánh dấu hình ảnh và đặt nó thành bình thường, không phải đồ họa. Đây là hành vi mặc định.

    Khi bạn chỉ định địa chỉ của file ảnh, ảnh sẽ được chèn vào vị trí của điểm đánh dấu. Giống như việc sử dụng , bạn có thể sử dụng cả tuyệt đối và địa chỉ tương đối. Nếu trình duyệt không thể tải hình ảnh, điểm đánh dấu hoặc đánh số mặc định sẽ được sử dụng hoặc nội dung được chỉ định trong thuộc tính theo kiểu kiểu danh sách.

    Ví dụ về danh sách có hình ảnh làm điểm đánh dấu:

    
    
    • mục danh sách đầu tiên;
    
    
    • mục danh sách thứ hai;
    
    
    • mục thứ ba trong danh sách.
    
    

    Và đây là những gì nó trông giống như:

    • mục danh sách đầu tiên;
    • mục danh sách thứ hai;
    • mục thứ ba trong danh sách.

    Rõ ràng là khi chọn một hình ảnh làm điểm đánh dấu, tốt hơn là nên chọn một hình ảnh nhỏ.

    Và thuộc tính CSS cuối cùng trong chuỗi kiểu danh sách là danh sách kiểu-vị trí cho phép bạn chỉ định vị trí của dấu đầu dòng hoặc đánh số trong một mục danh sách. Có thể có hai tùy chọn cho giá trị:
    

    danh sách kiểu-vị trí: bên trong|bên ngoài

    Trường hợp giá trị bên trong một điểm đánh dấu hoặc đánh số được đặt như thể bên trong một danh sách và trong trường hợp ngoài bên ngoài các phần tử li. Giá trị mặc định là bên ngoài và điểm đánh dấu được di chuyển ra bên ngoài.

    Danh sách ví dụ với các giá trị vị trí kiểu danh sách khác nhau:

    • trong đoạn đầu tiên mọi thứ đều theo mặc định;
    • trong đoạn thứ hai, list-style-position được đặt ở bên trong. Trong trường hợp này, lưu ý rằng dòng thứ hai được đặt ngang bằng với điểm đánh dấu;
    • tại thời điểm này list-style-position bằng với bên ngoài.

    Quy tắc kiểu danh sách CSS đúc sẵn

    Thuộc tính kiểu danh sách CSS sau đây là tiền tố cho danh sách kiểu dáng. Nó cho phép bạn viết cả ba quy tắc CSS được thảo luận ở trên thành một quy tắc duy nhất. Thứ tự chỉ định các giá trị trong đó có thể là bất kỳ và các tham số mà bạn không chỉ định trong kiểu danh sách sẽ được trình duyệt lấy theo mặc định.

    Các giá trị trong quy tắc biên dịch kiểu danh sách phải được phân tách bằng dấu cách:

    kiểu danh sách: kiểu danh sách kiểu danh sách kiểu danh sách hình ảnh kiểu danh sách-vị trí;

    Một quy tắc CSS thực sự cho danh sách tạo kiểu có thể trông giống như thế này:

    kiểu danh sách: url vòng tròn (http://site/images/marker.png) bên ngoài;

    Do đó, thuộc tính kiểu danh sách cho phép bạn giảm đáng kể số lượng mã, vì thay vì ba quy tắc, chỉ cần đặt một quy tắc là đủ.

    Như đã đề cập ở trên, các giá trị có thể được chỉ định theo bất kỳ thứ tự nào và với số lượng bất kỳ. Vì vậy, ví dụ, để xóa điểm đánh dấu khỏi danh sách menu chỉ cần viết:

    kiểu danh sách: không có;

    Điều tương tự có thể được thực hiện bằng cách sử dụng thuộc tính list-style-type:

    kiểu danh sách: không có;

    Đó là câu chuyện về thiết kế. danh sách html Tôi sẽ kết thúc với Cascading Style Sheets. Để tìm hiểu về người khác Thuộc tính CSS bạn có thể đọc các bài viết từ phần “” và đừng quên đăng ký nhận các bản cập nhật blog. Hẹn gặp lại!

    Danh sách CSS— một tập hợp các thuộc tính chịu trách nhiệm thiết kế các danh sách. Việc sử dụng danh sách HTML rất phổ biến khi tạo thanh điều hướng trang web. Các mục danh sách đại diện cho một tập hợp các phần tử khối.

    Sử dụng các thuộc tính CSS tiêu chuẩn, bạn có thể thay đổi diện mạo của điểm đánh dấu danh sách, thêm hình ảnh cho điểm đánh dấu, Và thay đổi vị trí điểm đánh dấu. Chiều cao của khối đánh dấu có thể được đặt bằng thuộc tính line-height.

    Thiết kế danh sách bằng cách sử dụng các kiểu CSS

    1. Kiểu đánh dấu danh sách kiểu kiểu danh sách

    Thuộc tính thay đổi loại điểm đánh dấu hoặc loại bỏ điểm đánh dấu cho danh sách có dấu đầu dòng và đánh số. Thừa hưởng.

    kiểu danh sách
    Giá trị:
    đĩa	Giá trị mặc định. Vòng tròn đầy đóng vai trò là điểm đánh dấu cho các mục trong danh sách.
    tiếng Armenia	Đánh số truyền thống của người Armenia.
    vòng tròn	Một vòng tròn mở đóng vai trò là điểm đánh dấu.
    cjk-ideographic	Đánh số tượng hình.
    số thập phân	1, 2, 3, 4, 5, …
    số 0 đứng đầu số thập phân	01, 02, 03, 04, 05, …
    người Georgia	Đánh số truyền thống của Gruzia.
    tiếng Do Thái	Đánh số tiếng Do Thái truyền thống.
    chữ hiragana	Cách đánh số tiếng Nhật: a, i, u, e, o,…
    hiragana-iroha	Cách đánh số tiếng Nhật: i, ro, ha, ni, ho,…
    katakana	Cách đánh số tiếng Nhật: A, I, U, E, O,…
    katakana-iroha	Cách đánh số tiếng Nhật: I, RO, HA, NI, HO,…
    alpha thấp hơn	a,b,c,d,e, …
    tiếng Hy Lạp thấp hơn	Ký tự chữ thường của bảng chữ cái Hy Lạp.
    chữ Latinh thấp hơn	a,b,c,d,e, …
    tiếng La Mã thấp hơn	tôi, ii, iii, iv, v, …
    không có	Không có điểm đánh dấu.
    quảng trường	Hình vuông được lấp đầy hoặc không được lấp đầy đóng vai trò là điểm đánh dấu.
    alpha trên	A, B, C, D, E,…
    chữ Latinh viết hoa	A, B, C, D, E,…
    tiểu thuyết thượng lưu	I, II, III, IV, V,…
    ban đầu	Đặt giá trị thuộc tính thành giá trị mặc định.
    thừa kế	Kế thừa giá trị thuộc tính từ phần tử cha.

    Cú pháp

    Ul (list-style-type: none;) ul (list-style-type: Square;) ol (list-style-type: none;) ol (list-style-type: low-alpha;)
    Cơm. 1. Ví dụ thiết kế danh sách đánh dấu đầu dòng và đánh số

    2. Hình ảnh cho các mục danh sách list-style-image

    Bạn có thể sử dụng hình ảnh và màu tô chuyển màu làm điểm đánh dấu mục danh sách. Thừa hưởng.

    Cú pháp

    Ul (list-style-image: url("images/romb.png");) ul (list-style-image: Linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
    Cơm. 2. Thiết kế danh sách có dấu đầu dòng bằng hình ảnh Cơm. 3. Thiết kế danh sách có dấu đầu dòng bằng gradient

    3. Kiểu danh sách-vị trí

    Thuộc tính này cung cấp khả năng đặt điểm đánh dấu bên ngoài hoặc bên trong nội dung của mục danh sách. Thừa hưởng.

    CSS cho phép tạo danh sách dấu đầu dòng và đánh số, thiết kế danh sách dấu đầu dòng bằng hình ảnh và nếu cần, loại bỏ hoàn toàn mọi dấu đầu dòng trong danh sách.

    Kiểu danh sách dấu đầu dòng CSS.

    kiểu danh sách

    kiểu danh sách:đĩa | vòng tròn | vuông | số thập phân | La Mã thấp hơn | thượng La Mã | alpha thấp hơn | alpha trên | không có ;

    Nghĩa :

    disk – danh sách có dấu đầu dòng ở dạng một vòng tròn đầy

    vòng tròn - danh sách có dấu đầu dòng ở dạng vòng tròn không được lấp đầy

    hình vuông - một danh sách có dấu đầu dòng ở dạng hình vuông đầy

    danh sách thập phân - được đánh số bằng số Ả Rập (1,2,3, v.v.)

    Upper-Roman - danh sách được đánh số bằng chữ số La Mã lớn (I, II, III, IV, v.v.)

    chữ La Mã thấp hơn – danh sách được đánh số sử dụng các chữ số La Mã nhỏ (i,ii,iii,iv, v.v.)

    chữ hoa trên – danh sách được đánh số bằng chữ in hoa(A, B, C, v.v.)

    Lower-alpha – danh sách được đánh số chữ viết thường(a,b,c, v.v.)

    không có - không có điểm đánh dấu.

    Ví dụ:

    • Tin vào điều tốt nhất, mong đợi điều tồi tệ nhất.
    • Cuộc sống là một căn bệnh, có kết cục chết người.
    • Không bao giờ nói không bao giờ.

    Kết quả :

    Có những trường hợp cần phải loại bỏ việc hiển thị điểm đánh dấu trong danh sách. Để làm điều này, hãy viết mã CSS

    kiểu danh sách: không có;

    Ví dụ:

    • Tin vào điều tốt nhất, mong đợi điều tồi tệ nhất.
    • Không bao giờ nói không bao giờ.

    Kết quả :

    

    Bạn có thể thay thế các điểm đánh dấu thông thường trong danh sách hình ảnh riêng. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính list-style-image.

    danh sách kiểu-hình ảnh

    danh sách kiểu-hình ảnh: url(image.png);

    Ví dụ:

    • Tin vào điều tốt nhất, mong đợi điều tồi tệ nhất.
    • Cuộc sống là một căn bệnh gây tử vong.
    • Không bao giờ nói không bao giờ.

    Kết quả :

    

    Bạn cũng có thể thiết lập danh sách có dấu đầu dòng khoảng cách từ văn bản. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính đệm bên trái trên bộ chọn li.

    Ví dụ:

    • Tin vào điều tốt nhất, mong đợi điều tồi tệ nhất.
    • Cuộc sống là một căn bệnh gây tử vong.
    • Không bao giờ nói không bao giờ.

    Kết quả :

    

    Nhiệm vụ tiếp theo là thay đổi màu của điểm đánh dấu mà không thay đổi màu của văn bản. Sao có thể như thế được? Màu điểm đánh dấu có thể được thay đổi bằng cách thêm thẻ vào bài kiểm tra .
    Nó trông như thế này:

  • chữ

  Ví dụ:

  • Tin vào điều tốt nhất, mong đợi điều tồi tệ nhất.
  • Cuộc sống là một căn bệnh gây tử vong.
  • Không bao giờ nói không bao giờ.

  Kết quả :

  

  Bổ sung vào chủ đề chung.
  Nếu vì lý do nào đó, bạn cần đặt cách đánh số danh sách điểm đánh dấu không phải từ 0 mà từ 8, bạn có thể thực hiện động thái này.

  Ví dụ:

  • Tin vào điều tốt nhất, mong đợi điều tồi tệ nhất.
  • Cuộc sống là một căn bệnh chết người Điểm 2.
  • Không bao giờ nói không bao giờ. Điểm 3
  • Đó là tất cả những gì tôi biết. Điểm 4

  Kết quả :

  

  Chủ đề này đã kết thúc.