오랫동안 모아온 18가지 CSS 스킬_경험교류

최근 친구들이 직장에서 겪는 CSS 문제에 대해 자주 묻습니다. 그들은 항상 CSS를 잘 제어할 수 없으며 이는 CSS의 효율성에 영향을 미칩니다. 모두가 CSS를 더 쉽게 사용할 수 있도록 오류를 분석하고 요약하겠습니다.

이 기사에는 CSS 레이아웃 방법을 사용하기 시작한 이후 배운 모든 기술과 호환성 솔루션이 요약되어 있습니다. 초보자가 자주 범하는 몇 가지 실수를 집중적으로 설명하겠습니다. 이미 CSS 마스터라면 이러한 경험과 기술을 이미 알고 있을 수도 있습니다. 더 많은 정보가 있으면 추가하는 데 도움을 주시기 바랍니다.
1. CSS 약어 사용

약어를 사용하면 CSS 파일 크기를 줄이고 읽기 쉽게 만들 수 있습니다. CSS 약어의 주요 규칙에 대해서는 여기서는 설명하지 않기 때문에 "일반적인 CSS 약어 구문 요약"을 참조하세요.
2. 값이 0이 아닌 이상 단위를 명확하게 정의하세요.

크기 단위를 정의하는 것을 잊어버리는 것은 CSS 초보자들이 흔히 저지르는 실수입니다. HTML에서는 width="100"이라고 쓸 수 있지만 CSS에서는 width:100px width:100em과 같이 정확한 단위를 제공해야 합니다. 단위를 정의하지 않는 경우 행 높이와 값 0이라는 두 가지 예외만 있습니다. 또한, 다른 값 뒤에는 단위가 와야 합니다. 값과 단위 사이에 공백이 추가되지 않도록 주의하세요.
3. 대소문자 구분

XHTML에서 CSS를 사용할 때 CSS에 정의된 요소 이름은 대소문자를 구분합니다. 이 오류를 방지하려면 모든 정의 이름에 소문자를 사용하는 것이 좋습니다.

class 및 id 값은 HTML과 XHTML에서도 대소문자를 구분합니다. 대소문자를 혼합하여 사용해야 하는 경우 CSS의 정의가 XHTML의 태그와 일치하는지 주의 깊게 확인하세요.
4. 클래스 및 ID 이전의 요소 한정 취소

요소에 대한 클래스 또는 ID를 정의하기 위해 작성할 때 ID가 있으므로 이전 요소 한정을 생략할 수 있습니다. 페이지는 고유하지만 클래스는 페이지에서 여러 번 사용될 수 있습니다. 요소를 한정하는 것은 의미가 없습니다. 예:
div#content { /* 선언 */ }
fieldset.details { /* 선언 */ }

은
#content { /* 선언 */으로 작성할 수 있습니다. }
.details { /* 선언 */ }

이렇게 하면 바이트를 절약할 수 있습니다.
5. 기본값

보통 padding의 기본값은 0이고, background-color의 기본값은 투명입니다. 그러나 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 다음과 같이 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 0으로 정의할 수 있습니다.
* {
margin:0; 0;
}

6. 상속 가능한 값을 반복적으로 정의할 필요가 없습니다.
CSS에서 하위 요소는 상위 요소의 속성 값을 자동으로 상속합니다. , 색상, 글꼴 등 이미 상위 요소에 존재하는 요소를 한 번 정의하면 반복 정의 없이 하위 요소에 직접 상속할 수 있습니다. 그러나 브라우저가 일부 기본값으로 정의를 재정의할 수 있다는 점에 유의하세요.

7. 가장 가까운 첫 번째 원칙
동일한 요소에 대한 정의가 여러 개 있는 경우 가장 가까운(최소 수준) 정의가 우선 적용됩니다. 예를 들어 다음과 같은 코드가 있습니다.

업데이트: Lorem ipsum dolor set

CSS 파일에서 요소 p와 "update" 클래스를 정의했습니다.
p {
margin:1em 0
font-size:1em;
color:#333;
}
.update {
font-weight:bold
color:#600; 🎜>이 두 정의에서는 클래스가 p보다 가깝기 때문에 class="update"가 사용됩니다. 자세한 내용은 W3C의 "선택기의 특이성 계산"을 확인하세요.

8. 다중 클래스 정의


태그는 동시에 여러 클래스를 정의할 수 있습니다. 예: 먼저 두 가지 스타일을 정의합니다. 첫 번째 스타일의 배경은 #666이고 두 번째 스타일의 테두리는 10px입니다. .one{너비:200px;배경:#666;} .two{border:10px solid #F00;}

페이지 코드에서



최종 표시 효과는 이 div에 #666 배경과 10px 테두리가 있다는 것입니다. 예, 가능합니다. 시도해 볼 수 있습니다.