CSS スタイルの最も包括的な概要-htmlチュートリアル-php.cn

この記事では主に、非常に完成度の高い CSS スタイルを紹介します。これらのスタイルをマスターすれば、間違いなく完璧な CSS ページが完成します。ぜひ参考にしてください。

1 つのフォント属性: (font)

size{font-size: PD
Style{font-style: oblique;}(Italic)italic;(Italic) Normal;(Normal)
Line-height{line-height : ノーマル;}(ノーマル) 単位: PX、PD、EM
厚み{font -weight: ボールド;}(ボールド)軽い;(薄い体) ノーマル;(ノーマル)
バリアント{font-variant: small-caps;} (小文字)normal;(normal)
大文字と小文字{text-transform:capitalize;}(最初の文字を大文字)uppercase;(大文字)小文字;(小文字)none;(none)
Modify {text-decoration:underline ;}(下線) 上線;(上線) ラインスルー;(取り消し線) ブリンク; (点滅)
よく使用されるフォント: (font-family)
"Courier New"、Courier、等幅、"Times NewRoman"、Times、serif 、Arial、Helvetica、sans-serif、Verdana
背景属性: ( 背景)
Color{background-color: #FFFFFF;}
Picture{background-image: url();}
Repeat{background-repeat: no-repeat ;}
Scroll{background-attachment:fixed;}（固定）scroll;（スクロール）
位置{background-position:left;}（水平）上（垂直）
省略方法{background:#000 url(.. )repeat fixed left top;} /*略語・これはコードを読んでいるよく出てくるのでよく勉強する必要があります*/
ブロック属性：（Block） /*この属性は初めて知ったので、もっと勉強する必要があります*/
Letter-spacing:normal;} Value/*この属性は便利そうです、もっと練習してください*/
Alignment{text-align: justify;}(両端を揃える)left;(左揃え) right;(右揃え) center;(中央)
インデント{text-indent: 値 px;}
垂直揃え{vertical-align:baseline;}(ベースライン) sub;(下付き文字) super;(下付き文字)top;上; 中央; テキスト-下;
単語間隔: 前; (改行なし)
{display:block;} (埋め込み) ）リスト項目;（リスト項目）実行;（追加部分）コンパクト;（マーク）テーブルヘッダーグループ;テーブルフッターグループ; ; table-raw; table-column-group; table-cell;table-caption;(テーブルタイトル) /*表示属性の理解が非常に曖昧です*/
Box 属性: (Box) ; 高さ:; クリア: 両方; パディング:; 順序: 右上、左下
境界線: 点線; double; (二重線) 溝; (溝) inset;(凹み) outset;
ボーダーの幅: width style color;/*略語*/
リスト属性: (リスト形式)
タイプ list-style-type: disc;(dot)circle;(circle) square;(square)decim;(number) lower-roman;(10 進数)upper-ローマ字; 下位アルファ;
位置リストスタイル-位置: 外側; (外側)
位置属性: (位置)
位置: 絶対; 相対;
可視性; 非表示;
クリップ: 自動;

color : #999999;
font-family : 宋朝、サンセリフ; /* テキストフォント */
font-style:itelic; *テキスト斜体*/
font-variant:small-caps; /*小さなフォント*/
letter-spacing: /*単語間のスペース*/
line-height: 200%; /*行の高さを設定します。 font-weight:bold; /*テキストの太字*/

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

text-decoration:line-through; /

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

text-decoration:underline; /*Underline*/
text-transform:capitalize;最初の単語を大文字にします*/
text-transform: uppercase; /*英語の大文字*/
text-transform : lowercase; /*英語の小文字*/
text-align:right; 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 ; /*テキストを垂直方向に下に配置します*/

3. CSS 境界線を空白にします

padding-top:10px; /*上の境界線を空白のままにします*/
padding-right:10px; /*右側の境界線を空白のままにします*/
padding-bottom:10px; /*下の境界線を空白のままにします*/ -left: 10px; /* 左側の境界線を空白のままにします

IV. CSS シンボル属性:

list-style-type:none; /*Unnumbered*/

list-style-type:decmal;
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; /*インデント*/

5. CSS 背景スタイル:

background-color:#F5E2EC; /*背景色*/

background:transparent ; /*パース背景*/

background-image : url(/image/bg.gif); /*背景画像*/
background-attachment : 固定背景*/
background-repeat : / *繰り返しの配置 - Web ページのデフォルト*/
background-repeat : no-repeat; /*繰り返しの配置なし*/
background-repeat :repeat-x; /*x 軸上の繰り返しの配置*/
background-repeat : repeat-y ; /*y 軸上の配置を繰り返します*/

6. 背景の位置を指定します

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

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

background-position : butt; /*下揃え*/
background-position : right;右揃え*/
background-position : center; /*中央揃え*/

7. CSS 接続プロパティ:

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

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

a:visited / *訪問したリンクのテキスト形式 */

a:active /*押されたリンクの形式*/
a:hover /*マウスでリンク*/
マウスカーソルのスタイル:
指をリンクカーソル: 手
十字カーソル:クロスヘア
下矢印カーソル: s-resize
十字矢印カーソル:移動
右向きの矢印カーソル:移動
疑問符の追加カーソル:ヘルプ
左向きの矢印カーソル:w-resize
上向きの矢印カーソル:n-resize
上向きと右向きの矢印カーソル:ne-resize
上向きと左向きの矢印カーソル:nw-resize
テキストを入力カーソル:テキスト
右斜め下の矢印カーソル:se-resize
左斜め下の矢印カーソル:sw-resize
ファンネルカーソル:wait
Cursor pattern (IE6) p {cursor: url("カーソルファイル名.cur"),text;}

8. CSS ボーダーリスト:

border-top : 1px Solid #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/*上枠の上スタイルを設定します*/

9. その他の枠スタイル

solid /*実線枠*/
dotted /*点線ラインフレーム*/

ダブル /*ダブルラインフレーム*/

グルーブ /*3次元内側凸フレーム*/
リッジ /*3次元エンボスフレーム*/
inset /*凹フレーム*/
outset /*凸フレーム*/

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

テキストボックス
ボタン

チェックボックス

選択ボタン
複数行のテキストボックス
ドロップダウンメニューオプション 1 オプション 2

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

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

margin-left:10px;値*/

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

1 フォントスタイル {font:font-stylefont-variant font-weight font-size font-family}
2 フォントタイプ {font-family:"フォント 1","フォント 2","フォント 3",...}
3 フォントサイズ {font-size:inherit|large|x-large|x-small| italic|normal|oblique}
5 フォントの太さ {font-weight:100-900|bold|bolder|lighter|normal;}
6 フォントの色 {color:value;}
7 影の色 {text-shadow:16-bit color Value}
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}
12 英語変換 {text-transform:inherit|none|capitalize|uppercase| lowercase}
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}

11、テキストスタイル

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

2 テキスト装飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段落最初のスペース {text -indent:value|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}

12. 背景のスタイル

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: 背景色|背景画像|背景リピート|背景アタッチメント|背景位置}

Thirteen 、フレームスタイル (ボックススタイル)

1 境界線のマージン {margin:margin-topmargin-right margin-bottom margin-left}

2 パディング {padding:padding-toppadding-right padding-bottom margin-left}
3 境界線の幅
{border-width:border -top-widthborder-right-width border-bottom-width border-left-width}
幅の値:細|中|太|数値
4 枠の色{border-color:数値値 Value} 値:色を表します。それぞれ上、右、下、左の値
5 境界線のスタイル
{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 Border{border :border- widthborder-style color}
上のボーダー{border-top:border-top-width border-style color}
右ボーダー{border-right:border-right-width border-stylecolor}
下のボーダー{border-bottom :border- Bottom-width border-stylecolor}
左ボーダー {border-left:border-left-width border-style color}
7 幅 {width:length|percentage|auto}
8 高さ {height:value|auto}
9 Float {float:left|right|none}
10 {clear:none|left|right|both} をクリアします

14. カテゴリリスト

1 表示を制御します {display:none|block|inline|list-item}

2ホワイトスペースの制御 {white-space:normal|pre|nowwarp}
3 シンボルリスト
{list-style-type:disc|circle|square|decimal| lower-roman|upper-roman| lower-alpha|upper -alpha| none}
4 グラフィックリスト {list-style-image:URL}
5 位置リスト {list-style-position:inside|outside}
6 ディレクトリリスト {list-style: ディレクトリスタイルタイプ|ディレクトリスタイル位置|
7 マウスの形状
{カーソル:手|クロスヘア|テキスト|待機|移動|ヘルプ|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}