상속 된 CSS 재설정

Question

대체 사이트로 대체 디자인을 만들려고합니다. 나는 시스템이 어떻게 구조화되는지를 정말로 바꿀 수 없다. 메인 스타일 시트가로드되고, 그 다음에 두번째 스타일 시트가로드됩니다. 두 번째 스타일 시트를 제어 할 수 있습니다. CSS를 재설정해야합니다. 특히 요소를 형성하십시오.

그러나 나는 그것에 어려움을 겪고 있습니다. <button>와 예를 들어 :

background: rgb(88,222,255); 
border-radius: 4px; 
border: 1px solid #91d7eb; 
box-shadow: 0px 2px 4px 0px rgba(1, 75, 138, .8); 
color: #FFF; 
cursor: pointer; 
font-family: "Graphic-Font"; 
font-size: 25px; 
font-weight: bold; 
text-shadow: 0px 1px 3px #014b8a; 
padding: 10px 40px; 

내가 background: none, 국경 반경 설정 할 수 있지만 : none` 등을, 무슨 일 버튼 더 스타일보다는 기본 브라우저 스타일이없는 것입니다. 폼 요소를 페이지의 다른 많은 요소 중에서 기본 브라우저 스타일로 가져와야합니다. 그러나 나는 형식화되지 않은 양식 요소를 적어도 얻지 못하는 것 같습니다. 문제를 단순화 선명도 를 들어

: 어떻게 다시 한 재 - 스타일 <button> 기본값으로 무엇입니까?

Answer 1

나는 출발점으로 CSS 재설정 (Eric Meyers' 아마 가장 유명하다) 사용하는 것이 좋습니다 것입니다.

자신 만의 스타일을 설정하고 싶지 않지만 브라우저 기본 설정으로 되돌려 놓아야하는 문제에 직면 해 있다고 생각합니다 (예 : margin:0;을 기본 설정으로 사용하지 않으려는 경우). p에 H1에, 기본 작은 일 등

당신은 실제로 사용자 에이전트 스타일 시트의 사본을 얻을 그들을 더 특정하게하도록 수정하고, 덮어 쓰기를 포함 할 수 있습니다. Here is a site that has copies of a lot of default UA stylesheets. 여기에 문제가 있다는 것입니다 모든 브라우저는 자신의 브라우저를 사용하기 때문에 브라우저가 선택적 스타일 시트를 감지하여 제공하지 않는 한 그 브라우저에서 정상적인 것처럼 보이지는 않습니다.하지만 괜찮습니다. 실제로 브라우저 오류를 선택하는 것이 좋습니다. 모든 브라우저를 좋아하는 것처럼 보이게 설정하거나 W3C's suggestion for default browser styles을 사용할 수 있습니다.

양식 요소의 스타일링이 지옥이므로이 모든 것이 문제를 해결하지 못합니다. 스타일을 적용하자 마자 일부 브라우저는 양식 요소의 렌더링 모드를 전환하여 원래 스타일로 되돌릴 수 없도록합니다. 예를 들어 IE7은 둥근 모서리를 지원하지 않지만 Windows OS 스타일로 렌더링하기 때문에 기본 단추의 모서리가 둥글게됩니다.그러나 버튼에 테두리 나 다른 스타일을 지정하자마자 멋진 Windows 음영 처리가 된 기본 모양이 사라지고 이미지를 사용하지 않고 다시 가져올 방법이 없습니다!

그래서 실제로 브라우저를 기본 기본 스타일로 되돌리려 고 시도하지 않았습니다. UA 기본 스타일 시트를 사용하고 수정하여 일종의 일반적인 브라우저 간, 크로스 시스템 기본값으로 만듭니다. 그것은 기본 unstyled 코드처럼 보이지 않을 것이지만, 충분히 가까이 보일 것입니다.

Answer 2

CSS specificity의 작동 방식을 이해해야합니다. CSS 규칙을 다른 규칙보다 구체적으로 덮어 쓸 수 있습니다. 예를 들어

:

<div class="content"> 
    <div class="wrapper"><span>Hello World</span></div> 
</div> 

CSS : 첫 번째 선언을 덮어 이때

.content .wrapper span { ... } 
.wrapper span { ... } 

, 그것은 "더 구체적으로"이기 때문이다. 일반적으로 트리 하나의 단계로 올라가서 래핑 요소 또는 래핑 클래스를 지정하여 내부 요소의 규칙을 재정의 할 수 있습니다. 이것은 주요 스타일 시트에 액세스 할 수없는 WordPress와 같은 많은 CMS 시스템을 실제로 전달하거나 원하는 부분 만 다시 피부에 남기고 싶습니다.

기사를 읽는 것이 중요합니다.

CSS Specificity: Things You Should Know