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#콘텐츠 { }
fieldset.details { }
다음과 같이 쓸 수 있다
#콘텐츠 { }
.세부사항 { }
이렇게 하면 일부 바이트가 절약됩니다.
5.기본값
일반적으로 padding의 기본값은 0이고, background-color의 기본값은 transparent입니다. 그러나 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 다음과 같이 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 0으로 정의할 수 있습니다.
* {
여백:0;
패딩:0;
}
6. 상속 가능한 값을 반복적으로 정의할 필요가 없습니다.
CSS에서는 상위 요소에 정의된 색상, 글꼴 등 상위 요소의 속성값을 하위 요소가 자동으로 상속하므로, 반복 정의 없이 하위 요소에 직접 상속할 수 있습니다. 그러나 브라우저가 일부 기본값으로 정의를 재정의할 수 있다는 점에 유의하세요.
7. 최근의 첫 번째 원칙
동일한 요소에 대한 정의가 여러 개 있는 경우 가장 가까운(최소 수준) 정의에 우선 순위가 부여됩니다. 예를 들어 다음 코드가 있습니다.
업데이트: Lorem ipsum dolor 세트
CSS 파일에서 p 요소와 classupdate를 정의했습니다.
피 {
여백:1em 0;
글꼴 크기:1em;
색상:#333;
}
.업데이트 {
글꼴 두께:굵게;
색상:#600;
}
이 두 가지 정의 중 class=update가 사용되는 이유는 class가 p보다 가깝기 때문입니다. 자세한 내용은 W3C의 "선택기의 특이성 계산"을 확인하세요.
8. 다중 클래스 정의
태그는 동시에 여러 클래스를 정의할 수 있습니다. 예: 먼저 두 가지 스타일을 정의합니다. 첫 번째 스타일의 배경은 #666이고 두 번째 스타일의 테두리는 10px입니다.
.one{너비:200px;배경:#666;}
.two{테두리:10px 솔리드 #F00;}
페이지 코드에서는 다음과 같이 호출할 수 있습니다.
최종 표시 효과는 이 div에 #666 배경과 10px 테두리가 모두 있다는 것입니다. 예, 가능합니다. 시도해 볼 수 있습니다.
9. 자손 선택자를 사용하세요
CSS 초보자는 하위 선택기를 사용하는 것이 효율성에 영향을 미치는 이유 중 하나라는 사실을 모릅니다. 하위 선택기를 사용하면 많은 클래스 정의를 저장할 수 있습니다. 다음 코드를 살펴보겠습니다.
이 코드에 대한 CSS 정의는 다음과 같습니다.
div#subnavul { }
div#subnavulli.subnavitem { }
div#subnavulli.subnavitem a.subnavitem { }
div#subnavulli.subnavitemselected { }
div#subnavulli.subnavitemselected a.subnavitemselected { }
위 코드를 다음 메소드로 대체할 수 있습니다.
스타일 정의는 다음과 같습니다.
#subnav { }
#subnavli { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
코드와 CSS를 더 간결하고 읽기 쉽게 만들려면 하위 선택기를 사용하세요.
10. 배경 이미지 경로에 따옴표를 추가할 필요가 없습니다.
바이트를 절약하려면 배경 이미지 경로를 인용하지 않는 것이 좋습니다. 인용이 필요하지 않기 때문입니다. 예를 들어:
배경:url(이미지
여백:0 자동;
}
그러나 IE5/Win은 이 정의를 올바르게 표시할 수 없습니다. 우리는 이를 해결하기 위해 매우 유용한 트릭을 사용합니다: text-align 속성을 사용합니다. 이와 같이:
몸 {
텍스트 정렬:가운데;
}
#포장하다 {
너비:760px;
여백:0 자동;
텍스트 정렬:왼쪽;
}
첫 번째 본문의 text-align:center; 규칙은 IE5/Win에서 본문의 모든 요소가 가운데에 맞춰지도록 정의하고(다른 브라우저는 텍스트를 가운데에 배치함) 두 번째 text-align:left는 #warp의 텍스트를 가운데에 맞추는 것입니다. 왼쪽.
15. CSS 가져오기 및 숨기기
이전 브라우저는 CSS를 지원하지 않기 때문에 일반적인 접근 방식은 @import 기술을 사용하여 CSS를 숨기는 것입니다. 예를 들어:
@import url(main.css);
하지만 이 방법은 IE4에서는 작동하지 않아서 한동안 머리가 아팠습니다. 나중에 나는 다음과 같이 썼다.
@import main.css;
이런 식으로 CSS를 IE4에서 숨길 수 있고, 5바이트도 절약됩니다. @import 구문에 대한 자세한 설명을 알고 싶다면 여기 "centricle의 CSS 필터 차트"를 참조하세요.
16. IE 최적화
때로는 IE 브라우저 버그에 대한 몇 가지 특별한 규칙을 정의해야 합니다. 여기에는 CSS 해킹이 너무 많습니다. Microsoft가 곧 출시될 IE7 베타 버전에서 더 나은지 여부에 관계없이 두 가지 방법만 사용합니다. 가장 안전합니다.
1. 주석 방법
(a) IE에서 CSS 정의를 숨기려면 하위 선택기를 사용할 수 있습니다.
html>본문 p {
}
(b) 다음 작성 방법은 IE 브라우저에서만 인식할 수 있습니다(다른 브라우저에서는 숨김).
* HTML 피 {
}
(c) 때로는 IE/Win을 활성화하고 IE/Mac을 숨기려는 경우 백슬래시 트릭을 사용할 수 있습니다.
* HTML 피 {
선언
}
2. 조건부 주석 방법
CSS Hacks보다 더 오랜 시간 테스트를 거친 또 다른 방법은 Microsoft의 개인 속성인 조건부 주석(조건부 주석)을 사용하는 것입니다. 이 방법을 사용하면 기본 스타일 시트의 정의에 영향을 주지 않고 IE에 대해 일부 스타일을 별도로 정의할 수 있습니다.
17. 디버깅 팁: 레이어의 크기는 얼마나 되나요?
CSS 오류를 디버깅할 때는 타자기처럼 CSS 코드를 한 줄씩 분석해야 합니다. 나는 보통 문제의 레이어에 배경색을 정의하므로 레이어가 차지하는 공간이 얼마나 되는지 분명해집니다. 어떤 사람들은 일반적으로 가능한 테두리 사용을 제안하지만 문제는 때때로 테두리가 요소의 크기를 증가시키고 border-top 및 boeder-bottom이 수직 여백 값을 파괴하므로 배경을 사용하는 것이 더 안전하다는 것입니다.
종종 문제를 일으키는 또 다른 속성은 개요입니다. 아웃라인은 보더(boeder)처럼 보이지만 요소의 크기나 위치에는 영향을 주지 않습니다. 아웃라인 속성을 지원하는 브라우저는 소수에 불과하며, 제가 아는 브라우저는 Safari, OmniWeb, Opera뿐입니다.
18. CSS 코드 작성 스타일
CSS 코드를 작성할 때 들여쓰기, 줄 바꿈, 공백과 관련된 각자의 작성 습관이 있습니다. 끊임없는 연습 끝에 나는 다음과 같은 글쓰기 스타일을 채택하기로 결정했습니다.
선택기1,
선택기2 {
속성:값;
}
통합 정의를 사용할 때 일반적으로 CSS 파일에서 더 쉽게 찾을 수 있도록 각 선택기를 한 줄에 작성합니다. 마지막 선택기와 중괄호 { 사이에 공백을 추가합니다. 또한 각 정의를 자체 줄에 작성해야 합니다. 공백을 추가하지 마십시오.
각 속성 값 뒤에 세미콜론을 추가하는 데 익숙합니다. 규칙에 따르면 마지막 속성 값 뒤에 세미콜론을 쓸 필요가 없지만 새 스타일을 추가하려는 경우 세미콜론을 추가하는 것을 잊어버리기 쉽습니다. 오류가 발생하므로 계속 추가하는 것이 좋습니다.
마지막으로 닫는 중괄호 }가 한 줄에 단독으로 작성됩니다.
공백과 줄 바꿈은 읽기에 도움이 됩니다.
