css初歩

2171 ワード

                                           css  
  • が開発したドキュメント:開発時にすべての資料を1つのフォルダに読み込み、フォルダに2つのサブフォルダを作成し、1つはすべてのピクチャを入れ、もう1つはCSSスタイルシートを入れます.
  • 準備作業:ページの枠線を初期化します.大きなボックスモデルをバックグラウンドとして使用すると、縮小時にボックスの相対位置が変化することを防止できます.
  • 外距の设置:margin外距简写时、4つの要素があれば、4つの要素はそれぞれ上下左で、3つの要素があれば、それぞれ上、左右、下で、2つの要素があればそれぞれ上下、左右です.設定時、単位はできるだけ100%フォーマットを使用して、異なるパソコンが互換性がないようにします.Paddingは略記していません!!!
  • ボックスのネストされたレイアウト:(1)要素の水平方向中央にmargin:auto(2)テキストの水平方向中央に配置text-align:centre(3)画像の中央に配置するにはmargin:autoを使用してブロック要素に同時に配置します.(4)垂直中央揃え簡単な方法は、頭の上部にpadding:またはline-height(5)を使用して左右揃えposition:absolute(6)フローティング左右揃え:floatを使用して要素を揃えます.
  • CSSネストおよびパケット例:p{}:すべてのp要素にスタイルを指定する.nav{}:すべてのclass="nav"の要素にスタイルを指定する.nav p{}:すべてのclass="nav"要素内のp要素にスタイルp.nav{}:すべてのclass="nav"のp要素にスタイルを指定する
  • displayプロパティblock要素は常に1行を独占し、別の行から始まり、その後の要素も別の行で表示しなければならない.幅(width)、高さ(height)、内側ピッチ(padding)、外側ピッチ(margin)は制御可能である.inline要素と隣接するインライン要素は同じ行にあり、幅(width)、高さ(height)、内マージンのpadding-top/padding-bottomと外マージンのmargin-top/margin-bottomはいずれも可変ではないinline-block要素は行内ブロック要素として表示され、同業者表示として表現され、幅の内外マージンなどの属性noneとhidden-visibility:hiddenはある要素を隠すことができる.ただし、非表示の要素は、非表示の前と同じスペースを必要とします.display:noneはエレメントを非表示にすることができ、非表示のエレメントはスペースを消費しません.
  • 擬似クラス要素擬似クラス要素の構文selector:pseudo-class{property:value;}例えば:a:hover{color:blue;}CSSクラスも擬似クラス:selector.class:pseudo-class{property:value;}例えば:a.red:hover{color:red;}いくつかの一般的な擬似クラスa:link-正常、未アクセスのリンクa:visited-ユーザーがアクセスしたリンクa:hover-ユーザーがマウスをリンクに置いたときa:active-リンクがクリックされた瞬間first-childは、親要素の最初のサブエレメントを選択するためにfirst-child擬似クラスを使用することができます。「first-line」擬似要素は、テキストの最初の行に特殊なスタイルを設定するために使用されます。「first-letter」擬似要素は、テキストの頭文字に特殊なスタイルを設定するために使用されます。「:before」擬似要素は、要素の内容の前に新しい内容を挿入できます。「:after」擬似要素は、要素の内容の後に新しい内容を挿入できます。
  • ナビゲーションバーの作成ナビゲーションバーの作成はulliネストを使用して作成され、ポップアップメニューバーではdispy:nonelaを使用して先に非表示にし、display:blockを使用して偽要素(hover)と結合してメニューバーをポップアップすることができます.問題のあるアニメーションの制作が細かくない場合は、画像の移動が硬くなります.解決策アニメーションを挿入した後、0%{margin-top:0 px;}50%{margin-top:20 px;}100%{margin-top:0 px;}ps.レイアウトではpositionをできるだけ少なくし、箱のネスト方法でレイアウトします.