Câu hỏi Tạo kiểu danh sách mặc định (CSS) là gì?


Trên trang web của tôi, tôi sử dụng reset.css. Nó thêm chính xác điều này vào danh sách các kiểu:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

Vấn đề là tất cả các kiểu danh sách được đặt thành NONE Với cái này. Tôi muốn hoàn nguyên các kiểu danh sách gốc (mặc định) cho tất cả các danh sách trên các trang phụ của trang web (tất cả các danh sách trong .my_container).

Khi tôi thử cài đặt những thứ như list-style-type đến inherit không kế thừa kiểu mặc định của trình duyệt chỉ dành cho thuộc tính CSS này.

Có cách nào để kế thừa phong cách của trình duyệt gốc cho các thuộc tính nhất định mà không sửa đổi reset.css không?


76
2017-07-31 09:42


gốc


Urgh ... reset ... rùng mình. - Utkanos
reset.css là một trong những mẫu chống tệ nhất trong thiết kế web. - Peter V
Thay vì một bản định kiểu đầy đủ, hãy cân nhắc điều gì đó như github.com/necolas/normalize.css đặt các giá trị mặc định hợp lý cho tất cả các phần tử. Bằng cách đó, bạn bắt đầu với một đường cơ sở trên tất cả các trình duyệt và có thể xây dựng từ đó. Ngoài ra, bạn không phải thêm mã phụ để quay lại cài đặt mặc định! - Olly Hodgson
@OllyHodgson Có, nhưng tôi đã có lý do cụ thể tại sao tôi muốn sử dụng reset.css. Tôi cần phải thực sự rõ ràng là phong cách càng nhiều càng tốt và tôi muốn viết lại nó - không phải là cách khác xung quanh :) - Atadj
Nếu bạn muốn xóa chúng và viết lại chúng, điểm của câu hỏi này là gì? Theo như tôi có thể thấy bạn có hai lựa chọn: 1) đặc biệt tránh đặt lại kiểu danh sách để bạn giữ các giá trị mặc định 2) đặt lại chúng và đưa ra các kiểu danh sách riêng của bạn. - BoltClock♦


Các câu trả lời:


Tôi đã sử dụng để đặt CSS này để xóa cài đặt lại:

ul { 
   list-style-type: disc; 
   list-style-position: inside; 
}
ol { 
   list-style-type: decimal; 
   list-style-position: inside; 
}
ul ul, ol ul { 
   list-style-type: circle; 
   list-style-position: inside; 
   margin-left: 15px; 
}
ol ol, ul ol { 
   list-style-type: lower-latin; 
   list-style-position: inside; 
   margin-left: 15px; 
}

EDIT: với một lớp học cụ thể của khóa học ...


117
2017-07-31 09:47



Cho đến nay nó hoạt động như nó nên :) Tôi nghĩ rằng điều này giải quyết câu hỏi của tôi. Tôi sẽ kiểm tra nó nhiều hơn bây giờ với danh sách lồng nhau vv - Atadj
Nó không "hoàn nguyên về kiểu danh sách gốc (mặc định)". Nó chỉ đặt một số phong cách. - Jukka K. Korpela
Tôi đồng ý, nhưng dù sao đi nữa, mục tiêu chỉ là để thiết lập một phong cách nào đó. CSS này cung cấp một phong cách khá cơ bản cho các danh sách, không còn nữa. - zessx
Không có tùy chọn "mặc định" cho loại kiểu danh sách và tôi phát hiện ra rằng sau khi nhận được câu trả lời. Trình duyệt chỉ cần thêm một số kiểu thường không nhất quán giữa các trình duyệt. - Atadj
Tôi cũng đã có ai đó thiết lập hiển thị: inline-block; và nó xuất hiện nó cần phải được danh sách mục để làm cho viên đạn hiển thị một lần nữa. - Mark


Tôi nghĩ rằng đây thực sự là những gì bạn đang tìm kiếm:

.my_container ul
{
    list-style: initial;
    margin: initial;
    padding: 0 0 0 40px;
}

.my_container li
{
    display: list-item;
}

30
2018-04-18 00:12



Vâng, tôi nghĩ rằng câu trả lời này cũng quan trọng. inherit kế thừa các kiểu từ các vùng chứa chính và nó không đặt chúng thành các giá trị trình duyệt mặc định. initial làm điều này (tôi phát hiện ra về sự tồn tại của nó sau này) nhưng bạn có chắc chắn rằng ul { list-style: initial; } và ol { list-style: initial; } sẽ tạo ra một kết quả hợp lệ? Nó không được đặt list-style với giá trị ban đầu của nó bất kể phần tử được áp dụng cho? Sẽ không initial giá trị được disc outside none cho cả hai loại danh sách? - Atadj
Kinh ngạc, initial không bao giờ xảy ra với tôi! - BenjaminRH
initial không được hỗ trợ trong bất kỳ phiên bản nào của IE msdn.microsoft.com/en-us/library/… - lulalala


http://www.w3schools.com/tags/tag_ul.asp

ul { 
    display: block;
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 40px;
}

9
2017-12-22 18:58



cảm ơn đã cứu mạng tôi, đã tự hỏi tại sao địa ngục lại có đệm trong menu con của tôi. - Asura


Theo tài liệu, hầu hết các trình duyệt sẽ hiển thị <ul>, <ol> và <li> các phần tử có các giá trị mặc định sau:

Cài đặt CSS mặc định cho UL hoặc là OL nhãn:

ul, ol { 
    display: block;
    list-style: disc outside none;
    margin: 1em 0;
    padding: 0 0 0 40px;
}
ol { 
    list-style-type: decimal;
}

Cài đặt CSS mặc định cho LI nhãn:

li { 
    display: list-item;
}

Kiểu danh sách lồng nhau cũng như:

ul ul, ol ul {
    list-style-type: circle;
    margin-left: 15px; 
}
ol ol, ul ol { 
    list-style-type: lower-latin;
    margin-left: 15px; 
}

Chú thích: Kết quả sẽ là hoàn hảo nếu chúng ta sử dụng các kiểu trên với một lớp. Xem thêm Danh sách mục đánh dấu.


6
2017-12-17 09:53





Bạn không thể. Bất cứ khi nào có bất kỳ bảng định kiểu nào được áp dụng gán một thuộc tính cho một phần tử, không có cách nào để truy cập các mặc định của trình duyệt, cho bất kỳ cá thể nào của phần tử đó.

Ý tưởng (có thể tranh chấp) của reset.css là loại bỏ các mặc định của trình duyệt, để bạn có thể bắt đầu tạo kiểu riêng của mình từ một bàn làm sạch. Không có phiên bản reset.css nào hoàn toàn, nhưng trong phạm vi họ làm, tác giả sử dụng reset.css được cho là hoàn toàn xác định kết xuất.


4
2017-07-31 13:50





Bạn đang đặt lại lề trên tất cả các phần tử trong khối css thứ hai. Lề mặc định là 40px - điều này sẽ giải quyết được vấn đề:

.my_container ul {list-style:disc outside none; margin-left:40px;}

2
2017-07-31 09:52





Câu trả lời cho tương lai: CSS 4 có thể chứa từ khóa hoàn nguyên, từ khóa này sẽ chuyển đổi thuộc tính thành giá trị của nó từ biểu định kiểu người dùng hoặc tác nhân người dùng [nguồn]. Khi viết bài này, chỉ Safari hỗ trợ này - kiểm tra ở đây để cập nhật về hỗ trợ trình duyệt.

Trong trường hợp của bạn, bạn sẽ sử dụng:

.my_container ol, .my_container ul {
    list-style: revert;
}

Xem thêm câu trả lời khác này với một số chi tiết khác.


0
2017-12-17 18:46