오랫동안 모아온 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 테두리가 있다는 것입니다. 예, 가능합니다. 시도해 볼 수 있습니다.

9. 하위 항목 선택자 사용

CSS 초보자는 하위 항목 선택자 사용이 효율성에 영향을 미치는 이유 중 하나라는 사실을 모릅니다. 하위 선택기를 사용하면 많은 클래스 정의를 저장할 수 있습니다. 다음 코드를 살펴보겠습니다.

항목 1

>

• 항목 1


• 항목 1


• 
  
  이 코드의 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 { /* 일부 스타일링 */ }
  
  위 코드를 다음 방법으로 대체할 수 있습니다
  
  
  
  • 항목 1
  
  
  • 항목 1
  
  
  • 항목 1
  
  
  
  
  스타일 정의는 다음과 같습니다.
  # subnav { /* 일부 스타일 */ }
  #subnav li { /* 일부 스타일 */ }
  #subnav a { /* 일부 스타일 */ }
  #subnav .sel { /* 일부 스타일 Styling * / }
  #subnav .sel a { /* 일부 스타일링 */ }
  
  하위 선택기를 사용하면 코드와 CSS를 더 간결하고 읽기 쉽게 만들 수 있습니다.
  10. 배경 이미지 경로에 따옴표를 추가할 필요가 없습니다
  
  바이트를 절약하기 위해 배경 이미지 경로에 따옴표를 추가하지 않는 것이 좋습니다. 필요한. 예:
  background:url("images/***.gif") #333;
  
  은
  background:url(images/***.gif) #333;
  
  으로 쓸 수 있습니다. 일부 브라우저 오류가 발생합니다.
  11. 그룹 선택기
  
  일부 요소 유형, 클래스 또는 ID에 공통 속성이 있는 경우 이를 사용하여 여러 번 정의할 수 있습니다.
  
  예를 들어 모든 제목의 글꼴, 색상 및 여백을 정의하려면 다음과 같이 작성할 수 있습니다.
  h1,h2,h3 ,h4,h5,h6 {
  Font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
  color:#333;
  margin:1em 0;
  
  개별 요소가 있는 경우 사용할 때 독립적인 스타일을 정의해야 하는 경우 새 정의를 추가하거나 이전 정의를 덮어쓸 수 있습니다. 예를 들면 다음과 같습니다.
  h1 { 글꼴 크기:2em }
  h2 { 글꼴 크기:1.6em; 🎜>
  12. 올바른 순서로 링크 스타일 지정
  CSS를 사용하여 링크의 여러 상태 스타일을 정의하는 경우 올바른 순서에 주의하세요. :link :visited :hover :active. 추출된 첫 번째 문자는 "LVHA"입니다(좋아요). Eric Meyer의 "Link Specity"를 참조할 수 있습니다. >
  사용자가 키보드 제어를 사용해야 하고 현재 링크의 포커스를 알아야 하는 경우 :focus 속성의 효과는 작성하는 위치에 따라 달라집니다. 포커스 요소에 :hover 효과를 표시하려면 :hover 앞에 :focus를 입력하세요. 포커스 효과를 :hover 효과로 바꾸려면 :focus 뒤에 :hover를 입력하세요.
  
  
  매우 일반적인 CSS 문제는 위치 지정에 플로팅을 사용할 때 하위 레이어가 플로팅 레이어로 덮이거나 레이어에 중첩된 하위 레이어가 외부 레이어의 범위를 초과하는 것입니다. 일반적인 해결책은 부동 레이어 뒤에 div 또는 br과 같은 추가 요소를 추가하고 해당 스타일을 명확하게 정의하는 것입니다. 이 방법은 다소 설득력이 없지만 운 좋게도 좋은 해결책을 찾을 수 있습니다. "구조적 마크업 없이 부동 소수점을 지우는 방법" 문서(참고: 이 사이트는 가능한 한 빨리 이 문서를 번역할 것입니다)를 참조하세요.
  위의 두 가지 방법으로 Floating Overflow 문제를 아주 잘 해결할 수 있지만, 꼭 레이어를 클리어해야 하거나 레이어에 있는 객체를 지워야 하는 경우에는 어떻게 할까요? 간단한 방법은 오버플로 속성을 사용하는 것입니다. 이 방법은 원래 "Simple Clearing of Floats"에 게시되었으며 "Clearance" 및 "Super simple Clearing Floats"에서 널리 논의되었습니다.
  위의 어떤 명확한 방법이 귀하에게 더 적합합니까? 구체적인 상황에 따라 다르므로 여기서는 논의하지 않겠습니다. 또한 몇 가지 훌륭한 기사에서 float의 적용에 대해 매우 명확하게 설명했습니다. "Floatutorial", "Containing Floats" 및 "Float Layouts"
  
  14를 읽어 보는 것이 좋습니다.
  
  
  이것은 간단한 요령이지만 다음과 같은 초보자 질문이 너무 많기 때문에 다시 말씀드릴 가치가 있습니다. CSS를 수평으로 가운데에 배치하는 방법은 무엇입니까? 요소의 너비를 정의하고 가로 여백을 정의해야 합니다. 레이아웃이 레이어(컨테이너)에 포함된 경우 다음과 같이 합니다.
  
  가로 중심에 배치하려면 다음과 같이 정의할 수 있습니다.
  #wrap { width:760px /* 레이어 너비로 수정*/
  margin:0 auto; }
  
  그러나 IE5/Win은 이 정의를 올바르게 표시할 수 없습니다. a 매우 유용한 해결 방법: text-align 속성을 사용합니다.다음과 같습니다:
  body {
  text-align:center;
  }
  #wrap {
  width:760px; /* 레이어 너비로 변경 */
  margin: 0 auto;
  text-align:left;
  }
  
  첫 번째 본문의 text-align:center; 두 번째 text-align:left는 #warp의 텍스트를 왼쪽 중앙에 배치하는 것입니다.
  15. CSS 가져오기 및 숨기기
  
  이전 브라우저는 CSS를 지원하지 않으므로 일반적인 접근 방식은 @import 기술을 사용하여 CSS를 숨기는 것입니다. 예를 들면 다음과 같습니다.
  @import url("main.css");
  
  그러나 이 방법은 IE4에서는 작동하지 않아 한동안 머리가 아팠습니다. 나중에 이렇게 썼습니다:
  @import "main.css";
  
  이렇게 하면 IE4에서 CSS를 숨길 수 있습니다. ㅎㅎ 저도 5바이트를 절약했습니다. @import 구문에 대한 자세한 설명을 알고 싶다면 "centricle의 CSS 필터 차트"
  를 참조하세요.
  16. IE 최적화
  
  
  때로는 IE 브라우저 버그는 몇 가지 특별한 규칙을 정의합니다. 여기에는 CSS 핵이 너무 많습니다. Microsoft가 다가오는 IE7 베타 버전에서 CSS를 더 잘 지원하는지 여부에 관계없이 이 두 가지 방법이 가장 안전합니다.
  
  * 1. 주석 방법
  o (a) IE에서 CSS 정의를 숨기려면 하위 선택기를 사용할 수 있습니다:
  html>body p {
  / * 정의 내용 */
                                                                                                               ~                     ​>                                                                         >                                Microsoft의 비공개 속성 조건부 주석(조건부 주석)을 사용합니다. 이 방법을 사용하면 기본 스타일 시트의 정의에 영향을 주지 않고 IE에 대해 일부 스타일을 별도로 정의할 수 있습니다. 이렇게:
  
  
  
  
  
  
  
  
  17. 디버깅 팁: 레이어는 얼마나 큽니까?
  
  
  CSS 디버깅 시 오류가 발생하면 타자기처럼 CSS 코드를 한 줄씩 분석해야 합니다. 나는 보통 문제의 레이어에 배경색을 정의하므로 레이어가 차지하는 공간이 얼마나 되는지 분명해집니다. 어떤 사람들은 일반적으로 가능한 테두리 사용을 제안하지만 문제는 때때로 테두리가 요소의 크기를 증가시키고 border-top 및 boeder-bottom이 수직 여백 값을 파괴하므로 배경을 사용하는 것이 더 안전하다는 것입니다.
  
  CSS 코드를 작성할 때 들여쓰기, 줄 바꿈, 공백에 대한 작성 습관은 사람마다 다릅니다. 계속 연습한 끝에 다음과 같은 작성 스타일을 사용하기로 결정했습니다. selector1,
  selector2 { property:value
  }
  
  Union 정의를 사용할 때 저는 보통 각 선택자를 작성합니다. CSS 파일에서 더 쉽게 찾을 수 있습니다. 마지막 선택기와 중괄호 { 사이에 공백을 추가합니다. 또한 각 정의를 자체 줄에 작성해야 합니다. 공백을 추가하지 마십시오.
  저는 각 속성 값 뒤에 세미콜론을 추가하는 데 익숙합니다. 규칙에 따라 마지막 속성 값 뒤에 세미콜론을 생략할 수 있지만 새 속성 값을 추가할 때 세미콜론을 추가하는 것을 잊어버리기 쉽습니다. 스타일 오류이므로 모두 추가하는 것이 좋습니다.
  마지막으로 닫는 중괄호}가 한 줄에 단독으로 쓰여집니다.