実戦でまとめたCSSのよくある問題と解決方法
3280 ワード
一、ulタグはMozillaではpadding値がデフォルトであり、IEではmarginのみ値がある.
二、同じclassセレクタは1つのドキュメントで繰り返し表示されますが、idセレクタは1回しか表示されません.はい
1つのラベルはclassとidを同時に使用してCSS定義を行い、定義が重複している場合、id選択子の定義が有効である.
idの権利がclassより重要だからだ.
三、一つの互換性調整(IEとMozilla)の愚かな方法:
初心者は、同じラベルの属性がIEでA表示に設定されているのは正常であり、
Mozillaでは、正常に表示されるようにBに設定するか、2つ逆さまにしなければなりません.
一時的な解決策:セレクタ{属性名:B!important;属性名:A}は効果がない場合があります.あなた
www.xinran 001.comはより多くのBUG解決方法を検索します.
四、ネストするラベルのセットの間に間隔が必要な場合は、中にあるラベルのmargin属に残す
外にあるラベルのpaddingを定義しないでください
五、liラベルの前のアイコンはlist-style-imageではなくbackground-imageを使用することをお勧めします.
六、IEは相続関係と親子関係の違いがはっきりしない.すべて相続関係である.
七、あなたのラベルに狂ったように選択符をつけるときは、CSSで選択符に注釈をつけることを忘れないでください.あなたを待って
あなたのCSSを修正したとき、なぜこんなことをしたのか分かりました.あまりクレイジーにならないように注意してください.
八、ラベルに濃い色調の背景画像と明るい色調の文字効果を設定した場合.これを提案する時
あなたのラベルに濃い色調の背景色を設定します.画像がなくなったので、文字の読み取りを保つこともできます
性.
九、リンクの4つの状態を定義するには、前後の順序に注意しなければならない:Link Visited Hover Active
十、内容に関係のない画像はbackgroundを使用してください.表現と内容の分離を常に覚えておく.
十一、定義色は#8899 FF=#89 Fと略すことができる
十二、tableはいくつかの面でまだ役に立つ場所があり、内容がデータテーブルである場合、それを憎んではいけない.
恨みの心.
十三、languageという属性はなく、このように書くべきです.
十四、完璧な単画素外枠線表(IE 5、IE 6、IE 7及びFF 1.0.4以上でテストに合格できる)
十五、margin負の値を取ることはラベルが絶対的な位置決めを使う時に相対的な位置決めの役割を果たすことができて、ページの中央に位置します
表示する場合、絶対位置を使用するレイヤはleft:XXpxというプロパティを使用するのに適していません.この層を1つ置くには相対的に決めなければならない.
ビットのラベルの横にmarginの負の値を使うのは良い方法です.
十六、絶対位置決め時にmargin値を用いた位置決めは自分の位置に対する位置決めに達することができ、これはtopと、
leftなどのプロパティは、ウィンドウエッジの位置とは相対的に異なります.絶対的な位置付けの利点は、他の要素がその保存を無視できることです.
はい.
十七、文字が長すぎると、長すぎる部分は省略符表示になります:IE 5、FFは無効ですが、隠すことができます、IE 6
有効
十八、IEにおいて注釈による文字重複問題の可能性がある場合、注釈を以下のように変更することができる.
19、CSSで外部フォントを呼び出す方法
構文:
@font-face{font-family:name;src:url(url);sRules}
値:
name:フォント名.可能なfont-familyプロパティの値
url(url):絶対または相対urlアドレスを使用してOpenTypeフォントファイルを指定します.
sRules:スタイルシート定義
20、1つのフォームのテキストボックスのテキストを垂直に中央に配置するにはどうすればいいですか.
行の高さと高さのグループでFFでは効果がない場合は、上下のセリフを定義することで実現できます.
効果が出た.
二十一、Aラベルを定義する上で注意しなければならない小さな問題:
a{color:red;}を定義するとの場合は、Aの4つの状態のスタイルを表し、マウスを定義する場合は
置かれた状態はa:hoverを定義すればよいが,他の3つの状態はAで定義されたスタイルである.定義のみ
1つのa:linkの時、きっと他の3種類の状態を定義することを覚えています!
二十二、すべてのスタイルを簡潔に書くわけではありません.
スタイルシートの前にp{padding:1 px 2 px 3 px 4 px}のように定義すると、後続のエンジニアリングでもう1つ追加されます.
スタイル上は5 px、下は6 pxを補います.p.style 1{padding:5 px 6 px 3 pxと書く必要はありません
4px}.p.style 1{padding-top:5 px;padding-right:6 px;}と書くことができます.あなたはそれを感じるかもしれません
見本はもとのように書くほうがいいとは思わなかったが、あなたのその書き方は様式を繰り返し定義しているとは思わなかった.
必ず元の下で白と左の白を補う値を探していくらです!後に前のスタイルPが変わったら、あなたが定義した
p.style 1のスタイルも変わります.
二十三、ウェブサイトが大きいほど、CSSスタイルが多くなり、始める前に、命名規則を含む十分な準備と計画をしてください.
を選択します.ページブロック分割、内部スタイル分類など.
二十四、固定幅漢字切断:
△ただし、文字の1行の切り捨てしか処理できず、複数行の処理はできません.(IE 5以上)FFはできません.隠すだけです.
二、同じclassセレクタは1つのドキュメントで繰り返し表示されますが、idセレクタは1回しか表示されません.はい
1つのラベルはclassとidを同時に使用してCSS定義を行い、定義が重複している場合、id選択子の定義が有効である.
idの権利がclassより重要だからだ.
三、一つの互換性調整(IEとMozilla)の愚かな方法:
初心者は、同じラベルの属性がIEでA表示に設定されているのは正常であり、
Mozillaでは、正常に表示されるようにBに設定するか、2つ逆さまにしなければなりません.
一時的な解決策:セレクタ{属性名:B!important;属性名:A}は効果がない場合があります.あなた
www.xinran 001.comはより多くのBUG解決方法を検索します.
四、ネストするラベルのセットの間に間隔が必要な場合は、中にあるラベルのmargin属に残す
外にあるラベルのpaddingを定義しないでください
五、liラベルの前のアイコンはlist-style-imageではなくbackground-imageを使用することをお勧めします.
六、IEは相続関係と親子関係の違いがはっきりしない.すべて相続関係である.
七、あなたのラベルに狂ったように選択符をつけるときは、CSSで選択符に注釈をつけることを忘れないでください.あなたを待って
あなたのCSSを修正したとき、なぜこんなことをしたのか分かりました.あまりクレイジーにならないように注意してください.
八、ラベルに濃い色調の背景画像と明るい色調の文字効果を設定した場合.これを提案する時
あなたのラベルに濃い色調の背景色を設定します.画像がなくなったので、文字の読み取りを保つこともできます
性.
九、リンクの4つの状態を定義するには、前後の順序に注意しなければならない:Link Visited Hover Active
十、内容に関係のない画像はbackgroundを使用してください.表現と内容の分離を常に覚えておく.
十一、定義色は#8899 FF=#89 Fと略すことができる
十二、tableはいくつかの面でまだ役に立つ場所があり、内容がデータテーブルである場合、それを憎んではいけない.
恨みの心.
十三、
<script type="text/javascript">
十四、完璧な単画素外枠線表(IE 5、IE 6、IE 7及びFF 1.0.4以上でテストに合格できる)
table{border-collapse:collapse}
td{border:#000 solid 1px}
十五、margin負の値を取ることはラベルが絶対的な位置決めを使う時に相対的な位置決めの役割を果たすことができて、ページの中央に位置します
表示する場合、絶対位置を使用するレイヤはleft:XXpxというプロパティを使用するのに適していません.この層を1つ置くには相対的に決めなければならない.
ビットのラベルの横にmarginの負の値を使うのは良い方法です.
十六、絶対位置決め時にmargin値を用いた位置決めは自分の位置に対する位置決めに達することができ、これはtopと、
leftなどのプロパティは、ウィンドウエッジの位置とは相対的に異なります.絶対的な位置付けの利点は、他の要素がその保存を無視できることです.
はい.
十七、文字が長すぎると、長すぎる部分は省略符表示になります:IE 5、FFは無効ですが、隠すことができます、IE 6
有効
<div style="width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis">就是比如有一行文字,很长,表格内一行显示不下.</div>
十八、IEにおいて注釈による文字重複問題の可能性がある場合、注釈を以下のように変更することができる.
<!–[if !IE]>;Put your commentary in here…<![endif]–>
19、CSSで外部フォントを呼び出す方法
構文:
@font-face{font-family:name;src:url(url);sRules}
値:
name:フォント名.可能なfont-familyプロパティの値
url(url):絶対または相対urlアドレスを使用してOpenTypeフォントファイルを指定します.
sRules:スタイルシート定義
20、1つのフォームのテキストボックスのテキストを垂直に中央に配置するにはどうすればいいですか.
行の高さと高さのグループでFFでは効果がない場合は、上下のセリフを定義することで実現できます.
効果が出た.
二十一、Aラベルを定義する上で注意しなければならない小さな問題:
a{color:red;}を定義するとの場合は、Aの4つの状態のスタイルを表し、マウスを定義する場合は
置かれた状態はa:hoverを定義すればよいが,他の3つの状態はAで定義されたスタイルである.定義のみ
1つのa:linkの時、きっと他の3種類の状態を定義することを覚えています!
二十二、すべてのスタイルを簡潔に書くわけではありません.
スタイルシートの前にp{padding:1 px 2 px 3 px 4 px}のように定義すると、後続のエンジニアリングでもう1つ追加されます.
スタイル上は5 px、下は6 pxを補います.p.style 1{padding:5 px 6 px 3 pxと書く必要はありません
4px}.p.style 1{padding-top:5 px;padding-right:6 px;}と書くことができます.あなたはそれを感じるかもしれません
見本はもとのように書くほうがいいとは思わなかったが、あなたのその書き方は様式を繰り返し定義しているとは思わなかった.
必ず元の下で白と左の白を補う値を探していくらです!後に前のスタイルPが変わったら、あなたが定義した
p.style 1のスタイルも変わります.
二十三、ウェブサイトが大きいほど、CSSスタイルが多くなり、始める前に、命名規則を含む十分な準備と計画をしてください.
を選択します.ページブロック分割、内部スタイル分類など.
二十四、固定幅漢字切断:
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
△ただし、文字の1行の切り捨てしか処理できず、複数行の処理はできません.(IE 5以上)FFはできません.隠すだけです.