CSSファイルを圧縮する方法

圧縮方法: 1. DW ソフトウェアを使用して CSS ファイルを開きます; 2. 「検索と置換」ツールを使用してファイル内のすべてのスペースを削除します; 3. スタイル コード内の余分なセミコロンを削除します; 4.余分な行を削除します。コードが並ぶように（互いに近くに）、行を空白のままにしておきます。

このチュートリアルの動作環境: Windows7 システム、CSS3&&AdobeDreamweaverCS6 バージョン、Dell G3 コンピューター。

CSS コード圧縮をどこから開始するか

Web ページの開発後、Web サイトに公開する CSS コードを直接縮小して圧縮できます。スペースの削除、改行の削除、冗長なセミコロンの削除など。

もちろん、一部の CSS コードは最適化でき、コード量を大幅に削減できるため、ファイル サイズを小さくできます。

CSS ファイルを圧縮する方法

DW ソフトウェアの検索と置換ツールを使用して、圧縮された CSS コードを置換します。

1. DW ソフトウェアで CSS ファイルを開きます

2. スペース圧縮コードを削除します

2-1: ショートカット キー「Ctrl F」を使用して、ツール オプション カードを検索して置換します。

2-2: 検索箇所に英語の半角小文字「スペース」を入力(入力)します

「検索」にスペースを入力してください入力ボックス

「検索」入力ボックスにスペースを入力し、「置換」入力ボックスに以下の文字やコードを入力する必要はありません。 , 置換を行う場合はスペースを置換するのと同等、文字が存在しない場合はスペースの位置を削除するのと同等です。

2-3: 「すべて置換」をクリックします。

「すべて置換」をクリックした後、余分なスペースを削除して圧縮を完了できます。

3. 余分なセミコロンを削除します

CSS コードでは、各 CSS セレクターの最後の CSS スタイルの終わり「セミコロン」は必要ありません言い換えれば、各セレクターの「最後の中括弧」の前にある最後の CSS スタイルをセミコロンで終了する必要はありません。

他の「セミコロン」を誤って削除しないように、DWソフトの「検索と置換」機能を利用して削除してください。このとき、「検索」をクリックしてください。 「検索と置換」タブ 「入力ボックス」に「;}」（セミコロン以降の中括弧）を入力し、「置換」入力ボックスに「}」（セミコロン以降の中括弧）のみを入力して、「」をクリックします。すべて置換」を選択して、冗長なセミコロン記号の削除を完了します。

4. コードが一列に (互いに近くに) 並ぶように余分な空白行を削除します。

空白行は手動で削除することも、次のコマンドを使用することもできます。空行を素早く削除するDWソフト 具体的な削除と圧縮は以下の通りです。

4-1: まず、DW で CSS ファイル コードを開きます。

4-2: 空の行を選択します。

まず、マウス カーソルをセレクターの先頭に移動します。マウスの左ボタンをクリックしたまま、前のセレクターの末尾 (前の CSS スタイル セレクターの後の中括弧の後) まで引き上げます。この時点で、空の行を選択できます。青い領域では空の行が選択されています。

4-3: 「検索と置換」ツールを呼び出します。

選択後、マウスの左ボタンを放し、ショートカット キー「Ctrl F」を使用します。 」をクリックすると、「検索と置換」タブを呼び出すことができます。このとき、「検索と置換」タブの「検索」入力ボックスには、選択した空白行が自動的に入力されます。

4-4: [すべて置換] をクリックして圧縮を完了します。

[置換] ボックスにこれ以上文字やコードを入力する必要はありません。入力ボックスで、「置換」「完了」をクリックするだけで置換が完了します。

#DW ソフトウェアを使用して、数ステップで CSS コード (ファイル) をすばやく圧縮し、合理化します。

CSS 圧縮の利点:

1. ファイル サイズの削減

2. ネットワーク送信量と帯域幅使用量の削減

3 . サーバーの処理負荷を軽減します

4. ページのレンダリングと表示速度を向上させます

(学習ビデオ共有:css ビデオ チュートリアル)

以上がCSSファイルを圧縮する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。