CSS-범용 '*'선택기 대 html 또는 본문 선택기를 사용 하시겠습니까?

body 태그에 스타일을 적용하면 전체 페이지에 적용되므로

body { font-family: Verdana }

전체 페이지에 적용됩니다. 이것은 또한 할 수 있습니다

* {font-family: Verdana} 

모든 요소에 적용되므로 동일한 효과가있는 것 같습니다.

첫 번째 경우 스타일은 전체 페이지의 한 태그, 본문에 적용되는 반면 두 번째 예제에서는 글꼴이 각 개별 html 요소에 적용된다는 원칙을 이해합니다. 내가 묻고있는 것은 그것을하는 데 실질적인 차이점은 무엇이며, 그 의미는 무엇이며, 서로를 사용하게하는 이유, 상황 또는 모범 사례는 무엇입니까?

한 가지 부작용은 확실히 속도입니다 (+1 Rob). 기능면에서 다른 것을 선택 해야하는 실제 이유에 가장 관심이 있습니다.

CSS 선택기 의이 두 가지 선택의 기능적 차이점 ...

몸

• 바디 요소에 스타일 속성을 적용합니다.
• 본문 내의 요소는 속성 값을 상속 할 수 있습니다. 일부 속성의 기본값은 '상속'입니다.
• 본문 내의 요소와 일치하는 스타일 선언은 상속 된 스타일을 재정의 할 수 있습니다.

범용 선택기 * (모든 요소)

• 스타일 속성을 모든 개별 요소에 적용합니다.
• 상속 된 스타일 속성과 기본 '초기 값'을 대체합니다. 상속을 차단합니다.
• 요소와 일치하는 다른 더 구체적인 CSS 선택기는 *로 적용된 스타일 속성을 대체합니다.

제안

1. 글꼴, 색상과 같이 상속되는 스타일 속성에 body를 사용하여 요소에 적절한 기본값을 제공하여 모든 경우에 대해 명시 적으로 코딩 할 필요성을 줄이고 본문보다 낮은 레벨에 포함 된 요소의 기능을 보존합니다. 부모로부터 물려받습니다.
2. 이 경우에는 Universal Selector *를 사용하지 않는 것이 좋습니다. 본문 내 다른 요소 간의 상속을 중단하고 더 많은 CSS 규칙을 작성하여 보상 할 수 있습니다. 페이지 렌더링 속도가 느려질 수 있습니다. 이것은 페이지의 크기와 내용 및 CSS 규칙의 수에 따라 다릅니다.

이런 식으로 해보십시오

body { font-family: Verdana }
table { font-family: Arial }

에 맞서

* { font-family: Verdana }
table { font-family: Arial }

그리고 표의 셀에 어떤 스타일이 적용되는지 확인하십시오.

계단식 스타일 시트를 처리 할 때 "전체 문서에 적용"과 "문서의 모든 요소에 적용"사이에는 차이가 있습니다 .

본문에 계단식 스타일을 적용하면 태그를 덮어 쓸 때까지 본문 내의 모든 태그에 적용됩니다. 그런 다음 덮어 쓴 스타일이 해당 태그 내의 모든 태그에 적용됩니다.

그러나 여백 및 패딩 (일반적으로 의미가없는 위치)과 같이 캐스케이드되지 않는 일부 스타일이 있습니다. 그것들은 특정 태그에만 적용 할 수 있으며 와일드 카드가 유용 할 수있는 곳입니다 (드물지만).

계단식이 아닌 대부분의 스타일은 또한 margin: inherit"상위 태그의 값을 가져옵니다"라는 inherit 값을가집니다 (예 :) .

완전한 세부 사항을 잊어 버렸지 만 * 선택기를 사용하면 브라우저가 CSS를 구문 분석하고 스타일을 적용함에 따라 모든 요소가 평가 될 때 성능이 느려집니다. iirc,이 경우 글꼴을 부모로 설정하면 각 요소에 대해 하나의 참조를 작성하므로 추가 작업이 필요하지 않습니다.

다른 문제들도 있지만, 다시 한 번 모든 것을 기억하지는 않지만 몇 년 동안 사용하지 않았습니다.

좋은 CSS 디자인을위한 일반적인 지침은 가능한 한 구체적이어야하지만 더 이상은 아닙니다.

따라서 귀하의 예에서 스타일을 body 요소에 적용하는 것은 가능한 한 구체적이며 '*'선택기보다 더 구체적입니다.

다른 언급으로 body { font-family: Verdana }만 요소 글꼴 베르데 나 선택됩니다 상속font-style 같은 속성이 eventualy 형태도 상속합니다 부모의 모든 부모의 속성을 body, 요소, 그리고 * {font-family: Verdana}에 글꼴 베르데 나 선택됩니다 모든 요소. 예를 들어 차이점을 설명하고 싶습니다.

바디 셀렉터 사용 :

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

보편적 인 selelctor 사용하기 *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

예제에서 CSS와 HTML 코드를 사용하면 <input>요소가 글꼴 스타일을 전혀 상속하지 않으므로 양식에 입력하는 모든 내용이 사용자 에이전트 스타일 시트의 기본 글꼴 스타일을 얻습니다. 두 번째 예에서 범용 선택기 *는 요소를 포함한 모든 요소에 대해 글꼴 스타일을 명시 적으로 설정합니다 input.