CSS를 최적화하는 방법

최적화 방법: 1. 주석을 단순화합니다. 2. 색상 코드를 단순화합니다. 3. 여러 줄 속성 대신 한 줄 속성을 사용합니다. 즉, 값이 5인 경우 단위를 생략합니다. 여러 요소의 값을 동시에 설정합니다. 6. 공백 및 줄 바꿈을 삭제합니다. 7. 만료 시간을 설정하고 GZip을 사용합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 코드를 최적화하면 웹페이지가 차지하는 바이트 수를 줄이고, 동일한 조건에서 브라우저가 CSS 코드를 다운로드하는 시간을 단축하며, 웹페이지 열기 속도를 높일 수 있습니다. 그렇다면 CSS 코드를 최적화하는 방법은 무엇입니까? 다음은 CSS 코드 최적화를 위한 몇 가지 팁입니다.

CSS 코드 최적화를 위한 팁

1. 댓글을 단순화하세요

많은 경우, 특히 C/Java와 같은 언어를 사용해본 프로그래머라면 여러 줄로 작성하고 싶을 수도 있습니다. 예를 들면 다음과 같습니다.

물론 컴파일된 언어에서는 이러한 주석에 문제가 없지만 CSS에서는 CSS 파일의 크기가 크게 늘어납니다. 다음과 같이 단순화해야 합니다.

이 방법으로 가독성을 유지하세요. , 파일 크기가 감소되었습니다. 실제로 CSS 파일의 실제 게시 버전에서는 이러한 주석을 완전히 제거할 수 있습니다.

2. 색상 코드 단순화

CSS에서는 16진수 색상 코드를 다루는 경우가 많습니다. 다음과 같은 "표준 형식"을 작성하는 데 익숙할 수 있습니다.

color: #ffffff;
color: #ff88ff;

실제로 이 작성 방법은 CSS에서 단순화될 수 있습니다. 다음과 같이 작성할 수 있습니다.

color: #fff;
color: #f8f;

3. 여러 줄 속성 대신 한 줄 속성을 사용하세요. 즉, 축약된 속성을 사용하세요.

CSS에서는 여백/패딩/글꼴/테두리와 같은 속성을 여러 줄이 아닌 한 줄에 설정할 수 있습니다. 예:

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

다음과 같이 쓸 수 있습니다.

padding: 10px 0 10px 0;

는 위쪽, 오른쪽, 아래쪽, 왼쪽은 물론, 여백과 패딩 속성에 대해 왼쪽과 오른쪽/상단과 아래쪽의 값이 동일할 때 예를 들어 더 간단하게 작성할 수 있습니다. 위의 예는 다음과 같이 쓸 수 있습니다:

padding: 10px 0;

왼쪽과 오른쪽 값이 동일할 경우 다음과 같이 쓸 수도 있습니다.

padding: 10px;

다른 약어 방법은 인터넷의 일부 정보를 참조할 수 있습니다. 물론 CSS를 작성하는 과정에서 배우기 위해 TopStyle 소프트웨어를 사용하는 것이 좋습니다. 이 소프트웨어는 구체적인 팁을 제공합니다.

(학습 영상 공유: css 영상 튜토리얼)

4. 값이 0인 경우 단위를 생략할 수 있습니다.

예:

padding: 0;

5. time

예를 들어 설명하겠습니다. 예를 들면:

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

더 나은 작성 방법은 다음과 같습니다:

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. 공백 및 줄바꿈 삭제

이것은 매우 눈에 띄지 않는 작업이지만 나중에 인터넷에 적용해야 하는 CSS의 경우입니다. 개발 단계를 벗어나면 언어는 이런 방식으로 처리되어야 합니다. 적어도 모든 Google 애플리케이션은 이렇게 합니다. 예:

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

는 다음과 같이 처리되어야 합니다.

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

사실 CSS 파일에는 줄바꿈이 필요하지 않습니다. 하지만 코드의 가독성을 유지하려면 각 요소를 한 줄에 작성하는 것이 좋습니다. 현재 개발 프로세스에 영향을 주지 않도록 유사한 작업을 수행할 수 있는 도구가 있습니다.

7. 만료 시간을 설정하고 GZip을 사용하세요

가능하다면 CSS 파일의 만료 시간을 설정하고 CSS 파일을 전송하려면 GZip을 활성화해야 합니다. 전자를 설정하면 널리 사용되는 브라우저에서 CSS 파일을 캐시할 수 있으므로 로드가 수행될 때마다 파일을 읽을 필요가 없으므로 프로세스 속도가 크게 빨라지고 트래픽 소비도 줄어듭니다. GZip을 켜면 CSS 파일이 상상할 수 없을 정도로 줄어들 수 있으며 오늘날 가장 널리 사용되는 브라우저는 GZip을 지원합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS를 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!