기본 목록 스타일 (CSS)이란 무엇입니까?


91

내 웹 사이트에서 reset.css를 사용합니다. 목록 스타일에 정확히 다음을 추가합니다.

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;
}

문제는 모든 목록 스타일이 이것으로 설정된다는 것 NONE입니다. 웹 사이트 하위 페이지의 모든 목록 (의 모든 목록)에 대해서만 원래 목록 스타일 (기본값)을 되돌리고 싶습니다 .my_container.

내가 좋아하는 설정 것을 시도하는 경우 list-style-typeinherit그냥이 CSS 속성에 대한 브라우저의 기본 스타일을 상속하지 않습니다이다.

reset.css를 수정하지 않고 특정 속성에 대한 원래 브라우저의 스타일을 상속하는 방법이 있습니까?


4
reset.css는 웹 디자인에서 최악의 안티 패턴 중 하나입니다.
ᆼ ᆺ ᆼ

9
완전한 재설정 스타일 시트보다는 모든 요소에 대해 합리적인 기본값을 설정하는 github.com/necolas/normalize.css 와 같은 것을 고려 하십시오. 이렇게하면 모든 브라우저에서 기준선으로 시작하여 거기에서 구축 할 수 있습니다. 또한 기본 설정으로 돌아 가기 위해 추가 코드를 추가 할 필요가 없습니다!
Olly Hodgson

1
@OllyHodgson 예,하지만 reset.css를 사용하려는 구체적인 이유가 있습니다. 나는 실제로 가능한 한 많은 스타일을 지울 필요가 있고 그것을 다시 작성하고 싶습니다-그 반대는 아닙니다 :)
Atadj

1
지우고 다시 쓰려면이 질문의 요점은 무엇입니까? 내가 볼 수있는 한 두 가지 옵션이 있습니다. 1) 특별히 목록 스타일을 재설정하지 않도록 기본값을 유지합니다. 2) 재설정하고 자신 만의 목록 스타일을 만듭니다.
BoltClock

1
@BoltClock-명확하게하기 위해-사용자에게 처음부터 자신의 목록을 만들 수있는 기회를주고 싶습니다 (가능한 각 스타일에 대해 클래스를 추가했습니다)- "기본"설정과 같은 것이 있는지 궁금했지만 아무것도 없기 때문에 기본 스타일링-하나만 만들겠습니다.
Atadj

답변:


149

이 CSS를 설정하여 재설정을 제거했습니다.

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; 
}

편집 : 물론 특정 클래스로 ...


지금까지 작동해야합니다. :) 이것이 내 질문을 해결한다고 생각합니다. 이제 중첩 된 목록 등으로 더 테스트 할 것입니다.
Atadj

6
"원래 목록 스타일 (기본값)로 되돌리기"는하지 않습니다. 그것은 단지 몇 가지 스타일을 설정 합니다.
유카 K. 펠라

동의하지만 어떤 식 으로든 목표는 스타일을 설정하는 것이 었습니다. 이 CSS는 더 이상 목록에 매우 기본적인 스타일을 제공합니다.
zessx

3
목록 스타일 유형에 대한 "기본"옵션이 없으며 답변을받은 후 알아 냈습니다. 브라우저는 종종 브라우저간에 일관성이없는 일부 스타일을 추가합니다.
Atadj 2012-08-01

1
나는 또한 누군가가 디스플레이를 설정했다 : inline-block; 글 머리 기호를 다시 표시하려면 목록 항목이어야합니다.
Mark

33

나는 이것이 실제로 당신이 찾고있는 것이라고 생각합니다.

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

.my_container li
{
    display: list-item;
}

예,이 답변도 중요한 것이라고 생각합니다. inherit부모 컨테이너에서 스타일을 상속하며 기본 브라우저 값으로 설정하지 않습니다. initial이 (내가 나중에 그 존재에 대해 알게) 수행되지만, 당신이 있는지 확인 ul { list-style: initial; }하고 ol { list-style: initial; }유효한 결과를 생성합니다? list-style적용되는 요소에 관계없이 초기 값으로 설정되지 않습니까? 하지 않음 initial값은 disc outside none목록의 두 가지 유형에 대해?
Atadj

1
놀랍 initial습니다.
BenjaminRH


12

문서에 따라 대부분의 브라우저는 다음 기본값으로 <ul>, <ol><li>요소를 표시 합니다.

UL 또는 OL 태그에 대한 기본 CSS 설정 :

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

LI 태그에 대한 기본 CSS 설정 :

li { 
    display: list-item;
}

중첩 된 목록 항목도 스타일 지정 :

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

참고 : 클래스에 위의 스타일을 사용하면 결과가 완벽 할 것입니다. 다른 목록 항목 마커 도 참조하십시오 .


이 경우 중첩 된 목록에는 새 수준과 함께 위쪽 및 아래쪽 여백이 추가됩니다.
VorganHaze

10

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;
}

1
고마워서 내 생명을 구했고, 왜 내 하위 메뉴에 패딩이 있는지 궁금해했습니다.
Asura

그러면 중첩 된 목록에 vertical.margij가 추가됩니다.
VorganHaze

4

당신은 할 수 없습니다. 요소에 속성을 할당하는 스타일 시트가 적용될 때마다 해당 요소의 인스턴스에 대해 브라우저 기본값으로 이동할 수있는 방법이 없습니다.

reset.css의 (논란의 여지가있는) 아이디어는 브라우저 기본값을 제거하여 깨끗한 책상에서 자신 만의 스타일을 시작할 수 있도록하는 것입니다. reset.css의 어떤 버전도이 작업을 완전히 수행하지 않지만, 그들이 수행하는 범위 내에서 reset.css를 사용하는 작성자 는 렌더링 을 완전히 정의 해야합니다 .


2

두 번째 CSS 블록의 모든 요소에서 여백을 재설정합니다. 기본 여백은 40px입니다. 이렇게하면 문제가 해결됩니다.

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

1

미래에 대한 대답 : CSS 4에는 revert 키워드가 포함될 것입니다.이 키워드는 속성을 사용자 또는 사용자 에이전트 스타일 시트 [ source ] 의 값으로 되돌 립니다. 이 글을 쓰는 시점에서 Safari만이이를 지원합니다. 여기 에서 브라우저 지원 업데이트를 확인하세요 .

귀하의 경우에는 다음을 사용합니다.

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

자세한 내용은 이 다른 답변 을 참조하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.