コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド CSSチュートリアル 20 の一般的な CSS/CSS3 プロパティを統合

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

Y2J
Y2J
May 23, 2017 am 11:03 AM
css css3 まとめ

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

1. line:white -space:nowrap;

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

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

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

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

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

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

テスト

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

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

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

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



//上記の状況では、ちょうど 3 枚の写真が表示されています


;
;
、改行によって 2 つの画像の間に隙間が生じるためです。
解決策は、画像を
フロート
にすることです。

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

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

:relative

attribute

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


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

Table

構文

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

left >...
テーブルの位置、左

...
テーブルの位置、中央

background

=image path>...< /table> ;背景画像のURL=パスURLです

...
表の枠線サイズを設定します(数値を使用)。 ..
表の背景色を設定します
...
表の枠線の色を設定します
... 表の暗い枠線の色を設定します
...
表の明るい枠線の色を設定します<表セル
padding
=parameters>...< ;/table>コンテンツとグリッドの間の距離を指定します (数値を使用します)
...
グリッドとグリッドの間の距離を指定します (数字を使用)
...テーブルの列数を指定
...テーブルの表示方法を設定アウトライン
width=width>...
表の幅のサイズを指定します（数値を使用します）
height
=Height>...
テーブルの高さのサイズ (数字を使用)
...セルの結合列の列数を指定します(数字を使用)。 ..ストレージを指定しますグリッドをマージする列の数を指定します(数値を使用します)

7.CSS text-transform

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

8. letter-spacing

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

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

コード: