目次
.test{ background: #000 url(image.jpg) left top no-repeat
font-size: 16px;
直接指定されたスタイルが競合する場合、スタイルの重みが大きい方が優先されます。
!重要なスタイル属性はオーバーライドされません。 !重要を乱用しないでください。

css最適化_html/css_WEB-ITnose

Jun 24, 2016 am 11:24 AM

いつもは最適化の方法について話していますが、今日は CSS の最適化の方法について詳しく書きます、ふふ。

まず、CSS の最適化作業は主に 2 つの側面に焦点を当てています

  • ネットワーク パフォーマンス: CSS を最小限のバイト数で記述し、ダウンロード速度を高速化すると、自然にページのレンダリングが速くなります
  • 構文パフォーマンス: 確か効果も実現できますが、すべてのメソッドで同じ効果があるわけではありません。JavaScript に関する構文最適化の知識は、実際に CSS の中にいくつかあります。 -Written 別々に記述しないでください。いくつかの例は次のとおりです
  • background 属性

    .test{ background: #000 url(image.jpg) left top no-repeat

    }

    background-image : url(image.jpg );

    背景位置: 左上;

    背景繰り返し: 繰り返しなし;

    フォント スタイル: 斜め;

    font-weight:bold;

    font-size: 16px;

    font-family: Helvetical ,Arial; ボーダー:5ピクセルの赤一色

    border-width border-style

    border-color

    @import

    を使用しないでください

    タグと比較して、 @import コマンドははるかに遅く、速度が増加するだけではありません追加のリクエストの数も増加しますが、予測できない問題も発生します。代替案は次のとおりです: 複数の 要素を使用し、http リクエストの数を減らすために CSS をマージして圧縮し、属性の悪用を防ぐために、さまざまな状況でどの属性が優先されるかをまとめることをお勧めします。

    継承によりスタイルの競合が発生した場合、最も近い祖先が優先されます。

    継承されたスタイルが直接指定されたスタイルと競合する場合、直接指定されたスタイルが優先されます。

    直接指定されたスタイルが競合する場合、スタイルの重みが大きい方が優先されます。

    CSS セレクターの重み
  • タグ セレクター 1
  • クラス セレクター 10
  • ID セレクター 100
  • インライン スタイル 1000
  • 疑似要素 (:first-child など) 1
  • 疑似クラス (:link など) 10

    !重要なスタイル属性はオーバーライドされません。 !重要を乱用しないでください。

    アウトライン スタイル (外部スタイル シートに属する)アウトラインスタイル CSS ファイルは本体が読み込まれる前に読み込まれるため、表示される Web ページは最初からスタイル効果を適用します

    2. 後の CSS ファイルは前の CSS ファイルを上書きします

    埋め込みスタイル (内部スタイルシートに属します)

    < style type="text/css"> .main{ width:1002px; margin:0 auto;}

    インポートでは、Web ページ全体が読み込まれた後に CSS ファイルが読み込まれます
  • ジョイントスタイル (内部スタイルシートに属します)
  • style="font-size:10px;font-color:#ff0000"






  • このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

    HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

    HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

    HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

    HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

    Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

    HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

    webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

    WebアノテーションにY軸位置の適応レイアウトを実装する方法は? WebアノテーションにY軸位置の適応レイアウトを実装する方法は? Apr 04, 2025 pm 11:30 PM

    Y軸位置Webアノテーション機能の適応アルゴリズムこの記事では、単語文書と同様の注釈関数、特に注釈間の間隔を扱う方法を実装する方法を探ります...

    Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

    GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する

    CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? CSS3とJavaScriptを使用して、クリック後に周囲の写真を散乱および拡大する効果を実現する方法は? Apr 05, 2025 am 06:15 AM

    画像をクリックした後、散乱と周囲の画像を拡大する効果を実現するには、多くのWebデザインがインタラクティブな効果を実現する必要があります。特定の画像をクリックして周囲を作成してください...

    HTML、CSS、およびJavaScript:Web開発者に不可欠なツール HTML、CSS、およびJavaScript:Web開発者に不可欠なツール Apr 09, 2025 am 12:12 AM

    HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

    See all articles