CSS 작성 사양

CSS 작성 사양 [전송]

1. 브라우저 호환성을 위해 브라우저 요소의 일부 기본 속성을 재설정하려면 재설정을 사용하세요. /**내부 및 외부 여백 지우기 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* 구조 요소 구조 요소*/ dl, dt, dd, ul, ol, li, /* 목록 요소 목록 요소*/PRe, /* 텍스트 형식 요소 텍스트 형식 요소*/ form, fieldset, legend, 버튼, 입력, textarea, /* 양식 요소 양식 요소*/ th, td, /* 테이블 요소 테이블 요소*/ img/* img elements 그림 요소*/ { border:medium none; margin: 0; } /**기본 글꼴 설정 **/body,button, input, select, textarea { 글꼴: 12px/1.5 '宋体' ,tahoma, Srial, helvetica, sans-serif } h1, h2, h3, h4, h5, h6 { 글꼴 크기: 100% } em{font-style:normal;} /**목록 요소 재설정 **/ ul , ol { 목록 스타일: 없음; *하이퍼링크 요소 재설정 **/img{ border:0px;} /**이미지 요소 재설정 **/ table { border-collapse: border-spacing: 0; }

좋은 명명 습관

3. 코드 약어 li{font-family:Arial, Helvetica, sans-serif; line-height: 1.4em; padding-bottom:10px; :5px; } 는 li{ Font: 1.2em/1.4em Arial, Helvetica, sans-serif; }

4. 페이지에 상위 요소가 있는 경우 CSS 상속을 사용합니다. 하위 요소가 동일한 스타일을 사용하는 경우 상위 요소에 동일한 스타일을 정의하고 이러한 CSS 스타일을 상속하도록 하는 것이 가장 좋습니다. 이렇게 하면 코드를 잘 유지하고 코드 양을 줄일 수 있습니다. 그러면 원래 코드는 다음과 같습니다: #container li{font-family:Georgia, serif; } #container p{font-family:Georgia, serif; Font- family:Georgia, serif; }

5. 여러 선택기를 사용하면 공통 스타일이 있는 경우 여러 CSS 선택기를 하나로 병합할 수 있습니다. 이렇게 하면 코드가 간결해질 뿐만 아니라 시간과 공간도 절약됩니다. 예: h1{ 글꼴-가족:Arial, Helvetica, sans-serif; 글꼴-가중치:일반; } h2{ 글꼴-가족:Arial, Helvetica, sans-serif; } h3{ 글꼴-가족 : Arial, Helvetica, sans-serif;font-weight:normal; }는 h1, h2, h3{font-family:Arial, Helvetica, sans-serif; }

6. 적절한 코드 주석

7. CSS 코드를 정렬합니다. 코드의 속성을 알파벳순으로 정렬하면 수정 사항을 더 빨리 찾을 수 있습니다.

/**테이블 요소 재설정 * */ div{ 배경색:#3399cc; 글꼴:1.2em/1.4em Arial, Helvetica, sans-serif; 여백:10px 5px; %; z-index:10; } 9. 더 나은 스타일 속성 값을 선택합니다. CSS의 일부 속성은 서로 다른 속성 값을 사용합니다. 예를 들어 border:0 과 같은 차이가 있습니다. 페이지에는 보이지 않지만 테두리의 기본값에 따라 브라우저는 여전히 border-width/border-color를 렌더링합니다. 즉, 메모리 값이 사용됩니다. Border:none은 테두리가 없음을 의미하는 "none"으로 설정됩니다. 브라우저가 "none"을 구문 분석할 때 렌더링 작업을 수행하지 않습니다. 즉, 메모리 값을 소비하지 않습니다. 따라서 border:none을 사용하는 것이 좋습니다. 마찬가지로 display:none은 렌더링하지 않고 개체 브라우저를 숨기고 메모리를 차지하지 않습니다. 그리고 가시성:숨겨진 의지.

10. @import 대신 를 사용하세요. 우선 @import는 부정적인 영향을 미치지 않습니다. 자세한 내용은 "고성능 웹사이트 디자인: @import를 사용하지 마세요"를 참조하세요. 따라서 @import

사용을 피하세요. 11. 외부 스타일 시트를 사용하세요. 이 원칙은 항상 좋은 디자인 습관입니다. 유지 관리 및 수정이 더 쉬울 뿐만 아니라 더 중요한 것은 CSS 파일을 브라우저에 캐시할 수 있기 때문에 외부 파일을 사용하면 페이지 속도를 향상시킬 수 있다는 것입니다. HTML 문서에 내장된 CSS는 요청이 있을 때마다 HTML 문서와 함께 다시 다운로드됩니다. 따라서 실제 응용 프로그램에서는 HTML 문서에 CSS 코드를 작성할 필요가 없습니다.

12. CSS 표현식(Expression) 사용을 피하세요. CSS 표현식은 CSS 속성을 동적으로 설정하는 강력하지만 위험한 방법입니다.

13. 코드 압축 웹사이트 프로젝트를 인터넷에 배포하기로 결정한 경우 웹페이지 로드 속도를 높이기 위해 CSS를 압축하여 주석과 공백을 제거하는 것을 고려해야 합니다. 코드를 압축하려면 YUI Compressor와 같은 일부 도구를 사용하여 CSS 코드를 간소화하고 파일 크기를 줄이고 더 높은 로딩 속도를 얻을 수 있습니다.

위는 CSS 작성 사양의 내용입니다. 더 많은 관련 글을 보시려면 Follow PHP 중국어 홈페이지(www.php.cn)를 방문해주세요!