一、CSS概要

二、セレクタの定義

1、要素選択器

2、スタイルクラス

3、分類

4、IDセレクタ

5、派生セレクタ

6、セレクタパケット

7、偽類

8、拡張

三、各種スタイル属性

四、サイズ

五、枠

六、マージン

七、背景

8、テキスト

九、表

十、カーソル

十一、フローティング

十二、表示----要素の表示方式

3、リストのスタイル

一、CSSの概要

1、CSSの役割:ホームページの外観を定義して、統一的な方式、内容(データ)と表現(様式)の分離を実現する
2、CSSの基礎文法:
スタイル属性名1:値1;スタイル属性名2:値2
width:100px;height:200px;
提案された定義:
スタイルセレクタ名{スタイル宣言;  }
3、CSSの定義方式:
方式1:インライン方式---CSSスタイルはhtml要素のstyle属性の中で定義します---再利用性とメンテナンス性がよくありません
方式2:内部スタイルシート---CSSスタイルはheadの中のstyle要素の中で定義します
方式3:外部スタイルシート---CSSスタイルは単独で定義.cssファイルではhtmlページにlinkで導入---優先的に推奨
a.html----皮膚の切り替えに似た複数のスタイルを用意する
s1.css---赤
s2.css---青
s3.css--白黒
4、特徴css(カスケード/積層スタイルシート)
継承:子要素は、親要素のいくつかのスタイル(フォント関連、背景関連)を使用できます.

 
    111 
 
text
 
 

重複しない
繰り返し定義---優先度:インライン>内部または外部(最後に定義したものに準じて、前の同じ部分を上書き)

二、セレクタの定義

1、元素選択器

h 1/div/p---htmlにタグ付けされた名前---と同じクラスの要素のスタイルを定義する

2、スタイルクラス

css:     .name {}
html:------複数の要素が同じスタイル

3、分類

CSS:     input.txt {}
html:      
同じ要素の下でのテッセレーション

4、IDセレクタ

ページ上の要素の一意の定義
CSS:     #idvalue {}
html:    

5、派生セレクタ

html要素の階層関係を利用して、ある構造の下の要素を選択します.
CSS:    ul li a{XXX}
html:  

... 6、セレクタグループ nマルチエレメントに同じスタイル部分を定義する CSS：       input,a.link,#title,.s1   {XXX} 7、偽類 状態が違う :link---未アクセス :hover---サスペンション :active---を押します :visited---アクセス済み CSS:あるセレクタ:link/hover 8、拡張 さまざまなスタイルセレクタ---重複しない並列セット、重複する優先度 セレクタの優先度:範囲が小さいほど優先度が高くなります div a {} #link1 {} a.s1 {} 三、各種スタイル属性 寸法単位:pt/px/cm/mm/%/.. 色単位：red/#ff 0000 四、寸法 width、height overflow:visible/hidden/scroll/auto(推奨)---コンテンツオーバーフローの設定時の処理方法 五、外枠 border:width style color;---4ボーダー border-top:1px solid red; border-left:2px dotted blue; border-left-width:2px; border-left-style:dotted;---線種 border-left-color:blue; 六、余白 ボックスモデル(ボックスモデル):要素の枠線、内容、外側の距離、および内側の距離の定義 margin:外距離 margin:20px;---4方向 margin:10px 20px 30px 40px; --- top right bottom left margin:10px 20px;---値のコピー margin-left:10px;---単一方向の余白 margin-top:20px; padding:内側余白 padding:1/2/4; padding-left/right:; マージンを定義すると、総面積が増加する可能性があります。 特別な値: margin:10px auto;----中央、auto:ブラウザによって左右の余白が自動的に計算されます。 七、背景 1、背景色：background-color：色；---じゅんしょく 2、背景画像： background-image:url(images/a.jpg); background-repeat:repeat/no-repeat/repeat-x/repeat-y; background-position:x y; background-attachment:scroll/fixed;--付着方式---取値fixed、背景画像固定、透かしの効果に類似 八、テキスト color font-size font-family:value1,value2,value3; font-weight:normal/bold; text-align:left/center/right; text-decoration:none/underline; text-indent:12px;----最初の行のみインデント line-height:20px;---行の高さ 九、表 vertical-align:top/middle/bottom;----td里 border-collapse:separate/collapse;---枠線の結合 border-spacing:10px;---枠線間の余白 十、カーソル cursor:default/pointer/help/....;---カーソル 十一、浮動 1、ページのデフォルトでは、フローレイアウトのモードを採用する 2、要素の浮動を設定し、元のレイアウトから離れ、元の位置はもう保留せず、後続の要素を補充する float:none/left/right; 3.フローティング要素の除去による影響 clear:left/right/both; 十二、表示----要素の表示方式 html要素ごとにデフォルトの表示方法(ブロックレベル、行内)があります。 行内要素:高さと幅---無効 ≪ブロック・レベル要素｜Block Level Elements｜oem_src≫:≪高さと幅が有効｜Height and Width Valid｜oem_src≫ 十三、リストのスタイル list-style-type:none/circle/...; list-style-image:url();----リスト項目の識別子としてピクチャを使用する 昔、私はいつも自分が菜鳥だと思っていたが、早起きの鳥には虫がいると思っていた。ある日私は飞びたくて、やっと愕然として自分が翼と羽がないことを発见して、私は意外にも菜虫です!早起きの虫は鳥に食べられている……なるほど、百足は厚いはずだ。