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의 기본값은 transparent입니다. 그러나 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 다음과 같이 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 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 초보자는 하위 선택기를 사용하는 것이 효율성에 영향을 미치는 이유 중 하나라는 사실을 모릅니다. 하위 선택기를 사용하면 많은 클래스 정의를 저장할 수 있습니다. 다음 코드를 살펴보겠습니다.
〈div id=subnav〉
〈ul〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 항목 1〈/a〉〈/li〉
〈li class=subnavitemｓｌｍｃｔｔ〉 〈a href=# class=subnavitemｽｌｍｃｔｔ〉 항목 1〈/a〉 〈/li〉
〈li class=subnavitem〉 〈a href=# class=subnavitem〉 항목 1〈/a〉 〈/li〉
〈/ul〉
〈/div〉 |
이 코드에 대한 CSS 정의는 다음과 같습니다.
div#subnav ul { /* 일부 스타일 지정 */ }
div#subnav ul li.subnavitem { /* 일부 스타일 지정 */ }
div#subnav ul li.subnavitem a.subnavitem { /* 일부 스타일 지정 */ }
div#subnav ul li.subnavitemselected { /* 일부 스타일 지정 */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* 일부 스타일 지정 */ } |
위 코드를 다음 메소드로 대체할 수 있습니다.
〈ul id=subnav〉
〈li〉 〈a href=#〉 항목 1〈/a〉 〈/li〉
〈li class=sel〉 〈a href=#〉 항목 1〈/a〉 〈/li〉
〈li〉 〈a href=#〉 항목 1〈/a〉 〈/li〉
〈/ul〉 |
스타일 정의는 다음과 같습니다.
#subnav { /* 일부 스타일 지정 */ }
#subnav li { /* 일부 스타일 지정 */ }
#subnav a { /* 일부 스타일 지정 */ }
#subnav .sel { /* 일부 스타일 지정 */ }
#subnav .sel a { /* 일부 스타일 지정 */ } |
코드와 CSS를 더 간결하고 읽기 쉽게 만들려면 하위 선택기를 사용하세요.
10. 배경 이미지 경로에는 따옴표를 추가할 필요가 없습니다. 바이트를 절약하기 위해 배경 이미지 경로에는 따옴표가 필요하지 않기 때문에 따옴표를 추가하지 않는 것이 좋습니다. 예를 들어:
| 배경:url(images/***.gif) #333; |
다음과 같이 쓸 수 있다
| 배경:url(images/***.gif) #333; |
따옴표를 추가하면 브라우저 오류가 발생합니다.
11. 그룹 선택기
일부 요소 유형, 클래스 또는 ID에 공통 속성이 있는 경우 그룹 선택기를 사용하면 정의가 여러 번 반복되는 것을 피할 수 있습니다. 이렇게 하면 꽤 많은 바이트를 절약할 수 있습니다.
예를 들어 모든 제목의 글꼴, 색상 및 여백을 정의하려면 다음과 같이 작성할 수 있습니다.
h1,h2,h3,h4,h5,h6 {
글꼴 모음: Lucida Grande, Lucida,Arial,Helvetica,sans-serif;
색상:#333;
여백:1em 0;
} |
사용 중에 독립적인 스타일을 정의해야 하는 개별 요소가 있는 경우 새 정의를 추가하거나 이전 정의를 덮어쓸 수 있습니다. 예를 들면 다음과 같습니다.
h1 { 글꼴 크기:2em }
h2 { 글꼴 크기:1.6em } |
12. 올바른 순서로 링크 스타일을 지정하십시오.
CSS를 사용하여 링크의 여러 상태 스타일을 정의할 때 올바른 순서는 다음과 같습니다: :link :visited :hover :active. 추출된 첫 번째 문자는 LVHA이며 LoVe HAte(좋아하는 것을 싫어함)로 기억할 수 있습니다. 왜 그렇게 정의되었습니까? Eric Meyer의 "링크 특이성"을 참조할 수 있습니다.
사용자가 키보드 제어를 사용해야 하고 현재 링크의 포커스를 알아야 하는 경우 :focus 속성을 정의할 수도 있습니다. :focus 속성의 효과는 글을 쓰는 위치에 따라 달라집니다. 포커스가 있는 요소에 :hover 효과를 표시하려면 :hover 효과를 포커스 효과로 대체하려면 :focus를 작성하세요. :hover 뒤에 :focus를 넣습니다.
13. 플로트 클리어
매우 일반적인 CSS 문제는 위치 지정에 플로팅을 사용할 때 기본 레이어가 플로팅 레이어로 덮이거나 레이어에 중첩된 하위 레이어가 외부 레이어의 범위를 초과하는 것입니다.
일반적인 해결 방법은 부동 레이어 뒤에 div 또는 br과 같은 추가 요소를 추가하고 해당 스타일을 명확: 둘 다로 정의하는 것입니다. 이 방법은 다소 무리가 있지만 다행히 이를 해결할 수 있는 좋은 방법이 있습니다. "구조적 마크업 없이 플로트를 지우는 방법" 문서를 참조하세요. (참고: 이 사이트에서는 이 문서를 가능한 한 빨리 번역합니다.)
위의 두 가지 방법으로 플로팅 오버플로 문제를 매우 잘 해결할 수 있지만, 정말로 레이어를 지우거나 레이어에 있는 개체를 지워야 하는 경우에는 어떻게 될까요? 간단한 방법은 오버플로 속성을 사용하는 것입니다. 이 방법은 원래 "Simple Clearing of Floats"에 게시되었으며 "Clearance" 및 "Super simple Clearing Floats"에서 널리 논의되었습니다.
위의 명확한 방법 중 귀하에게 더 적합한 방법은 특정 상황에 따라 다르므로 여기서는 논의하지 않습니다. 또한 몇 가지 훌륭한 기사에서 float의 적용에 대해 매우 명확하게 설명했습니다. "Floatutorial", "Containing Floats" 및 "Float Layouts"를 읽어 보는 것이 좋습니다.
14. 수평 센터링
이것은 간단한 트릭이지만 다음과 같은 초보자 질문이 너무 많기 때문에 다시 말할 가치가 있습니다. CSS를 수평으로 가운데에 배치하는 방법은 무엇입니까? 레이아웃이 레이어(컨테이너)에 포함된 경우 다음과 같이 요소의 너비를 정의하고 가로 여백을 정의해야 합니다.
한정되지 않은
다음과 같이 수평 중앙에 위치하도록 정의할 수 있습니다.
#포장하다 {
width:760px; /* 레이어 너비 변경*/
여백:0 자동;
} |
그러나 IE5/Win은 이 정의를 올바르게 표시할 수 없습니다. 우리는 이를 해결하기 위해 매우 유용한 트릭을 사용합니다: text-align 속성을 사용합니다. 이와 같이:
몸 {
텍스트 정렬:가운데;
}
#포장하다 {
width:760px; /* 레이어 너비 변경*/
여백:0 자동;
텍스트 정렬:왼쪽;
} |
첫 번째 본문의 text-align:center; 규칙은 IE5/Win에서 본문의 모든 요소가 가운데에 맞춰지도록 정의하고(다른 브라우저는 텍스트를 가운데에 배치함) 두 번째 text-align:left는 #warp의 텍스트를 가운데에 맞추는 것입니다. 왼쪽.
15. CSS 가져오기 및 숨기기
이전 브라우저는 CSS를 지원하지 않기 때문에 일반적인 접근 방식은 @import 기술을 사용하여 CSS를 숨기는 것입니다. 예를 들어:
하지만 이 방법은 IE4에서는 작동하지 않아서 한동안 머리가 아팠습니다. 나중에 나는 다음과 같이 썼다.
이런 식으로 CSS를 IE4에서 숨길 수 있고, 5바이트도 절약됩니다. @import 구문에 대한 자세한 설명을 알고 싶다면 여기 "centricle의 CSS 필터 차트"를 참조하세요.
16. IE 최적화
때로는 IE 브라우저 버그에 대한 몇 가지 특별한 규칙을 정의해야 합니다. 여기에는 CSS 해킹이 너무 많습니다. Microsoft가 곧 출시될 IE7 베타 버전에서 더 나은지 여부에 관계없이 두 가지 방법만 사용합니다. 가장 안전합니다.
1. 주석 방법
(a) IE에서 CSS 정의를 숨기려면 하위 선택기를 사용할 수 있습니다.
html>본문 p {
/* 정의 내용 */
} |
(b) 다음 작성 방법은 IE 브라우저에서만 인식할 수 있습니다(다른 브라우저에서는 숨김).
(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 코드를 작성할 때 들여쓰기, 줄 바꿈, 공백과 관련된 각자의 작성 습관이 있습니다. 끊임없는 연습 끝에 나는 다음과 같은 글쓰기 스타일을 채택하기로 결정했습니다.
통합 정의를 사용할 때 일반적으로 CSS 파일에서 더 쉽게 찾을 수 있도록 각 선택기를 한 줄에 작성합니다. 마지막 선택기와 중괄호 { 사이에 공백을 추가합니다. 또한 각 정의를 자체 줄에 작성해야 합니다. 공백을 추가하지 마십시오.
각 속성 값 뒤에 세미콜론을 추가하는 데 익숙합니다. 규칙에 따르면 마지막 속성 값 뒤에 세미콜론을 쓸 필요가 없지만 새 스타일을 추가하려는 경우 세미콜론을 추가하는 것을 잊어버리기 쉽습니다. 오류가 발생하므로 계속 추가하는 것이 좋습니다.
마지막으로 닫는 중괄호 }는 가독성을 높이기 위해 공백과 개행 문자를 사용하여 한 줄에 단독으로 작성됩니다.
