ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。