フロントエンド学習エッセイ css_html/css_WEB-ITnose

CSS

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

• 在标签中使用 style='xx:xxx;'

• 在页面中嵌入 < style type="text/css"> 块

• 引入外部css文件

标签选择器

div{ background-color:red; }

class选择器

.bd{ background-color:red; }

id选择器

#idselect{ background-color:red; }

关联选择器

#idselect p{ background-color:red; }

组合选择器

input,div,p{ background-color:red; }

属性选择器

input[type='text']{ width:100px; height:200px; }        

div{ background-color:red; }

属性

転載: http://wenku.baidu.com/link?url=3faEGwVL6SjsWQTbP94gizaH2qI27vd7sVRZCpc778gKH4Z9Y4plaIVukou2rsdH4Sljv YHDm83x7JalgTG-D3DsdnmxnSrDtbfRHq830C3

フォント属性: (font)
サイズ font-size: x-large、(特大) xx-small、(非常に小さい) 中国語では通常使用されず、数値のみを使用します。単位: PX、PD
スタイル font-style: oblique;(Italic) italic;(Italic) Normal;(Normal)
line-height:normal;(Normal) 単位: PX、PD、EM
太さのフォント- 太さ: 太字;(太字) 軽く;(細) 通常;(標準)
variant font-variant: small-caps;(小文字) Normal;(normal)
case text-transform : (最初の文字を大文字にする) ) 大文字; (小文字) なし; (なし)
テキスト装飾: 下線; (上線) 線引き; (点滅)一般的に使用されるフォント: (font-family)
"Courier New"、Courier、monospace、"Times New Roman"、Times、serif、Arial、Helvetica、sans-serif、Verdana
背景属性: (background)
色の背景色: #FFFFFF;
画像の背景画像: url();
背景の繰り返し: no-repeat;
背景のスクロール: (固定) スクロール;スクロール)
位置 背景位置: 左 (水平) 上 (垂直);
省略方法 背景: #000 url(..) 繰り返し 左上;
エリア ブロック属性: (ブロック)
文字間隔: 値
テキスト整列: 左揃え;
垂直方向の配置: ベースライン; ; (添え字) スーパー; (添え字) テキスト - ボトム;
値
空白: pre;(予約済み) Break)
display:block;(block) inline;(embedded) list-item; (追加部分) コンパクト (compact) マーカー (マーカー) テーブル;テーブル-ヘッダー グループ; テーブル-列-グループ; (テーブル タイトル); (ボックス)
幅:;高さ:;クリア :両方;パディング:;順序: 溝 (溝) インセット;
border-width:; ボーダー幅
border-color:#;
省略方法 border: width style color;
リスト属性: (List-style)
タイプ list-style-type : ディスク; (丸) 正方形; (数字) 下位ローマ字;
位置リスト形式-位置: 外側; (外側) 内側;
画像リストスタイルイメージ: url(..);
位置属性: (位置)
位置: 相対;
: 継承; 非表示;
オーバーフロー: 非表示; 自動;
クリップ: rect(12px,auto,12px,auto) (トリミング)

>1 CSS テキスト属性:
color: #999999; /*テキストの色*/
フォントファミリー: /*テキストフォント*/
フォントサイズ: 12px; *文字サイズ*/
font-style:itelic; /*斜体文字*/
font-variant:small-caps ; /*小さいフォント*/
文字間隔 : /*文字間の距離Words*/
line-height : 200%; /*行の高さを設定*/
font-weight:bold; / *太字のテキスト*/
vertical-align:sub; 🎜>vertical-align:super; /*Superscript*/
text-decoration:line-through; / *取り消し線を追加*/
text-decoration: overline; /*先頭行を追加*/
テキスト-decoration:underline; /*下線を追加*/
text-decoration:none; /*リンクの下線を削除*/
text-transform : Capitalize; /*最初の単語を大文字にする*/
text-transform : uppercase; /*英語の大文字*/
text-transform : lowercase; /*英語の小文字*/
text-align:right; /*テキストを右揃え*/
text-align:left; ; /*テキストを左揃え*/
text-align:center; /*テキストを中央揃え*/
text-align:justify; /*テキストを揃えます*/
vertical-align;属性
vertical-align:top; /*垂直上方向に整列*/
vertical-align:bottom; /*垂直方向下方向に整列*/
vertical-align:middle; /*垂直方向の中央揃え*/
vertical-align:text-top; /*テキストは垂直方向の上方向に配置されます*/
vertical-align:text-bottom;下向き */
2. CSS borderblank
padding-top:10px; /*上部の境界線を空白のままにします*/
padding-right:10px; /*右側の境界線を空白のままにします*/
padding-bottom :10px; /*下の境界線を空白のままにします*/
padding-left:10px; /*左の境界線を空白のままにします
3. CSS シンボル属性:
list-style-type:none ; /*番号付けなし */
list-style-type:10進数; /*アラビア数字*/
list-style-type: lower-roman; /*小文字のローマ数字*/
list-style -type:upper- roman; /*大文字のローマ数字*/
list-style-type: lower-alpha; /*小文字の英字*/
list-style-type:upper-alpha;英字*/
list-style-type:disc; /*実線の円記号*/
list-style-type:circle; /*中空の円記号*/
list-style-type:square ; /* 実線の正方形のシンボル*/
list-style-image:url(/dot.gif); /*ピクチャスタイルのシンボル*/
list-style-position: 外側;
list -style-position:inside; /*インデント*/
4. CSS 背景スタイル:
background-color:#F5E2EC; /*背景:transparent;遠近背景* /
background-image : url(/image/bg.gif); /*背景画像*/
background-attachment : 固定; /*透かし固定背景*/
background-repeat : repeat; /*リピート配置 - Web ページのデフォルト*/
background-repeat : no-repeat; /*リピート配置なし*/
background-repeat :repeat-x; */
background-repeat :repeat-y; /*y 軸上の配置を繰り返します*/
背景の位置を指定します
background-position: 90% 90%; x 軸と y 軸上の画像*/
背景位置 : 上に配置*/
背景位置 : 下に配置*/
背景位置 : 左;左揃え*/
background-position : right; /*右揃え*/
background-position : center; /*中央揃え*/
5. CSS 接続プロパティ:
a /*All hyperlinks*/
a: link /*ハイパーリンクのテキスト形式*/
a:visited /*表示されたリンクのテキスト形式*/
a:active /*クリックされたリンクの形式*/
a:hover / *マウスの回転 リンクへ*/
マウスカーソルのスタイル:
リンク指 CURSOR: 手
十字カーソル:クロスヘア
下矢印カーソル:s-サイズ変更
十字矢印カーソル:移動
矢印 右へのカーソル:move
疑問符の追加 カーソル:help
左への矢印 カーソル:w-resize
上への矢印 カーソル:n-resize
右上への矢印:ne-resize
上向き、左向きの矢印 Cursor:nw-resize
入力したテキスト Cursor:text
斜め下右向きの矢印 Cursor:se-resize
斜め下向き、左向きの矢印:sw-resize
ファンネル カーソル:wait
カーソル パターン (IE6) p {cursor:url("カーソル ファイル名.cur"),text;}
6. CSS ボーダー リスト:
border -top: 1px ソリッド #6699cc; /*上ボーダー */
border-bottom : 1px ソリッド #6699cc; /*下ボーダー*/
border-left : 1px ソリッド #6699cc;
border-right : 1px Solid # 6699cc; /*右枠線*/
上記は推奨の書き方ですが、以下のように従来の方法でも構いません。 #369 /*上枠線の上の色を設定*/
border-top-width :1px /*上枠の上の幅を設定*/
border-top-style :solid/*Set上枠のトップスタイル*/
その他の枠スタイル
実線 / *実線枠*/
点線 /*点線枠*/
二重 /*二重枠*/
溝 / *三次元凸フレーム*/
リッジ /*三次元レリーフフレーム*/
インセット /*凹フレーム*/
アウトセット /*凸フレーム*/
7. CSSフォームの適用:
テキスト ボックス
ボタン
チェックボックス
選択ボタン
複数行テキスト ボックス
ドロップダウン メニュー オプション 1 オプション 2
8. CSS 境界線のスタイル:
マージン-top:10px; /*上枠*/
margin-right:10px; / *右マージン値*/
margin-bottom:10px; /*下マージン値*/
margin-left: 10px; /*左マージン値*/

CSS プロパティ: フォント スタイル ( Font Style)
シリアル番号 中国語の説明 マーク構文
1 フォント スタイル {font:font-style font-variant font-weight font-size font-family}
2 フォント タイプ {font-family:"フォント 1","フォント 2","フォント 3",.. .}
3 フォント サイズ {font-size:numeric| 大きい | xx 小さい | フォント スタイル { font-style:inherit|italic|normal|oblique}
5 フォントの太さ {font-weight:100-900|bold|bolder|lighter|normal;}
6 フォントの色 {color: value;}
7 影の色 {text-shadow: 16 ビット カラー値}
8 フォント行の高さ {line-height: 数値|継承|標準;}
9 文字間隔 {letter-spacing: 数値|継承|normal }
10 単語間隔 {word-spacing:numeric|inherit|normal}
11 フォント変換 {font-variant:inherit|normal|small-cps}
12 英語変換 {text-transform:継承 | なし|大文字|小文字}
13 フォント変形 {font-size-adjust:inherit|none}
14 フォント {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit |狭い|標準|半拡張|超凝縮|超拡張|広い}
テキストスタイル (テキストスタイル)
シリアル番号 中国語の説明 マーク構文
1 行間隔 {line- height: 数値|inherit|normal;}
2 文字装飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段落先頭のスペース {text-indent:数値|inherit}
4 水平方向の配置 {text-align:left|right|center|justify}
5 垂直方向の配置 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline |middle|sub|super}
6 書き込みモード {writing-mode:lr-tb|tb-rl}
背景スタイル
シリアル番号 中国語の説明 マーク構文
1 背景色 {background-color : value}
2 背景画像 {background-image: url(URL)|none}
3 背景の繰り返し {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment :fixed|scroll}
5 背景位置 {background-position: value|top|bottom|left|right|center}
6 バックスタイル {background: 背景色|背景画像|背景リピート|背景添付| 背景位置}
フレームスタイル (ボックススタイル)
シリアル番号 中国語説明 マーク構文
1 枠線マージン {margin:margin-top margin-right margin-bottom margin-left}
2 パディング {padding :padding-top padding-right padding-bottom padding-left}
3 ボーダー幅 {border-width:border-top-width border-right-width border-bottom-width border-left -width}
幅 値: 薄い|中|厚い|値
4 境界線の色 {border-color: value value value value} 値: それぞれ上、右、下、左の色の値を表します
5 境界線スタイル {border-style:none |hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 border {border:border-width border-style color}
上部境界線 { border-top:border-top-width border-style color}
右ボーダー {border-right:border-right-width border-style color}
下のボーダー {border-bottom:border-bottom-width border -style color}
左境界線 {border-left:border-left-width border-style color}
7 幅 {width:length|percent|auto}
8 高さ {height:value|auto}
9 float {float:left|right|none}
10 Clear {clear:none|left|right|both}
カテゴリリスト
シリアル番号 中国語の説明 マーク構文
1 コントロール表示{display:none|block |inline|list-item}
2 制御ホワイトスペース {white-space:normal|pre|nowwarp}
3 シンボルリスト {list-style-type:disc|circle|square| 10 進数|下位ローマ|上位 -ローマ|下位アルファ|上位アルファ|なし}
4 グラフィック リスト {list-style-image:URL}
5 位置リスト {list-style-position:inside|外部}
6 ディレクトリ リスト {list-style: ディレクトリ スタイル タイプ ディレクトリ スタイル URL}
7 ネズミ标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}