CSS スタイルの完全なコレクション (整理版)-CSSチュートリアル-php.cn

この章では、 css スタイル (整理版) ) は一定の参考価値があるので、困っている友人は参考にしていただければ幸いです。

フォント属性: (font)

サイズ{font-size: x-large;}(特大) xx-small;(極小) ) 通常、中国語では使用されません。数値のみを使用します。単位: PX、PD

スタイル{font-style: oblique;}(斜体)斜体;(斜体)標準;(標準)

line-height{line-height:normal;}(normal) 単位: PX、PD、EM

太さ{font-weight:太字;}(太字) 軽くなります。 (薄いボディ) ノーマル;(ノーマル)

バリアント{font-variant: small-caps;}（小文字）normal;（normal）

Case {text-transform: Capitalize;}(最初の文字を大文字) uppercase;(大文字) 小文字;(小文字) none;(none)

変更 {text-decoration:underline;} (underline) overline;(上線) 線通し;(取り消し線) ブリンク;(点滅)

一般的に使用されるフォント: (font-family)

"Courier New"、Courier、等幅、"Times New Roman" 、Times、セリフ、 Arial、Helvetica、sans-serif、Verdana

背景属性: (背景)

カラー{background-color: #FFFFFF;}

写真{background-image: url();}

リピート{background-repeat: no-repeat;}

スクロール{背景-添付ファイル: 固定;}(固定) スクロール; (スクロール) p>

位置{background-position: left;}(水平) top(vertical);

省略方法 { background:#000 url(..)repeat fixed left top;} /*略語・コードを読むときによく出てくるのでよく読んでください*/

ブロック属性: (ブロック) /*この属性を初めて知ったので、もっと勉強する必要があります*/

単語間隔 {letter-spacing:normal;} value/*この属性は便利そうです。もっと練習してください*/

配置{text-align: justify;}(両端を揃えて) left;(左揃え) 右揃え;( 右揃え) 中央; (中央)

インデント {text-indent: 数値 px;}

垂直配置{vertical-align: ベースライン;}(ベースライン) サブ;(下付き文字) スーパー;(下付き文字) トップ; テキスト-トップ; ミドル; ボトム; テキスト-ボトム;

単語間隔: 通常; 値

空白スペース: pre; (予約) nowrap; (行の折り返しなし)

Display{display: block;} (ブロック) インライン; (埋め込み) リスト項目; (リスト項目) ランイン; (追加部分) コンパクト; (コンパクト) マーカー; (マーカー) テーブル; インラインテーブル; テーブル生グループ; テーブル-header -group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(テーブルタイトル) /*表示属性の理解は非常に曖昧です*/

ボックスのプロパティ: (ボックス)

幅:; 高さ:; フロート:; クリア:両方; マージン:; パディング:; 順序: 上、右、下、左

境界線属性: (境界線)

ボーダー -スタイル: 点線; (点線) 破線; (破線) 実線; 二重; (二重線) 溝; (溝線) 尾根; (尾根) インセット; (凹み) アウトセット; p>

border-width:; 境界線の幅

border-color:#;

省略方法 border: width style color; /*省略*/

リスト属性: (リストスタイル)

Type list-style-type: disc; (ドット)circle;(circle) square;(square) 10進数;(number) lower-roman; (小罗コード)数値）ローマ字大文字; アルファ下位; アルファ大文字;

位置リスト-style-position: 外側;(外) 内側;

画像リスト-style-image: url(..);

位置属性: (位置) p >

位置: 絶対; 相対; 静的; p >

可視性: 継承; 表示; 非表示; p >

オーバーフロー: 表示; 非表示; スクロール; 自動;

クリップ: rect(12px,auto, 12px) ,auto) (トリミング)

CSS 属性コードリスト

1 つの CSS テキスト属性:

color : #999999; /*テキストの色*/

font-family: 宋体,sans-serif; /*テキストフォント*/

font-size : 9pt; /*テキストサイズ*/

font-style:itelic; /*斜体テキスト* /

font-variant:small-caps ; / *小さいフォント*/

文字間隔: 1pt; /*単語間の距離*/

line-height : 200%; /*行の高さを設定します*/

font-weight:bold; /*太字*/

縦 - align:sub; /*下付き文字*/

vertical-align:super; /*上付き文字*/

text-decoration:line-through; /*取り消し線*/

text-decoration: overline; /*先頭行を追加*/

text-decoration:underline; /*下線*/

text-decoration:none; /*リンクの下線を削除*/

text-transform: Capitalize; /*最初の単語を大文字にします*/

text-transform : uppercase; /*英語の大文字*/

text-transform : lowercase; /*英語の小文字* /

text-align:right; / *テキストは右揃えです*/

text- align:left; /*テキストを左揃え*/

テキスト-align:center; /*テキストを中央揃え*/

text-align:justify; /*テキストの配置*/

vertical-align 属性

vertical-align:top; /*垂直上向きに配置*/

vertical-align:bottom; /*垂直方向を下に揃えます*/

vertical-align:middle; /*垂直方向の中央揃え*/

vertical-align:text-top; /*テキストを垂直上に揃えます*/ p>

vertical-align:text-bottom; /*テキストを縦書きにします下揃え*/

2 . CSS 境界線を空白

padding-top:10px; /*上の境界線は空白のままにします*/

padding-right:10px; /*右側の境界線を空白のままにしておきます*/

padding-bottom:10px; /*下の境界線は空白のままにしておきます*/

padding-left:10px; /*左の境界線は空白のままにします

3. CSS シンボル属性:

list-style-type:none; /*番号なし*/

list-style-type:decmal; /*アラビア数字* / p>

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; /*背景色* /

background:transparent; /*遠近法背景*/

background-image : URL (/image/bg.gif); /*背景画像*/

background-attachment : 固定; /*ウォーターマーク固定背景*/

background-repeat :repeat; /*配置の繰り返し - Web ページのデフォルト*/

background-repeat : no-repeat; /*リピート配置なし*/

background-repeat :repeat-x; /*x 軸で繰り返します*/

background-repeat :repeat-y; /*上で繰り返しますY 軸の配置*/

>背景の位置を指定します

background-position : 90% 90%; /*背景画像の x 軸と y 軸の位置*/

background-position : top; /*上に揃え*/

background-position : buttom; /*下に整列*/

background-position : left; /*左揃え*/

background-position : right; /*右揃え*/

background-position : center; /*中央揃え*/

5. CSS 接続プロパティ:

a /*すべてのハイパーリンク*/

a:link /*ハイパーリンクのテキスト形式*/

a:visited /*閲覧済みリンクテキスト形式* /

a:active / *クリックリンク形式*/

a:hover /*マウスでリンク*/ / p>

マウスカーソルスタイル:

リンク指カーソル: 手 / p>

十字カーソル:十字

下矢印カーソル:s-resize

十字矢印カーソル:移動

右矢印カーソル:移動

疑問符カーソルを追加する:ヘルプ

左矢印カーソル:w-resize

上矢印カーソル:n-resize

上向きの右向き矢印カーソル:ne-resize

上と左を指す矢印:nw-resize p>

テキスト I タイプのカーソル:テキスト

右斜め下の矢印カーソル:se-resize p>

左斜め下の矢印カーソル:sw-resize

ファンネルカーソル:wait

カーソルパターン (IE6) p {cursor:url("cursorファイル名.cur"),text;}

6. CSS フレームのリスト：

border-top : 1px ソリッド #6699cc; /*上の境界線*/

border-bottom : 1px 実線 #6699cc; /*下の境界線*/

border-left : 1px 実線 #6699cc; /*左ボーダー*/

border-right : 1px 実線 #6699cc; /*右ボーダー*/

上記は推奨される書き込み方法ですが、次の方法も可能です。通常の使用方法は次のとおりです:

border-top-color : #369 /*上部境界線の上部の色を設定します*/

border-top-width :1px /*上枠の上の幅を設定します*/

border-top-style: Solid/*境界線の上部のスタイルを設定します*/

その他の境界線スタイル

solid /*solid Frame*/

点線 /*点線ボックス*/

二重 /*二重線フレーム*/

溝 /*3 次元の内側の凸フレーム*/

リッジ /*立体レリーフフレーム*/

インセット /*凹型フレーム*/

アウトセット /*凸フレーム*/

7. CSS フォームアプリケーション:

テキストボックス

ボタン

チェックボックス

選択ボタン

複数行テキストボックス

ドロップダウンメニューオプション 1 オプション 2

8. CSS 境界線のスタイル:

margin-top:10px; /*上枠*/

margin-right:10px; /*右マージン値*/

margin-bottom:10px; /*下限値*/

margin-left:10px; /*左マージンの値* /

CSS プロパティ: フォントスタイル (フォントスタイル)

シリアル番号の中国語の説明マークの構文

1 フォントスタイル{font:font-style font-variant font-weight font-size font-family}

2 フォントタイプ{font-family:"フォント 1", " フォント 2"、"フォント 3"、...}

3 フォントサイズ{font-size:numeric|inherit| 中| 大| 大きい| x-大| xx-大| 小| 小さい| x-小| xx-小}

4 フォントスタイル{font-style:inherit|italic|normal|斜め }

5 フォントの太さ :100 -900|太字|太字|軽め|標準;}

6 フォントカラー{color:value;}

7 シャドウカラー{text-shadow:16 ビットカラー値}

8 フォント行の高さ{line-height:numeric|inherit|normal;}

9 文字間隔{letter-spacing:numeric|inherit|normal}

10 単語間隔 {word-spacing:numeric|inherit|normal}

11 フォント変形 {font-variant:inherit|normal|small-cps} p >

12 英語変換 {text-transform:inherit| none |大文字|大文字|小文字}

13フォント変形{font-size-adjust:inherit|none}

14 フォント{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

テキストスタイル

シリアル番号の中国語の説明マークの構文

1 行間隔{line-height:numeric|inherit|normal;}

2 テキスト装飾 {text-decoration:inherit|none|underline|overline|line-through|blink}

段落の先頭に 3 つのスペース {text-indent:value|inherit} p>

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}