css(cascading style sheets積層スタイルシート).htmlはドキュメントの構造と内容のみを担当し、表現形式はcssに完全に渡され、htmlドキュメントを簡潔にする.定義方法:セレクタ{属性:値;属性:値;属性:値;属性:値; cssページの導入方法:インライン:…
埋め込み:ヘッダファイル(トップページでよく使用され、速度が速い)
は、後のdivブロックにスタイルを自動的に組み込む.
外鎖式
のうちcss/main.cssにはstyleのdivコンテンツがあります. css共通テキスト設定★ colorテキストの色を設定します.たとえば、color:red; font-size文字のサイズを設定します.font-size:12 pxなどです. font-family設定文字のフォント、例えばfont-family:'マイクロソフトヤコブ'; font-styleフォントが傾いているかどうかを設定します.例えば、font-style:'normal';傾斜しない設定、font-style:'italic';設定文字の傾き font-weight設定文字が太くなるかどうか、例えばfont-weight:bold;太字font-weight:normal設定太字を設定
fontは同時に文字のいくつかの属性を設定して、書く順序は互換性の問題があって、以下の順序で書くことを提案します:font:太い文字/行の高いフォントを加えるかどうか;例えば:font:normal 12 px/36 px「マイクロソフトブラック」;(文字/行は前、フォントは後) line-height文字の行の高さを設定します.例えば、line-height:24 px; text-decorationテキストの下線を設定します.たとえば、text-decoration:none;下線を引く text-indentテキストの最初の行のインデントを設定します.例えば、text-indent:24 px;テキストの最初の行のインデント24 px を設定します.
text-align text-align text-align:center設定文字水平中央のように文字水平揃えを設定する.
色表示法色名表示、red、yellow等 rgbは、rgb(255,0,0)を表す
16進数表示、#ff 0000 cssセレクタラベルセレクタラベルセレクタ.このセレクタは影響範囲が大きいので、できるだけレベルセレクタに適用することをお勧めします. idセレクタはid名で要素を選択し、要素のid名は重複できないため、1つのスタイル設定項目はページ上の1つの要素にしか対応できず、多重化できず、id名は一般的にプログラムに使用されるので、idをセレクタとして使用することは推奨されません. クラスセレクタ(適用が最も多く、スタイルの組み合わせをカスタマイズすることができ、優先度がidセレクタより小さい)はクラス名で要素を選択し、1つのクラスは複数の要素に適用することができ、1つの要素には複数のクラスを使用することができ、応用が柔軟で、多重化することができ、cssで最も適用されるセレクタである.階層セレクタは、主に親要素の選択下のサブ要素、またはサブ要素の下のサブ要素に適用され、ラベル要素と組み合わせて使用することができ、ネーミングを減らすことができます.また、階層を通じてネーミングの競合を防止することもできます..box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....span>
<a href="#" class="red">....a>
div>
<h3 class="red">....h3>
グループセレクタ複数のセレクタは、同じスタイル設定がある場合はグループセレクタを使用できます. 擬似クラスおよび擬似要素セレクタ★よく使われる擬似クラスセレクタにはhoverがあり、マウスが要素に浮かぶときの状態を表し、擬似要素セレクタにはbeforeとafterがあり、スタイルで要素に内容を挿入することができます..box1:hover{color:red}
.box2:before{content:' ';}
.box3:after{content:' ';}
<div class="box1">....div>
<div class="box2">....div>
<div class="box3">....div>
ブロック要素、インライン要素、インライン要素はラベルであり、レイアウトでよく使われるのは3種類のラベルであり、ブロック要素、インライン要素、インライン要素であり、この3種類の要素の特性を理解してこそ、ページレイアウトを熟練することができる. 箱モデル要素はページに四角く表示され、箱のように表示されます.CSS箱モデルは現実の箱を例えて、要素に対応するスタイルを設定するのに役立ちます.要素を箱と呼び、対応するスタイルを箱の枠(border)、箱内の内容と枠の間の間隔(padding)、箱と箱の間の間隔(margin)に設定します. フローティング:ドキュメントフロードキュメントフローとは、箱がhtmlラベルで書かれた順に上から下へ、左から右へ、ブロック要素が1行を占め、行内要素が1行以内に左から右に並び、先に書いたものが先に並び、後に書いたものが後ろに並び、それぞれの箱が自分の位置を占めていることを意味します. フローティングプロパティ1、フローティングエレメントには左フローティング(float:left)と右フローティング(float:right)の2種類があります.フローティングエレメントは左または右にフローティングし、親エレメント境界、フローティングエレメント、フローティングされていないエレメントにぶつかってから停止します.フローティングは、行内の要素またはブロック要素を自動的に行内のブロック要素5に変換し、フローティング要素の後ろにフローティング要素がないとフローティング要素の位置を占め、フローティング要素内の文字がないとフローティング要素を避けることができ、文字の許容図を形成する効果6、親要素内全体のフローティング要素が親要素を支えることができず、フローティング7をクリアする必要がある.フローティング要素間に垂直marginのマージがないインライン要素ギャップを解決する方法★1、インライン要素間の改行を取り除く2、インライン要素の親をfont-size 0に設定し、インライン要素自体をfont-size に再設定する
フローティングのクリア親に属性overflow:hidden 2を追加する.最後のサブエレメントの後ろに空のdivを追加し、スタイルプロパティclear:both(推奨しない)を与えます.
成熟したフローティングスタイルクラス、clearfix .clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
：
.con2{... overflow:hidden}
"con2 clearfix">
css position ，postion ：
- relative ， ，
absolute ， ， ， ， ， ， body 。
fixed ， ， ， ， 。
static ， ， ，
inherit position
★（z-index）
， z-index
1、
2、
3、
4、
を使用