How to compress css files

Compression method: 1. Use DW software to open the CSS file; 2. Use the "Find and Replace" tool to delete all spaces in the file; 3. Delete excess semicolons in the style code; 4. Delete excess Just leave the lines blank so that the code lines up (close to each other).

The operating environment of this tutorial: windows7 system, CSS3&&AdobeDreamweaverCS6 version, Dell G3 computer.

Where to start with CSS code compression

After the web page is developed, the CSS code to be published to the website can be directly reduced and compressed, such as deleting spaces, removing line breaks, and removing redundant Semicolons, etc.

Of course, some CSS codes can be optimized, which can greatly reduce the amount of code and thus reduce the file size.

How to compress css files

Use the find and replace tool of DW software to replace the compressed CSS code.

1. Open the CSS file with DW software

2. Delete the space compression code

2-1: Use the shortcut key "Ctrl F" to bring up the find and replace tool options Card.

2-2: Type (input) an English half-width lowercase "space" at the search location

Enter a space in the "Search" input box

Enter a space in the "Find" input box. There is no need to fill in the following characters or codes in the "Replace" input box. This way, when performing the replacement, it is equivalent to replacing the space. There are no characters, which is equivalent to deleting the space position.

2-3: Click "Replace All"

After clicking "Replace All", you can delete the excess spaces and complete the compression.

3. Delete the extra semicolon

In the CSS code, the end of the last CSS style in each CSS selector is not needed "Semicolon" ends, in other words, there is no need for a semicolon to end the last CSS style in each selector before the "last curly brace".

Also use the "Find and Replace" function of the DW software to delete it to avoid deleting other "semicolons" by mistake. At this time, click "Search" in the "Find and Replace" tab Fill in ";}" (curly brackets after the semicolon) in the "input box, enter only "}" (curly brackets after the semicolon) in the "Replace" input box, and then click "Replace All" to complete the deletion of redundant semicolon symbols. .

4. Delete the excess blank lines so that the codes are lined up in a row (close to each other)

You can manually delete the blank lines, or you can use DW software to quickly delete the blank lines. The specific deletion and compression are as follows.

4-1: First open the CSS file code in DW

4-2: Select the empty line

First move the mouse cursor to the beginning of the selector, and then click the left mouse button While holding it, pull it up to the end of the previous selector (after the curly braces after the previous CSS style selector). At this time, you can select the empty row. At this time, the empty row is selected in the blue area.

4-3: Call up the "Find and Replace" tool

After selecting, release the left mouse button and use the shortcut key "Ctrl F" , you can call up the "Find and Replace" tab. At this time, the "Find" input box of the "Find and Replace" tab will be automatically filled with the blank line you just selected.

4-4: Click "Replace All" to complete the compression

There is no need to enter any more characters or codes in the "Replace" input box, just click "Replace" Done" to complete the replacement.

#Quickly use DW software to compress and streamline CSS code (files) in a few steps.

Benefits of css compression:

1. Reduce file size

2. Reduce network transmission volume and bandwidth usage

3. Reduce the processing pressure on the server

4. Improve the rendering and display speed of the page

(Learning video sharing:css video tutorial)

The above is the detailed content of How to compress css files. For more information, please follow other related articles on the PHP Chinese website!