>웹 프론트엔드 >프런트엔드 Q&A >CSS 파일을 압축하는 방법

CSS 파일을 압축하는 방법

青灯夜游
青灯夜游원래의
2021-04-14 18:48:163473검색

압축 방법: 1. DW 소프트웨어를 사용하여 CSS 파일을 엽니다. 2. "찾기 및 바꾸기" 도구를 사용하여 파일의 모든 공백을 삭제합니다. 3. 스타일 코드에서 초과된 세미콜론을 삭제합니다. 코드를 일렬로(서로 가깝게) 정렬하도록 합니다.

CSS 파일을 압축하는 방법

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

CSS 코드 압축 어디서부터 시작해야 할까요

웹 페이지가 개발된 후 공백 삭제, 줄 바꿈 제거, 중복되는 세미콜론 제거 등 웹 사이트에 게시할 CSS 코드를 직접 축소 압축할 수 있습니다.

물론 일부 CSS 코드도 사용할 수 있습니다. 최적화를 사용하면 코드 양을 크게 줄여 파일 크기도 줄일 수 있습니다.

CSS 파일을 압축하는 방법

DW 소프트웨어의 찾기 및 바꾸기 도구를 사용하여 압축된 CSS 코드를 바꿉니다.

1. DW 소프트웨어로 CSS 파일 열기

2. 공백 압축 코드 삭제

2-1: 단축키 "Ctrl+F"를 사용하여 찾기 및 바꾸기 도구 탭을 불러옵니다.

CSS 파일을 압축하는 방법

2-2: 검색 위치에 영문 반각 소문자 "space"를 입력(입력)합니다.

"Find" 입력 상자에 공백을 입력합니다.

CSS 파일을 압축하는 방법

"Find"에 공백을 입력합니다. " 입력 상자, "바꾸기" 입력 상자에 문자나 코드를 채울 필요가 없습니다. 이렇게 하면 교체를 수행할 때 공백을 문자가 없는 것으로 바꾸는 것과 같으며 이는 공백을 삭제하는 것과 같습니다. 위치.

2-3: "모두 바꾸기"를 클릭하세요.

"모두 바꾸기"를 클릭한 후 남은 공백을 삭제하고 압축을 완료할 수 있습니다.

CSS 파일을 압축하는 방법

3. 중복되는 세미콜론을 삭제하세요

CSS 코드에서 각 CSS 선택기의 마지막 CSS 스타일 끝은 "세미콜론"으로 끝날 필요가 없습니다. "마지막 중괄호" 앞의 마지막 CSS 스타일을 세미콜론으로 끝내려면

CSS 파일을 압축하는 방법

또한 실수로 다른 "세미콜론"이 삭제되는 것을 방지하기 위해 DW 소프트웨어의 "찾기 및 바꾸기" 기능을 사용하여 삭제합니다. 이때 "찾기" 입력 상자에 ";}"를 입력합니다. "찾기 및 바꾸기" 탭(세미콜론 + 후행 중괄호)에서 "바꾸기" 입력 상자에 "}"(후행 중괄호)만 입력한 후 "모두 바꾸기"를 클릭하면 중복되는 세미콜론 기호 삭제가 완료됩니다.

4. 코드가 일렬로(서로 가깝게) 정렬되도록 여분의 빈 줄을 삭제하세요.

빈 줄을 수동으로 삭제하거나 DW 소프트웨어를 사용하여 특정 삭제 및 빈 줄을 빠르게 삭제할 수 있습니다. 압축은 다음과 같습니다.

4-1: 먼저 DW에서 CSS 파일 코드를 엽니다.

4-2: 빈 줄을 선택합니다.

먼저 마우스 커서를 선택기 시작 부분으로 이동한 다음 마우스 왼쪽 버튼을 누른 상태에서 선택기 위로 끌어당깁니다. 이전 선택기의 끝 이전(이전 CSS 스타일 선택기 뒤 중괄호 뒤) 이때 빈 행을 선택할 수 있으며, 빈 행을 파란색 영역으로 선택할 수 있습니다.

CSS 파일을 압축하는 방법

4-3: "찾기 및 바꾸기" 도구 호출

마우스 왼쪽 버튼을 선택했다가 놓은 후 단축키 "Ctrl+F"를 사용하여 "찾기 및 바꾸기" 탭을 불러옵니다. 이번에는 "찾기 및 바꾸기" 탭의 "찾기" 입력 상자에 방금 선택한 빈 줄이 자동으로 채워집니다.

CSS 파일을 압축하는 방법

4-4: "모두 바꾸기"를 클릭하여 압축을 완료합니다.

"바꾸기" 입력 상자에 더 이상 문자나 코드를 입력할 필요가 없으며 "바꾸기 완료"를 클릭하면 교체가 완료됩니다.

CSS 파일을 압축하는 방법

DW 소프트웨어를 사용하여 몇 단계만으로 CSS 코드(파일)를 빠르게 압축하고 간소화할 수 있습니다.

CSS 압축의 이점:

1. 파일 크기 감소

2. 네트워크 전송량 및 대역폭 사용량 감소

3. 페이지 렌더링 및 표시 속도 향상

학습 영상 공유:

css 영상 튜토리얼

)

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.