20 の一般的な CSS/CSS3 プロパティを統合

ここでは、私がプロジェクトでよく使用する 20 の CSS スタイルをまとめました。これらはすべて個人的な経験ですので、皆さんの参考になれば幸いです。

1. line:white -space:nowrap;

2. 省略マークとして表示するオーバーフローテキストを設定します: text-overflow:ellipsis;
(注: text-overflow:clip | ellipsis | ellipsis-word; (で新しく追加されました) css3)
ここで、clip はオーバーフローしたテキストを直接切り取ることを意味します。
値 ellipsis は、テキストがオーバーフローした場合に省略マーク (...) が表示され、省略マークが最後の文字を置き換えることを示します。テキストがオーバーフローした場合、省略マーク (...) も表示されます。違いは、省略マークが最後の単語に置き換えられることです)

3. たとえば、次のコード: e1b56a1c06f517d8a0e17306668ca118237108f1ef7d7a41515987f25c028499 5db79b134e9f6b82c0b36e0489ee08ed

aタグ内の画像をクリックすると点線枠が表示されます。IEの画像も同様です境界線があります。どうすれば解決できますか？
解決策:

a{outline:none;}//主に Firefox などのブラウザ用ですが、IE は対象外img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur () );}//IE6 および IE7 の点線ボックスを解決します。

a タグの場合、一般的に簡単な解決策は次のとおりです。

a タグにフォーカスが当たったら、強制的にフォーカスを解除します。 このとき、a タグには当然点線の枠が付きません。

024db780eb8416657e62fa483f255092テスト5db79b134e9f6b82c0b36e0489ee08ed

しかし、接続が多すぎる場合、このコードを 1 つずつ追加するのは現実的ではありません

4 . HTML で 2 つの画像の間に水平方向の改行による隙間が生じていますが、これを削除して隙間をなくすにはどうすればよいですか?

例: p width 300px; img width 100px; border:0px;

コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee

6ed09268cbdd0015bce8dcbbdfa9bfe46ed09268cbdd0015bce8dcbbdfa9bfe4
0cba36f12cf561cef14ffa62bcdafa2c
//上記の状況では、ちょうど 3 枚の写真が表示されています94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846beee388a4556c0f65e1904146cc1a846bee
; 6ed09268cbdd0015bce8dcbbdfa9bfe4
; 6ed09268cbdd0015bce8dcbbdfa9bfe4
、改行によって 2 つの画像の間に隙間が生じるためです。
解決策は、画像を
フロート
にすることです。

5.css overflow:ie6 および ie7 の無効な解決策が隠されています

原因: 親要素の直接の子要素または下位の子要素のスタイルに position

:relative

attribute

がある場合、親要素：hidden属性は無効となります。

解決策: IE 6 および 7 では、親要素に overflow:hidden が設定されている場合でも、子要素が親要素によって設定された高さを超えることがわかりました。 このバグを解決するには、親要素で *position:relative; を使用するのが非常に簡単です6.

Table

構文

コードは次のとおりです:

24a5cc4be2affed8c47603a06c7aadd2... f16b1740fad44fb09bfe928bcc527e08テーブルの位置、左

97aaabdc3e1ae66003636b0a55f0177f...f16b1740fad44fb09bfe928bcc527e08テーブルの位置、中央

6db49204da6c6bed2b5f2b2419e7d5fb...665ee7a1f045d8442ffa49dd8c5a87d3...f16b1740fad44fb09bfe928bcc527e08表の枠線サイズを設定します(数値を使用)2942b20c892ea69c704d2fb57fd4e696。 ..f16b1740fad44fb09bfe928bcc527e08表の背景色を設定します
b3d861e529619f616d27e5c3d250c141...f16b1740fad44fb09bfe928bcc527e08表の枠線の色を設定します
d6ada8ef34f9b6cf0134bbd512612a7c... e6d621a2912e784107ba307ae077a6ca表の暗い枠線の色を設定しますddf494b07e57c2bc8abba9a72114f0dd...f16b1740fad44fb09bfe928bcc527e08表の明るい枠線の色を設定しますff111d71f901268f23f3c6287996a67f...< ;/table>コンテンツとグリッドの間の距離を指定します (数値を使用します)
67b51f3adf81152a9eb58c3915913a97...f16b1740fad44fb09bfe928bcc527e08グリッドとグリッドの間の距離を指定します (数字を使用)
2f1949e008cf50923142b48714d95a16...f16b1740fad44fb09bfe928bcc527e08テーブルの列数を指定
00c36ed09804d27b5ceae6af82147e41...f16b1740fad44fb09bfe928bcc527e08テーブルの表示方法を設定アウトライン
729f508b307cb19209787abb2f04ba41...f16b1740fad44fb09bfe928bcc527e08表の幅のサイズを指定します（数値を使用します）
a2c50fe3f07128a1fa442cc7eadadde5...f16b1740fad44fb09bfe928bcc527e08テーブルの高さのサイズ (数字を使用)
18636f0e8a06fb4b5b80b39bb514df44...b90dd5946f0946207856a8a37f441edfセルの結合列の列数を指定します(数字を使用)a9461ff936ed536739a147c03f68e873。 ..b90dd5946f0946207856a8a37f441edfストレージを指定しますグリッドをマージする列の数を指定します(数値を使用します)

7.CSS text-transform

text-transform プロパティは、テキストの大文字と小文字を制御します。
可能な値
値の説明
none デフォルト。小文字と大文字を使用して規格を定義するテキスト。
大文字にする テキスト内のすべての単語は大文字で始まります。
uppercase は大文字のみを定義します。
小文字の定義には大文字は含まれず、小文字のみが含まれます。
inherit は、 text-transform 属性の値が親要素 から継承される必要があることを指定します。

8. letter-spacing

letter-spacing プロパティは、文字間の間隔 (文字間隔) を増減します。
例: Letter-spacing: 2px;

9.textarea は、右のスクロール バーを削除し、右下隅のドラッグを削除します

コード: a5f2d40ae878048fcc0c7d54c1b2ccb7

10. CSS の透明度互換性コード: filter: alpha(opacity=80);opacity:0.8;

11. 入力のタイプに応じて CSS スタイルを制御します

a。 css

input [type="text"] { background-color:#FFC; }
b. CSS 式を使用して expression

input{background-color:expression(this.type==") text"?' #FFC':''); }
c. JavaScript スクリプトを使用して実装します (不要な場合は省略します...)

12: text-ストローク
[ text-ストローク幅]: を設定または取得しますオブジェクト テキストストロークの太さ [text-ストローク-カラー]: オブジェクト内のテキストのストロークの色を設定または取得します

13: text-ストローク
テキストストローク (テキストストローク) および text-fill-color (テキスト塗りつぶし) color ) 注:
現在、これら 2 つの属性は、Webkit カーネルの Chr一部でのみサポートされています。例: -webkit-text-stroking: 3.3px #2A75BF;
text-fill-color: color value, like color 属性に適用します。これらはすべてテキスト スタイルです。
text-fill-color と color 属性を同時に使用すると、text-fill-color は color 属性の色の値を上書きします。
text-fill-color は透明な値を使用できます。 、つまり: text-fill-color:transparent

14:text-shadow
text-shadow:0px 0px 0px #333333;
属性値は次のとおりです: 水平方向の変位 (負の値をサポート)、垂直方向の変位 (負の値をサポート)負の値)、ぼかし半径、影の色
text-shadow は、box-shadow と同様に、同じテキストに複数の影を設定できます。カンマ「,」で区切られ、前の設定の効果が後者の効果の上に重なります。設定。

15. フォントを設定します

コードは次のとおりです:

<style> @font-face</p>
<p>{font-family: myFirstFont;</p>
<p>src: url(&#39;Sansation_Light.ttf&#39;),</p>
<p>    url(&#39;Sansation_Light.eot&#39;); /* IE9+ */}</p>
<p>p{font-family:myFirstFont;}</p>
<p></style>

16. CSS 必須の改行

コードは次のとおりです:

{</p>
<p>
word-break:break-all; /支持IE，chrome，FF不支持/
word-wrap:break-word;/支持IE，chrome，FF/
}

17.CSS :first-child selector,:last-child selector,:nth-child (IE7,8 は無効で認識されません)
:nth-child(2) はラベルを選択します。「2 は必要な数字にすることができます」
:nth-child(2n) は偶数のラベルを選択します。 2n は偶数にすることもできます
:nth-child(2n-1) は奇数のラベルを選択します、2n-1 は奇数にすることもできます
:nth-child(3n+1) は選択したラベルをカスタマイズします、3n+1 は「1 つを取り出す」ことを意味します2 つずつ"

18. CSS3 は背景色のグラデーションを実装します

コードは次のとおりです:

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear -gradient(top,#FFF,#cb1919) ;
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF ,#cb1919);

最初のパラメータ: グラデーションの開始位置を設定します

2 番目のパラメータ: 開始位置の色を設定します

3 番目のパラメータ:終了位置の色
IE ブラウザ

IE ブラウザ グラデーションを実装するには IE 独自のフィルターのみを使用できます

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=#9fffff,grandientType=1) ;

最初のパラメータ: グラデーションの開始位置の色

2 番目のパラメータ: グラデーションの終了位置の色

3 番目のパラメータ: グラデーションの種類

0 は垂直方向のグラデーションを表します 1 は水平方向のグラデーションを表します
19 IE8 は RGBA 書き込みを認識しません

20 CSS333 CSS3 RGB カラーと HSL カラー
RGB カラーの原理は、異なる赤、緑、青の値を定義することによって色を形成することです。 color:rgb(254,2,8);
HSL は、色相、彩度、明るさのモードを通じて色を宣言します。 color:hsl(359,99%,40%);

透明な背景を設定する必要がある場合は、それらを使用できます:

background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。

20.初始化em，u的斜体

em,u{
font-style: normal;}

【相关推荐】

1. CSS3免费视频教程

2. h5和css3制作带提示文字的输入框

3. 分享几个常用的最新的css3属性

4. 用CSS制作聊天框小尖角、气泡效果

5. 浏览器实现移动端高性能css3动画

以上が20 の一般的な CSS/CSS3 プロパティを統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。