あまり知られていない CSS の使い方のヒント-CSSチュートリアル-php.cn

あまり知られていない CSS の使い方のヒント

巴扎黑

リリース： 2017-08-09 15:50:34

オリジナル

1232 人が閲覧しました

1. 背景の書き方について

DIV.comment{background:#f0f0f0 url(urlアドレス) repeat-x 左上

1) 背景の最初の定義は色の値であることがわかります。これは、背景画像が無効になっているときに色が有効になることを意味します。

2) URL 括弧内の引用符は必要ありません。引用符を記述することはできません

2.同じように、次のように書くこともできます:

DIV.special{border : 1px solid; border-color:color1 color2 color3color4 }four 色は一度に上、右、下、左です

3。

ですべてのブラウザと互換性を持たせるために、半透明効果を表示できます

.tranparent

{

filter :progid:DXImageTransform.Microsoft.Alpha(opacity=50);

0.5; 不透明度

50%; position

absolute;/*絶対値である必要があることに注意してください*/

トップ: 100px; Left

: p100px

; }

4._height、_widthの役割 _Heightを使用して未知の問題を解決しますFloat の div では、_height 属性を削除できます、それを削除するだけで機能します。

#wrap

{ border

6px

#ccc solid

;

_height

1%;} .column_left{ float:left; width:20%;

.column_right{ float:right; padding:10px; #eee しっかり;} <

div

="ラップ"> <div クラス

="column_left"> <h1>

左フロート

h1> div >

< div class

="column_right"> <h1>

右フロート

h1 > < ;/div>

div>

5. divまたはspan固定高さの問題を解決するにはmin-height min-widthを使用してください要素の高さを固定する必要がある場合がありますが、Firefox や Opera では高さのみが設定されているため、コンテンツが十分でない場合は、min-height を使用できます

。

6 . スタイルの優先順位を変更するには、! important を使用します

いわゆるスタイルの優先順位とは、ブラウザがスタイルを適用するときに常に近接原則に基づいてスタイルを適用することを意味します。ある要素が 3 つの場所にあるとします。ページ上定義は外部 CSS ファイル内にあり、インライン CSS はファイルの head タグ内に定義されており、もう 1 つはこの要素のタグ内にあります。その後、近接原則に従って、この要素で使用される最終的なスタイルになります。はタグ内で定義されたスタイルにあります。このルールを破る必要がある場合は、!重要なディレクティブ

a.test

{color

red! important

}

を使用できます。 A要素内で定義されている色は適用されませんが、上記の定義は適用されます7. Media ディレクティブを使用して、印刷バージョンの CSS と画面表示 CSS の 2 種類の CSS を導入します

=" Print "

Charset =" UTF-8 "/& GT ; (現在 IE はサポートしていません) 最初の A タグだけを定義したい場合は、div 内のすべての A タグのスタイルを定義する方法 (div の下のスパンの div も含む) を使用できます。 DIV の下のレベルの子ノードでは、「>」記号を使用できます。例: DIV>A{color:red} これで、A ラベルの色のみが表示されます。 DIV の直接の子ノードは赤です9。 :first-child :last-child IE 以外のブラウザでは、これら 2 つのインジケーターを使用して、親要素の最初の要素または最後の要素を取得できます20070412 21:05 追加

10.: などの疑似クラスホバーはこのように使用できます

>ウィジェットを購入h1

16. 避けるために異なるタグを使用する異なるブラウザパディングとマージンの異なる解釈をスタイルシートの前で定義できます

{}{margin:0px;padding

0px

;}20070422 12:00に追加17、パスワードの入力と同様に、ユーザーが英語の状態でのみ文字を入力できるようにします。

入力{imeモード:は無効です;}

20070423 :0 8
18. 死ぬまで改行はしない、抜粋(著者)
1) ホワイトスペース:nowrap; オーバーフロー: 非表示; 幅: 17em !重要; 幅: 18em;
注: ホワイトスペースは td、th などをサポートしません。
2) .fixTable{ table-layout: fixed; overflow:hidden; } を使用し、非表示にする nobr タグを追加します
nobr タグは非標準です。
20070426 0848
19. 画像サイズを前年比で変更します
img.style.zoom = 0.5;

& lt; & lt; クラス
= "メニュー"

メニュータイトル< ul>

lastli>

リ> ul>

このようにして、CSSのみで制御されるメニューを作成でき、ie6、ie7、firefox1.5、opera9.0でテストに合格します11を使用できます。 page-break-after、page-break-before 印刷時のページングを制御します 20070413 12:1312 * html{} の機能は、IE バージョン 6.0 未満と互換性があります。 HTMLには適していませんノードの選択に関して、他のブラウザではHTMLタグがドキュメントのルートノードであると考えられますが、IE6以下のバージョンではHTMLタグの上にルートノードがあると考えられます---感謝説明はcalmzeal

13. CSSクラスは複数の値を持つことができます。複数の値をスペースで区切るだけで済みます14 colorの略語については、#ff0033を#f03に短縮できます。 15. 画像と隠しテキストを表示するには text-indent を使用します (これは SEO に役立つと言われています)

h1 { 背景: url(widget-image.gif) no-repeat; 高さ:画像高さテキストインデント: - 2000px }

以上があまり知られていない CSS の使い方のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。