web-5:cssその他の位置決め方式表示効果リスト属性変換属性

一.背景関連属性
背景色
属性:background-color値:カラー値
背景画像
プロパティ:background-image値:url(')
背景画像関連属性
背景画像を並べ替えて表示
属性:background-repeat値:background-repeat: repeat;(既定値)画像サイズが要素サイズより小さい場合、要素がいっぱいになるまで自動的に水平方向と垂直方向に並べ替えられます.background-repeat: repeat-x;画像を水平方向に並べ替えるbackground-repeat: repeat-y設定ピクチャ垂直方向に並べ替えbackground-repeat: no-repeat設定ピクチャ重複しない並べ替え
背景画像のサイズ
属性:background-size値:ピクセル値、パーセント、cover、contain
画素値:background-size: 60px 60pxは2つの値をとると、背景画像の幅と高さをそれぞれ表す.値をとり、背景画像の幅を設定し、高さを等比でスケールします.
パーセントbackground-size: 20% 20%;パーセント1つの値または2つの値が画素の値と等しい場合.パーセントは、現在の要素の幅の高さを参照して計算されます.background-size: cover;は、画像を十分に大きく伸ばすよりも、要素を完全に覆うように覆われています.background-size:contain;は、要素によってちょうど収容される最大サイズまで等比延伸画像を含む.
例:01-background-html
背景画像の位置:
属性:background-position値:
画素値x y xは背景ピクチャの水平オフセット距離を表し、正の値は右を表す.yは背景画像の垂直オフセット距離を表し、正の値は下を表す.既定の背景画像は要素の左上隅から表示されます.
%0%0%左上50%50%要素の中央に100%100%右下に表示
方位値水平方向:left center rught垂直方向:top center bottom方位値を設定する場合、方向が欠けている場合はcenterがデフォルトです
使用シーン:「精霊図技術」では、Webページの開発過程で、資源を節約し、ネットワーク要求を減らすために、通常、小さなアイコンのセットを1枚の画像の形式で記憶し、1回のネットワーク要求で画像をロードし、background-positionと協力してアイコンの表示効果を切り替える.
背景プロパティの略記
属性:background取値:color url()repeat position;(いずれも選択項目)background: pink url(northStar.jpg) no-repeat 100px 100px
注:background-sizeプロパティを個別に設定する必要があります.
二.テキストとフォントに関するプロパティ
フォント関連属性
フォントサイズ:属性:font-size値:ピクセル値
フォント名の指定:属性:font-family値:フォント名構文注意:1.フォント名は、中国語または複数の英語の単語で構成されている場合は、引用符を付ける必要があります.2.複数のフォント名を代替フォントとして設定できます.名前の間にカンマで区切られます.
例:font-family:Arial,'黒体','Micosoft YaHei'
フォントの太さ:プロパティ:font-weight値:1.キーワードを取得できます
bold(太字表示)、normal(デフォルト、通常表示)
2.無単位の正百数を取る(100~900)
100:normal 700に等価:boldに等価
フォントスタイル(斜体)の設定:属性:font-style値:
1 normal(デフォルトは通常表示)2 italic(斜体表示)3 oblique(テキストチルト表示)は、一般的にitalicの代替スタイルとしてチルト効果を実現し、場合によってはチルト角度を指定することができます.
フォントプロパティの略記:プロパティ:font値:style weight size family ;(順序強制)構文注意:size、familyは必須です.
テキスト関連属性
テキストの色:属性:color値:色値
テキストの水平揃え:プロパティ:text-align値:left(デフォルト)、center、right
テキストの装飾線:属性:text-decoration取値:1.uderline下線2.オーバーラインに線を引く3.line-througth削除線4.None装飾線の取消し
テキストの行の高さ:属性:line-height値:ピクセル値注意:すべてのテキストは、その行の中で垂直に中央に位置しています.使用シーン:1.行の高さは、テキストの垂直方向の中央を設定するために使用できます.行の高さは要素の高さと一致します.2.行の高さは、要素内のテキストの上下位置の微調整を実現します.
例1:{heigh:100 px;line-height:150 px}(テキスト行が高いほど、テキストは要素に対して下に移動します.試してみればわかります....)
例1:{heigh:100 px;line-height:60 px}(テキスト行の高さが小さいほど、テキストは要素に対して上に移動します.)
三.表の関連プロパティ.
表サイズ
表は、幅の高さを設定するときに、次のように選択できます:1.tableラベルに幅を固定し、セルにサイズを自動的に割り当てます.2.tdセルの幅と高さを設定し、内容によって表全体のサイズを決定します.2つの設定方法を2つ選択します.
tableラベルはボックスモデルを完全にサポートします.デフォルトではborder-boxを使用して寸法tr,tdラベルを計算し、ボックスモデルを完全にサポートしていません.
表の枠線を結合します.
セルの枠線を表の枠線に結合します.
属性:`border-collapse取値:1.seperate(デフォルト、枠線分離)2.collapseは枠線のマージを設定します.
セルと枠線の距離を調整します.
属性:border-spacing取値:h-value/v-value構文注意:h-valueは水平方向のマージンv-valueは垂直方向のマージンを表し、この属性はtableラベルに追加しなければならない.
例"03-table.html
四.トランジションエフェクト
トランジションとは:トランジションとは、2つの状態を切り替えるときに要素のスムーズなトランジション効果を指します.
遷移関連属性
遷移時間の長さを指定します:プロパティ:transition-duration値:s/ms(秒/ミリ秒)単位の数値.
遷移属性の指定:属性:transition-property値:CSS属性名の構文の大部分:
width(単一のプロパティ名を指定)width height(複数のプロパティ名を指定し、カンマで区切る)all(値が変更されたすべてのプロパティを指定)
遷移が発生する時間変化曲率を指定します:プロパティ:transition-timing-function値:

linear均一速度変化.

easeデフォルト値、低速開始、中間加速、低速終了.

ease-inスロースタート、加速終了.

ease-out快速開始、遅速終了

ease-in-out低速開始と終了、中間過程は先に加速した後に減速する.

遅延時間の指定:属性:transition-delay値:s/ms単位の時間値
遷移属性の略記
属性:transition取値:property duration timing-function delay;構文:

durationは必須ですが、その他は省略できます.

は、それぞれ異なる属性に遷移時間を設定することができる.

transition: width 2s, height 3s,
CSSでよく使われるレイアウト
CSSレイアウトとは、要素の配置と表示を設定することです.
レイアウトの分類
標準フローレイアウト:標準フローレイアウトは静的レイアウト、ドキュメントフローレイアウトとも呼ばれ、デフォルトのレイアウトです.
特徴:要素はタイプと書く順序で、左から右、上から下の順に表示されます.
フローティングレイアウト:要素設定フローティング後、他の要素のエッジにドッキングできます.プロパティ:float値:left/right/none(デフォルト)float: left;要素は、他の要素の縁に近づくまで左にフローティングします.float: right;要素は、他の要素の端に近づくまで右にフローティングします.
特徴:

要素がフローティングされると、ドキュメントフローから離れ、ドキュメント内で占有されなくなり、ドキュメントの上に浮かぶように表現されます.後ろの正常な要素は前に占有されます.

複数のエレメントがフローティングされると、前のフローティングエレメントのエッジに順番にドッキングし、現在の親エレメントの幅が収まらない場合は、自動的に改行表示されます.

任意の要素は、フローティングを設定するだけで、幅/高さを設定できます.

文字の折り返し効果は、フローティング要素が占有されず、通常の要素の表示を遮断し、通常の要素の位置だけを遮断し、通常の内容の表示に影響を与えず、内容の表示はフローティング要素の周囲に囲まれて表示されます.

フローティング要素の水平方向に隙間がなく、行内要素または行内ブロック要素の水平方向の改行による空隙問題を解決することができる.

フローティングによる問題:サブエレメントがすべてフローティングされているため、ドキュメント内で占有されず、親エレメントの高さが0になり、ページレイアウトに影響します.
解決策:
1.親要素の高さ、位置を設定します.
2.親要素にoverflow:hidden;を設定
3.標準手順:フローティング要素の影響をクリアします.属性:clear値:left/right/both
使用法:要素にclearプロパティを設定する
clear:left; 現在の要素が左フローティング要素の影響を受けないように設定clear:right;現在の要素が右フローティング要素の影響を受けないように設定clear:both;現在の要素の左または右のフローティング要素の影響に設定
親要素の高さを0にするには、次の手順に従います.

親要素の末尾に空の子要素(ブロック要素)を追加します.

空の要素にclear: both;

を設定する.
例:05-float.html/06-float2.html