6-cssスタイル

背景色background-color
背景色の値は英語でも16進数色でもrgbでもよい
背景画像background-image
背景画像のサイズはコンテナのサイズとは異なります
背景画像は占有されません
容器が大きい場合、背景画像が小さい場合、背景画像は容器全体に平らに敷かれます.
背景画像位置background-position
背景画像の位置決め値は、座標x,y軸を表す2つの単位である
背景画像の位置付けの値はleft,right,top,bottom,centerであることができる
背景画像繰り返しbackground-repeat
No-repeat配列画像は重複せず、よく使われます
roundコンテナ全体に適応して充填するまで自動スケール
spaceは同じ間隔でコンテナ全体を平らにし、充填する
背景画像位置決めbackground-attachmentbackground-attachment:fixed
背景画像が固定されているか、ページの残りの部分に従ってスクロールされているかbackground-attachmentの値は、scrollfixedであってもよいbackground略語background: #ff0000 url(bg01.jpg) no-repeat fixed center
フォントスタイル
フォントファミリー:font-familyフォントサイズ:font-sizeフォントの太さ:font-weightfont-weight :400 normalデフォルトbold太字bolder lighter
フォント色colorフォント斜体:font-style

font-style:italic

normalテキスト正常表示

italicテキスト斜体表示

obliqueテキストチルト表示

テキストのプロパティ
行の高さline-heightline-height:50px
親要素の高さを支えることができます
テキスト水平位置揃え:text-alignleft , center , right
テキストの行の高さの垂直位置:vertical-alignbaselineデフォルトsubテキストの下付きラベルを垂直に揃え、subラベルと同じ効果を得ます.superテキストの上付き文字を垂直に揃え、supラベルと同じ効果topオブジェクトの先端をコンテナの先端に揃えます.text-topオブジェクトの先頭が行のテキストの先頭に揃えられます.middle要素オブジェクトベースライン垂直位置合わせbottomオブジェクトの下端を行のテキストの下部に揃えます.text-bottomオブジェクトの下端を行テキストの下端に揃えます.
テキストインデントtext-indenttext-indent:2em
通常、段落の開始位置に使用される最初の行のインデント
文字間の間隔letter-spacing単語間の間隔:word-spacingテキストの大文字と小文字text-transformテキストの各単語は大文字で始まる.capitalize定義大文字のみuppercase定義小文字のみ
テキストの装飾lowercasetext-decorationデフォルトnone下線underline上化線overline中線
自動改行line-throughword-wrap
基本スタイル
width,height
エレメントのデフォルトには高さがありません.エレメントの内容がエレメントを高くするように高さを設定する必要があります.
マウススタイルword-wrap: break-wordマウスのスタイルを定義するcursorデフォルト、cursor:pointer小手形状、default移動形状
透明度pointermove
透明度の値は0～1の間で、0は透明度、1は完全に不透明度を表します.
透明な要素は見えないだけで、ドキュメントフローを占めています.
可視性opacityopacity:0.3 visibility要素表示visibility:hidden要素が表示されないvisible表要素で使用する場合、この値は表のレイアウトに影響を与えない行または列を削除します.
オーバーフロー非表示hiddenオブジェクトの内容が指定した高さと幅を超えた場合の表示方法を設定します.collapseデフォルト値は、コンテンツがトリミングされず、要素ボックスの外に表示されます.overflowコンテンツはトリミングされ、残りのコンテンツは表示されません.visibleのコンテンツはトリミングされますが、ブラウザにはスクロールバーが表示され、残りのコンテンツが表示されます.hiddenコンテンツがトリミングされた場合、ブラウザはスクロールバーを表示して残りのコンテンツを表示します.
外枠の色scrollテキストボックスには枠線が付いており、スタイルが醜いauto外枠をクリア
スタイルのリセット
要素のmarginとpaddingをクリア
持参したリストを削除
下線を引く
ボックスモデルスタイル
ブロックエレメント
要素分類変換display
block、要素をブロックレベル要素に変換
inline、エレメントを行レベルエレメントに変換
inline-block、要素をインラインブロック要素に変換
none要素を隠す
線を引くborder
線のスタイル:input破線、outline:none点線、dashed実線dottedスタイルでは、1つの方向の枠線のみにスタイルを設定できます.
アンダーラインsolid上線css右の線border-bottom左の線border-top間隔margin
インサイドパディング
フローティングフロート
フローティング原理:フローティングによって要素がドキュメントの通常ストリームから離れ、通常ストリームの上に浮かぶ
フローティング要素は、通常のフローの位置に表示され、設定されたフローティング方向に従って左または右にフローティングされます.フローティング要素の外縁がボックスまたは別のフローティング要素を含むまで検出され、テキストとインライン要素が囲まれます.
フローティングは、要素自体が何であるかにかかわらず、ブロック・レベル・ボックスを生成します.
フローティングによる影響のクリア
クリアフローティングborder-rightはクリアせず、border-leftは左にフローティングオブジェクト、none、leftは許可されません.
擬似クラスによるフローティングのクリア

.clearFix{
    content="";
    display: block;
    width: 0;
    height: 0;
    clear: both;
}

位置決め
レイヤモデル、絶対位置(親に対して)
要素にレイヤモデルの絶対位置を設定するには、rightの絶対位置を設定する必要があります.この文の役割は、ドキュメントフローから要素をドラッグし、left、right、top、bottom属性を使用して、最も近い位置属性を持つ親パッケージのブロックに対して絶対位置を設定します.
このようなブロックが存在しない場合、body要素、すなわちブラウザウィンドウに対してboth

div{
    width: 200px;
    height: 200px;
    border: 2px red solid;
    position: absolute;
    left: 100px;
    top: 20px;
}

レイヤーモデル-相対位置(元の位置に対して)position:absolute

#div{
    width: 200px;
    height: 200px;
    border: 2px red solid;
    position: relative;
    left: 100px;
    top: 20px;
}

レイヤーモデル-固定位置(Webウィンドウに対して)position:absolute