css优化篇 - beidan
平时总说如何如何优化,今天就详细的写一下css如何优化,嘿嘿。
首先,CSS的优化工作主要从两个方面着手
- 网络性能:把CSS写到字节数最少,加快下载速度,自然可以让页面渲染的更快一些
- 语法性能:同样都能实现某些效果,但并不是所有的方式效果都相同,我们看过不少关于JavaScript方面的语法优化知识,其实CSS里面也有一些
合写CSS :能合写的属性不要分开写,部分例子如下
background属性
<span style="color: #008080;">1</span> <span style="color: #000000;">.test{ </span><span style="color: #008080;">2</span> <span style="color: #000000;"> background: #000 url(image.jpg) left top no-repeat; </span><span style="color: #008080;">3</span> <span style="color: #000000;">} </span><span style="color: #008080;">4</span> <span style="color: #000000;">background-image: url(image.jpg); </span><span style="color: #008080;">5</span> <span style="color: #000000;">background-position: left top; </span><span style="color: #008080;">6</span> background-repeat: no-repeat;
margin/padding
<span style="color: #000000;">{margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;} {margin: 5px 10px 5px 10px;} 顺时针 {border-top: 2px; border-right: 5px; border-left: 10px; border-bottom: 3px;} {border: 2px 5px 10px 3px;}</span>
<span style="color: #000000;">{font: oblique bold 16px/35px Helvetica,Arial} font-style: oblique; font-weight:bold; font-size: 16px; line-height:35px; font-family:Helvetical,Arial;</span>
border:5px solid red;
<span style="color: #008080;">1</span> border:<strong>border-width</strong>,<strong>border-style</strong>,<strong>border-color</strong>;
不要使用 @import
与 <link>
标签相比,@import
指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种: 使用多个 <link>
元素,最好是发布的时候合并压缩css,减少http请求个数
利用继承
说到继承,就需要了解权重相关知识,也顺便总结一下各种情况下哪个属性优先,防止滥用属性
- 由于继承而发生样式冲突时,最近祖先获胜。
- 继承的样式和直接指定的样式冲突时,直接指定的样式获胜。
- 直接指定的样式发生冲突时,样式权值高者获胜。
标签选择器 1
类选择器 10
ID选择器 100
内联样式 1000
伪元素(:first-child等) 1
伪类(:link等) 10
- !important的样式属性不被覆盖。不能滥用!important。
- 外联式样式(属于外部样式表)
- 嵌入式样式(属于内部样式表)
- 内联式样式(属于内部样式表)

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします
