CSS学習ノート

1905 ワード

CSS学習参考:http://www.w3school.com.cn/css/index.asp
セレクタ
  #             idセレクタ
  .              クラスセレクタ
  p             エレメントセレクタ
h 1,h 2,h 3,h 4要素パケット
  h1 em         子孫セレクタ
アドバンスドセレクタ(ブラウザのサポートが不十分)
img[src|=「figure」プロパティセレクタ
ol>liサブセレクタ(隣接レベル)
+隣接セレクタ a:hover擬似クラス
カスケードと継承
スタイルセレクタの優先度の高低によりスタイルオーバーライドが生成され、優先度の高い(#)オーバーライドが低い(要素セレクタ)
子孫要素の継承祖先要素の特定のスタイルの継承
ボックスモデル
CSS学习笔记
外距離のマージ:
2つの垂直外距離が出会うと、それらは1つの外距離を形成します.
マージ後の外距離の高さは、マージが発生した外距離の2つの高さのうちの大きいものに等しい.
 
内側と外側の距離の違いは?
外側の余白は結合され、内側の余白は結合されません.
内側の余白には背景画像が含まれており、外側の余白には含まれていません.
 位置
位置決めはすべてブロック要素にとって、行内要素は手動でdisplay:blockを設定することができる.ブロックレイアウト
一般position:relative;  

デフォルトのドキュメントフローの位置決め、htmlは上から下へ行ごとに分布します.相対的に配置するように設定する要素ボックスは、距離をオフセットします.エレメントは未配置のシェイプを保持し、元のスペースは保持されます.
絶対位置決めposition: absolute;      
絶対位置に設定された要素ボックスは、ドキュメントフローから完全に削除され、ブロックが含まれていることに対して、ドキュメント内の別の要素または初期のブロックが含まれている可能性があります.エレメントが通常のドキュメント・フローに占めるスペースは、エレメントが存在しないかのように閉じられます.エレメントが配置されると、元のブロックに関係なくブロック・レベル・ボックスが生成されます. 通常のストリームでどのようなタイプのボックスが生成されますか.
フローティング位置決めfloat:left;
           フローティングボックスは、ボックスまたは別のフローティングボックスを含むフレームに外縁がぶつかるまで、左または右に移動できます.フローティングボックスはドキュメントの通常ストリームにないため、ドキュメントの通常ストリームのブロックボックスはフローティングボックスが存在しないように表現されます.
参照
外部接続<link rel="stylesheet"type="text/css"href="mystyle.css"/>   mystyle.css ....
インライン<style type="text/css">...</style>埋め込み

style="color:sienna;margin-left:20 px">